/* /muay-thai/ — the experienced-first rebuild (inc/hub-muay-thai.php, Brief 2026-10-11).
   Loaded on that hub only, after program-hub.css. Layout from the design
   (claude.ai/artifact/1LmHumYRDgULgxdrAtD7bb); colour, type and buttons are the site's.
   Every rule is scoped to an .eb-mth-* class. */

/* — Hero: one tree. Photo left, copy right (desktop); eyebrow + H1, the photo, then the
     copy (phone) — the /denver/muay-thai/ layout around the hub's own photo cell. — */
.eb-mth-hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  grid-template-rows: 1fr auto auto 1fr;
  grid-template-areas: "photo ." "photo head" "photo body" "photo .";
}
/* The live photo stays square (registry hero_aspect) and never shorter than that; if the
   copy runs taller, the photo grows with it rather than leaving canvas under it. */
.eb-mth-hero .eb-hub-hero__media { grid-area: photo; align-self: stretch; aspect-ratio: auto; min-height: min(50vw, 860px) !important; max-height: none; }
.eb-mth-hero__head { grid-area: head; padding: 48px 44px 0 60px; max-width: 664px; }
.eb-mth-hero__body { grid-area: body; padding: 22px 44px 48px 60px; max-width: 664px; display: flex; flex-direction: column; gap: 22px; }
/* The path lines: two plain lines in the subhead's type, only the lead-ins bold and dark
   (hero cleanup 2026-10-11 — one visible CTA per hero; the boxes read as buttons). */
.eb-mth-paths { display: flex; flex-direction: column; gap: 8px; max-width: 540px; }
.eb-loc-hero .eb-mth-path { margin: 0; font-family: Barlow, sans-serif; font-size: 18px; line-height: 1.55; color: rgba(13,13,12,0.62); }
.eb-mth-path strong { font-weight: 700; color: #0d0d0c; }
/* The desktop finder's proof row carries its own 28px top margin; the body's gap already spaces it. */
.eb-mth-hero__finder { margin-top: -6px; }

@media (max-width: 1100px) {
  .eb-mth-hero__head { padding: 44px 36px 0 40px; }
  .eb-mth-hero__body { padding: 20px 36px 44px 40px; }
}
@media (max-width: 900px) {
  .eb-mth-hero__grid {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto auto auto;
    grid-template-areas: "head" "photo" "body";
  }
  /* The phone keeps the live crop: the same 390:352 box it renders in today. */
  .eb-mth-hero .eb-hub-hero__media { align-self: auto; min-height: 0 !important; aspect-ratio: 390 / 352; max-height: 560px; }
  .eb-mth-hero .eb-hub-hero__edge { display: none; } /* a repeat of the H1, now directly above */
  /* The "Now training" label moves to the photo's foot, where the hidden caption was: at the
     top-left it sat on his face (his head is in the frame's top ~17%). */
  .eb-mth-hero .eb-hub-hero__media > span:not([class]) { top: auto !important; bottom: 16px; left: 16px !important; }
  .eb-mth-hero__head { padding: 28px 22px 20px; max-width: none; }
  .eb-mth-hero__body { padding: 20px 22px 34px; max-width: none; gap: 14px; }
  .eb-mth-hero .eb-hub-hero__sub { font-size: 17px !important; }
  .eb-loc-hero .eb-mth-path { font-size: 17px; }
  .eb-mth-hero__finder { margin-top: 4px; }
}

/* — Sparring: five academies, captioned; a swipe rail below 1100px. — */
.eb-mth-spar { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; }
.eb-loc-band .eb-mth-spar__item { margin: 0; display: flex; flex-direction: column; gap: 10px; }
.eb-mth-spar__photo { position: relative; height: 320px; border-radius: 5px; overflow: hidden; background: #0d0d0c; }
.eb-loc-band .eb-mth-spar__swipe { display: none; }
@media (max-width: 1100px) {
  .eb-mth-spar {
    display: flex; gap: 10px; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch;
    margin: 0 -40px; padding: 0 40px; scroll-padding: 0 40px; scrollbar-width: none;
  }
  .eb-mth-spar::-webkit-scrollbar { display: none; }
  .eb-loc-band .eb-mth-spar__item { flex: 0 0 280px; scroll-snap-align: start; }
  .eb-loc-band .eb-mth-spar__swipe {
    display: block; margin-top: 14px;
    font-family: Oswald, sans-serif; font-weight: 600; font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(13,13,12,0.62);
  }
}
@media (max-width: 768px) {
  .eb-mth-spar { margin: 0 -22px; padding: 0 22px; scroll-padding: 0 22px; }
}

/* — Gallery: the spoke gallery's tiles (spoke.css's grid rules, mirrored — that sheet
     also styles the hub ladder, so it is not loaded here). 13 photos: at 4-up the first
     takes a 2×2 cell, so the grid closes on four full rows; at 3-up it runs full width
     (1 + 12 = five rows); on a phone, 2-up, the first six show and the rest open from the
     lightbox. — */
.eb-mth-gallery__top { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; flex-wrap: wrap; }
.eb-mth-gallery__cta { margin-bottom: 40px; }
.eb-loc-band .eb-mth-gallery { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-top: 8px; }
.eb-loc-band .eb-mth-gallery__lead { grid-column: span 2; grid-row: span 2; aspect-ratio: auto !important; }
.eb-loc-band .eb-mth-gallery__note { display: none; }
@media (max-width: 1024px) {
  .eb-loc-band .eb-mth-gallery { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .eb-loc-band .eb-mth-gallery__lead { grid-column: 1 / -1; grid-row: auto; aspect-ratio: 16 / 9 !important; }
}
@media (max-width: 768px) {
  .eb-mth-gallery__cta { display: none; }
  .eb-loc-band .eb-mth-gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .eb-loc-band .eb-mth-gallery__lead { grid-column: auto; aspect-ratio: 4 / 3 !important; }
  .eb-loc-band .eb-mth-gallery__more { display: none; }
  .eb-loc-band .eb-mth-gallery__note { display: block; margin: 14px 0 0; }
}