/* /jiu-jitsu-experienced/ — the page's own layout (inc/jj-experienced.php). Everything else
   (bands, hero, trust bar, video band, type, colour) is the hubs': location-hero.css +
   program-hub.css + eb_tokens(). Breakpoints are theirs too: 900 (two columns stack) and
   768 (phone). */

/* — Photo tiles: the eb_photo_tile idiom, sized by their grid cell ------------------ */
.ejx .ejx-ph { position: relative; overflow: hidden; border-radius: 4px; background: #0d0d0c; min-height: 0; }
.ejx .ejx-grid { display: grid; gap: 12px; }
.ejx .ejx-span2 { grid-column: span 2; }

.ejx .ejx-grid--lineage { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: 300px 220px; }
.ejx .ejx-grid--gi { grid-template-columns: repeat(4, minmax(0, 1fr)); grid-template-rows: 280px 280px; margin-top: 40px; }
.ejx .ejx-gi-big { grid-column: 1 / 3; grid-row: 1 / 3; }
.ejx .ejx-grid--gi > .ejx-ph:not(.ejx-gi-big) { grid-column: 3 / 5; }
.ejx .ejx-grid--nogi { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: 300px 260px; margin-top: 40px; }
.ejx .ejx-grid--single { grid-template-rows: 340px; }

/* The hero photo's overlays let a tap through to the viewer link under them. */
.ejx .eb-hub-hero__media > span { pointer-events: none; }

/* — Two-column splits (lineage, promotions, beginners, closing) --------------------- */
.ejx .ejx-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 48px; }
.ejx .ejx-split--center { align-items: center; }

/* — Cards, steps, academies --------------------------------------------------------- */
.ejx .ejx-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin-top: 40px; }
.ejx .ejx-card-ph { height: 220px; border-radius: 0; }
.ejx .ejx-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; margin-top: 40px; }
.ejx .ejx-acads { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; margin-top: 36px; }
.ejx .ejx-acad {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 44px;
  padding: 20px; border: 1px solid rgba(255,255,255,0.14); border-radius: 4px;
  font-family: Anton, sans-serif; font-size: 26px; letter-spacing: 0.02em; text-transform: uppercase; color: #fff;
  transition: border-color .15s ease, background-color .15s ease;
}
.ejx .ejx-acad span { color: #f04137; font-family: Barlow, sans-serif; font-size: 20px; }
.ejx .ejx-acad:hover, .ejx .ejx-acad:focus-visible { border-color: #f04137; background: rgba(240,65,55,0.08); }

/* — Closing claim form -------------------------------------------------------------- */
.ejx .ejx-claim-form { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; }
.ejx .ejx-claim-field { flex: 1 1 220px; display: flex; flex-direction: column; gap: 8px; }
.ejx .ejx-claim-form button:hover { background: #262624 !important; }

@media (max-width: 900px) {
  .ejx .ejx-split { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .ejx .ejx-cards, .ejx .ejx-steps { grid-template-columns: minmax(0, 1fr); }
  .ejx .ejx-steps { gap: 28px; }
}

@media (max-width: 768px) {
  .ejx h2.ejx-h { font-size: 38px !important; }
  .ejx .ejx-grid--lineage { grid-template-rows: 220px 150px; }
  /* Gi: the big photo across, the other two side by side under it. */
  .ejx .ejx-grid--gi { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: 260px 150px; margin-top: 28px; }
  .ejx .ejx-gi-big { grid-column: 1 / 3; grid-row: 1; }
  .ejx .ejx-grid--gi > .ejx-ph:not(.ejx-gi-big) { grid-column: auto; grid-row: 2; }
  /* No-gi: the wide photo across, then the four in a 2×2. */
  .ejx .ejx-grid--nogi { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: 220px 150px 150px; margin-top: 28px; }
  .ejx .ejx-grid--single { grid-template-rows: 240px; }
  .ejx .ejx-cards, .ejx .ejx-steps { margin-top: 28px; }
  .ejx .ejx-acads { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 28px; }
  .ejx .ejx-acad { font-size: 20px; padding: 16px; }
  .ejx .ejx-claim-form button { width: 100%; }
}