/* ==========================================================================
   "Gridovators in schools": featured video and quote, photo mosaic, video
   clips, and the lightbox that opens all of them. Logical properties only.
   ========================================================================== */

.band-gallery { background: linear-gradient(180deg, #F3EEFF 0%, var(--sky-100) 100%); }
.g-head { max-width: 46rem; margin-block-end: clamp(1.6rem, 3vw, 2.4rem); }
.g-head h2 { margin-block: .6rem .3em; }
.g-sub { font-size: 1.3rem; margin: clamp(2rem, 4vw, 3rem) 0 1rem; display: flex; align-items: center; gap: .7rem; }
.g-sub::after { content: ""; flex: 1; height: 4px; border-radius: 2px; background: repeating-linear-gradient(90deg, rgba(46,42,99,.16) 0 10px, transparent 10px 18px); }

/* every clickable tile */
.g-tile {
  position: relative; display: block; width: 100%; padding: 0; margin: 0; cursor: pointer; overflow: hidden;
  border: 4px solid var(--white); border-radius: var(--r-lg); background: var(--indigo-100);
  box-shadow: var(--shadow-card); font: inherit; color: inherit; text-align: start;
  transition: transform .18s ease, box-shadow .18s ease;
}
.g-tile:hover { transform: translateY(-4px) rotate(-.4deg); box-shadow: var(--shadow-pop); }
.g-tile:focus-visible { outline: 4px solid var(--indigo-500); outline-offset: 3px; }
.g-tile img, .g-tile video { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.g-tile:hover img, .g-tile:hover video { transform: scale(1.04); }
.g-cap {
  position: absolute; inset-inline: 0; inset-block-end: 0; padding: 2.2rem 1rem .8rem;
  background: linear-gradient(transparent, rgba(34,30,82,.82)); color: #fff; font-weight: 800; font-size: .95rem; line-height: 1.3;
}
.g-zoom {
  position: absolute; inset-inline-end: .7rem; inset-block-start: .7rem; width: 2.3rem; height: 2.3rem; border-radius: 50%;
  background: rgba(255,255,255,.92); color: var(--indigo-700); display: grid; place-items: center;
  opacity: 0; transform: scale(.85); transition: opacity .2s, transform .2s;
}
.g-tile:hover .g-zoom, .g-tile:focus-visible .g-zoom { opacity: 1; transform: none; }
.g-zoom svg { width: 1.15rem; height: 1.15rem; }

/* video tiles */
.g-play {
  position: absolute; inset: 0; display: grid; place-items: center; background: rgba(34,30,82,.18); transition: background .2s;
}
.g-tile:hover .g-play { background: rgba(34,30,82,.08); }
.g-play span {
  width: 4.2rem; height: 4.2rem; border-radius: 50%; background: var(--amber-400); border: 3.5px solid var(--indigo-900);
  box-shadow: 0 5px 0 var(--indigo-900); display: grid; place-items: center; transition: transform .15s;
}
.g-tile:hover .g-play span { transform: scale(1.08); }
.g-play svg { width: 1.7rem; height: 1.7rem; color: var(--indigo-900); margin-inline-start: .2rem; }
.g-dur {
  position: absolute; inset-inline-end: .7rem; inset-block-start: .7rem; background: rgba(34,30,82,.85); color: #fff;
  border-radius: var(--pill); padding: .15em .7em; font-size: .82rem; font-weight: 800; font-variant-numeric: tabular-nums;
}
[dir="rtl"] .g-play svg { transform: scaleX(-1); }

/* featured video and quote */
.g-feature { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); gap: clamp(1.2rem, 3vw, 2rem); align-items: stretch; }
.g-feature:has(.g-quote[hidden]) { grid-template-columns: minmax(0, 1fr); max-width: 52rem; }
.g-feature .g-tile { aspect-ratio: 16 / 9; height: 100%; min-height: 100%; }
.g-quote[hidden] { display: none; }
.g-quote { display: flex; }
.g-quote [data-testimonial-list] { display: flex; width: 100%; }
.g-quote .testimonial {
  width: 100%; justify-content: center; position: relative; overflow: hidden; margin: 0;
  background: var(--indigo-700); border-color: var(--indigo-900); color: #fff; padding: clamp(1.6rem, 3vw, 2.4rem);
}
.g-quote .testimonial::before {
  content: "\201C"; position: absolute; inset-inline-end: 1rem; inset-block-start: -.6rem; font-family: var(--font-display);
  font-size: 9rem; line-height: 1; color: var(--amber-400); opacity: .28; pointer-events: none;
}
.g-quote blockquote { color: #fff; font-size: clamp(1rem, 1.35vw, 1.15rem); line-height: 1.6; font-weight: 700; position: relative; }
.g-quote figcaption { color: #C9C4F0; position: relative; display: grid; gap: .15rem; }
.t-name { color: var(--amber-400); font-family: var(--font-display); font-size: 1.25rem; }
.t-role { font-size: .9rem; line-height: 1.4; }
.testimonial figcaption .t-name { display: block; }
@media (max-width: 900px) {
  .g-feature { grid-template-columns: 1fr; }
  .g-feature .g-tile { height: auto; min-height: 0; }
}

/* photo mosaic */
.mosaic { display: grid; grid-template-columns: repeat(12, 1fr); gap: clamp(.7rem, 1.6vw, 1.1rem); }
.mosaic .g-tile { aspect-ratio: 4 / 5; }
.mosaic .m-wide { grid-column: span 4; aspect-ratio: 4 / 3; }
.mosaic .m-narrow { grid-column: span 3; }
.mosaic .m-tall img { object-position: 50% 30%; }
.mosaic .m-hall img { object-position: 50% 62%; }
@media (max-width: 900px) {
  .mosaic .m-narrow, .mosaic .m-wide { grid-column: span 6; }
  .mosaic .m-wide:first-child { grid-column: span 12; aspect-ratio: 16 / 9; }
}
@media (max-width: 560px) {
  .mosaic .m-wide { grid-column: span 12; }
}

/* clips */
.vid-strip { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(.7rem, 1.6vw, 1.1rem); }
.vid-strip .g-tile { aspect-ratio: 9 / 14; }
@media (max-width: 900px) { .vid-strip { grid-template-columns: repeat(2, 1fr); } }

/* lightbox */
.lb { border: 0; padding: 0; background: transparent; max-width: 100vw; max-height: 100vh; width: 100%; height: 100%; color: #fff; }
.lb::backdrop { background: rgba(20,17,50,.92); backdrop-filter: blur(4px); }
.lb[open] { display: grid; grid-template-rows: 1fr auto; animation: lbIn .2s ease-out; }
@keyframes lbIn { from { opacity: 0; } }
.lb-stage { display: grid; place-items: center; padding: clamp(3.4rem, 6vw, 4.5rem) clamp(3rem, 7vw, 6rem) .5rem; min-height: 0; }
.lb-stage img, .lb-stage video { max-width: 100%; max-height: 100%; border-radius: var(--r-md); box-shadow: 0 20px 60px rgba(0,0,0,.5); background: #000; }
.lb-bar { text-align: center; padding: .4rem 1rem 1.4rem; font-weight: 700; }
.lb-bar small { display: block; opacity: .7; margin-block-start: .2rem; }
.lb-btn {
  position: absolute; width: 3.1rem; height: 3.1rem; border-radius: 50%; border: 3px solid #fff; background: rgba(255,255,255,.12);
  color: #fff; display: grid; place-items: center; cursor: pointer; padding: 0; transition: background .15s, transform .15s;
}
.lb-btn:hover { background: rgba(255,255,255,.28); transform: scale(1.06); }
.lb-btn:focus-visible { outline: 3px solid var(--amber-400); outline-offset: 3px; }
.lb-btn svg { width: 1.4rem; height: 1.4rem; }
.lb-close { inset-inline-end: 1rem; inset-block-start: 1rem; }
.lb-prev { inset-inline-start: 1rem; inset-block-start: 50%; transform: translateY(-50%); }
.lb-next { inset-inline-end: 1rem; inset-block-start: 50%; transform: translateY(-50%); }
.lb-prev:hover, .lb-next:hover { transform: translateY(-50%) scale(1.06); }
[dir="rtl"] .lb-prev svg, [dir="rtl"] .lb-next svg { transform: scaleX(-1); }
@media (max-width: 600px) {
  .lb-stage { padding: 3.6rem .6rem .4rem; }
  .lb-prev, .lb-next { inset-block-start: auto; inset-block-end: 4.2rem; transform: none; width: 2.7rem; height: 2.7rem; }
  .lb-prev:hover, .lb-next:hover { transform: scale(1.06); }
}

@media (prefers-reduced-motion: reduce) {
  .g-tile, .g-tile img, .g-tile video, .g-play span, .lb[open] { transition: none; animation: none; }
  .g-tile:hover { transform: none; }
}

/* the classroom slides section, now text and slides only */
.proof-copy-only { max-width: 46rem; }


/* Treeva badge on the featured video thumbnail (not shown in the full-screen viewer) */
.g-partner-tag {
  position: absolute; inset-inline: 0; inset-block-start: 0; z-index: 2;
  display: flex; align-items: center; gap: clamp(.8rem, 2vw, 1.3rem);
  background: rgba(255, 255, 255, .96); padding: clamp(.7rem, 1.6vw, 1.1rem) clamp(1rem, 2.2vw, 1.5rem);
  border-block-end: 4px solid var(--teal-400);
  box-shadow: 0 6px 18px rgba(20, 16, 60, .22);
}
.g-partner-tag img { height: clamp(44px, 6vw, 72px); width: auto; display: block; flex: none; }
.g-partner-tag small {
  font-family: var(--font-display); font-size: clamp(1rem, 1.7vw, 1.45rem); font-weight: 800; line-height: 1.15;
  color: var(--indigo-700); text-transform: none; letter-spacing: 0;
}
.g-partner-tag small::before { content: ""; display: block; width: 2.4rem; height: 4px; border-radius: 2px; background: var(--teal-400); margin-block-end: .35rem; }
.g-feature .g-tile .g-dur { inset-block-start: auto; inset-block-end: .8rem; }
.vid-strip + .g-feature { margin-block-start: clamp(2rem, 4vw, 3rem); }
@media (max-width: 520px) { .g-partner-tag small { font-size: .95rem; } }

/* lead photo across the full width of the mosaic */
.mosaic .m-lead { grid-column: span 12; aspect-ratio: 16 / 9; }
.mosaic .m-lead img { object-position: 50% 60%; }
@media (max-width: 900px) { .mosaic .m-wide:first-child { grid-column: span 6; aspect-ratio: 4 / 3; } .mosaic .m-lead + .m-wide { grid-column: span 12; aspect-ratio: 16 / 9; } }