/*
==========================================================
TIMELINE BLOCK — timeline.css
==========================================================
WHAT IT IS:
An interactive tab carousel displaying a sequence of
dated milestones or events.

WHAT IT DOES:
Renders a scrollable tab strip of period labels at the top.
Clicking a tab or dragging the card stage shows the selected
item's content. Three transition styles are all coded — the
active one is controlled by data-transition on the outer
section, set via the ACF "Transition Style" field.

HOW TO USE:
1. Add the "Timeline" block in the block editor.
2. Enter a required heading and optional eyebrow label.
3. Add one or more timeline items (period, title, body).
4. Under Style: choose Transition Style and toggle arrows.

TRANSITION MODES (all three coded, one active per instance):
  fade    (default) — crossfade.  data-transition="fade"
  slide             — slide L/R.  data-transition="slide"
  hybrid            — slide on drag/arrows, fade on tab.
                      data-transition="hybrid"

To change the project-wide default: update default_value
for field_timeline_transition in premium-acf-timeline-block.json
before importing. Or change per instance in the editor.

All values use boilerplate CSS tokens from style.css.

BOILERPLATE NOTE:
All three transition rule sets are present and scoped by
data-transition. Inactive modes do not interfere. On a
live project you may remove unused rule sets once the
transition style is decided.
==========================================================
*/

/* ── OUTER SECTION ───────────────────────────────────── */

.timeline_block {
    padding: var(--space-16) 0;
}

/* ── INNER WRAPPER ───────────────────────────────────── */

.timeline_wrapper {
    display: flex;
    flex-direction: column;
    gap: var(--space-10);
}

/* ── HEADER ──────────────────────────────────────────── */

.timeline_header {
    text-align: center;
    max-width: 720px;
    margin: 0 auto;
}

.timeline_eyebrow {
    font-size: var(--text-sm);
    font-weight: var(--weight-semi);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--color-accent);
    margin-bottom: var(--space-2);
}

.timeline_heading {
    font-family: var(--font-heading);
    font-size: var(--text-2xl);
    color: var(--color-primary);
    margin: 0;
}

/* ── TAB STRIP ───────────────────────────────────────── */

.timeline_tabs {
    display: flex;
    flex-direction: row;
    /* §29 T2: centered when the dates fit (auto margins on the first and
       last button, below); when they don't, the row starts at the left edge
       and scrolls, so the first dates can't be pushed out of reach — which
       justify-content: center does on an overflowing scroll row. */
    justify-content: flex-start;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    border-bottom: 2px solid var(--color-border);
}

.timeline_tab:first-child {
    margin-left: auto;
}

.timeline_tab:last-child {
    margin-right: auto;
}

.timeline_tabs::-webkit-scrollbar {
    display: none;
}

.timeline_tab {
    flex-shrink: 0;
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    padding: var(--space-3) var(--space-4);
    font-family: var(--font-body);
    font-size: var(--text-sm);
    font-weight: var(--weight-semi);
    color: var(--color-text-muted);
    cursor: pointer;
    transition: color 0.2s, border-color 0.2s;
    white-space: nowrap;
}

.timeline_tab:hover {
    color: var(--color-accent);
}

.timeline_tab.is-active {
    color: var(--color-accent);
    border-bottom-color: var(--color-accent);
}

/* ── CARD STAGE ──────────────────────────────────────── */

/* jQuery sets explicit height on init — all cards are position:absolute */
.timeline_stage {
    position: relative;
    overflow: hidden;
    cursor: grab;
}

.timeline_stage:active {
    cursor: grabbing;
}

/* ── CARD BASE ───────────────────────────────────────── */

/* Outer card — full-width, handles all animation. No visual styling here. */
.timeline_card {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    padding: var(--space-4) 0;
}

/* Inner card — centered, contained, visual card styling */
.timeline_card_inner {
    width: 80%;
    max-width: 320px;
    aspect-ratio: 1;
    /* §29 T6: no inner scrollbar. With overflow visible, aspect-ratio is a
       minimum — a card stays square when its words fit and grows taller
       when they don't. scripts.js then makes every card as tall as the
       tallest, so the arrows sit in the same place on each card. */
    margin: 0 auto;
    background: var(--color-bg-alt);
    border-radius: var(--radius-md);
    padding: var(--space-6);
    text-align: center;
    box-sizing: border-box;
}

.timeline_period {
    display: block;
    font-size: var(--text-sm);
    font-weight: var(--weight-semi);
    color: var(--color-accent);
    margin-bottom: var(--space-2);
}

.timeline_title {
    font-family: var(--font-heading);
    font-size: var(--text-xl);
    color: var(--color-primary);
    margin: 0 0 var(--space-4);
}

.timeline_body {
    font-size: var(--text-base);
    color: var(--color-text-muted);
    margin: 0;
    line-height: var(--leading-normal);
}

/* ── TRANSITION: FADE (default) ──────────────────────────────────────────
   Active when data-transition="fade" on .timeline_block.
   To switch: change the "Transition Style" ACF field on the block,
   or update default_value in premium-acf-timeline-block.json before importing.
   ───────────────────────────────────────────────────────────────────────── */

.timeline_block[data-transition="fade"] .timeline_card {
    opacity: 0;
    transition: opacity 0.35s ease;
    pointer-events: none;
}

.timeline_block[data-transition="fade"] .timeline_card.is-active {
    opacity: 1;
    pointer-events: auto;
}

/* ── TRANSITION: SLIDE ────────────────────────────────────────────────────
   Active when data-transition="slide" on .timeline_block.
   jQuery controls animation by setting data-slide-state on each card.
   Values: enter-right | enter-left | active | exit-left | exit-right
   ───────────────────────────────────────────────────────────────────────── */

.timeline_block[data-transition="slide"] .timeline_card {
    transform: translateX(100%);
    transition: transform 0.4s ease;
}

.timeline_block[data-transition="slide"] .timeline_card.is-active {
    transform: translateX(0);
}

/* Snap positions — transition:none so jQuery sets start position without animating */
.timeline_block[data-transition="slide"] .timeline_card[data-slide-state="enter-right"] {
    transform: translateX(100%);
    transition: none;
}

.timeline_block[data-transition="slide"] .timeline_card[data-slide-state="enter-left"] {
    transform: translateX(-100%);
    transition: none;
}

/* Animate in */
.timeline_block[data-transition="slide"] .timeline_card[data-slide-state="active"] {
    transform: translateX(0);
    transition: transform 0.4s ease;
}

/* Animate out */
.timeline_block[data-transition="slide"] .timeline_card[data-slide-state="exit-left"] {
    transform: translateX(-100%);
    transition: transform 0.4s ease;
}

.timeline_block[data-transition="slide"] .timeline_card[data-slide-state="exit-right"] {
    transform: translateX(100%);
    transition: transform 0.4s ease;
}

/* ── TRANSITION: HYBRID ───────────────────────────────────────────────────
   Active when data-transition="hybrid" on .timeline_block.
   Tab clicks use fade (opacity). Drag and arrow navigation uses slide
   (transform). Uses the same data-slide-state classes as slide mode.
   ───────────────────────────────────────────────────────────────────────── */

.timeline_block[data-transition="hybrid"] .timeline_card {
    opacity: 0;
    transform: translateX(0);
    transition: opacity 0.35s ease, transform 0.4s ease;
    pointer-events: none;
}

.timeline_block[data-transition="hybrid"] .timeline_card.is-active {
    opacity: 1;
    pointer-events: auto;
    transform: translateX(0);
}

.timeline_block[data-transition="hybrid"] .timeline_card[data-slide-state="enter-right"] {
    opacity: 1;
    transform: translateX(100%);
    transition: none;
}

.timeline_block[data-transition="hybrid"] .timeline_card[data-slide-state="enter-left"] {
    opacity: 1;
    transform: translateX(-100%);
    transition: none;
}

.timeline_block[data-transition="hybrid"] .timeline_card[data-slide-state="active"] {
    opacity: 1;
    transform: translateX(0);
    transition: transform 0.4s ease;
}

.timeline_block[data-transition="hybrid"] .timeline_card[data-slide-state="exit-left"] {
    opacity: 1;
    transform: translateX(-100%);
    transition: transform 0.4s ease;
}

.timeline_block[data-transition="hybrid"] .timeline_card[data-slide-state="exit-right"] {
    opacity: 1;
    transform: translateX(100%);
    transition: transform 0.4s ease;
}

/* ── ARROWS ──────────────────────────────────────────── */

/* Own row directly under the cards, centered (§29 follow-up). It used to
   sit on top of the bottom of each card, with extra card padding reserved
   for it; a separate row can never cover a card's words or link, on tall
   cards or phones. The card's own bottom space (--space-4) separates the
   two, so the arrows stay close to the card as before. */
.timeline_arrows {
    display: flex;
    justify-content: center;
    gap: var(--space-3);
}

.timeline_arrow {
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-full);
    width: 2.5rem;
    height: 2.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--text-xl);
    color: var(--color-primary);
    cursor: pointer;
    transition: background 0.2s, color 0.2s, border-color 0.2s;
    line-height: 1;
    padding: 0;
    flex-shrink: 0;
}

.timeline_arrow:hover {
    background: var(--color-accent);
    color: var(--color-text-inverse);
    border-color: var(--color-accent);
}

.timeline_arrow.is-disabled {
    opacity: 0.3;
    pointer-events: none;
}

/* (The extra card bottom padding that made room for arrows on top of the
   card was removed: the arrows now have their own row, above.) */

/* ── CARD IMAGE ──────────────────────────────────────── */

.timeline_card_image {
    display: block;
    width: 100%;
    height: 120px;
    object-fit: cover;
    border-radius: var(--radius-sm);
    margin-bottom: var(--space-3);
}

/* ── Section Background Mode (Batch 8F Round 3, §8F.3) ───────────────────
   .timeline_block has no background-color of its own today — it inherits
   whatever the page/main flow behind it is, and every element living
   directly on that background (eyebrow, heading, tab strip) assumes a
   light ambient background, same as every other block's "Theme Default."
   Background/Alternate need no override — both are light tokens and
   already match that ambient assumption exactly, and Timeline has no
   "dark" Section Variant to defend against (its variant choices are
   default/homepage-feature/minimal/split-feature/cards-feature/inner-
   banner — none of them pre-set a dark background), so there is no
   competing rule to beat here, unlike Before/After's equivalent region.

   The card itself (.timeline_card_inner) and each arrow button
   (.timeline_arrow) are both self-contained surfaces with their own
   explicit background (--color-bg-alt and --color-bg respectively,
   independent of the section) — like Zone Band's pill, they read
   correctly regardless of what the section's own background does, so
   neither needs a rule here.

   Audit finding, Accent-color collision: the tab strip's hover/active
   state and the eyebrow both use --color-accent unconditionally, sitting
   directly on the section's own background — exactly the collision
   pattern already found and fixed in Flexible Content, Image Grid, and
   Before/After this batch. Measured (same real-browser luminance formula
   used throughout): a literal 1.00:1 against Accent (identical color) and
   a real 2.63:1 against Dark (below WCAG AA) — so Dark is included in this
   fix, not just Accent, matching the corrected Before/After eyebrow
   precedent from this same round's own review.

   Second audit finding, not accent-colored but checked anyway per this
   round's "do not assume it remains readable" instruction: the tab
   strip's own un-hovered, inactive state (--color-text-muted, a mid-gray)
   is not an accent-collision, but still measures a real 1.15:1 against
   Accent and 3.03:1 against Dark — both below WCAG AA for this small
   (--text-sm) label text. Included in the same inverse-treatment group
   below, not left as an unverified assumption. */

.timeline_block.timeline_bg_background .timeline_heading,
.timeline_block.timeline_bg_alt_background .timeline_heading,
.timeline_block.timeline_text_dark .timeline_heading {
    color: var(--color-primary);
}

.timeline_block.timeline_bg_background .timeline_eyebrow,
.timeline_block.timeline_bg_alt_background .timeline_eyebrow,
.timeline_block.timeline_text_dark .timeline_eyebrow,
.timeline_block.timeline_bg_background .timeline_tab:hover,
.timeline_block.timeline_bg_alt_background .timeline_tab:hover,
.timeline_block.timeline_text_dark .timeline_tab:hover,
.timeline_block.timeline_bg_background .timeline_tab.is-active,
.timeline_block.timeline_bg_alt_background .timeline_tab.is-active,
.timeline_block.timeline_text_dark .timeline_tab.is-active {
    color: var(--color-accent);
}

.timeline_block.timeline_bg_background .timeline_tab.is-active,
.timeline_block.timeline_bg_alt_background .timeline_tab.is-active,
.timeline_block.timeline_text_dark .timeline_tab.is-active {
    border-bottom-color: var(--color-accent);
}

.timeline_block.timeline_bg_dark .timeline_heading,
.timeline_block.timeline_bg_accent .timeline_heading,
.timeline_block.timeline_text_light .timeline_heading {
    color: var(--color-text-inverse);
}

.timeline_block.timeline_bg_dark .timeline_eyebrow,
.timeline_block.timeline_bg_accent .timeline_eyebrow,
.timeline_block.timeline_text_light .timeline_eyebrow,
.timeline_block.timeline_bg_dark .timeline_tab:hover,
.timeline_block.timeline_bg_accent .timeline_tab:hover,
.timeline_block.timeline_text_light .timeline_tab:hover,
.timeline_block.timeline_bg_dark .timeline_tab.is-active,
.timeline_block.timeline_bg_accent .timeline_tab.is-active,
.timeline_block.timeline_text_light .timeline_tab.is-active {
    color: var(--color-text-inverse);
}

.timeline_block.timeline_bg_dark .timeline_tab.is-active,
.timeline_block.timeline_bg_accent .timeline_tab.is-active,
.timeline_block.timeline_text_light .timeline_tab.is-active {
    border-bottom-color: var(--color-text-inverse);
}

.timeline_block.timeline_bg_dark .timeline_tab,
.timeline_block.timeline_bg_accent .timeline_tab,
.timeline_block.timeline_text_light .timeline_tab {
    color: var(--color-text-inverse-soft);
}

/* Background/Alternate/Custom+Dark-Text need no override for the inactive
   tab — --color-text-muted already reads fine against a light background,
   confirmed, not assumed. */


/* ── RESPONSIVE ──────────────────────────────────────── */

@media (max-width: 768px) {
    .timeline_card_inner {
        padding: var(--space-4);
    }

    .timeline_title {
        font-size: var(--text-lg);
    }

    .timeline_arrow {
        width: 2rem;
        height: 2rem;
        font-size: var(--text-md);
    }
}

/* ── EDITOR PREVIEW ONLY ─────────────────────────────────
   scripts.js's transition engine never loads in wp-admin, and
   .timeline_stage relies on jQuery setting an explicit height on
   init (see the CARD STAGE comment above) — every .timeline_card is
   position:absolute, so without that JS the stage collapses to zero
   height and no card content is visible at all. This shows a single,
   stable card (the first) in normal document flow instead — not a
   broken collapse, and not a fake transition. Placed last in this
   file so its equal-or-higher specificity vs. the per-transition
   [data-transition="..."] rules above wins by source order, without
   needing !important. Frontend output (data-transition rules, JS
   engine) is completely untouched. ────────────────────────────── */

.timeline_block.timeline_block_is_preview .timeline_stage {
    overflow: visible;
}

.timeline_block.timeline_block_is_preview .timeline_card {
    display: none;
}

.timeline_block.timeline_block_is_preview .timeline_card.is-active {
    display: block;
    position: static;
    opacity: 1;
    transform: none;
}

/* Tabs and arrows are disabled in preview (timeline.php) to remove dead
   click/keyboard semantics; override the browser's default disabled
   dimming so the full tab strip still reads clearly. */
.timeline_block.timeline_block_is_preview .timeline_tab:disabled,
.timeline_block.timeline_block_is_preview .timeline_arrow:disabled {
    opacity: 1;
    cursor: default;
}

/* ==========================================================
   Batch 8H — Timeline (BATCH_8_PLAN.md §29)
   ========================================================== */

/* ── Small label below the whole timeline ──────────────────
   "Below the whole timeline" / "Both": the same label after the cards,
   centered like the header. */
.timeline_footer {
    text-align: center;
}

.timeline_footer .timeline_eyebrow {
    margin: 0;
}

/* ── Milestone link ────────────────────────────────────────
   Only printed with a usable link. The card keeps its own light
   background (--color-bg-alt), so the brand color reads on it. */
.timeline_card_link_wrap {
    margin: var(--space-4) 0 0;
}

.timeline_card_link {
    color: var(--color-accent);
    font-weight: var(--weight-semi);
    text-decoration: underline;
    text-underline-offset: 0.2em;
}

.timeline_card_link:hover {
    color: var(--color-accent-hover);
}

/* Screen-reader-only words ("about {title}", new tab notice). */
.timeline_sr {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ── Label look / Date look: Rounded tag (Batch 8H §28 / §29) ──────
   Added only when the editor picks Rounded tag; Plain text (the default)
   adds nothing, so existing timelines look the same. Uses the text's own
   color (currentColor), so it reads on every background. The first
   border line is the fallback for browsers without color-mix().
   BOILERPLATE NOTE: the same rule lives in style.css §10c. Kept here so
   this block works when copied to a new project on its own; on a live
   project with §10c in place this copy can be removed. */
.timeline_eyebrow.timeline_label_pill,
.timeline_period.timeline_date_pill {
    display: inline-block;
    padding: var(--space-2) var(--space-4);
    border: 1px solid currentColor;
    border: 1px solid color-mix(in srgb, currentColor 35%, transparent);
    border-radius: var(--radius-full);
    background-color: color-mix(in srgb, currentColor 8%, transparent);
    line-height: var(--leading-tight);
}

/* ── Editor-only messages ──────────────────────────────────
   Printed by timeline.php in the editor preview only, never on the page. */
.timeline_preview_empty,
.timeline_preview_note {
    box-sizing: border-box;
    margin: var(--space-4) auto;
    padding: var(--space-3) var(--space-6);
    border: 1px dashed var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-bg-alt);
    color: var(--color-text);
    font-size: var(--text-sm);
    text-align: center;
}

.timeline_preview_note {
    margin: 0;
}

/* ==========================================================
   Card background (BATCH_8_PLAN.md §40) — the milestone cards only,
   separate from the section background. Standard keeps the usual gray.
   timeline_card_on_dark keeps the card's words readable.
   ========================================================== */
.timeline_block.timeline_cbg_background .timeline_card_inner { background-color: var(--color-bg); }
.timeline_block.timeline_cbg_alt_background .timeline_card_inner { background-color: var(--color-bg-alt); }
.timeline_block.timeline_cbg_dark .timeline_card_inner { background-color: var(--color-bg-dark); }
.timeline_block.timeline_cbg_accent .timeline_card_inner { background-color: var(--color-accent); }
.timeline_block.timeline_cbg_custom .timeline_card_inner { background-color: var(--timeline-card-bg, var(--color-bg-alt)); }

.timeline_card_on_dark .timeline_title,
.timeline_card_on_dark .timeline_period {
    color: var(--color-text-inverse);
}

.timeline_card_on_dark .timeline_body {
    color: var(--color-text-inverse-soft);
}

.timeline_card_on_dark .timeline_card_link,
.timeline_card_on_dark .timeline_card_link:hover {
    color: var(--color-text-inverse);
    text-decoration: underline;
}

.timeline_card_on_dark .timeline_card_link:focus-visible {
    outline: 2px solid var(--color-text-inverse);
    outline-offset: 3px;
}