/* ============================================================================
   EASTON · Program-hub redesign (BJJ reference design, 2026-07-04) — the small
   CSS remainder inline styles can't express (media-query-responsive grids + the
   Every-Level ladder + the FAQ accordion + the where-to-train mobile card). Loads
   ALONGSIDE location-hero.css (which supplies the full-bleed `.eb-loc-band`/
   `.eb-loc-hero` breakout, the card grids, and the press hooks the hub reuses).
   Every rule is scoped under a `.eb-hub*` class so it can never leak into the rest
   of the GeneratePress page; the section markup is otherwise 100% inline-styled.
   ============================================================================ */

/* — §1 HERO — photo fills the entire left column FLUSH (no padding after the
     header, left of the image, or above the trust bar); copy | on the right.
     Mobile: copy first, then the full-width image below. --------------------- */
.eb-hub-hero__grid { align-items: stretch; }
.eb-hub-hero__copy  { order: 2; }

/* The media cell is HALF of a full-bleed grid, so its width tracks the viewport —
   but its inline `min-height:460px` never did, and the hero masters are SQUARE. A
   square photo poured into a box that widens without growing taller loses more of
   its own height at every step: 63.9% of the photo visible at 1440, 60.8% at 1512,
   54.8% at 1680, 47.9% at 1920, 35.9% at 2560 (measured on staging 2026-08-12).
   At 1920 that beheaded the standing fighter on /muay-thai/. Constrain the ASPECT
   instead of the height and the crop is identical at 1440 and at 2560 — 3:2 holds
   66.7% of the photo's height at every width. The inline `min-height:460px` stays
   as the floor (the hero is never shorter than it is today); `max-height` is the
   only concession to very wide displays and sits deliberately ABOVE the 2560
   acceptance width (1280 × 2/3 = 853px), so the crop cannot tighten anywhere in
   the tested range. `width:100%` is LOAD-BEARING, not decoration: an aspect-ratio
   box whose height gets clamped by max-height stops taking the stretch fit in the
   inline axis too, and at 3440 the media shrank to 1290px (860 × 3/2) and opened a
   430px band of bare canvas beside the photo. Pinning the width makes the clamp do
   the only thing it should — crop a little more — instead of resizing the column.
   3:2 is the DEFAULT, not the law: `--eb-hero-ar` carries the registry's optional
   `hero_aspect` (see easton_hub_hero()) for heroes whose subject fills the frame
   top-to-bottom. /muay-thai/ is a full-body standing shot and gets its square back. */
.eb-hub-hero__media { order: 1; width: 100%; aspect-ratio: var(--eb-hero-ar, 3 / 2); max-height: 860px; }

@media (max-width: 900px) {
  .eb-hub-hero__grid { grid-template-columns: 1fr !important; }
  /* Stacked, the media spans the FULL viewport, where an aspect would tower (768px
     wide → 512px tall). The stacked hero is correct as shipped — hand it straight
     back to the flat 300px floor. */
  .eb-hub-hero__media { order: 2; min-height: 300px !important; aspect-ratio: auto; max-height: none; }
  .eb-hub-hero__copy  { order: 1; padding: 30px 22px 28px !important; }
}

/* — §2 WHAT-IS — image | prose on desktop; image then prose stacked --------- */
.eb-hub-explain { display: grid; grid-template-columns: 0.92fr 1.08fr; gap: 60px; align-items: center; }
@media (max-width: 900px) {
  .eb-hub-explain { grid-template-columns: 1fr; gap: 28px; }
  .eb-hub-explain__media { min-height: 300px !important; }
}

/* — §3 EVERY LEVEL — the progression ladder (net-new) ----------------------- */
/* The staircase escapes the grid: the row is sized from the cards' CONTENT, then
   `.eb-hub-tier{height:100%}` restretches each card to that full row height WITHOUT
   accounting for its own margin-top, so an offset card hangs `margin` px past the
   container and paints over the closing paragraph. Reserve the tallest card's rise
   here. PHP emits `--eb-hub-rise` (the same value the cards' margins come from) on
   the ladder; a hub with no staircase never sets it and the fallback keeps this a
   no-op. Dropping `height:100%` would also stop the overflow — and would leave the
   cards ragged, which is a design change, so it stays. */
.eb-hub-ladder { padding-bottom: var(--eb-hub-rise, 0px); }
.eb-hub-ladder__grid { display: grid; gap: 26px; align-items: start; }
.eb-hub-ladder__grid[data-count="3"] { grid-template-columns: repeat(3, 1fr); }
.eb-hub-ladder__grid[data-count="2"] { grid-template-columns: repeat(2, 1fr); max-width: 820px; }
.eb-hub-ladder__grid[data-count="1"] { grid-template-columns: minmax(0, 440px); }
.eb-hub-tier { height: 100%; }

/* The rising dashed connector is a desktop-only flourish behind the stepped cards. */
@media (max-width: 1024px) {
  .eb-hub-ladder__line { display: none; }
  .eb-hub-ladder__grid[data-count="3"] { grid-template-columns: repeat(2, 1fr); }
  /* Stepped offsets read as misalignment once the row wraps — flatten them. */
  .eb-hub-tier { margin-top: 0 !important; }
  /* …and with no staircase there is nothing to reserve. */
  .eb-hub-ladder { padding-bottom: 0; }
}
@media (max-width: 680px) {
  .eb-hub-ladder__grid,
  .eb-hub-ladder__grid[data-count="1"],
  .eb-hub-ladder__grid[data-count="2"],
  .eb-hub-ladder__grid[data-count="3"] { grid-template-columns: 1fr; max-width: none; }
  .eb-hub-tier { margin-top: 0 !important; }
  /* Lead with the highlighted "start here" tier on mobile. */
  .eb-hub-tier--start { order: -1; }
}
.eb-hub-note a { color: #f04137; font-weight: 600; text-decoration: none; }
.eb-hub-note a:hover { text-decoration: underline; }

/* — §3 "YOUR TRACK" belt-bar variant (BJJ + any hub with a `track`) — cards sit
     LEVEL (no dashed line), a rank row on each card, then the overlap strip. ---- */
.eb-hub-ladder__grid--level { align-items: stretch; }
/* Pin each card's rank row to the bottom so the belts align across the row. */
.eb-hub-ladder__grid--level .eb-hub-tier__ranks { margin-top: auto; }

/* The head's right-aligned "White belt → Black belt" line drops under the title
   on narrow screens (flex-wrap) — keep it left-aligned there. */
@media (max-width: 620px) { .eb-hub-track__label { padding-bottom: 0 !important; } }

/* The overlap strip: fixed heights the inline flex can't carry responsively. */
.eb-hub-strip__bracket { height: 34px; }
.eb-hub-strip__bar { height: 26px; }
@media (max-width: 768px) {
  /* Design's mobile build = the compact strip WITHOUT the range brackets. */
  .eb-hub-strip__brackets { display: none; }
  .eb-hub-strip__bar { height: 20px; }
  .eb-hub-strip__labels span { font-size: 9.5px !important; letter-spacing: 0.12em !important; }
}

/* — §3b PARENT-PATH CARD ("For Parents") — image | copy; stacks on mobile ------ */
.eb-hub-parent { display: grid; grid-template-columns: 0.82fr 1.18fr; align-items: stretch; }
.eb-hub-parent__cta { transition: background .16s ease, color .16s ease; }
.eb-hub-parent__cta:hover { background: #0d0d0c; color: #fff !important; }
.eb-hub-parent__cta:hover span { color: #fff !important; }
.eb-hub-parent__cta:focus-visible { outline: 3px solid #f04137; outline-offset: 3px; }
@media (max-width: 820px) {
  .eb-hub-parent { grid-template-columns: 1fr; }
  .eb-hub-parent__media { min-height: 240px !important; }
  .eb-hub-parent__body { padding: 30px 24px 34px !important; }
}

/* — §4 WHY EASTON — 2-col prose on ink -------------------------------------- */
@media (max-width: 768px) {
  .eb-hub-why__grid { grid-template-columns: 1fr !important; gap: 20px !important; }
}

/* — §5 WHERE TO TRAIN — OUR location photo cards (desktop) / export card (mobile).
     Desktop + tablet reuse `.eb-loc-cards` from location-hero.css verbatim; these
     rules add the count-driven widths and the OVERRIDE #2 mobile horizontal card. */
@media (min-width: 769px) {
  .eb-hub-where[data-count="1"] { grid-template-columns: minmax(0, 440px); }
  .eb-hub-where[data-count="2"] { grid-template-columns: repeat(2, 1fr); max-width: 820px; }
}
/* The in-body rating row exists on the hub cards but stays hidden on desktop —
   there the rating rides the photo overlay (approved location treatment). */
.eb-loc-card__rbody { display: none; align-items: center; gap: 8px; margin-top: 2px; }
@media (max-width: 768px) {
  /* Match the export's mobile card: photo LEFT (fixed), body RIGHT. */
  .eb-hub-where { gap: 14px !important; }
  .eb-hub-where__card { display: grid !important; grid-template-columns: 128px 1fr; align-items: stretch; }
  .eb-hub-where__card > span:first-child { height: auto !important; min-height: 118px; }
  .eb-hub-where__card > span:last-child { padding: 14px 16px !important; gap: 5px !important; }
  /* The narrow thumbnail can't hold the star overlay, and the address is dropped —
     the rating moves into the body under the city name (Ignacio, 2026-07-04). */
  .eb-hub-where__card .eb-loc-card__rphoto { display: none !important; }
  .eb-hub-where__card .eb-loc-card__addr { display: none !important; }
  .eb-hub-where__card .eb-loc-card__rbody { display: inline-flex; }
}
@media (max-width: 380px) {
  .eb-hub-where__card { grid-template-columns: 104px 1fr; }
}

/* — §7 FAQ — sticky head | accordion; net-new accordion styling ------------- */
.eb-hub-faq { display: grid; grid-template-columns: 0.8fr 1.2fr; gap: 64px; align-items: start; }
.eb-hub-faq__head { position: sticky; top: 96px; }
.eb-hub-faq__item { border-top: 1px solid rgba(13,13,12,0.12); }
.eb-hub-faq__list > .eb-hub-faq__item:last-child { border-bottom: 0; }
.eb-hub-faq__q {
  display: flex; align-items: center; gap: 14px; padding: 22px 4px;
  cursor: pointer; list-style: none; outline: none;
}
.eb-hub-faq__q::-webkit-details-marker { display: none; }
.eb-hub-faq__q::marker { content: ""; }
.eb-hub-faq__qt { flex: 1 1 auto; }
.eb-hub-faq__mark { display: inline-flex; flex: 0 0 auto; transition: transform .2s ease; }
.eb-hub-faq__item[open] .eb-hub-faq__mark { transform: rotate(45deg); }
.eb-hub-faq__sign { flex: 0 0 auto; width: 22px; text-align: center; line-height: 1; }
.eb-hub-faq__sign::before {
  content: "+"; font-family: 'Oswald', sans-serif; font-weight: 500; font-size: 22px;
  color: rgba(13,13,12,0.45); transition: color .15s ease;
}
.eb-hub-faq__item[open] .eb-hub-faq__sign::before { content: "\2212"; color: #f04137; }
.eb-hub-faq__item[open] .eb-hub-faq__qt { color: #0d0d0c; }
.eb-hub-faq__q:focus-visible { outline: 3px solid #f04137; outline-offset: 3px; border-radius: 3px; }
.eb-hub-faq__a a { color: #f04137; font-weight: 600; text-decoration: none; }
.eb-hub-faq__a a:hover { text-decoration: underline; }
@media (max-width: 900px) {
  .eb-hub-faq { grid-template-columns: 1fr; gap: 28px; }
  .eb-hub-faq__head { position: static; }
}

/* — §8 CLOSING — headline | card on the red band --------------------------- */
.eb-hub-steps { margin: 0; padding: 0; list-style: none; counter-reset: eb-step; display: flex; flex-direction: column; gap: 12px; }
.eb-hub-steps li {
  counter-increment: eb-step; position: relative; padding-left: 34px;
  font-family: 'Barlow', sans-serif; font-size: 15px; line-height: 1.5; color: rgba(13,13,12,0.72);
}
.eb-hub-steps li::before {
  content: counter(eb-step, decimal-leading-zero); position: absolute; left: 0; top: 1px;
  font-family: 'Oswald', sans-serif; font-weight: 700; font-size: 12px; letter-spacing: 0.06em; color: #f04137;
}
@media (max-width: 860px) {
  .eb-hub-closing__grid { grid-template-columns: 1fr !important; gap: 28px !important; }
}

/* — Consecutive band spacing on mobile — tighten the generous desktop pads --- */
@media (max-width: 768px) {
  .eb-hub-page .eb-loc-band__inner { padding-top: 64px !important; padding-bottom: 64px !important; }
}

/* — §5b WOMEN'S CLASS TIMES — one card per academy that actually runs the class.
     The count is DERIVED (inc/womens.php), so the grid has to look composed at any
     n from 1 to 9 rather than at one fixed number: auto-fit + a min track gives a
     single wide card at n=1 and wraps cleanly as academies come and go, with no
     per-count rule to keep in sync with the data. -------------------------------- */
.eb-womens-grid { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
@media (max-width: 700px) {
  .eb-womens-grid { grid-template-columns: 1fr; }
}
.eb-womens-card a:hover { text-decoration: underline; }
/* The dated archive's two columns collapse where 130px of date + a title stop fitting. */
@media (max-width: 560px) {
  .eb-womens-events li { grid-template-columns: 1fr !important; gap: 4px !important; }
}
/* — §5c THE COMMUNITY — the events band borrows §2's media column (see
     easton_womens_events_media()), but not §2's flat 300px stacked floor. Its
     photograph is a sixty-woman group frame at exactly 3:2, and the floor would
     square it up on a phone and crop ~23% of the room out of the picture. Release
     the floor HERE ONLY and the inline `aspect-ratio: 3 / 2` holds at every width;
     every other .eb-hub-explain__media on the site keeps the 300px floor. --------- */
@media (max-width: 900px) {
  .eb-womens-events .eb-hub-explain__media { min-height: 0 !important; }
}