/* ── TOC: numbered-dek variant ──────────────────────────────
   Newsletter "In this issue" pattern. Each entry is a counter +
   body stack (title, optional badge, optional dek). The numeral
   uses a CSS counter (not <ol>'s native marker) so we can style
   it as a display element without losing the semantic <ol>.

   Three numbering styles are exposed via modifier classes:
     --big      Large display numerals in the brand accent
                colour, sitting beside each entry like a magazine
                contents page.
     --decimal  Compact "1." "2." style for digest layouts.
     --roman    Upper-case roman numerals for editorial tone.

   The default-variant `block-toc__list` styles in lcms-core.css
   are untouched.
   ──────────────────────────────────────────────────────────── */

/* ── panel_style: card ──────────────────────────────────────
   .lcms-card only sets a shorthand `padding` — on .block-toc__inner
   specifically that competes with the Tailwind `px-5` utility already
   on the same element (`max-w-screen-xl mx-auto px-5`), and depending
   on cascade order between lcms-core.css and the Tailwind bundle, the
   utility can win, leaving the card sitting flush at the side edges.
   Pin it via a compound selector — strictly higher specificity than
   either class alone, so this always wins regardless of build order. */
.block-toc__inner.lcms-card {
    padding: 1.75rem 2rem;
}

@media (max-width: 640px) {
    .block-toc__inner.lcms-card {
        padding: 1.5rem 1.25rem;
    }
}

.block-toc__numbered {
    counter-reset: lcms-toc;
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 1.75rem;
}

.block-toc__entry {
    counter-increment: lcms-toc;
    display: grid;
    grid-template-columns: auto 1fr;
    column-gap: 1.25rem;
    align-items: baseline;
    padding-bottom: 1.5rem;
    border-bottom: 1px solid var(--color-border, rgba(0, 0, 0, 0.08));
}

.block-toc__entry:last-child {
    padding-bottom: 0;
    border-bottom: 0;
}

.block-toc__numeral::before {
    content: counter(lcms-toc);
    display: block;
    font-variant-numeric: tabular-nums;
    line-height: 1;
}

.block-toc__numbered--big .block-toc__numeral::before {
    font-size: clamp(2.5rem, 4vw, 3.75rem);
    font-weight: 700;
    color: var(--color-brand-accent, var(--color-brand-primary, currentColor));
    letter-spacing: -0.04em;
}

.block-toc__numbered--decimal .block-toc__numeral::before {
    content: counter(lcms-toc) ".";
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--color-text-muted, inherit);
}

.block-toc__numbered--roman .block-toc__numeral::before {
    content: counter(lcms-toc, upper-roman) ".";
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    color: var(--color-text-muted, inherit);
}

.block-toc__entry-body {
    min-width: 0;
}

.block-toc__badge {
    display: inline-block;
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-brand-accent, var(--color-brand-primary, inherit));
    margin-bottom: 0.25rem;
}

.block-toc__entry-title {
    display: block;
    font-size: 1.25rem;
    font-weight: 600;
    line-height: 1.3;
    color: inherit;
    text-decoration: none;
}

a.block-toc__entry-title:hover,
a.block-toc__entry-title:focus {
    color: var(--color-text-link-hover, var(--color-brand-primary));
    text-decoration: underline;
}

.block-toc__dek {
    margin: 0.4rem 0 0;
    font-size: 0.975rem;
    line-height: 1.55;
    color: var(--color-text-muted, inherit);
    opacity: 0.85;
}

/* ── numbered-dek: multi-column desktop layouts ─────────────
   Mobile always single column — each entry has a numeral +
   title + dek + optional badge, too much content to split on
   narrow screens. Multi-col opts in at md (≥768px) and
   lg (≥1024px), matching the card-grid block's breakpoints.
   When stacked into columns, the horizontal divider lines
   between entries are dropped (the column gap does the work)
   and the display numerals shrink to suit the narrower cell.
   ──────────────────────────────────────────────────────────── */

.block-toc__numbered--cols-2,
.block-toc__numbered--cols-3,
.block-toc__numbered--cols-4 {
    /* Drop the row-divider treatment in grid mode — it doesn't
       read cleanly across multiple columns. Cell gap separates. */
}

.block-toc__numbered--cols-2 .block-toc__entry,
.block-toc__numbered--cols-3 .block-toc__entry,
.block-toc__numbered--cols-4 .block-toc__entry {
    padding-bottom: 0;
    border-bottom: 0;
}

/* Display numerals are sized for full-bleed rows; shrink them
   in multi-col so they don't dominate the narrower cell. */
.block-toc__numbered--big.block-toc__numbered--cols-2 .block-toc__numeral::before,
.block-toc__numbered--big.block-toc__numbered--cols-3 .block-toc__numeral::before,
.block-toc__numbered--big.block-toc__numbered--cols-4 .block-toc__numeral::before {
    font-size: clamp(1.75rem, 2.5vw, 2.5rem);
}

@media (min-width: 768px) {
    .block-toc__numbered--cols-2,
    .block-toc__numbered--cols-3,
    .block-toc__numbered--cols-4 {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        column-gap: 2.5rem;
        row-gap: 1.75rem;
    }
}

@media (min-width: 1024px) {
    .block-toc__numbered--cols-3 {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
    .block-toc__numbered--cols-4 {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

/* ── card-grid variant ──────────────────────────────────────
   Magazine "Contents" page with thumbnails. Shares the manual
   `entries` repeater with numbered-dek (switching variants
   preserves content) but renders as raised tiles using the
   same `lcms-card lcms-card-shadow lcms-card-interactive`
   chrome + Tailwind grid utilities as the `card-grid` block.

   Layout, hover behaviour, breakpoints, card chrome — all
   inherited. Two TOC-specific CSS rules live here: the
   figure-sizing hack (so the image component's <figure>
   wrapper plays nice with aspect-ratio) and a `display: block`
   override for the card element — the card-grid block puts
   <a> directly as a grid child (block-level by default), but
   TOC wraps each card in <li> for the <ol> semantic, so the
   inner <a> needs explicit block display or the chrome
   renders fragmented around block-level children.
   ──────────────────────────────────────────────────────────── */

/* Force block-level + full height so the card's chrome
   (border-radius, shadow, background) renders cleanly and
   the visible card stretches to match its row siblings.
   The <li> wrapper is the grid item — it stretches by
   default via align-items: stretch — but without
   height: 100% the inner card only takes its content
   height, breaking equal-height rows when entries have
   differing dek lengths. Inline <a> with block children
   also fragments the chrome around block-break points;
   display: block fixes that. */
.block-toc__card {
    display: block;
    height: 100%;
}

/* The shared `image` component wraps <img> in <figure>. Without
   explicit sizing on the figure, the img's `h-full object-cover`
   can't take effect because its parent (figure) has auto height,
   so the image renders at its natural ratio inside the
   aspect-ratio'd wrapper. Forcing figure to fill restores the
   expected cover-crop behaviour for every ratio. Descendant
   (not direct-child) selector — some hosts/plugins wrap
   wp_get_attachment_image output in extra elements. */
.block-toc__card-image figure {
    width: 100%;
    height: 100%;
    margin: 0;
}

/* ── Persistent nav (FAB + bottom sheet) ──────────────────────
   Floating action button that fades in once the inline TOC has
   scrolled out of view, plus a bottom-sheet dialog containing
   the same entries. Works across mobile + desktop; smart
   visibility (in the JS runtime) keeps it from competing with
   the inline TOC while both are on screen.

   The `.block-toc__pnav` wrapper is `position: fixed` covering
   the viewport but `pointer-events: none` so only the FAB and
   open sheet receive clicks. Backdrop opts back into pointer
   events when the sheet is open.
   ──────────────────────────────────────────────────────────── */

.block-toc__pnav {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 40;
}

.block-toc__pnav-fab {
    position: absolute;
    bottom: 1.25rem;
    width: 3rem;
    height: 3rem;
    border-radius: 999px;
    background: var(--color-brand-primary, #111827);
    color: var(--color-on-brand-primary, #ffffff);
    border: 0;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18);
    pointer-events: auto;
    opacity: 0;
    transform: translateY(8px);
    transition: opacity 200ms ease, transform 200ms ease;
}

.block-toc__pnav--bottom-left .block-toc__pnav-fab {
    left: 1.25rem;
}

.block-toc__pnav--bottom-right .block-toc__pnav-fab {
    right: 1.25rem;
}

.block-toc__pnav.is-after-toc .block-toc__pnav-fab {
    opacity: 1;
    transform: translateY(0);
}

.block-toc__pnav-fab:hover,
.block-toc__pnav-fab:focus-visible {
    filter: brightness(1.1);
    outline: 2px solid transparent;
    outline-offset: 2px;
}

.block-toc__pnav-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.4);
    opacity: 0;
    transition: opacity 200ms ease;
    pointer-events: none;
}

.block-toc__pnav.is-open .block-toc__pnav-backdrop {
    opacity: 1;
    pointer-events: auto;
}

.block-toc__pnav-sheet {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    max-height: 75vh;
    background: var(--color-surface, var(--color-background, #ffffff));
    color: var(--color-text, #111827);
    border-radius: 1rem 1rem 0 0;
    transform: translateY(100%);
    transition: transform 250ms ease;
    pointer-events: auto;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.18);
}

/* On wider viewports, cap the sheet width and centre it so it
   doesn't sprawl across the full screen on desktop. */
@media (min-width: 768px) {
    .block-toc__pnav-sheet {
        left: auto;
        right: auto;
        bottom: 1.25rem;
        max-width: 28rem;
        border-radius: 1rem;
        transform: translateY(calc(100% + 1.25rem));
    }
    .block-toc__pnav--bottom-left .block-toc__pnav-sheet {
        left: 1.25rem;
    }
    .block-toc__pnav--bottom-right .block-toc__pnav-sheet {
        right: 1.25rem;
    }
    .block-toc__pnav.is-open .block-toc__pnav-sheet {
        transform: translateY(0);
    }
}

.block-toc__pnav.is-open .block-toc__pnav-sheet {
    transform: translateY(0);
}

.block-toc__pnav-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--color-border, rgba(0, 0, 0, 0.08));
}

.block-toc__pnav-title {
    font-size: 0.875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin: 0;
}

.block-toc__pnav-close {
    background: transparent;
    border: 0;
    padding: 0.5rem;
    cursor: pointer;
    color: inherit;
    line-height: 1;
    border-radius: 0.25rem;
}

.block-toc__pnav-close:hover,
.block-toc__pnav-close:focus-visible {
    background: var(--color-surface-muted, rgba(0, 0, 0, 0.06));
}

.block-toc__pnav-list {
    list-style: none;
    padding: 0.5rem 0;
    margin: 0;
    overflow-y: auto;
    flex: 1;
}

.block-toc__pnav-list li {
    margin: 0;
}

.block-toc__pnav-link {
    display: block;
    padding: 0.85rem 1.25rem;
    color: inherit;
    text-decoration: none;
    border-left: 3px solid transparent;
    transition: background-color 150ms ease, border-color 150ms ease;
}

.block-toc__pnav-link:hover,
.block-toc__pnav-link:focus-visible {
    background: var(--color-surface-muted, rgba(0, 0, 0, 0.04));
    outline: none;
}

.block-toc__pnav-link.is-active {
    border-left-color: var(--color-brand-primary, currentColor);
    background: var(--color-surface-muted, rgba(0, 0, 0, 0.04));
    font-weight: 600;
}

@media (prefers-reduced-motion: reduce) {
    .block-toc__pnav-sheet,
    .block-toc__pnav-backdrop,
    .block-toc__pnav-fab,
    .block-toc__pnav-link {
        transition: none !important;
    }
}