/* ============================================================
   bootcamp-event-archive.css — page-specific styles for
   archive-bootcamp_event.php (renders at /bootcamps/past-events/).

   Lifted verbatim from
   `flibbr-design-mockup-final-bootcamp-past-events-archive.html`
   (locked 1 May 2026, v1), inline <style> block lines 1783-2055.

   Scope: .bootcamp-archive section + filter bar + 3-col card grid +
   empty-state. The tail rail (.case-related outer + .recap-tail-paths
   inner) lives in base.css — .case-related lifted at v0.5.47
   (op-learning #16, sixth application); .recap-tail-paths lifted
   at v0.5.49 (op-learning #16, seventh application).

   No CSS variables redefined. All colours, spaces, type scales come
   from base.css design tokens. Filter pills include a button-defaults
   reset baseline (op-learning #10).

   @package Flibbr
   @since   0.5.49
============================================================ */

  .bootcamp-archive {
    padding-block: var(--s-9);
  }


  /* ----------------------------------------------------------
     FILTER BAR — three independent pill rows (City / Year /
     Month), AND-combined.

     Layout: stacked rows of (label · pill-row). Label sits in
     a fixed-width gutter (sans-caps eyebrow); pills wrap freely
     in the remaining space. At ≤880px the label collapses above
     the pill row.

     Active state: ink fill, paper text. Single accent reserved
     for the focus ring + the small results counter.

     Build-phase: pill content driven by taxonomy + ACF date
     facets. The "All" pill always renders first. Empty
     years/months (taxonomy terms with zero published cohorts)
     are suppressed at template level.
  ---------------------------------------------------------- */

  .bootcamp-archive-filters {
    margin-bottom: var(--s-8);
    padding: var(--s-6) 0 var(--s-7);
    border-top: 1px solid var(--rule);
    border-bottom: 1px solid var(--rule-soft);
    display: flex; flex-direction: column;
    gap: var(--s-5);
  }
  .bootcamp-archive-filter-row {
    display: grid;
    grid-template-columns: 120px 1fr;
    gap: var(--s-5);
    align-items: baseline;
  }
  @media (max-width: 880px) {
    .bootcamp-archive-filter-row {
      grid-template-columns: 1fr;
      gap: var(--s-3);
    }
    /* G.3b — filter pill tap-target; G.3c — added min-width to lift .is-active to 44 */
    .bootcamp-archive-filter-pill {
      min-height: 44px;
      min-width: 44px;
    }
  }
  .bootcamp-archive-filter-label {
    font-family: var(--sans); font-weight: 600;
    font-size: 11px; line-height: 1.2;
    letter-spacing: 0.16em; text-transform: uppercase;
    color: var(--ink-quiet);
    padding-top: var(--s-2);
  }
  .bootcamp-archive-filter-pills {
    display: flex; flex-wrap: wrap; gap: var(--s-2);
  }
  .bootcamp-archive-filter-pill {
    display: inline-flex; align-items: center;
    border: 0; padding: 0; font: inherit;
    background: transparent; cursor: pointer;
    font-family: var(--sans); font-weight: 500;
    font-size: 12px; line-height: 1;
    letter-spacing: 0.04em;
    color: var(--ink-soft);
    padding: var(--s-2) var(--s-3);
    border: 1px solid var(--rule);
    border-radius: 999px;
    background: var(--paper);
    transition: border-color var(--motion-duration-ui) var(--motion-ease-ui),
                color var(--motion-duration-ui) var(--motion-ease-ui),
                background var(--motion-duration-ui) var(--motion-ease-ui);
  }
  .bootcamp-archive-filter-pill:hover {
    border-color: var(--ink);
    color: var(--ink);
  }
  .bootcamp-archive-filter-pill:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
  }
  .bootcamp-archive-filter-pill.is-active {
    background: var(--ink);
    border-color: var(--ink);
    color: var(--paper);
  }
  .bootcamp-archive-filter-pill.is-active:hover {
    background: var(--ink);
  }

  /* Counter + clear-filters row — quiet meta line beneath the
     filter rows. Counter updates live via JS. Clear-filters is
     a quiet text link, only visible when at least one filter is
     non-default. */
  .bootcamp-archive-filter-status {
    display: flex; flex-wrap: wrap;
    gap: var(--s-4);
    align-items: baseline;
    margin-top: var(--s-3);
    padding-top: var(--s-4);
    border-top: 1px solid var(--rule-soft);
    font-family: var(--sans); font-size: 12px;
    color: var(--ink-quiet);
    letter-spacing: 0.04em;
  }
  .bootcamp-archive-filter-count strong {
    color: var(--ink); font-weight: 600;
  }
  .bootcamp-archive-filter-clear {
    border: 0; padding: 0; font: inherit;
    background: transparent; cursor: pointer;
    font-family: var(--sans); font-size: 12px;
    color: var(--accent);
    letter-spacing: 0.04em;
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-thickness: 1px;
    transition: color var(--motion-duration-ui) var(--motion-ease-ui);
  }
  .bootcamp-archive-filter-clear:hover {
    color: var(--ink);
  }
  .bootcamp-archive-filter-clear[hidden] {
    display: none;
  }


  /* ----------------------------------------------------------
     ARCHIVE GRID — 3-up at desktop, 2-up at tablet, 1-up at
     mobile. Tightened cohort-card derivative from the locked
     overview's .bootcamps-cohort-card.
  ---------------------------------------------------------- */

  .bootcamp-archive-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--s-5);
  }
  @media (max-width: 1080px) {
    .bootcamp-archive-grid {
      grid-template-columns: repeat(2, 1fr);
      gap: var(--s-5);
    }
  }
  @media (max-width: 720px) {
    .bootcamp-archive-grid {
      grid-template-columns: 1fr;
      gap: var(--s-4);
    }
  }

  .bootcamp-archive-card {
    display: flex; flex-direction: column;
    gap: var(--s-3);
    padding: var(--s-5);
    background: var(--paper-warm);
    border: 1px solid var(--rule-soft);
    text-decoration: none; color: inherit;
    transition: border-color var(--motion-duration-ui) var(--motion-ease-ui),
                box-shadow var(--motion-duration-content) var(--motion-ease-content),
                transform var(--motion-duration-ui) var(--motion-ease-ui);
  }
  .bootcamp-archive-card:hover {
    border-color: var(--ink);
    box-shadow: 0 8px 24px rgba(20,20,19,.04);
    transform: translateY(-1px);
  }
  /* Card body order: where (eyebrow) → headline → summary →
     meta strip → CTA */
  .bootcamp-archive-card-where {
    font-family: var(--sans); font-weight: 400;
    font-size: 12px; line-height: 1;
    letter-spacing: 0.06em; text-transform: uppercase;
    color: var(--ink-quiet);
  }
  .bootcamp-archive-card-headline {
    margin: 0;
    font-family: var(--serif); font-weight: 400;
    font-size: clamp(20px, 1.8vw, 24px);
    line-height: 1.20;
    letter-spacing: -0.005em;
    color: var(--ink);
    max-width: 22ch;
  }
  .bootcamp-archive-card-headline em { font-style: italic; }
  .bootcamp-archive-card-summary {
    font-family: var(--serif); font-weight: 400;
    font-size: 14px; line-height: 1.55;
    color: var(--ink-soft);
    margin: 0;
    flex: 1;
    /* Cap at 4 lines so cards stay even-height in the grid
       even when summary copy lengths differ across cohorts. */
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .bootcamp-archive-card-meta {
    font-family: var(--sans); font-weight: 400;
    font-size: 11px; line-height: 1.5;
    letter-spacing: 0.04em; text-transform: uppercase;
    color: var(--ink-quiet);
    padding-top: var(--s-3);
    border-top: 1px solid var(--rule);
  }
  .bootcamp-archive-card-meta strong {
    color: var(--ink); font-weight: 600;
  }
  .bootcamp-archive-card-meta > * + *::before {
    content: "·"; color: var(--ink-quiet);
    margin: 0 var(--s-2);
  }
  .bootcamp-archive-card-cta {
    font-family: var(--sans); font-weight: 600;
    font-size: 12px; line-height: 1;
    letter-spacing: 0.04em;
    color: var(--ink);
    display: inline-flex; align-items: center; gap: var(--s-2);
    transition: color var(--motion-duration-ui) var(--motion-ease-ui);
  }
  .bootcamp-archive-card:hover .bootcamp-archive-card-cta {
    color: var(--accent);
  }
  .bootcamp-archive-card-cta-arrow {
    transition: transform var(--motion-duration-ui) var(--motion-ease-ui);
  }
  .bootcamp-archive-card:hover .bootcamp-archive-card-cta-arrow {
    transform: translateX(3px);
  }

  /* JS sets `hidden` attribute on cards that don't match the
     active filter combination. */
  .bootcamp-archive-card[hidden] {
    display: none;
  }


  /* ----------------------------------------------------------
     EMPTY STATE — shown via JS when active filter combination
     yields zero matching cards. Hidden by default.
  ---------------------------------------------------------- */

  .bootcamp-archive-empty {
    margin-top: var(--s-7);
    padding: var(--s-8) var(--s-6);
    border: 1px solid var(--rule-soft);
    background: var(--paper-warm);
    text-align: center;
  }
  .bootcamp-archive-empty[hidden] {
    display: none;
  }
  .bootcamp-archive-empty-headline {
    margin: 0 0 var(--s-3) 0;
    font-family: var(--serif); font-weight: 400;
    font-style: italic;
    font-size: clamp(18px, 1.8vw, 22px); line-height: 1.3;
    color: var(--ink);
  }
  .bootcamp-archive-empty-supporting {
    margin: 0;
    font-family: var(--sans); font-size: 13px;
    color: var(--ink-soft);
  }
  .bootcamp-archive-empty-action {
    border: 0; padding: 0; font: inherit;
    background: transparent; cursor: pointer;
    color: var(--accent);
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-thickness: 1px;
    transition: color var(--motion-duration-ui) var(--motion-ease-ui);
  }
  .bootcamp-archive-empty-action:hover {
    color: var(--ink);
  }