/* ============================================================================
   EASTON · Per-academy SPOKE page (/[city]/[program]/) — the small CSS remainder
   the inline styles can't express (media-query-responsive grids), layered on top
   of assets/css/location-hero.css.

   The spoke composes the LOCATION design system: the `.eb-loc-band` full-bleed
   boundary + scoped reset, `easton_loc_band_wrap()` / `easton_loc_band_head()`,
   the `eb_trust()` bar, the location card shell, and the `.easton-loc-page` body
   class that neutralises the GeneratePress content chrome. Everything here is a
   SPOKE-ONLY grid; nothing overrides a location/hub/homepage rule, and every
   selector is scoped under `.eb-loc-band` so it cannot leak into GeneratePress
   chrome. This sheet loads on spoke pages only (easton_spoke_assets()).
   ============================================================================ */

/* — Program intro: editorial split (band head LEFT / prose RIGHT) ----------- */
.eb-loc-band .eb-spoke-split {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: 56px;
  align-items: start;
}

/* MEDIA VARIANT (2026-08-07) — copy column + photo column, centred against each
   other, the same idiom as the location page's "About Easton [City]" section. Only
   applies to a spoke that has a programmatic photo; the plain split above is
   untouched for the rest. `align-items: center` is what keeps a tall portrait from
   dragging a short copy column to the top of a 675px void. */
.eb-loc-band .eb-spoke-split--media {
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: 56px;
  align-items: center;
}
.eb-loc-band .eb-spoke-split--media .eb-spoke-split__copy {
  display: flex;
  flex-direction: column;
  gap: 26px;
}

/* — Your First Class: three EQUAL-HEIGHT paper cards ------------------------ */
.eb-loc-band .eb-spoke-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  align-items: stretch;
  margin-top: 8px;
}
/* COUNT-DRIVEN (2026-08-10, the city umbrella). The discipline spokes emit this
   grid with NO data-count and are therefore untouched by every rule below; the
   umbrella reuses the same card at 2 (age groups) and 6 (beyond class). At 2 the
   row is capped so two cards do not sprawl to 550px each; 4–6 wrap 3-up. */
.eb-loc-band .eb-spoke-cards[data-count="1"] { grid-template-columns: minmax(0, 520px); }
.eb-loc-band .eb-spoke-cards[data-count="2"] { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 840px; }
.eb-loc-band .eb-spoke-cards[data-count="4"],
.eb-loc-band .eb-spoke-cards[data-count="5"],
.eb-loc-band .eb-spoke-cards[data-count="6"] { grid-template-columns: repeat(3, minmax(0, 1fr)); }

/* — Meet the Coaches: count-driven. A single-coach spoke (e.g. Denver BJJ) gets
     ONE full-width horizontal card that fills the band instead of a lonely card
     floating on black; 2+ coaches grid 2-up. The card itself is horizontal at
     every count — a spoke coach carries rank + lineage + years + bio +
     accolades, which towers in the location page's vertical 4:5 card. --------- */
.eb-loc-band .eb-spoke-coaches {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
  align-items: stretch;
  margin-top: 8px;
}
.eb-loc-band .eb-spoke-coaches[data-count="1"] { grid-template-columns: minmax(0, 1fr); }

.eb-loc-band .eb-spoke-coach {
  display: grid;
  grid-template-columns: minmax(0, 0.5fr) minmax(0, 1fr);
  align-items: stretch;
}
/* At n=1 the card spans the full 1200 container, so the media slot takes a fixed
   portrait width rather than half the row. */
.eb-loc-band .eb-spoke-coaches[data-count="1"] .eb-spoke-coach { grid-template-columns: 260px minmax(0, 1fr); }
/* The media cell is absolute-filled, so it has no intrinsic height: the grid row
   stretches it to the (taller) body column, and min-height keeps a real slot on a
   short card. NO aspect-ratio here — with a stretched height it would resolve the
   WIDTH from the height and blow past its own grid track. */
.eb-loc-band .eb-spoke-coach__media { min-height: 260px; overflow: hidden; }
/* At n=1 the body column is ~940px — cap the prose measure so the bio does not
   run the full band width (the site's constrained-measure rule). */
.eb-loc-band .eb-spoke-coaches[data-count="1"] .eb-spoke-coach__body > * { max-width: 68ch; }

/* — Gallery: "On the mats at Easton [City]" (2026-08-07 media population) ----
     A plain 4-up grid of this academy's remaining programmatic photographs. Each
     tile owns its 4:3 box inline (so it is CLS-safe without this sheet); all this
     grid does is the column count, which only a media query can express.
     Count-driven so a thin set never stretches into a lonely row of giants: 1–3
     photos share the row width they'd have at 4-up rather than filling it. ----- */
.eb-loc-band .eb-spoke-gallery {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-top: 8px;
}
.eb-loc-band .eb-spoke-gallery[data-count="1"] { grid-template-columns: minmax(0, 560px); }
.eb-loc-band .eb-spoke-gallery[data-count="2"] { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 840px; }
.eb-loc-band .eb-spoke-gallery[data-count="3"] { grid-template-columns: repeat(3, minmax(0, 1fr)); }

/* — First-class cards: the photo band sits flush at the card top. The card is a
     column (media, then body) and the body takes the remaining height, so a 2- or
     3-card row still bottoms out level. ------------------------------------- */
.eb-loc-band .eb-spoke-card__media { flex: 0 0 auto; }

/* — Proof photo strip: inside the 1200 container under the stories, tiles at the
     SAME 4:3 the gallery uses (each tile owns that inline). Deliberately not the
     hub's full-bleed strip — that lands five tiles near square, but the two or
     three a spoke has left over would stretch to 2.4:1. Only renders at 2+. ---- */
.eb-loc-band .eb-spoke-proof-band {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  margin-top: 44px;
}
.eb-loc-band .eb-spoke-proof-band[data-count="2"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }

/* — Proof: consented student stories ---------------------------------------- */
.eb-loc-band .eb-spoke-stories {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  align-items: stretch;
  margin-top: 8px;
}
.eb-loc-band .eb-spoke-stories[data-count="1"] { grid-template-columns: minmax(0, 520px); }
.eb-loc-band .eb-spoke-stories[data-count="2"] { grid-template-columns: repeat(2, 1fr); max-width: 800px; }

/* — Closing trial CTA. `.easton-trial-slot` is the shared integration-point hook
     (the hub uses it too) and carries a dashed-outline "reserved slot" treatment
     from theme.css that predates this band system — a dashed box floating on the
     canvas band. Neutralise the legacy chrome HERE (spoke-scoped) rather than
     editing theme.css, so the hub's own slot is untouched. ------------------- */
.eb-loc-band .easton-trial-slot {
  border: 0;
  border-radius: 0;
  padding: 0;
  background: none;
}

/* — Tablet ------------------------------------------------------------------ */
@media (max-width: 1024px) {
  .eb-loc-band .eb-spoke-split,
  .eb-loc-band .eb-spoke-split--media { grid-template-columns: 1fr; gap: 28px; }
  .eb-loc-band .eb-spoke-cards,
  .eb-loc-band .eb-spoke-cards[data-count="2"],
  .eb-loc-band .eb-spoke-cards[data-count="4"],
  .eb-loc-band .eb-spoke-cards[data-count="5"],
  .eb-loc-band .eb-spoke-cards[data-count="6"] { grid-template-columns: repeat(2, 1fr); max-width: none; }
  .eb-loc-band .eb-spoke-coaches { grid-template-columns: minmax(0, 1fr); }
  .eb-loc-band .eb-spoke-stories,
  .eb-loc-band .eb-spoke-stories[data-count="2"] { grid-template-columns: repeat(2, 1fr); max-width: none; }
  /* Stacked split: the intro photo would otherwise run the full 1200 container as
     one enormous image above the prose — cap it to a readable block. */
  .eb-loc-band .eb-spoke-intro-photo { max-width: 560px; }
  .eb-loc-band .eb-spoke-gallery,
  .eb-loc-band .eb-spoke-gallery[data-count="3"] { grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: none; }
}

/* — Mobile ------------------------------------------------------------------ */
@media (max-width: 768px) {
  .eb-loc-band .eb-spoke-cards,
  .eb-loc-band .eb-spoke-cards[data-count="1"],
  .eb-loc-band .eb-spoke-cards[data-count="2"],
  .eb-loc-band .eb-spoke-cards[data-count="4"],
  .eb-loc-band .eb-spoke-cards[data-count="5"],
  .eb-loc-band .eb-spoke-cards[data-count="6"],
  .eb-loc-band .eb-spoke-stories,
  .eb-loc-band .eb-spoke-stories[data-count="1"],
  .eb-loc-band .eb-spoke-stories[data-count="2"] { grid-template-columns: 1fr; max-width: none; }
  /* The coach card stacks: photo slot on top (a landscape band, so the portrait
     frame does not tower on a narrow viewport), credentials + bio below. */
  .eb-loc-band .eb-spoke-coach,
  .eb-loc-band .eb-spoke-coaches[data-count="1"] .eb-spoke-coach { grid-template-columns: 1fr; }
  .eb-loc-band .eb-spoke-coach__media { aspect-ratio: 16 / 9; min-height: 0; }
  /* The numbered trial steps keep their chip alignment at a narrow measure. */
  .eb-loc-band .eb-spoke-steps { gap: 16px; }
  /* Gallery goes 2-up on a phone (not 1-up): at 390 that is a ~166px tile, which
     is exactly what the 480w derivative is for, and it keeps the band a band
     rather than a column of eight full-width photographs to scroll past. */
  .eb-loc-band .eb-spoke-gallery,
  .eb-loc-band .eb-spoke-gallery[data-count="1"],
  .eb-loc-band .eb-spoke-gallery[data-count="2"],
  .eb-loc-band .eb-spoke-gallery[data-count="3"] { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; max-width: none; }
  .eb-loc-band .eb-spoke-gallery[data-count="1"] { grid-template-columns: minmax(0, 1fr); }
  .eb-loc-band .eb-spoke-intro-photo { max-width: none; }
  .eb-loc-band .eb-spoke-proof-band,
  .eb-loc-band .eb-spoke-proof-band[data-count="2"] { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
}

/* The spoke coach card carries no href since Execution Brief 2026-09-09 §4.6, so it
   renders as a <div>: no pointer, no tab stop. The shared `.eb-loc-band .ebh-card:hover`
   LIFT is a :hover rule and cannot be inlined away on a band that is otherwise 100%
   inline-styled, and a card that rises under the cursor and then does nothing is a
   false affordance — same treatment, same reason, as `.eb-loc-coach--static`. */
.eb-loc-band .eb-spoke-coach--static:hover {
  transform: none;
  box-shadow: 0 1px 0 rgba(13,13,12,0.06), 0 24px 48px -38px rgba(13,13,12,0.5);
}