/* ==========================================================================
   Weekly listing page (in-store-now-one-week).

   Depends on:
     - the --pub-* tokens in wpl-public-theme.css (light/dark)
     - the shared primitives in wpl-landing.css (.pub-shell, .pub-card,
       .pub-chip, .pub-btn, .pub-eyebrow) — the listing card is deliberately
       the same object as the landing rail card, so a book looks identical
       wherever a visitor meets it.

   Namespacing: --wk-* / .wk-* is this page. See the note at the top of
   wpl-public-theme.css for how --pub-*, --wpl-* and --sp-* divide up.
   ========================================================================== */

/* Sticky offset for the toolbar. The site header is itself sticky at top:0
   with a height that changes as it reflows, so JS measures it and writes the
   value here; this fallback keeps the toolbar usable if the script never runs. */
:root { --wk-header-h: 64px; }

/* --------------------------------------------------------------------------
   Hero band
   -------------------------------------------------------------------------- */

.wk-hero {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    padding: clamp(2.2rem, 5vw, 3.4rem) 0 clamp(1.8rem, 4vw, 2.6rem);
    border-bottom: 1px solid var(--pub-border);
    background:
        radial-gradient(900px 300px at 12% -20%, var(--pub-accent-soft), transparent 68%),
        var(--pub-page-2);
}

.wk-hero-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.5fr) minmax(260px, 1fr);
    gap: 1.75rem 3rem;
    align-items: end;
}

.wk-hero h1 {
    margin: 0 0 0.5rem;
    font-family: 'Playfair Display', Lora, Georgia, serif;
    font-size: clamp(1.9rem, 4.4vw, 2.8rem);
    font-weight: 700;
    line-height: 1.1;
    color: var(--pub-ink);
}

.wk-hero h1 em {
    font-style: normal;
    color: var(--pub-accent-2);
}

.wk-hero-lead {
    margin: 0;
    max-width: 58ch;
    font-size: 1rem;
    line-height: 1.6;
    color: var(--pub-ink-2);
}

/* Range readout — the seven-day window the page is actually showing. */
.wk-range {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 1.1rem;
    padding: 0.35rem 0.8rem;
    border: 1px solid var(--pub-border);
    border-radius: 999px;
    background: var(--pub-surface);
    color: var(--pub-ink-2);
    font-size: 0.82rem;
    font-weight: 600;
}

.wk-range i { color: var(--pub-accent-2); }

/* Both of these are inline-flex pills; shrink-wrapping them keeps each on its
   own line above the headline instead of sitting side by side. */
.wk-hero .wk-range,
.wk-hero .pub-eyebrow {
    display: flex;
    width: -moz-fit-content;
    width: fit-content;
}

/* Stats. Grid rather than flex so the cells stay on a shared baseline
   however long the numbers get. */
.wk-stats {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.wk-stat {
    padding: 0.8rem 0.9rem;
    border: 1px solid var(--pub-border);
    border-radius: 14px;
    background: var(--pub-surface);
    box-shadow: var(--pub-shadow);
}

.wk-stat-value {
    display: block;
    font-family: 'Playfair Display', Lora, Georgia, serif;
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1.1;
    color: var(--pub-ink);
}

.wk-stat-label {
    display: block;
    margin-top: 0.2rem;
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--pub-muted);
}

/* The FOC page is about a deadline, so its hero warms up rather than sitting in
   the same blue as the shelf-date one — enough to tell the two views apart at a
   glance without repainting the whole page. */
.wk-hero-foc {
    background:
        radial-gradient(900px 300px at 12% -20%, var(--pub-hot-soft), transparent 68%),
        var(--pub-page-2);
}

.wk-hero-foc h1 em { color: var(--pub-hot); }
.wk-hero-foc .pub-eyebrow { color: var(--pub-hot); }

/* Callout under the lead, for the one thing a visitor has to understand about
   the page they are on. */
.wk-note {
    display: flex;
    align-items: flex-start;
    gap: 0.55rem;
    max-width: 58ch;
    margin: 1rem 0 0;
    padding: 0.7rem 0.9rem;
    border: 1px solid var(--pub-border);
    border-left: 3px solid var(--pub-hot);
    border-radius: 10px;
    background: var(--pub-surface);
    font-size: 0.87rem;
    line-height: 1.5;
    color: var(--pub-ink-2);
}

.wk-note i {
    margin-top: 0.18rem;
    color: var(--pub-hot);
    flex-shrink: 0;
}

/* The countdown stat carries the page's whole point, so it reads as a warning
   rather than as a fourth tally. */
.wk-stat-urgent {
    border-color: var(--pub-hot);
    background: var(--pub-hot-soft);
}

.wk-stat-urgent .wk-stat-value { color: var(--pub-hot); }

/* Switch between the two weekly views. */
.wk-switch {
    display: inline-flex;
    margin-top: 1.5rem;
    padding: 0.25rem;
    border: 1px solid var(--pub-border);
    border-radius: 999px;
    background: var(--pub-surface);
}

.wk-switch a {
    padding: 0.45rem 1rem;
    border-radius: 999px;
    color: var(--pub-ink-2);
    font-size: 0.85rem;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.wk-switch a:hover { color: var(--pub-ink); }

.wk-switch a.is-active {
    background: linear-gradient(145deg, var(--pub-accent-2), var(--pub-brand));
    color: #fff;
    box-shadow: 0 4px 12px rgba(35, 87, 137, 0.3);
}

@media (max-width: 991.98px) {
    .wk-hero-grid { grid-template-columns: 1fr; align-items: start; }
}

/* Two-up holds down to about here; below it "Release days" starts wrapping. */
@media (max-width: 359.98px) {
    .wk-stats { grid-template-columns: 1fr; }
}

/* --------------------------------------------------------------------------
   Toolbar — sticks under the site header while the grid scrolls past it.
   -------------------------------------------------------------------------- */

.wk-toolbar {
    position: sticky;
    top: var(--wk-header-h);
    z-index: 20;
    padding: 0.85rem 0;
    border-bottom: 1px solid var(--pub-border);
    /* Opaque, so the grid genuinely disappears behind it rather than showing
       through. */
    background: var(--pub-page);
    box-shadow: 0 6px 18px -12px rgba(0, 0, 0, 0.55);
}

.wk-controls {
    display: grid;
    grid-template-columns: minmax(220px, 2fr) repeat(4, minmax(0, 1fr)) minmax(0, 1.15fr);
    gap: 0.6rem;
    align-items: center;
}

.wk-search {
    position: relative;
    display: flex;
    align-items: center;
}

.wk-search > i {
    position: absolute;
    left: 0.85rem;
    color: var(--pub-muted);
    font-size: 0.85rem;
    pointer-events: none;
}

.wk-input,
.wk-select {
    width: 100%;
    padding: 0.55rem 0.8rem;
    border: 1px solid var(--pub-border);
    border-radius: 10px;
    background: var(--pub-surface);
    color: var(--pub-ink);
    font-size: 0.86rem;
    line-height: 1.4;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.wk-input { padding-left: 2.3rem; padding-right: 2.1rem; }

.wk-input::placeholder { color: var(--pub-muted); }

.wk-input:focus,
.wk-select:focus {
    outline: none;
    border-color: var(--pub-accent-2);
    box-shadow: 0 0 0 3px var(--pub-accent-soft);
}

/* Native selects ignore the page palette in dark mode on some engines unless
   the colour-scheme is stated, which paints the popup list black on black. */
.wk-select { color-scheme: light dark; }

.wk-search-clear {
    position: absolute;
    right: 0.5rem;
    display: none;
    padding: 0.15rem 0.4rem;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--pub-muted);
    font-size: 0.85rem;
    cursor: pointer;
}

.wk-search-clear:hover { color: var(--pub-ink); }
.wk-search.has-value .wk-search-clear { display: block; }

/* --------------------------------------------------------------------------
   Filter rows — release day, then alphabet.
   -------------------------------------------------------------------------- */

.wk-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    align-items: center;
    margin-top: 0.7rem;
}

.wk-pills-label {
    margin-right: 0.35rem;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--pub-muted);
}

.wk-pill {
    padding: 0.3rem 0.7rem;
    border: 1px solid var(--pub-border);
    border-radius: 999px;
    background: var(--pub-surface);
    color: var(--pub-ink-2);
    font-size: 0.8rem;
    font-weight: 600;
    line-height: 1.3;
    cursor: pointer;
    transition: border-color 0.15s ease, background-color 0.15s ease, color 0.15s ease;
}

.wk-pill:hover:not(:disabled) {
    border-color: var(--pub-accent-2);
    color: var(--pub-ink);
}

.wk-pill.is-active {
    border-color: transparent;
    background: linear-gradient(145deg, var(--pub-accent-2), var(--pub-brand));
    color: #fff;
}

.wk-pill:disabled {
    opacity: 0.32;
    cursor: default;
}

.wk-pill-count {
    margin-left: 0.35rem;
    font-size: 0.72rem;
    font-weight: 600;
    opacity: 0.7;
}

/* The alphabet is 28 single characters — a tighter, squarer pill. */
.wk-alpha .wk-pill {
    min-width: 30px;
    padding: 0.28rem 0.4rem;
    text-align: center;
}

/* Toggle for the variant-cover flood. */
.wk-check {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    margin-left: auto;
    color: var(--pub-ink-2);
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    user-select: none;
}

.wk-check input {
    width: 15px;
    height: 15px;
    accent-color: var(--pub-accent-2);
    cursor: pointer;
}

/* --------------------------------------------------------------------------
   Result summary + active filter chips
   -------------------------------------------------------------------------- */

.wk-summary {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    margin: 1.5rem 0 1rem;
}

.wk-count {
    font-size: 0.88rem;
    color: var(--pub-ink-2);
}

.wk-count strong { color: var(--pub-ink); }

.wk-tag {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    max-width: 320px;
    padding: 0.22rem 0.4rem 0.22rem 0.65rem;
    border: 1px solid var(--pub-border);
    border-radius: 999px;
    background: var(--pub-accent-soft);
    color: var(--pub-ink);
    font-size: 0.76rem;
    font-weight: 600;
}

.wk-tag span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.wk-tag button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--pub-ink-2);
    font-size: 0.7rem;
    cursor: pointer;
}

.wk-tag button:hover { background: var(--pub-border); color: var(--pub-ink); }

.wk-reset {
    padding: 0.24rem 0.7rem;
    border: 1px solid transparent;
    border-radius: 999px;
    background: transparent;
    color: var(--pub-accent-2);
    font-size: 0.78rem;
    font-weight: 700;
    cursor: pointer;
}

.wk-reset:hover { border-color: var(--pub-accent-2); }

/* --------------------------------------------------------------------------
   Grid + card extras
   -------------------------------------------------------------------------- */

.wk-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(168px, 1fr));
    gap: 1rem;
}

/* .pub-card carries no `position` of its own — on the landing page the fav
   button anchors to the swiper slide. Here it needs the card itself. */
.wk-item { position: relative; }

/* Filtered-out cards leave the flow entirely so the grid closes up. Both rules
   are needed because the elements set an explicit `display`, which outranks the
   user-agent [hidden] rule. */
.wk-grid .wk-item[hidden] { display: none; }
.wk-item .pub-chip[hidden] { display: none; }

.wk-card-sub {
    margin: -0.15rem 0 0;
    font-size: 0.74rem;
    line-height: 1.35;
    color: var(--pub-muted);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Variant badge sits on the art, opposite the publisher, so the body stays
   reserved for text that differs between books. */
.wk-card-variant {
    position: absolute;
    left: 0.55rem;
    bottom: 0.55rem;
    max-width: calc(100% - 1.1rem);
    padding: 0.18rem 0.5rem;
    border-radius: 999px;
    background: rgba(8, 17, 28, 0.82);
    color: #ffd9a8;
    font-size: 0.63rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    backdrop-filter: blur(3px);
}

.wk-day-pill {
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--pub-ink-2);
    text-align: right;
    line-height: 1.25;
    white-space: nowrap;
}

.wk-day-pill small {
    display: block;
    font-size: 0.66rem;
    font-weight: 600;
    color: var(--pub-muted);
}

@media (max-width: 575.98px) {
    .wk-grid { grid-template-columns: repeat(auto-fill, minmax(142px, 1fr)); gap: 0.7rem; }
}

/* --------------------------------------------------------------------------
   Foot of the list: load more, empty state
   -------------------------------------------------------------------------- */

.wk-more-wrap {
    display: flex;
    justify-content: center;
    padding: 2rem 0 0;
}

.wk-empty {
    padding: 3.5rem 1.5rem;
    border: 1px dashed var(--pub-border);
    border-radius: 18px;
    background: var(--pub-surface);
    text-align: center;
}

.wk-empty i {
    font-size: 1.8rem;
    color: var(--pub-muted);
}

.wk-empty h3 {
    margin: 0.9rem 0 0.35rem;
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--pub-ink);
}

.wk-empty p {
    margin: 0 0 1.1rem;
    font-size: 0.9rem;
    color: var(--pub-ink-2);
}

/* --------------------------------------------------------------------------
   Toolbar reflow. The six-across control row is the first thing to break;
   below that the selects go two-up and the search spans the row.
   -------------------------------------------------------------------------- */

@media (max-width: 1199.98px) {
    .wk-controls { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .wk-search { grid-column: 1 / -1; }
}

@media (max-width: 767.98px) {
    .wk-controls { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .wk-check { margin-left: 0; }
    /* The header grows a second row on mobile; unpinning the toolbar avoids
       one that eats half the viewport. */
    .wk-toolbar { position: static; }
}