/* ============================================================
   THE CLUB — Equipment Guides
   Loaded only by the pages under /equipment/ (same arrangement as
   css/landing.css, which only the winter landing page loads).
   Everything here is prefixed .eq- so it cannot collide with
   css/styles.css, whose tokens, buttons and cards it builds on.

   These pages are opened on a phone, standing in front of a machine.
   So: the video comes first, the text is big, and the tap targets are
   generous. Nothing animates.
   ============================================================ */

/* ---------- Shared narrow column ---------- */
/* Reading width. The machine pages are one column of text under a video. */
.eq-narrow { width: min(760px, 100% - 2.5rem); }

/* ---------- Machine page: head ---------- */
/* Tight top padding on purpose — the video should be visible without scrolling. */
.eq-top { padding-top: clamp(1.4rem, 4vw, 2.4rem); }

.eq-crumb {
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 1.1rem;
}
.eq-crumb a { color: var(--muted); }
.eq-crumb a:hover { color: var(--red); }
.eq-crumb .sep { margin: 0 0.45rem; color: var(--red); }
.eq-crumb .here { color: var(--ink); }

/* Category label — same pill as the Members Corner cards use */
.eq-cat {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--red-dark);
  background: var(--red-tint);
  padding: 0.3rem 0.75rem;
  border-radius: 999px;
  margin-bottom: 0.8rem;
}

/* Smaller than a normal h1: this page is a tool, and the video matters more. */
.eq-title { font-size: clamp(1.75rem, 4.2vw, 2.5rem); margin-bottom: 0.5rem; }
.eq-sub { color: var(--muted); font-size: 1.02rem; }

/* ---------- One block per exercise ---------- */
/* The head section and the first exercise's video belong together visually -
   the video should be on screen without scrolling. Later exercises follow a
   soft section, so they get their own breathing room instead. */
.eq-top { padding-bottom: 0; }
.eq-exercise { padding-top: 1.4rem; }
.section--soft + .eq-exercise { padding-top: clamp(2.25rem, 5vw, 3.25rem); }
/* An exercise on its own tinted band is a new chapter, not a continuation */
.eq-exercise.section--soft { padding-top: clamp(2.25rem, 5vw, 3.25rem); }

/* With the written steps switched off, the page is a heading and a portrait
   player and little else. On a wide screen a left-aligned heading sitting
   above a centred player reads as a mistake, so the whole column centres -
   matching the "Still have questions?" block at the foot of the page. Phones
   keep their text left, where the player is nearly full width anyway and
   centred body text is harder to read. */
@media (min-width: 641px) {
  .eq-centered { text-align: center; }
}

/* A combination machine: say so, and link straight to each exercise. Someone
   who scanned the code at the row end shouldn't have to scroll past the
   pulldown to find what they came for. */
.eq-combo {
  margin-top: 1.1rem;
  font-size: 0.94rem;
  color: var(--muted);
}
.eq-combo a { font-weight: 600; }
.eq-combo .sep { margin: 0 0.4rem; color: var(--muted); }

.eq-ex-head { margin-bottom: 1.1rem; }
.eq-ex-num {
  display: block;
  font-family: var(--font-serif);
  font-style: italic;
  color: var(--red);
  font-size: 1rem;
  margin-bottom: 0.15rem;
}
.eq-ex-name { font-size: clamp(1.4rem, 3vw, 1.8rem); }
/* No scroll-margin-top here: css/styles.css already sets scroll-padding-top on
   <html> to clear the sticky header, and the two would add up. */

/* ---------- Machine page: video ---------- */
/* These demos are filmed as YouTube Shorts: vertical, 9:16. Nearly everyone
   watching arrived by scanning a sticker, so they are holding a phone upright.
   A portrait video in a 16:9 box is a sliver between two black bars, so the
   box is portrait too and the picture fills it.

   .video-embed sets its 16:9 shape with padding-top: 56.25%, a percentage of
   the CONTAINER's width rather than the box's own, which breaks as soon as the
   box is not exactly container-width. aspect-ratio measures the box itself, so
   it holds at any size; padding-top is switched off wherever it is supported.

   The width is what drives the height. Three caps, smallest wins:

     100%                  never wider than the column it sits in
     (100vh - 235px)*9/16  the whole player, play button and all, is on screen
                           the moment the page opens. 235px is what the
                           breadcrumb, heading and subtitle measure above it;
                           the rest of the screen is the player's. Sizing off
                           a flat fraction of the viewport instead would
                           overflow a short phone, because the bit above does
                           not shrink with the screen but the player would.
     360px                 so it stays phone-shaped on a desktop monitor
                           instead of towering down the page */
.eq-video {
  margin: 0 auto 0.2rem;
  width: min(100%, calc((100vh - 235px) * 0.5625), 360px);
  aspect-ratio: 9 / 16;
  min-height: 220px;   /* never collapses to nothing if aspect-ratio is unsupported */
}

/* A combination machine has two more lines up there - the jump links and the
   exercise heading - so it has that much less room for the player. */
.eq-video--combo { width: min(100%, calc((100vh - 340px) * 0.5625), 360px); }

/* On iOS, 100vh is the height with the address bar HIDDEN, so a player sized
   by it is taller than the screen really is when the page first opens. svh is
   the height with the browser's chrome showing, which is what "fits without
   scrolling" actually means. */
@supports (height: 100svh) {
  .eq-video { width: min(100%, calc((100svh - 235px) * 0.5625), 360px); }
  .eq-video--combo { width: min(100%, calc((100svh - 340px) * 0.5625), 360px); }
}

/* For a normally-filmed landscape video. Set "videoShape": "wide" on the
   machine (or on one exercise) in data/equipment.json. */
.eq-video--wide {
  width: 100%;
  aspect-ratio: 16 / 9;
  min-height: 0;
}

@supports (aspect-ratio: 9 / 16) {
  .eq-video { padding-top: 0; }
}

/* Phone turned sideways. vh is now tiny, so 34vh would shrink a portrait
   player to a postage stamp. Size it off the width instead and let the page
   scroll - someone watching a vertical video will turn the phone back up. */
@media (orientation: landscape) and (max-height: 500px) {
  .eq-video { width: min(100%, 230px); }
}

/* Click-to-load. The poster is this gradient, not a YouTube thumbnail, so the
   page asks YouTube for nothing at all until the member presses play. */
.eq-video-start {
  width: 100%;
  border: 0;
  cursor: pointer;
  font-family: inherit;
  text-align: center;
}
.eq-video-start:hover .play { background: var(--red-dark); transform: scale(1.04); }
.eq-video-start .play { transition: background-color 0.2s ease, transform 0.2s ease; }
.eq-video-start:focus-visible {
  outline: 3px solid #fff;
  outline-offset: -6px;
}
.eq-video-note {
  font-size: 0.78rem;
  color: rgba(255, 255, 255, 0.72);
  letter-spacing: 0.01em;
  max-width: 24rem;
  line-height: 1.5;
}

/* No video filmed yet. A tidy panel, never a broken player. */
.eq-video-soon { gap: 0.75rem; }
.eq-soon-icon {
  width: 56px; height: 56px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.22);
  display: grid;
  place-items: center;
  color: rgba(255, 255, 255, 0.85);
}
.eq-soon-icon svg { width: 24px; height: 24px; }
.eq-soon-sub {
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.72);
  max-width: 26rem;
  line-height: 1.55;
}

/* ---------- Machine page: written steps ---------- */
.eq-block + .eq-block { margin-top: 2.2rem; }
.eq-h2 {
  font-size: clamp(1.25rem, 2.6vw, 1.5rem);
  margin-bottom: 1rem;
  padding-bottom: 0.6rem;
  border-bottom: 1px solid var(--line);
}

.eq-steps { counter-reset: eqstep; list-style: none; }
.eq-steps li {
  counter-increment: eqstep;
  position: relative;
  padding-left: 3rem;
  min-height: 2rem;
  font-size: 1.02rem;
  color: var(--body);
  line-height: 1.6;
}
.eq-steps li + li { margin-top: 1rem; }
.eq-steps li::before {
  content: counter(eqstep);
  position: absolute;
  left: 0;
  top: 0.05rem;
  width: 2rem; height: 2rem;
  border-radius: 50%;
  background: var(--red);
  color: #fff;
  font-size: 0.9rem;
  font-weight: 700;
  display: grid;
  place-items: center;
}

/* ---------- Machine page: tip ---------- */
.eq-tip {
  margin-top: 2.2rem;
  background: var(--white);
  border: 1px solid var(--line);
  border-left: 4px solid var(--red);
  border-radius: var(--radius-sm);
  padding: 1.2rem 1.4rem;
  box-shadow: var(--shadow-sm);
}
.eq-tip-label {
  display: block;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--red-dark);
  margin-bottom: 0.4rem;
}
.eq-tip p { font-size: 0.98rem; color: var(--body); }

/* ---------- Machine page: help + next ---------- */
.eq-help { text-align: center; margin-bottom: 2rem; }
.eq-help p { color: var(--muted); font-size: 0.98rem; }
.eq-help .eq-h2 { border-bottom: 0; padding-bottom: 0; }
.eq-help-contact { margin-top: 0.7rem; font-size: 0.92rem; }
/* Padding on an inline link grows the area a thumb has to hit without
   changing the line it sits in. These two get tapped mid-workout. */
.eq-help-contact a { padding: 0.45rem 0.15rem; }
.eq-crumb a { padding: 0.3rem 0; }

.eq-next { display: grid; gap: 0.8rem; max-width: 420px; margin-inline: auto; }

/* ---------- Draft / sample notice ---------- */
/* Deliberately loud. A sample page must never be mistaken for a finished one.
   Same intent as the yellow placeholders on the winter landing page. */
.eq-draft {
  background: #fff8e1;
  border: 1px solid #f0c860;
  border-left: 4px solid #c98a00;
  border-radius: var(--radius-sm);
  padding: 0.9rem 1.1rem;
  margin-bottom: 1.3rem;
  font-size: 0.9rem;
  color: #5c4100;
  line-height: 1.55;
}
.eq-draft strong { color: #5c4100; }
.eq-draft code {
  font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
  font-size: 0.85em;
  background: rgba(201, 138, 0, 0.14);
  padding: 0.05em 0.35em;
  border-radius: 4px;
}

/* ============================================================
   Directory page
   ============================================================ */

/* ---------- Search ---------- */
.eq-search { max-width: 520px; margin: 0 auto clamp(2rem, 4vw, 2.75rem); }
.eq-search-label {
  display: block;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 0.5rem;
}
.eq-search-field { position: relative; display: flex; align-items: center; }
.eq-search-icon {
  position: absolute;
  left: 1rem;
  width: 20px; height: 20px;
  color: var(--muted);
  pointer-events: none;
}
.eq-search input {
  width: 100%;
  font-family: var(--font-sans);
  font-size: 1.02rem;
  color: var(--ink);
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 0.9rem 3rem 0.9rem 3rem;
  min-height: 52px;
  box-shadow: var(--shadow-sm);
  -webkit-appearance: none;
  appearance: none;
}
.eq-search input::placeholder { color: var(--muted); }
.eq-search input:focus-visible {
  outline: 3px solid rgba(217, 22, 28, 0.4);
  outline-offset: 2px;
  border-color: var(--red);
}
/* The browser's own clear button would sit under ours */
.eq-search input::-webkit-search-cancel-button { display: none; }
.eq-search-clear {
  position: absolute;
  right: 0.45rem;
  width: 40px; height: 40px;
  display: grid;
  place-items: center;
  border: 0;
  background: transparent;
  color: var(--muted);
  font-size: 1.6rem;
  line-height: 1;
  cursor: pointer;
  border-radius: var(--radius-sm);
}
.eq-search-clear:hover { color: var(--ink); background: var(--bg-gray); }
.eq-search-clear:focus-visible { outline: 3px solid rgba(217, 22, 28, 0.4); outline-offset: 1px; }
.eq-count { margin-top: 0.55rem; font-size: 0.85rem; color: var(--muted); min-height: 1.3em; }

/* js/equipment.js hides things with the hidden attribute. The browser's own
   [hidden] rule is weaker than the class rules above, so say it again here. */
.eq-search[hidden],
.eq-search-clear[hidden],
.eq-item[hidden],
.eq-group[hidden],
.eq-empty[hidden] { display: none; }

/* ---------- Category groups ---------- */
.eq-group + .eq-group { margin-top: clamp(2rem, 4vw, 2.75rem); }
.eq-group-title {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  font-size: 1.15rem;
  padding-bottom: 0.7rem;
  margin-bottom: 1.1rem;
  border-bottom: 1px solid var(--line);
}
.eq-group-count {
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--muted);
  background: var(--bg-gray);
  border-radius: 999px;
  padding: 0.15rem 0.6rem;
}

/* ---------- Machine cards ---------- */
.eq-list {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
  gap: 0.9rem;
}
.eq-card {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1.05rem 1.2rem;
  min-height: 72px;
  color: var(--ink);
  text-decoration: none;
  height: 100%;
}
.eq-card:hover { text-decoration: none; }
.eq-card:focus-visible { outline: 3px solid rgba(217, 22, 28, 0.4); outline-offset: 2px; }
.eq-card-main { display: flex; flex-direction: column; gap: 0.2rem; min-width: 0; flex: 1; }
.eq-card-name { font-weight: 700; font-size: 1.05rem; color: var(--ink); line-height: 1.3; }
.eq-card-meta {
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
}
.eq-card-go {
  flex-shrink: 0;
  width: 34px; height: 34px;
  border-radius: 50%;
  background: var(--red-tint);
  color: var(--red);
  display: grid;
  place-items: center;
}
.eq-card-go svg { width: 18px; height: 18px; }
.eq-card:hover .eq-card-go { background: var(--red); color: #fff; }

/* ---------- Empty states ---------- */
.eq-empty {
  text-align: center;
  padding: clamp(2.25rem, 6vw, 3.5rem) 1.5rem;
  background: var(--bg-soft);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.eq-empty-icon {
  width: 60px; height: 60px;
  margin: 0 auto 1.1rem;
  border-radius: 50%;
  background: var(--white);
  border: 1px solid var(--line);
  color: var(--muted);
  display: grid;
  place-items: center;
}
.eq-empty-icon svg { width: 26px; height: 26px; }
.eq-empty h2 { font-size: 1.3rem; margin-bottom: 0.6rem; }
.eq-empty p { color: var(--muted); font-size: 0.96rem; max-width: 46ch; margin: 0 auto 1.3rem; }
.eq-empty [data-eq-term] { color: var(--red); }

/* ---------- How it works ---------- */
.eq-how { text-align: left; }
.eq-how .eq-h2 { text-align: center; border-bottom: 0; }
.eq-how-note { margin-top: 1.4rem; font-size: 0.92rem; color: var(--muted); text-align: center; }

/* ============================================================
   Phones
   ============================================================ */
@media (max-width: 640px) {
  .eq-narrow { width: min(760px, 100% - 2rem); }

  /* Everything above the video is working against it on a phone. Someone who
     just scanned the sticker on this machine knows which machine they are
     standing at - they want the play button, not a category label. So the
     category goes (the directory still shows it, and the breadcrumb and
     heading are right there), and what is left is pulled in tight. */
  .eq-top { padding-top: 0.8rem; }
  .eq-cat { display: none; }
  .eq-title { margin-bottom: 0.35rem; }
  .eq-crumb { margin-bottom: 0.7rem; font-size: 0.75rem; }

  /* Same again on a combination machine, which carries two more lines of
     furniture - the jump links and the exercise heading - before its first
     video. Every one of them is between the member and the play button. */
  .eq-combo { margin-top: 0.75rem; font-size: 0.9rem; }
  .eq-ex-head { margin-bottom: 0.75rem; }
  .eq-ex-num { font-size: 0.9rem; }
  /* "Members Corner / Equipment Guides / Chest-Supported Row" wraps to two
     lines on a phone. Drop the first step — both buttons at the foot of the
     page still go there. */
  .eq-crumb .eq-crumb-top, .eq-crumb .eq-crumb-top + .sep { display: none; }
  .eq-sub { font-size: 0.98rem; }
  .eq-exercise { padding-top: 1.1rem; }

  /* Edge-to-edge video on a phone: more picture, less chrome */
  /* A landscape video goes edge to edge on a phone - more picture, less
     chrome. A portrait one is already taller than it is wide and stays in
     the column, so it keeps its rounded corners. */
  .eq-video--wide { border-radius: 0; margin-inline: -1rem; width: calc(100% + 2rem); }

  .eq-steps li { padding-left: 2.7rem; }
  .eq-list { grid-template-columns: 1fr; }
  .eq-card { min-height: 68px; }
  .eq-group-title { font-size: 1.05rem; }
}