/* ==========================================================================
   archive-event.css — events CPT archive surface
   Scope: is_post_type_archive( 'thisismyurl_event' ).
   Enqueued conditionally in inc/setup.php under the archive-event handle.
   All rules live in the `page-types` cascade layer (declared in main.css).
   Built 2026-05-15 against craft-designer spec for the events-fix pass.
   Training-timeline component added 2026-05-17 (design pass 3).
   Kind-filter tabs (training / speaking) added 2026-05-18.
   Teaching third-kind expansion added 2026-05-19 — teaching-history band
   plus teaching-tonal badge variant for the timeline row.
   ========================================================================== */

@layer page-types {

  /* ----------------------------------------------------------------------
     Item 2 — Filter tabs (Upcoming / Past)
     Separate pattern from .archive-jump-nav--pills; closer to
     .post-archive-topics__chip with a count badge inside.
     ---------------------------------------------------------------------- */

  .archive-event-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    list-style: none;
    margin: 0 0 1.5rem;
    padding: 0;
  }

  .archive-event-tabs__tab {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    min-height: 44px;                            /* WCAG 2.5.5 tap target */
    padding: 0.45rem 0.9rem;
    border: 1px solid var(--color-border-strong);
    border-left: 3px solid var(--color-gold);    /* brand-edge mark */
    background: #ffffff;
    color: var(--color-text);
    font-size: 0.92rem;
    font-weight: 600;
    letter-spacing: -0.005em;
    text-decoration: none;
    cursor: pointer;
    transition: border-color 140ms ease, background-color 140ms ease, color 140ms ease;
  }

  .archive-event-tabs__tab:hover,
  .archive-event-tabs__tab:focus-visible {
    background: var(--color-accent-soft);
    border-color: var(--color-accent);
    border-left-color: var(--color-gold);
    color: var(--color-accent);
    outline: none;
  }

  .archive-event-tabs__tab:focus-visible {
    outline: 2px solid var(--color-teal);
    outline-offset: 2px;
  }

  .archive-event-tabs__tab[aria-current="page"],
  .archive-event-tabs__tab.is-active {
    background: var(--color-accent);
    border-color: var(--color-accent);
    border-left-color: var(--color-gold);
    color: #ffffff;
    cursor: default;
  }

  .archive-event-tabs__tab[aria-current="page"]:hover,
  .archive-event-tabs__tab.is-active:hover {
    background: var(--color-accent);
    color: #ffffff;
  }

  /* Disabled tab (count = 0): non-interactive but visible so the visitor
     understands the surface exists. The aria-disabled attribute is set by
     wp-expert in PHP; this rule applies the visual treatment. */
  .archive-event-tabs__tab[aria-disabled="true"] {
    background: #ffffff;
    border-color: var(--color-border);
    border-left-color: var(--color-border-strong);
    color: var(--color-muted);
    cursor: not-allowed;
    opacity: 0.7;
  }

  .archive-event-tabs__tab[aria-disabled="true"]:hover,
  .archive-event-tabs__tab[aria-disabled="true"]:focus-visible {
    background: #ffffff;
    border-color: var(--color-border);
    border-left-color: var(--color-border-strong);
    color: var(--color-muted);
  }

  /* Count badge sits inside the tab as a small navy-on-white chip */
  .archive-event-tabs__count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.4rem;
    padding: 0.1rem 0.35rem;
    background: var(--color-accent-strong);
    color: #ffffff;
    font-size: var(--fs-xs);
    font-weight: 700;
    letter-spacing: 0.04em;
    border-radius: var(--radius-pill);
  }

  /* On the active tab, the badge inverts so it reads against the navy fill */
  .archive-event-tabs__tab[aria-current="page"] .archive-event-tabs__count,
  .archive-event-tabs__tab.is-active .archive-event-tabs__count {
    background: rgba(255, 255, 255, 0.22);
    color: #ffffff;
  }

  /* ----------------------------------------------------------------------
     Kind tabs (All / Training / Speaking) — secondary row below the
     primary time-filter row. Reads as a child by indenting from the left
     edge and stepping down one size; brand gold edge is preserved so the
     row still feels like part of the same tab system, not a generic
     pill row.
     ---------------------------------------------------------------------- */

  .archive-event-tabs--kind {
    margin: -0.75rem 0 1.5rem 1rem;
    gap: 0.4rem;
  }

  .archive-event-tabs--kind .archive-event-tabs__tab {
    min-height: 36px;
    padding: 0.3rem 0.7rem;
    font-size: 0.84rem;
    font-weight: 500;
  }

  /* ----------------------------------------------------------------------
     Item 4 — Hero grid collapse when no sigil is rendered
     archive.php adds body.archive-no-sigil for CPTs that suppress the sigil.
     ---------------------------------------------------------------------- */

  body.archive-no-sigil .archive-hero__layout {
    grid-template-columns: 1fr;
  }

  body.archive-no-sigil .archive-hero__header h1 {
    line-height: 1.1;
    max-width: 52ch;
  }

  body.archive-no-sigil .archive-hero__lead {
    max-width: 52ch;
  }

  /* ==========================================================================
     Training timeline — events archive listing
     Tabular scan-line rows for the upcoming/past event lists. Each <li>
     is a full-width <a> grid: date column fixed-width, class name flex-grow,
     city right, arrow terminus. Hover: tonal background shift + arrow nudge.
     Built 2026-05-17 — the classes existed in the template since the events
     extraction but had no CSS rules anywhere in the codebase.
     ========================================================================== */

  .training-timeline {
    list-style: none;
    margin: 1.5rem 0 0;
    padding: 0;
    border-top: 1px solid var(--color-border);
  }

  .training-timeline__row {
    margin: 0;
    padding: 0;
    border-bottom: 1px solid var(--color-border);
  }

  .training-timeline__link {
    display: grid;
    grid-template-columns: 5rem 1fr auto auto;
    align-items: center;
    column-gap: 1.5rem;
    padding: 1rem 0.75rem;
    text-decoration: none;
    color: var(--color-text);
    transition: background-color 120ms ease;
    border-radius: 4px;
  }

  .training-timeline__link:hover,
  .training-timeline__link:focus-visible {
    background-color: var(--color-accent-soft);
    outline: none;
  }

  .training-timeline__link:hover .training-timeline__arrow,
  .training-timeline__link:focus-visible .training-timeline__arrow {
    transform: translateX(4px);
    color: var(--color-accent);
  }

  .training-timeline__date {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    font-variant-numeric: tabular-nums;
  }

  .training-timeline__day {
    font-family: "Sora", sans-serif;
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1.05;
    color: var(--color-text-strong);
    letter-spacing: -0.01em;
  }

  .training-timeline__month {
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-muted);
    margin-top: 0.15rem;
  }

  .training-timeline__class {
    font-family: "Sora", sans-serif;
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: -0.005em;
    line-height: 1.35;
    color: var(--color-text-strong);
  }

  .training-timeline__badge {
    display: inline-block;
    margin-left: 0.5rem;
    padding: 0.1rem 0.5rem;
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    background: var(--color-gold);
    color: var(--color-text-strong);
    border-radius: 3px;
    vertical-align: middle;
  }

  .training-timeline__location {
    font-size: 0.88rem;
    color: var(--color-muted);
    white-space: nowrap;
  }

  .training-timeline__arrow {
    font-size: 1rem;
    color: var(--color-muted);
    transition: color 120ms ease, transform 120ms ease;
  }

  @media (max-width: 720px) {
    .training-timeline__link {
      grid-template-columns: 4rem 1fr auto;
      column-gap: 1rem;
      padding: 0.85rem 0.5rem;
    }
    .training-timeline__location {
      grid-column: 2;
      font-size: 0.82rem;
      margin-top: 0.2rem;
    }
    .training-timeline__arrow {
      grid-row: 1 / span 2;
      align-self: center;
    }
    .training-timeline__day {
      font-size: 1.25rem;
    }
  }

  /* ==========================================================================
     Jump-nav pills — copied verbatim from single-article.css (lines 1069-1157)
     so the pill treatment renders on /events/ as well as on single posts.
     The original rules ship under the article surface only; this duplication
     gives the events hero its styled See-the-schedule / Read-the-FAQ pair
     without depending on single-article.css being loaded.
     Source remains canonical in single-article.css — do not edit either copy
     in isolation; if the source changes, mirror it here.
     ========================================================================== */

  .archive-jump-nav {
    margin: 1.2rem 0 0;
    position: sticky;
    top: var(--site-header-offset, 84px);
    z-index: 20;
    background: rgba(250, 251, 252, 0.92);
    backdrop-filter: saturate(180%) blur(10px);
    -webkit-backdrop-filter: saturate(180%) blur(10px);
    padding: 0.55rem 0;
    border-bottom: 1px solid var(--color-border, #e5e9ee);
  }

  .archive-jump-nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 0.9rem;
    font-size: 0.92rem;
  }

  .archive-jump-nav a {
    color: var(--color-accent, var(--color-accent));
    text-decoration: none;
    padding: 0.6rem 0.9rem;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    border: 1px solid var(--color-border, #e5e9ee);
    border-radius: var(--radius-pill);
  }

  .archive-jump-nav a:hover,
  .archive-jump-nav a:focus-visible {
    background: var(--color-accent, var(--color-accent));
    color: #fff;
  }

  .archive-jump-nav--pills {
    border-bottom-color: var(--color-accent);
  }

  .archive-jump-nav--pills .archive-jump-nav__link--primary {
    background: var(--color-accent-strong);
    border-color: var(--color-accent-strong);
    color: #fff;
    font-weight: 700;
    box-shadow: 0 2px 8px rgba(11, 31, 58, 0.14);
  }

  .archive-jump-nav--pills .archive-jump-nav__link--primary:hover,
  .archive-jump-nav--pills .archive-jump-nav__link--primary:focus-visible {
    background: var(--color-accent);
    border-color: var(--color-accent);
    background: color-mix(in srgb, var(--color-gold) 88%, black);
    border-color: color-mix(in srgb, var(--color-gold) 88%, black);
    color: #fff;
  }

  .archive-jump-nav--pills .archive-jump-nav__link--secondary {
    background: rgba(255, 255, 255, 0.95);
    border-color: rgba(18, 52, 86, 0.24);
    color: var(--color-accent);
    font-weight: 600;
  }

  .archive-jump-nav--pills .archive-jump-nav__link--secondary:hover,
  .archive-jump-nav--pills .archive-jump-nav__link--secondary:focus-visible {
    background: var(--color-accent-soft);
    color: var(--color-accent-strong);
  }

  @supports (backdrop-filter: blur(4px)) {
    .archive-jump-nav--pills .archive-jump-nav__link--secondary {
      backdrop-filter: blur(4px);
    }
  }

  /* ==========================================================================
     Hero compaction for no-sigil events (the standard case)
     The archive-hero default padding is calibrated for a 2-column hero with
     a sigil filling the right side. With no sigil the empty padding reads as
     wasted frame. Tighten block padding ~25% + widen the header to fill the
     breathing space the missing sigil column would have taken. Scoped via
     body.archive-no-sigil (already set by inc/template-tags.php's
     body_class filter). Designer's recommendation 2026-05-17.
     ========================================================================== */

  body.archive-no-sigil .archive-hero {
    padding-block: clamp(2rem, 3.5vw, 3.5rem);
  }

  body.archive-no-sigil .archive-hero__header {
    max-width: 72ch;
  }

  /* ==========================================================================
     Eyebrow badge tonal override for events
     The live-count badge in the eyebrow shares the same color weight as the
     H1 below it (both filled navy). Reduce to outlined/tinted treatment so
     the H1 leads the visual hierarchy. Scoped via the events archive body
     class so only this surface changes.
     ========================================================================== */

  body.post-type-archive-thisismyurl_event .section-eyebrow__num {
    background: var(--color-accent-soft);
    color: var(--color-accent);
    border: 1px solid var(--color-accent);
  }

  /* ==========================================================================
     Teaching-history credibility band
     Renders on /events/?when=past&kind=teaching with three stats:
     engagements, years active, institutions. The inner <dl> reuses
     .archive-speaking-history__stats markup so spacing / typography stay
     locked to the existing band — only the outer wrapper carries the
     teaching modifier. The current parallel .archive-speaking-history
     wrapper carries no surface styling either; this block sits in cascade
     ready to receive a tonal treatment when designer ships one for both
     bands. Built 2026-05-19.
     ========================================================================== */

  /* Teaching badge tonal — distinguishes a teaching row from a speaking row
     on the kind=all timeline. The default badge is brand gold (used for
     speaking); the teaching modifier reads as a quieter navy-outlined chip
     so the two badge kinds are visually distinct without competing for
     weight in the row. */
  .training-timeline__badge--teaching {
    background: var(--color-accent-soft);
    color: var(--color-accent);
    border: 1px solid var(--color-accent);
  }

  /* ==========================================================================
     Credibility-stats band — speaking, training, and teaching history panels
     Renders on /events/?when=past for each kind filter view. All three bands
     share the .archive-speaking-history__stats / .archive-speaking-history__stat
     skeleton (class names are historical: speaking shipped first; teaching and
     training reuse the wrapper). The outer aside carries the per-kind wrapper
     class (.archive-speaking-history, .archive-speaking-history--training,
     .archive-teaching-history) which drives tonal differentiation via the top
     rule colour — gold for speaking (brand accent), teal for training (editorial
     accent), navy for teaching (matches the teaching badge already using
     --color-accent at the timeline row level).

     Design rationale: top-ruled strip rather than a card. The token system
     documents --shadow-soft: none (flat brand aesthetic), and the timeline rows
     below use a border/no-elevation pattern. A card here would introduce the
     first unexplained surface elevation on this page. The 2px top rule in the
     band-specific colour carries identity without performing it — the same mark
     the tab system uses as a left-edge accent (border-left: var(--color-gold)).

     Typography: value in display weight (tabular-nums, ~2.5rem) over label in
     muted caption register (uppercase, tracked). Closest precedent: editorial
     callout boxes in design-magazine annuals. Three units per band (count /
     year span / location count), which at this size reads at a glance as a
     record, not a table. Year-span string ("2003–present") treated identically
     to numeric values — same weight, same size — because it reads as a number
     in context.

     Accessibility: the <dl>/<dt>/<dd> semantic structure is preserved as-is.
     display: flex on the <dl> does not break screen-reader dt→dd pairing
     because each <div class="archive-speaking-history__stat"> wraps its own
     <dt>+<dd> pair — the reading order (dt then dd, left to right across the
     row) matches the visual order. No role override needed.

     Empty-state resilience: if the template skips a conditional block (e.g.
     no year span when only one year is present), the flex row with
     gap collapses cleanly to one or two stat units — no orphaned space.

     Credibility-stats band designer pass — 2026-05-19.
     ========================================================================== */

  /* Shared stat-strip outer wrapper ---------------------------------------- */
  .archive-speaking-history,
  .archive-teaching-history {
    margin-block: 1.75rem 0;
    padding-block-start: 0.625rem;   /* 10px — optical gap below the 2px rule */
    border-top: 2px solid var(--color-gold);   /* speaking default: brand gold */
  }

  /* Training modifier — teal top rule (matches informational/editorial accent) */
  .archive-speaking-history--training {
    border-top-color: var(--color-teal);
  }

  /* Teaching wrapper — navy top rule (matches teaching badge tonal) */
  .archive-teaching-history {
    border-top-color: var(--color-accent);
  }

  /* Stat row — flex, even spacing across 1–3 units -------------------------- */
  .archive-speaking-history__stats {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem 3rem;
    margin: 0;
    padding: 0;
    list-style: none;    /* browsers treat <dl> as generic block; safe reset */
  }

  /* Individual stat unit: <dd> (value) stacked over <dt> (label) ----------- */
  .archive-speaking-history__stat {
    display: flex;
    flex-direction: column-reverse;   /* value on top, label below */
    gap: 0.2rem;
    min-inline-size: 5rem;            /* prevents collapse on very narrow vp */
  }

  /* Value — display weight, tabular numerals, reads at a glance ------------ */
  .archive-speaking-history__stat dd {
    margin: 0;
    font-size: clamp(1.75rem, 3.5vw, 2.5rem);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.02em;
    line-height: 1.0;
    color: var(--color-text-strong);
  }

  /* Label — muted caption register, all-caps tracked ----------------------- */
  .archive-speaking-history__stat dt {
    font-size: var(--fs-xs);     /* 0.75rem / 12px */
    font-weight: 600;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--color-muted);
    line-height: 1.3;
  }

  /* Mobile — tighten value size and compress gap at narrow viewports.
     Five-viewport sweep: 320 / 360 / 375 / 390 / 414.
     At 320px the three-stat row with 3rem gap would overflow; flex-wrap
     handles reflow, but we also tighten the column gap so two stats
     can still sit side-by-side rather than stacking all three vertically.
     At 360+ the three stats read comfortably in a 2+1 or 3-across wrap. */
  @media (max-width: 480px) {
    .archive-speaking-history__stats {
      gap: 1.25rem 2rem;
    }

    .archive-speaking-history__stat dd {
      font-size: 1.625rem;    /* ~26px — still display weight at this vp */
      letter-spacing: -0.015em;
    }
  }

  /* At 320px specifically: ensure the wrapper does not escape its column.
     The clamp floor of 1.625rem keeps the numerals readable; wrapping to
     a 2+1 layout is acceptable and preferred over shrinking further. */
  @media (max-width: 360px) {
    .archive-speaking-history__stats {
      gap: 1rem 1.5rem;
    }
  }

}