/* =====================================================================
   Timed Content Section
   Slack-inspired pattern: vertical list of nav items on the left, each
   with its own progress bar that fills 0→100% over the section's
   data-auto-advance ms. Right column shows one tile per slide, only the
   active tile is opacity:1 (others fade out). 3 tile layouts: image-only,
   rte-only, image-and-rte (image at top with optional green→coral tint).
   ===================================================================== */

.timed-content { /* default white background inherited from .section--white */ }

/* Two-column grid: nav ~40% / tile ~60%. Equal-min so tiles can never
   shrink below 320px on narrower screens (forces stack on mobile). */
.timed-content__grid {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(320px, 7fr);
    gap: 64px;
    align-items: start;
}

/* ---------- LEFT NAV ------------------------------------------------ */

.timed-content__nav {
    display: flex;
    flex-direction: column;
    gap: 0;
}
.timed-content__nav-item {
    /* Reset native <button> styling */
    appearance: none;
    background: transparent;
    border: 0;
    padding: 22px 0 24px;
    text-align: left;
    cursor: pointer;
    color: inherit;
    font-family: inherit;
    /* Flex row: vertical progress pill on the left, content beside it.
       align-items: stretch so the pill stretches to the nav item's full
       height; the content column drives that height. */
    display: flex;
    align-items: stretch;
    gap: 28px;
    width: 100%;
}
.timed-content__nav-item:focus-visible {
    outline: 2px solid var(--coral);
    outline-offset: 4px;
    border-radius: 4px;
}

/* Vertical progress pill — hidden on inactive items so only the active
   slide's countdown shows. On the active item the empty track is visible
   as a faint background, with the green→coral gradient fill growing from
   top to bottom over the section's data-auto-advance ms.
   JS sets height on .timed-content__progress-bar each frame via rAF.
   `cursor: default` so the pill doesn't get the pointer affordance the
   parent button gives — paired with the JS check that ignores clicks
   inside .timed-content__progress, this makes only the text area
   feel clickable. */
.timed-content__progress {
    position: relative;
    width: 14px;
    flex-shrink: 0;
    border-radius: 999px;
    overflow: hidden;
    background: rgba(0, 56, 69, 0.10);
    opacity: 0;
    transition: opacity 0.3s ease;
    cursor: default;
}
.timed-content__nav-item--active .timed-content__progress {
    opacity: 1;
}
.timed-content__progress-bar {
    /* Bar always covers the FULL pill, painting the full green→coral
       gradient at its intended scale. We reveal it top-down via clip-path —
       JS sets the bottom inset every frame so the gradient is uncovered
       progressively. This keeps the gradient anchored to the pill's full
       height: early on you see only the green top portion, and the coral
       lower portion only becomes visible as the fill approaches the bottom.
       (Previously height grew 0→100% with the gradient on the bar itself,
       so the bar always had coral at its bottom edge — wrong feel.) */
    position: absolute;
    inset: 0;
    /* Blue → coral gradient — matches the .text-gradient highlight stops
       in style.css (#4da8b5 teal-blue → #f0845e coral) so the timer pill
       reads as part of the same brand-accent family as gradient headings. */
    background: linear-gradient(to bottom, #4da8b5, #f0845e);
    border-radius: 999px;
    clip-path: inset(0 0 100% 0);
    /* No transition: JS sets clip-path every frame via rAF; a CSS
       transition would fight it and add lag. */
}

/* Wrap the title/subtitle/link in a flex child so it takes the remaining
   width beside the progress pill. */
.timed-content__nav-body {
    flex: 1;
    min-width: 0;
}

.timed-content__nav-title {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--text-heading);
    line-height: 1.25;
    transition: color 0.3s ease, opacity 0.3s ease;
}
/* Subtitle + link are HIDDEN on inactive nav items — only the active
   slide's full message is visible. max-height + opacity + margin animate
   together for a smooth reveal/collapse; display:none would jump the
   layout. The "page jumps" issue this previously caused (when the
   section is embedded inside the horizontal scroll lock pin and the
   pin's natural height feeds into the un-stick scroll threshold) is
   now fixed externally via a JS-set min-height on the embedded section
   in main.js — measured once at init from the "all items expanded"
   state — so the embedded section can never shrink below its largest
   possible cycling state. */
.timed-content__nav-subtitle {
    font-size: 1.3125rem;
    line-height: 1.5;
    color: var(--text-body);
    margin-top: 0;
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    /* No transition on the INACTIVE state — when an item loses .active
       its subtitle collapses INSTANTLY. The new active item still gets
       the smooth 0.45s reveal via the rule below. This kills the
       overlapping period where both items' subtitles were partly
       visible (which briefly inflated the section's natural height and
       caused intermittent layout jumps even with the min-height lock). */
    transition: none;
}
.timed-content__nav-item--active .timed-content__nav-subtitle {
    margin-top: 10px;
    max-height: 360px;
    opacity: 0.85;
    /* Smooth reveal applied when this item GAINS .active. */
    transition: max-height 0.45s ease, opacity 0.3s ease, margin-top 0.45s ease;
}
/* Link wrapper collapses with the same max-height + opacity pattern as
   the subtitle. Stable embedded-section height (which prevents the pin
   from jumping when this collapses) is handled by the JS-set
   min-height in main.js — see comment on .timed-content__nav-subtitle
   above. */
.timed-content__nav-link-wrap {
    margin-top: 0;
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    /* Instant collapse on losing .active — same reasoning as the
       subtitle above. The smooth reveal is on the active rule. */
    transition: none;
    position: relative;
    z-index: 2;
}
.timed-content__nav-item--active .timed-content__nav-link-wrap {
    margin-top: 18px;
    max-height: 80px;
    opacity: 1;
    overflow: visible;
    transition: max-height 0.45s ease, opacity 0.3s ease, margin-top 0.45s ease, overflow 0s linear 0s;
}

/* Measurement state — JS toggles each slide active one at a time at
   init and reads section.offsetHeight to find the tallest cycling
   state (the upper bound). Transitions disabled so each measurement
   is the resting natural height, not mid-animation. The class is
   removed before paint, so users never see the cycling. */
.timed-content--measuring * {
    transition-duration: 0s !important;
}
.timed-content__nav-link {
    /* Sits inside .timed-content__nav-link-wrap so visual styles come
       from .btn / .btn--coral / .btn--sm — nothing to do here. */
}
.timed-content__nav-link:hover {
    text-decoration: underline;
}
.timed-content__nav-link .btn__arrow {
    transition: transform 0.2s ease;
}
.timed-content__nav-link:hover .btn__arrow {
    transform: translateX(3px);
}

/* Inactive nav state — title slightly dim, no progress fill (handled by
   JS setting width:0%). Subtitle stays visible — matches Slack's pattern
   where you can read all options at once. */
.timed-content__nav-item:not(.timed-content__nav-item--active) .timed-content__nav-title {
    opacity: 0.5;
}
.timed-content__nav-item:not(.timed-content__nav-item--active):hover .timed-content__nav-title {
    opacity: 0.85;
}

/* ---------- RIGHT TILES --------------------------------------------- */

/* Tile container — fixed aspect ratio so the page doesn't reflow when
   tiles swap. Base is 4:3 (height = 75% of width) — matches the natural
   nav height on tablets/small desktops where the left column extends
   further due to text wrapping, and on any size with 5+ nav items where
   the left column is taller still. The desktop-with-few-items override
   below flattens this to 5:3. */
.timed-content__tiles {
    position: relative;
    aspect-ratio: 4 / 3;
    width: 100%;
}

/* Large screens (≥1200px) AND ≤4 nav items: flatten to 5:3 so the tile
   height matches the left nav (4 items: 1 expanded + 3 collapsed). With
   5+ items the left grows taller anyway, so we keep 4:3 to avoid the
   tile being shorter than the nav; with viewports <1200px the nav also
   grows taller via text wrapping, same reasoning. :has() lets us detect
   "has a 5th nav-item" purely in CSS — modern browser support is solid
   (Chrome/Safari/Firefox all current). */
@media (min-width: 1200px) {
    .timed-content__grid:not(:has(.timed-content__nav-item:nth-child(5))) .timed-content__tiles {
        aspect-ratio: 5 / 3;
    }
}
.timed-content__tile {
    position: absolute;
    inset: 0;
    border-radius: var(--radius, 16px);
    overflow: hidden;
    background: var(--bg-white, #ffffff);
    box-shadow: var(--shadow-md, 0 12px 32px rgba(0, 0, 0, 0.08));
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.6s ease;
}
.timed-content__tile--active {
    opacity: 1;
    pointer-events: auto;
}

/* Layout: IMAGE ONLY — fills the whole rounded tile. */
.timed-content__tile--image-only .timed-content__tile-image {
    position: absolute;
    inset: 0;
}
.timed-content__tile--image-only .timed-content__tile-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Layout: RTE ONLY — padded text block, vertically centred. */
.timed-content__tile--rte-only .timed-content__tile-body {
    padding: 48px 56px;
    height: 100%;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.timed-content__tile--rte-only .timed-content__tile-body > *:first-child { margin-top: 0; }
.timed-content__tile--rte-only .timed-content__tile-body > *:last-child  { margin-bottom: 0; }

/* Tile RTE body text — match Content Grid Section RTE size (1.3125rem)
   so the tile reads like the rest of the site's body copy. Covers both
   "RTE only" and "Image and RTE" layouts. */
.timed-content__tile-body,
.timed-content__tile-body p,
.timed-content__tile-body li {
    font-size: 1.3125rem;
    line-height: 1.55;
}

/* Layout: IMAGE AND RTE — image at the top (~50% height) with optional
   green→coral tint, RTE body below. Matches the insight-card pattern. */
.timed-content__tile--image-and-rte {
    display: grid;
    grid-template-rows: minmax(180px, 50%) 1fr;
}
.timed-content__tile--image-and-rte .timed-content__tile-image--top {
    position: relative;
    overflow: hidden;
}
.timed-content__tile--image-and-rte .timed-content__tile-image--top img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
/* Tint overlay — works for both "Image only" (image fills the whole tile)
   and "Image and RTE" (image fills the top half) layouts because the
   selector targets the tinted image wrapper directly, regardless of
   which layout modifier its parent tile carries. */
.timed-content__tile-image--tinted .timed-content__tile-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg,
        rgba(2, 61, 54, 0.75) 0%,
        rgba(3, 88, 78, 0.6) 50%,
        rgba(246, 171, 147, 0.5) 100%);
    pointer-events: none;
}
.timed-content__tile--image-and-rte .timed-content__tile-body {
    padding: 28px 32px 32px;
    overflow-y: auto;
}
.timed-content__tile--image-and-rte .timed-content__tile-body > *:first-child { margin-top: 0; }
.timed-content__tile--image-and-rte .timed-content__tile-body > *:last-child  { margin-bottom: 0; }

/* ---------- Section background variants ----------------------------- */

/* Dark green: white text, lighter progress track so the empty pill
   stays visible against the dark background. The fill keeps the same
   green→coral gradient (reads fine on either bg). */
.timed-content.section--deep .timed-content__nav-title { color: #ffffff; }
.timed-content.section--deep .timed-content__nav-subtitle { color: rgba(255, 255, 255, 0.8); }
.timed-content.section--deep .timed-content__nav-link { color: var(--coral); }
.timed-content.section--deep .timed-content__progress { background: rgba(255, 255, 255, 0.15); }

/* ---------- Mobile: stack ------------------------------------------ */

@media (max-width: 900px) {
    .timed-content__grid {
        grid-template-columns: 1fr;
        gap: 40px;
    }
    .timed-content__tiles {
        /* Natural DOM order: nav first, tile below. The active slide's
           tile sits under its corresponding nav item, which reads more
           like a typical accordion on small screens. */
        aspect-ratio: 4 / 3;
        min-height: 0;
    }
    .timed-content__tile--rte-only .timed-content__tile-body {
        padding: 32px 28px;
    }
}