/* ==========================================================================
   catalogue.css — sections that exist only on /playbooks.
   Loaded after lx.css, which carries every shared primitive, the Playbook
   card, the film player, the FAQ block and the closing CTA.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1 — hero, with the filter in it
   -------------------------------------------------------------------------- */
.cat-hero {
  position:relative; isolation:isolate; overflow:clip; color:#fff;
  background-color:#041947;
  background-image:
    radial-gradient(130% 120% at 18% -25%, #0a2a63 0%, #041947 46%, #020e28 100%);
  padding-block:clamp(26px, 3vw, 44px) clamp(36px, 4.2vw, 64px);
}
.cat-hero-bg { position:absolute; inset:0; z-index:-1; pointer-events:none; }
.cat-hero-bg .orb {
  position:absolute; right:-10vw; top:-14vw; width:min(46vw, 560px); aspect-ratio:1;
  border-radius:50%; filter:blur(88px); opacity:.5;
  background:radial-gradient(circle, rgba(254,120,7,.55), transparent 68%);
}
.cat-hero-bg .grid-veil {
  position:absolute; inset:0;
  background-image:
    linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px);
  background-size:60px 60px;
  mask-image:radial-gradient(85% 75% at 30% 20%, #000 20%, transparent 82%);
  -webkit-mask-image:radial-gradient(85% 75% at 30% 20%, #000 20%, transparent 82%);
}
.cat-hero-in { position:relative; }
.cat-hero .crumbs { color:#8ea6c8; margin-bottom:clamp(14px, 1.6vw, 22px); }
.cat-hero .crumbs a { color:#a9c0de; }
.cat-hero .crumbs a:hover { color:#fff; }
.cat-hero .lx-eyebrow { color:var(--orange-300); }
.cat-hero .lx-eyebrow .lx-ic { color:var(--orange-300); }
.cat-h1 {
  font-family:var(--font-display); font-weight:900; color:#fff;
  font-size:clamp(1.95rem, 1.42rem + 2.3vw, 3.4rem);
  line-height:1.05; letter-spacing:-.026em; margin:14px 0 0; max-width:20ch;
}
.cat-lead {
  margin:16px 0 0; max-width:68ch; color:#b7cae6;
  font-size:clamp(.95rem, .9rem + .34vw, 1.12rem); line-height:1.6;
}

/* ---- the filter ---- */
.cat-filter {
  margin-top:clamp(24px, 2.8vw, 38px); padding:clamp(14px, 1.6vw, 20px);
  border-radius:var(--r-md);
  background:rgba(255,255,255,.055); border:1px solid rgba(255,255,255,.13);
  backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
}
.cat-facets { display:grid; gap:12px; }
.cat-facet { display:flex; flex-wrap:wrap; align-items:center; gap:7px; }
.cat-facet-lab {
  flex:0 0 92px; font-size:var(--t-xs); font-weight:750; letter-spacing:.09em;
  text-transform:uppercase; color:#8ea6c8;
}
@media (max-width: 560px) { .cat-facet-lab { flex-basis:100%; } }
.cat-chip {
  display:inline-flex; align-items:center; gap:7px; cursor:pointer;
  padding:7px 12px; border-radius:var(--r-full);
  font-size:var(--t-sm); font-weight:650; color:#d4e0f2;
  background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.16);
  transition:background .14s linear, border-color .14s linear, color .14s linear;
}
.cat-chip em {
  font-style:normal; font-size:var(--t-xs); font-weight:750; color:#8ea6c8;
  padding:1px 6px; border-radius:var(--r-full); background:rgba(255,255,255,.10);
}
.cat-chip:hover { background:rgba(255,255,255,.14); color:#fff; }
.cat-chip:focus-visible { outline:2px solid var(--orange-300); outline-offset:2px; }
.cat-chip[aria-pressed="true"] {
  background:linear-gradient(180deg, var(--orange-400), var(--orange-500));
  border-color:transparent; color:#fff;
}
.cat-chip[aria-pressed="true"] em { background:rgba(0,0,0,.22); color:#ffe6d0; }
.cat-chip.is-dead { opacity:.34; }

.cat-filter-foot {
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between;
  gap:12px; margin-top:14px; padding-top:13px;
  border-top:1px solid rgba(255,255,255,.11);
}
.cat-count { margin:0; font-size:var(--t-sm); color:#a9c0de; }
.cat-count b { color:#fff; font-weight:800; }
.cat-clear {
  padding:6px 13px; border-radius:var(--r-full); cursor:pointer;
  font-size:var(--t-sm); font-weight:700; color:#ffd4ab;
  background:rgba(254,120,7,.16); border:1px solid rgba(254,120,7,.36);
}
.cat-clear:hover { background:rgba(254,120,7,.28); color:#fff; }

/* --------------------------------------------------------------------------
   2 — the grid
   -------------------------------------------------------------------------- */
.cat-grid-sec { padding-block:clamp(36px, 4vw, 64px) clamp(48px, 5.4vw, 88px); }
.lx-card[hidden] { display:none; }
.cat-empty {
  display:flex; flex-wrap:wrap; align-items:center; justify-content:center;
  gap:12px; margin:clamp(28px, 3vw, 48px) 0 0; padding:clamp(24px, 3vw, 40px);
  border-radius:var(--r-md); border:1px dashed var(--line-2);
  background:var(--surface-2); color:var(--ink-2); font-size:var(--t-md);
}
.cat-empty .lx-ic { color:var(--ink-3); }
.cat-empty .cat-clear {
  color:var(--brand-ink); background:var(--brand-wash);
  border-color:color-mix(in srgb, var(--brand) 30%, transparent);
}
.cat-empty .cat-clear:hover { background:var(--brand); color:#fff; border-color:transparent; }

/* --------------------------------------------------------------------------
   3 — the preview dialog
   -------------------------------------------------------------------------- */
.cat-modal {
  border:0; padding:0; background:transparent; color:#fff; margin:auto;
  /* The width is whatever keeps a 16:9 film plus its caption inside the
     viewport. Sizing by width alone let the dialog grow taller than the screen,
     and a dialog taller than the screen stops being centred: `margin:auto`
     resolves to zero and it pins to the top with its chrome off-screen. */
  width:min(1180px, 94vw, calc((92vh - 168px) * 16 / 9));
  max-width:none; max-height:94vh; overflow:visible;
}
.cat-modal::backdrop {
  background:rgba(2,10,28,.86);
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
}
.cat-modal-in { position:relative; }
/* inside the frame, not above it: anything outside the dialog's own box is
   the first thing to leave the screen on a short viewport */
.cat-modal-x {
  position:absolute; right:12px; top:12px; z-index:6; width:38px; height:38px;
  border-radius:50%; display:grid; place-items:center; cursor:pointer;
  font-size:24px; line-height:1; color:#fff;
  background:rgba(2,10,28,.62); border:1px solid rgba(255,255,255,.28);
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
}
.cat-modal-x:hover { background:rgba(255,255,255,.22); }
.cat-modal-x:focus-visible { outline:2px solid var(--orange-300); outline-offset:2px; }
@media (max-width: 720px) {
  /* 100vw includes the scrollbar, so a full-bleed dialog hung its right edge
     — and the close button with it — past the visible area */
  .cat-modal { width:100%; max-width:100%; max-height:100vh; }
  .cat-modal-x { right:8px; top:8px; width:34px; height:34px; }
}
/* the modal has no dark section around it, so the caption paints its own */
.sff-modal .sff-cap {
  padding:16px clamp(12px, 2vw, 20px) clamp(14px, 2vw, 20px);
  background:#04162f; border-radius:0 0 clamp(14px, 1.4vw, 22px) clamp(14px, 1.4vw, 22px);
  margin-top:0;
}
.sff-modal .sff-frame { border-radius:clamp(14px, 1.4vw, 22px) clamp(14px, 1.4vw, 22px) 0 0; }

/* --------------------------------------------------------------------------
   4 — where to start
   -------------------------------------------------------------------------- */
.cat-starts {
  display:grid; grid-template-columns:repeat(2, minmax(0,1fr));
  gap:clamp(14px, 1.6vw, 20px);
}
@media (max-width: 760px) { .cat-starts { grid-template-columns:1fr; } }
.cat-start {
  display:block; padding:clamp(18px, 2vw, 26px); border-radius:var(--r-md);
  background:var(--surface); border:1px solid var(--line);
  border-left:4px solid var(--pb-accent);
  transition:transform .26s var(--ease-out), box-shadow .26s var(--ease-out);
}
.cat-start:hover { transform:translateY(-3px); box-shadow:var(--sh-2); text-decoration:none; }
.cat-start-q {
  display:block; font-family:var(--font-display); font-size:var(--t-lg);
  font-weight:700; color:var(--ink); line-height:1.28;
}
.cat-start-a {
  display:flex; align-items:center; gap:8px; margin-top:14px;
  font-size:var(--t-sm); color:var(--ink-2);
}
.cat-start-a b { color:var(--brand-ink); font-weight:750; }
.cat-start-a .lx-ic { color:var(--pb-accent); }
.cat-start-w {
  display:block; margin-top:9px; font-size:var(--t-xs); color:var(--ink-3);
  line-height:1.5;
}

/* --------------------------------------------------------------------------
   5 — the comparison table
   -------------------------------------------------------------------------- */
.ct-wrap {
  overflow-x:auto; border-radius:var(--r-md); border:1px solid var(--line);
  background:var(--surface); box-shadow:var(--sh-1);
}
.ct-wrap:focus-visible { outline:2px solid var(--focus); outline-offset:2px; }
.ct { border-collapse:separate; border-spacing:0; width:max-content; min-width:100%; }
.ct th, .ct td {
  padding:13px 14px; text-align:left; font-size:var(--t-sm);
  border-bottom:1px solid var(--line); vertical-align:middle;
}
.ct thead th {
  position:sticky; top:0; z-index:2; background:var(--surface-2);
  border-bottom:2px solid var(--line-2); vertical-align:bottom;
  min-width:168px;
}
.ct thead th a {
  display:flex; align-items:center; gap:8px;
  font-family:var(--font-display); font-weight:700; font-size:var(--t-sm);
  color:var(--ink); line-height:1.25;
}
.ct thead th a:hover { color:var(--brand-ink); text-decoration:none; }
.ct .ct-ico { font-size:17px; line-height:1; flex:none; }
.ct thead th::after {
  content:""; display:block; height:3px; border-radius:2px; margin-top:9px;
  background:var(--pb-accent);
}
/* the row label column stays put while the Playbooks scroll past it */
.ct tbody th, .ct thead th:first-child {
  position:sticky; left:0; z-index:3; background:var(--surface-2);
  min-width:132px; max-width:168px;
  font-weight:700; color:var(--ink-2);
  border-right:1px solid var(--line);
}
.ct thead th:first-child { z-index:4; min-width:132px; }
.ct thead th:first-child::after { display:none; }
.ct tbody tr:nth-child(even) td { background:var(--surface-2); }
.ct tbody tr:last-child th, .ct tbody tr:last-child td { border-bottom:0; }
.ct td b { font-family:var(--font-display); font-size:var(--t-md); color:var(--ink); }
.ct-note {
  display:block; margin-top:3px; font-size:var(--t-xs); font-weight:600;
  color:var(--ink-3); text-transform:none; letter-spacing:0;
}
.ct-lvl { font-size:var(--t-xs); color:var(--ink-2); }
.ct-tool {
  display:block; font-size:var(--t-xs); color:var(--ink-2); line-height:1.45;
}
.ct-tool + .ct-tool { margin-top:3px; }
.ct-yes { display:inline-flex; align-items:center; gap:6px; color:var(--ok-ink); }
.ct-yes svg { width:15px; height:15px; }
.ct-yes i { font-style:normal; font-size:var(--t-xs); font-weight:700; }
.ct-no { color:var(--ink-3); }
.ct-price { color:var(--ink); }
.ct-per { font-size:var(--t-xs); color:var(--ink-3); margin-left:2px; }
.ct-hint {
  margin:12px 0 0; font-size:var(--t-xs); color:var(--ink-3); text-align:center;
}
@media (min-width: 1400px) { .ct-hint { display:none; } }

/* --------------------------------------------------------------------------
   6 — the passes
   -------------------------------------------------------------------------- */
.cat-passes {
  display:grid; grid-template-columns:repeat(3, minmax(0,1fr));
  gap:clamp(16px, 1.8vw, 24px); align-items:start;
}
@media (max-width: 900px) { .cat-passes { grid-template-columns:1fr; } }
.cat-pass {
  position:relative; padding:clamp(20px, 2.2vw, 30px); border-radius:var(--r-lg);
  background:#0a1c38; border:1px solid rgba(255,255,255,.12);
}
.cat-pass.is-best {
  background:#0d2450; border-color:rgba(254,120,7,.45);
  box-shadow:0 0 0 1px rgba(254,120,7,.22), 0 22px 60px rgba(0,0,0,.4);
}
.cat-pass-flag {
  position:absolute; top:-11px; left:clamp(20px, 2.2vw, 30px);
  padding:4px 11px; border-radius:var(--r-full);
  font-size:10px; font-weight:800; letter-spacing:.1em; text-transform:uppercase;
  background:linear-gradient(180deg, var(--orange-400), var(--orange-600)); color:#fff;
}
.cat-pass-n {
  margin:0; font-size:var(--t-xs); font-weight:750; letter-spacing:.09em;
  text-transform:uppercase; color:var(--orange-300);
}
.cat-pass h3 {
  font-family:var(--font-display); font-weight:800; color:#fff; margin:10px 0 0;
  font-size:var(--t-xl); line-height:1.14;
}
.cat-pass-blurb { margin:8px 0 0; font-size:var(--t-sm); color:#93abcb; line-height:1.5; }
.cat-pass-price { display:flex; align-items:baseline; gap:5px; margin-top:18px; }
.cat-pass-price b {
  font-family:var(--font-display); font-weight:800; color:#fff;
  font-size:var(--t-3xl); line-height:1;
}
.cat-pass-price span { font-size:var(--t-sm); color:#8ea6c8; }
.cat-pass-strike { display:flex; align-items:center; gap:9px; margin-top:7px; }
.cat-pass-strike s { font-size:var(--t-sm); color:#7f95b6; }
.cat-pass ul { list-style:none; margin:18px 0 22px; padding:0; display:grid; gap:9px; }
.cat-pass li {
  display:flex; gap:9px; align-items:flex-start;
  font-size:var(--t-sm); color:#b7cae6; line-height:1.45;
}
.cat-pass li .lx-ic { color:var(--orange-300); margin-top:2px; }
.cat-pass li .lx-ic svg { width:14px; height:14px; }
.cat-pass .btn-ghost { --btn-bg:rgba(255,255,255,.08); --btn-ink:#fff;
  --btn-line:rgba(255,255,255,.28); }
.cat-pass .btn-ghost:hover { --btn-bg:rgba(255,255,255,.16); }
.cat-pass-alt { margin:11px 0 0; text-align:center; font-size:var(--t-xs); color:#8ea6c8; }
.cat-pass-fine {
  margin:clamp(22px, 2.4vw, 32px) auto 0; max-width:74ch; text-align:center;
  font-size:var(--t-xs); color:#7f95b6; line-height:1.6;
}