/* ==========================================================================
   THE LIBRARY — tier and category pages.  Prefix .lx-
   GENERATED by tools/render-library-pages.py. Edit that file, not this one.

   Built on css/site.css tokens; the metal system matches /workouts, /pg-league
   and /corporate so the whole estate speaks one material language.
   Mobile first — every rule below starts at 375px and widens.
   ========================================================================== */
.lx{--mgold:linear-gradient(180deg,#fff2bf,#f4cd5c 35%,#d29a2c 70%,#a9741d);
  --mgun:linear-gradient(180deg,#39414f,#2a3140 60%,#1d2330);
  --edge:#242c3b;--plate:#151a26}

/* ---------- breadcrumb ---------- */
.lx-crumb{padding:calc(var(--nav-h,64px) + 14px) 0 0}
.lx-crumb ol{display:flex;flex-wrap:wrap;align-items:center;gap:6px;list-style:none;margin:0;
  padding:0;font:600 11.5px/1.4 'Inter','Inter Fallback',sans-serif;color:#7f8ca1}
.lx-crumb a{color:#9dabbe;text-decoration:none}
.lx-crumb a:hover,.lx-crumb a:focus-visible{color:var(--accent);text-decoration:underline}
.lx-crumb li+li::before{content:"/";margin-right:6px;color:#4c5766}
.lx-crumb [aria-current]{color:#dfe5ee}
@media (min-width:560px){.lx-crumb ol{font-size:12.5px}}

/* ---------- hero ----------
   ⚠️ padding:0 is load-bearing. This is a <section>, and css/site.css gives every section
   70px of top AND bottom padding — right for a page section, absurd inside a card. Measured
   at 390px before it was reset: ~140px of dead band above the eyebrow and below the button,
   with the photograph nowhere near either. Same trap .lib-tier documents on /workouts.

   ⚠️ And the scrim is deliberately LIGHT at the top. The 73 hero photographs are the one art
   source for this whole section; a scrim heavy enough to guarantee contrast everywhere turned
   every hero into a near-black rectangle. Instead: min-height gives the photo a band of its
   own, the content sits at the BOTTOM of the box, and the scrim only gets dense under the
   type that needs it. */
.lx-hero{position:relative;margin:14px 0 0;padding:0;display:flex;align-items:flex-end;
  min-height:400px;border:1px solid var(--edge);
  border-radius:var(--radius-lg);overflow:hidden;background:#0b0f18;isolation:isolate}
@media (min-width:560px){.lx-hero{min-height:470px}}
@media (min-width:900px){.lx-hero{min-height:540px}}
.lx-hero__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;
  object-position:center 30%;filter:saturate(.95) contrast(1.04) brightness(.94)}
.lx-hero::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(180deg,rgba(7,10,16,.10) 0%,rgba(7,10,16,.38) 32%,
    rgba(7,10,16,.84) 68%,rgba(7,10,16,.96) 100%)}
.lx-hero__in{width:100%;padding:22px 16px 20px}
@media (min-width:560px){.lx-hero__in{padding:38px 30px 30px}}
@media (min-width:900px){.lx-hero__in{padding:52px 44px 40px;max-width:74ch}}
.lx-eyebrow{display:inline-flex;align-items:center;gap:8px;
  font:800 10.5px/1 'Inter','Inter Fallback',sans-serif;letter-spacing:.14em;
  text-transform:uppercase;color:var(--accent);
  /* the scrim is light up here on purpose, so the eyebrow carries its own contrast —
     measured at 390px over the Specialisation hero, where it sits on a lit wall */
  text-shadow:0 1px 3px rgba(0,0,0,.95),0 0 14px rgba(0,0,0,.8)}
@media (min-width:560px){.lx-eyebrow{font-size:11.5px}}
.lx-hero h1{margin:11px 0 0;font:900 30px/1.02 'Barlow Condensed','BC Fallback',sans-serif;
  text-transform:uppercase;letter-spacing:.01em;color:#fff;text-shadow:0 2px 18px rgba(0,0,0,.85)}
@media (min-width:560px){.lx-hero h1{font-size:46px}}
@media (min-width:900px){.lx-hero h1{font-size:58px}}
.lx-hero p{margin:11px 0 0;max-width:60ch;
  font:400 14px/1.6 'Inter','Inter Fallback',sans-serif;color:#c3ccd9;
  text-shadow:0 1px 10px rgba(0,0,0,.8)}
@media (min-width:560px){.lx-hero p{font-size:16px}}

/* ---------- the facts strip ---------- */
.lx-facts{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;margin:18px 0 0;
  list-style:none;padding:0}
@media (min-width:560px){.lx-facts{grid-template-columns:repeat(4,1fr);gap:10px}}
/* These sit ON the photograph now, so they carry their own dark backing — a 6%-white
   wash over a lit gym shot is unreadable. */
.lx-facts li{padding:10px 11px;border-radius:11px;border:1px solid rgba(255,255,255,.13);
  background:linear-gradient(180deg,rgba(9,13,20,.84),rgba(9,13,20,.72));
  -webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px)}
.lx-facts b{display:block;font:900 21px/1 'Barlow Condensed','BC Fallback',sans-serif;color:#fff}
@media (min-width:560px){.lx-facts b{font-size:25px}}
.lx-facts span{display:block;margin-top:4px;font:700 9.5px/1.3 'Inter','Inter Fallback',sans-serif;
  letter-spacing:.08em;text-transform:uppercase;color:#8b97a9}
@media (min-width:560px){.lx-facts span{font-size:10.5px}}
.lx-hero .btn{margin-top:18px}

/* ---------- section furniture ---------- */
.lx-sec{padding:34px 0 0}
@media (min-width:560px){.lx-sec{padding-top:46px}}
.lx-sec>h2{margin:0 0 4px;font:900 22px/1.06 'Barlow Condensed','BC Fallback',sans-serif;
  text-transform:uppercase;letter-spacing:.012em;color:#fff}
@media (min-width:560px){.lx-sec>h2{font-size:30px}}
.lx-sec>p.lx-lead{margin:0 0 16px;max-width:66ch;
  font:400 14px/1.62 'Inter','Inter Fallback',sans-serif;color:var(--ink-2)}
@media (min-width:560px){.lx-sec>p.lx-lead{font-size:15.5px}}

/* ---------- prose ---------- */
.lx-prose p{margin:0 0 12px;max-width:66ch;
  font:400 14.5px/1.68 'Inter','Inter Fallback',sans-serif;color:var(--ink-2)}
@media (min-width:560px){.lx-prose p{font-size:16px}}
.lx-prose strong{color:#e6ebf2}

/* ---------- photographic category cards ---------- */
.lx-grid{display:grid;grid-template-columns:1fr;gap:12px;list-style:none;margin:0;padding:0}
@media (min-width:480px){.lx-grid{grid-template-columns:repeat(2,1fr)}}
@media (min-width:900px){.lx-grid{grid-template-columns:repeat(3,1fr);gap:16px}}
.lx-card{position:relative;display:flex;flex-direction:column;height:100%;
  border:1px solid var(--line);border-radius:14px;overflow:hidden;text-decoration:none;
  background:linear-gradient(180deg,#0e131e,#0b0f18);
  transition:transform .24s var(--ease),border-color .24s,box-shadow .24s}
.lx-card:hover,.lx-card:focus-visible{transform:translateY(-3px);border-color:var(--accent-line);
  box-shadow:0 18px 34px -22px rgba(0,0,0,.9),0 0 26px -14px var(--accent-glow)}
.lx-card:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.lx-card__ph{position:relative;aspect-ratio:16/9;background:#0b0f18;overflow:hidden}
.lx-card__ph img{width:100%;height:100%;object-fit:cover;object-position:center 32%;
  filter:saturate(.88) contrast(1.04) brightness(.86);transition:filter .24s,transform .4s var(--ease)}
.lx-card:hover .lx-card__ph img{filter:saturate(.98) contrast(1.06) brightness(.94);transform:scale(1.03)}
.lx-card__bd{padding:12px 13px 14px;display:flex;flex-direction:column;gap:5px;flex:1 1 auto}
.lx-card__bd b{font:900 17px/1.08 'Barlow Condensed','BC Fallback',sans-serif;
  text-transform:uppercase;letter-spacing:.014em;color:#fff}
@media (min-width:560px){.lx-card__bd b{font-size:19px}}
.lx-card__bd i{font-style:normal;font:600 11.5px/1.42 'Inter','Inter Fallback',sans-serif;color:#9dabbe}
.lx-card__meta{margin-top:auto;padding-top:7px;display:flex;flex-wrap:wrap;gap:5px 9px;
  font:700 10px/1 'Inter','Inter Fallback',sans-serif;letter-spacing:.03em;color:#7f8ca1}
.lx-card__meta span::before{content:"";display:inline-block;width:3px;height:3px;border-radius:50%;
  background:#4c5766;margin-right:6px;vertical-align:middle}
.lx-card__meta span:first-child::before{display:none}

/* the gold badge — ONE per tier, and it says what it means */
.lx-card--rec{border-color:rgba(240,192,74,.42)}
.lx-card--rec:hover,.lx-card--rec:focus-visible{border-color:rgba(240,192,74,.75);
  box-shadow:0 18px 34px -22px rgba(0,0,0,.9),0 0 26px -13px rgba(240,192,74,.55)}
.lx-rec{position:absolute;top:9px;left:10px;z-index:2;display:inline-flex;align-items:center;gap:4px;
  padding:3.5px 8px 3.5px 6px;border-radius:var(--radius-pill);background:var(--mgold);
  border:1px solid rgba(120,84,10,.5);font:800 11px/1 'Inter','Inter Fallback',sans-serif;
  letter-spacing:.04em;text-transform:uppercase;color:#3a2a05;white-space:nowrap;
  box-shadow:0 3px 9px -3px rgba(0,0,0,.6),inset 0 1px 0 rgba(255,255,255,.55)}
.lx-rec svg{width:10px;height:10px;fill:#3a2a05;flex:none}
.lx-chip{position:absolute;top:9px;right:10px;z-index:2;padding:3.5px 8px;
  border-radius:var(--radius-pill);background:rgba(7,10,16,.78);border:1px solid var(--line-2);
  font:700 10px/1 'Inter','Inter Fallback',sans-serif;letter-spacing:.04em;
  text-transform:uppercase;color:#c3ccd9;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}

/* ---------- sibling / tier chips ---------- */
.lx-chips{display:grid;grid-template-columns:repeat(2,1fr);gap:9px;list-style:none;margin:0;padding:0}
@media (min-width:560px){.lx-chips{grid-template-columns:repeat(3,1fr);gap:11px}}
@media (min-width:900px){.lx-chips{grid-template-columns:repeat(4,1fr);gap:12px}}
.lx-chip2{display:flex;flex-direction:column;gap:4px;min-height:74px;padding:11px;
  border-radius:12px;text-decoration:none;border:1px solid var(--line);
  background:linear-gradient(180deg,rgba(255,255,255,.055),rgba(255,255,255,.02));
  transition:transform .24s var(--ease),border-color .24s,background .24s}
.lx-chip2:hover,.lx-chip2:focus-visible{transform:translateY(-3px);border-color:var(--accent-line);
  background:linear-gradient(180deg,rgba(75,221,100,.09),rgba(255,255,255,.02))}
.lx-chip2 b{font:900 14px/1.1 'Barlow Condensed','BC Fallback',sans-serif;text-transform:uppercase;
  letter-spacing:.014em;color:#fff}
@media (min-width:560px){.lx-chip2 b{font-size:16px}}
.lx-chip2 em{font-style:normal;font:700 10px/1 'Inter','Inter Fallback',sans-serif;color:#7f8ca1;
  letter-spacing:.02em}
.lx-chip2[aria-current]{border-color:var(--accent-line);
  background:linear-gradient(180deg,rgba(75,221,100,.12),rgba(255,255,255,.02))}

/* ---------- disclosure (no JS: CSP script-src is hashed and enforcing) ---------- */
.lx-more{margin:16px 0 0;border:1px solid var(--edge);border-radius:12px;background:var(--plate)}
.lx-more>summary{cursor:pointer;list-style:none;padding:13px 15px;
  font:800 12.5px/1.3 'Inter','Inter Fallback',sans-serif;color:#dfe5ee;
  display:flex;align-items:center;justify-content:space-between;gap:10px}
.lx-more>summary::-webkit-details-marker{display:none}
.lx-more>summary::after{content:"+";font:900 19px/1 'Barlow Condensed','BC Fallback',sans-serif;
  color:var(--accent);flex:none}
.lx-more[open]>summary::after{content:"\2212"}
.lx-more>summary:focus-visible{outline:2px solid var(--accent);outline-offset:-3px;border-radius:12px}
.lx-more__bd{padding:0 15px 15px}

/* ---------- closing CTA ---------- */
.lx-cta{margin:36px 0 0;padding:24px 16px;border:1px solid var(--edge);
  border-radius:var(--radius-lg);text-align:center;
  background:linear-gradient(180deg,#0e131e,#0b0f18)}
@media (min-width:560px){.lx-cta{padding:34px 30px;margin-top:52px}}
.lx-cta h2{margin:0;font:900 24px/1.06 'Barlow Condensed','BC Fallback',sans-serif;
  text-transform:uppercase;color:#fff}
@media (min-width:560px){.lx-cta h2{font-size:32px}}
.lx-cta p{margin:9px auto 0;max-width:54ch;font:400 14px/1.6 'Inter','Inter Fallback',sans-serif;
  color:var(--ink-2)}
.lx-cta .btn{margin-top:16px}
.lx-note{margin:26px 0 0;font:400 12px/1.55 'Inter','Inter Fallback',sans-serif;color:#6f7b8c;
  max-width:70ch}

@media (prefers-reduced-motion:reduce){
  .lx-card,.lx-card__ph img,.lx-chip2{transition:none}
  .lx-card:hover .lx-card__ph img{transform:none}
}