/* ============================================================
   school-animations.css  —  School Programs design elevation
   Motion and hover layer only. No colour, font or copy changes.

   What the global stack already provides (no duplication here):
     • [data-animate] batch stagger    — animations/index.js
     • .btn ripple                     — micro.js initButtonRipple
     • Counter up                      — micro.js ([data-count])
     • Nav underline draw              — components.css (.nav__link::after)
     • Eyebrow dot pop                 — animations.css (.eyebrow span)
     • .btn overflow + .btn-ripple     — animations.css

   Scroll/pointer-heavy effects (3-D tilt, custom cursor, hero mouse parallax,
   magnetic buttons, scroll progress, scroll parallax) have been removed to
   keep scrolling native and the main thread free.
   ============================================================ */

/* ── Card images: zoom on hover (image uses CSS `scale` property) ─── */
.card__media { overflow: hidden; }

.card__media img {
  transition: scale 0.7s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: scale;
}

@media (hover: hover) and (pointer: fine) {
  .card:hover .card__media img { scale: 1.07; }
}

/* ── Media-frame image: zoom on hover (uses CSS `scale` property) ─── */
.media-frame { overflow: hidden; }

.media-frame img {
  transition: scale 0.9s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: scale;
}

@media (hover: hover) and (pointer: fine) {
  .media-frame:hover img { scale: 1.05; }
}

/* ── Chip tiles: hover lift ─────────────────────────────────── */
/* Entrance animation is GSAP-driven (school-programs.js); this
   block is the persistent hover interaction after reveal.      */
@media (hover: hover) and (pointer: fine) {
  .chip-tile {
    transition: transform 0.28s cubic-bezier(0.34, 1.56, 0.64, 1);
  }
  .chip-tile:hover { transform: translateY(-5px) scale(1.04); }
}

/* ── Stat pillars: lift on hover ────────────────────────────── */
@media (hover: hover) and (pointer: fine) {
  .pillar {
    transition: transform 0.28s cubic-bezier(0.34, 1.56, 0.64, 1);
    cursor: default;
  }
  .pillar:hover { transform: translateY(-4px); }
}

/* ── Mini-gallery + Photo Bento: zoom + warm vignette on hover ── */
.mini-gallery .gallery-item,
.photo-bento .gallery-item { cursor: zoom-in; }

.mini-gallery .gallery-item img,
.photo-bento .gallery-item img {
  transition: transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}

@media (hover: hover) and (pointer: fine) {
  .mini-gallery .gallery-item:hover img,
  .mini-gallery .gallery-item:focus-visible img,
  .photo-bento .gallery-item:hover img,
  .photo-bento .gallery-item:focus-visible img {
    transform: scale(1.09);
  }
}

/* Gradient vignette that lifts in on hover */
.mini-gallery .gallery-item::after,
.photo-bento .gallery-item::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    transparent 45%,
    oklch(0.13 0.03 158 / 0.6) 100%
  );
  opacity: 0;
  transition: opacity 0.45s ease;
  pointer-events: none;
  border-radius: inherit;
}

@media (hover: hover) and (pointer: fine) {
  .mini-gallery .gallery-item:hover::after,
  .photo-bento .gallery-item:hover::after { opacity: 1; }
}

/* ── Footer social links: spring-lift on hover ───────────────── */
@media (hover: hover) and (pointer: fine) {
  .footer__social {
    transition:
      transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1),
      opacity   0.2s ease;
  }
  .footer__social:hover { transform: translateY(-5px) scale(1.15); }
}

/* ── WhatsApp float: dual emanation rings ────────────────────── */
.wa-float__btn { position: relative; }

.wa-float__btn::before,
.wa-float__btn::after {
  content: '';
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  background: currentColor;
  opacity: 0;
  pointer-events: none;
  animation: wa-emanate 2.8s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

.wa-float__btn::after { animation-delay: 1.4s; }

@keyframes wa-emanate {
  0%   { transform: scale(1);    opacity: 0.4; }
  70%  { transform: scale(1.6);  opacity: 0;   }
  100% { transform: scale(1.6);  opacity: 0;   }
}

/* ── CTA banner: press feedback ─────────────────────────────── */
.cta-banner .btn:active { transform: scale(0.97); }

/* ── Feature Split Section ───────────────────────────────────── */
.feature-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 60px;
  align-items: center;
}

.feature-split--copy-wide {
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
}

/* Grid children default to min-width: auto (intrinsic content width),
   so a 1200px img inside forces the cell to 1200px and overflows the
   viewport on mobile. Explicit min-width: 0 lets cells shrink. */
.feature-split > * { min-width: 0; }

.feature-split__heading { margin-top: 12px; line-height: 1.15; }

.feature-split__body {
  margin-top: 20px;
  font-size: clamp(16px, 1.3vw, 17px);
  line-height: 1.72;
  max-width: 52ch;
  color: var(--color-ink-muted);
}

.feature-split__media { aspect-ratio: 4 / 3; }

/* School intro — full-bleed dark pine with accessible on-dark contrast. */
.hero-banner--workshops {
  background: var(--color-school-intro);
}

.hero-banner--workshops::after {
  content: '';
  position: absolute;
  inset: auto 0 0;
  z-index: 3;
  height: clamp(1.25rem, 2vw, 2rem);
  background: var(--color-school-intro);
  pointer-events: none;
}

.section--school-intro {
  background: var(--color-school-intro);
  box-shadow: 0 0 0 100vmax var(--color-school-intro);
  clip-path: inset(0 -100vmax);
  margin-top: -2px;
  z-index: 3;
}

.section--school-intro .eyebrow {
  color: var(--color-amber-2);
}

.section--school-intro .feature-split__body {
  color: var(--color-body-on-dark);
}

.section--school-intro .feature-split__media {
  border: 1px solid var(--color-border-on-dark-strong);
  box-shadow: 0 24px 54px oklch(0.08 0.02 158 / 0.34);
}

/* ── Stat Strip ───────────────────────────────────────────────── */
.stat-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  margin-top: 64px;
  padding-top: 48px;
  border-top: 1px solid oklch(0.23 0.03 158 / 0.1);
}

.stat-strip__item {
  padding: 0 32px;
  border-left: 1px solid oklch(0.23 0.03 158 / 0.1);
}

.stat-strip__item:first-child { padding-left: 0; border-left: none; }

.stat-strip__num {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(38px, 4vw, 56px);
  line-height: 1;
  letter-spacing: -0.02em;
  color: oklch(0.58 0.14 47);
  font-variant-numeric: tabular-nums;
}

.stat-strip__label {
  margin-top: 10px;
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0.72;
}

.section--school-intro .stat-strip {
  border-top-color: var(--color-border-on-dark-strong);
}

.section--school-intro .stat-strip__item {
  border-left-color: var(--color-border-on-dark-strong);
}

.section--school-intro .stat-strip__num {
  color: var(--color-amber);
}

.section--school-intro .stat-strip__label {
  color: var(--color-body-on-dark);
  opacity: 1;
}

.section--school-intro .stat-strip__item:nth-child(3),
.section--school-intro .stat-strip__item:nth-child(4) {
  border-top-color: var(--color-border-on-dark-strong);
}

@media (hover: hover) and (pointer: fine) {
  .stat-strip__item { transition: opacity 0.22s ease; }
  .stat-strip:hover .stat-strip__item { opacity: 0.42; }
  .stat-strip:hover .stat-strip__item:hover { opacity: 1; }
}

@media (max-width: 900px) {
  .feature-split { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .feature-split__body { max-width: unset; }
}

@media (max-width: 767px) {
  .stat-strip { grid-template-columns: repeat(2, 1fr); gap: 0; }
  .stat-strip__item { padding: 28px 20px; border-left: 1px solid oklch(0.23 0.03 158 / 0.1); }
  .stat-strip__item:first-child,
  .stat-strip__item:nth-child(3) { border-left: none; padding-left: 0; }
  .stat-strip__item:nth-child(3),
  .stat-strip__item:nth-child(4) { border-top: 1px solid oklch(0.23 0.03 158 / 0.1); }
}

/* ── Photo Bento Grid ─────────────────────────────────────────── */
.photo-bento {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-template-rows: 360px 280px 240px;
  gap: 16px;
}

.photo-bento .gallery-item {
  border-radius: 16px;
  overflow: hidden;
  position: relative;
}

.photo-bento .gallery-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Row 1: wide feature left + tall right spanning rows 1–2 */
.photo-bento .gallery-item:nth-child(1) { grid-column: 1 / span 8; grid-row: 1; }
.photo-bento .gallery-item:nth-child(2) { grid-column: 9 / span 4; grid-row: 1 / span 2; }

/* Row 2: two square tiles (tall right continues on col 9–12) */
.photo-bento .gallery-item:nth-child(3) { grid-column: 1 / span 4; grid-row: 2; }
.photo-bento .gallery-item:nth-child(4) { grid-column: 5 / span 4; grid-row: 2; }

/* Row 3: four equal tiles */
.photo-bento .gallery-item:nth-child(5) { grid-column: 1  / span 3; grid-row: 3; }
.photo-bento .gallery-item:nth-child(6) { grid-column: 4  / span 3; grid-row: 3; }
.photo-bento .gallery-item:nth-child(7) { grid-column: 7  / span 3; grid-row: 3; }
.photo-bento .gallery-item:nth-child(8) { grid-column: 10 / span 3; grid-row: 3; }

@media (max-width: 767px) {
  .photo-bento {
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: unset;
    grid-auto-rows: 180px;
  }

  .photo-bento .gallery-item:nth-child(n) { grid-column: auto; grid-row: auto; }
  .photo-bento .gallery-item:nth-child(1) { grid-column: span 2; }
}

/* ── Reduced motion: hard disable all new motion ─────────────── */
@media (prefers-reduced-motion: reduce) {
  .card__media img,
  .media-frame img,
  .mini-gallery .gallery-item img,
  .photo-bento .gallery-item img {
    transition: none !important;
    scale: 1 !important;
  }

  .chip-tile:hover,
  .pillar:hover,
  .footer__social:hover {
    transform: none !important;
  }

  .wa-float__btn::before,
  .wa-float__btn::after {
    animation: none !important;
  }
}

/* ================================================================
   SCHOOL TRIPS — Interactive card + idea-picker modal
   The 4th program card is a clickable anchor that opens a modal
   showing six curated trip destinations. Modal reuses the global
   .modal / .modal__backdrop / .modal__container shell so the
   ember accent line, enter animation and mobile bottom-sheet
   behaviour are inherited without duplication.
   ================================================================ */

/* When a .card-grid contains the interactive card (only on this page),
   force 4 equal columns at wide widths so the interactive card sits on
   the same row as the other three — otherwise the 300px auto-fit min
   collapses to 3 columns and the 4th card orphans on its own row. */
@media (min-width: 1024px) {
  .card-grid:has(> .card--interactive) {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

/* ---- Card variant: interactive (School Trips) ---- */
.card--interactive {
  cursor: pointer;
  position: relative;
  text-decoration: none;
}

/* Inset ring on hover/focus — communicates "this one takes action" */
.card--interactive::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: var(--radius-tile);
  pointer-events: none;
  box-shadow: inset 0 0 0 0 var(--color-ember);
  transition: box-shadow var(--duration-medium) var(--ease-standard);
}

@media (hover: hover) and (pointer: fine) {
  .card--interactive:hover::after { box-shadow: inset 0 0 0 2px var(--color-ember); }
}

.card--interactive:focus-visible::after {
  box-shadow: inset 0 0 0 2px var(--color-ember);
}

.card--interactive:focus-visible { outline: none; }

/* Floating chip on the media — the "6 destinations" affordance */
.card__pin {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 2;
  font-family: var(--font-body);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: oklch(0.98 0 0);
  background: oklch(0.16 0.03 156 / 0.72);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border: 1px solid oklch(1 0 0 / 0.14);
  padding: 6px 10px;
  border-radius: 999px;
}

/* Location tag on top-left of the card media — communicates where the
   program happens (In-School / Within City / Outside City). Same visual
   language as .card__pin but with an ember dot prefix that reads as a
   map-pin at small sizes. */
.card__loc {
  position: absolute;
  top: 14px;
  left: 14px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-body);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: oklch(0.98 0 0);
  background: oklch(0.16 0.03 156 / 0.72);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border: 1px solid oklch(1 0 0 / 0.14);
  padding: 6px 10px 6px 8px;
  border-radius: 999px;
}

.card__loc-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-ember);
  box-shadow: 0 0 0 2px oklch(1 0 0 / 0.18);
  flex: none;
}

/* Bottom CTA inside the card body — matches ember accent language */
.card__cta {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--color-border-soft);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 12.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-ember);
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.card__cta > span {
  display: inline-block;
  transition: transform var(--duration-medium) var(--ease-standard);
}

@media (hover: hover) and (pointer: fine) {
  .card--interactive:hover .card__cta > span { transform: translateX(4px); }
}

/* ---- Idea-picker modal (single-column, light) ---- */
.modal--ideas .modal__container {
  /* Override the two-panel horizontal flex from modal.css */
  display: block;
  max-width: 1080px;
  background: var(--color-card);
  padding: clamp(28px, 4vw, 52px) clamp(24px, 3.5vw, 44px) clamp(24px, 3.2vw, 40px);
  overflow-y: auto;
}

/* Close button re-tinted for light surface */
.modal--ideas .modal__close {
  background: oklch(0.94 0.008 80);
  color: var(--color-ink);
  border-color: var(--color-border);
}
.modal--ideas .modal__close:hover { background: oklch(0.9 0.012 80); }

.ideas__head {
  max-width: 640px;
  margin-bottom: clamp(24px, 3vw, 34px);
  padding-right: 40px; /* clear space for the close button */
}

.ideas__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(24px, 3vw, 34px);
  letter-spacing: -0.02em;
  line-height: 1.12;
  color: var(--color-ink);
  margin: 12px 0 10px;
}

.ideas__sub {
  font-size: 14.5px;
  line-height: 1.65;
  color: var(--color-ink-muted);
  margin: 0;
  max-width: 56ch;
}

.ideas__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
  gap: 16px;
  margin-bottom: clamp(24px, 3vw, 32px);
}

/* Individual idea tile */
.idea {
  background: oklch(0.99 0.005 85);
  border: 1px solid var(--color-border);
  border-radius: 16px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition:
    border-color var(--duration-fast) var(--ease-standard),
    box-shadow   var(--duration-fast) var(--ease-standard),
    transform    var(--duration-medium) var(--ease-standard);
}

.idea--custom {
  background: oklch(0.985 0.008 62);
  border-style: dashed;
}

@media (hover: hover) and (pointer: fine) {
  .idea:hover {
    border-color: var(--color-ember);
    box-shadow: 0 12px 30px oklch(0.15 0.03 156 / 0.09);
    transform: translateY(-2px);
  }
}

.idea__media {
  aspect-ratio: 5 / 3;
  overflow: hidden;
  background: oklch(0.35 0.03 158);
}

.idea__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}

@media (hover: hover) and (pointer: fine) {
  .idea:hover .idea__media img { transform: scale(1.06); }
}

.idea__body {
  padding: 16px 18px 18px;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.idea__meta {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}

.idea__chip {
  font-family: var(--font-body);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 4px 9px;
  border-radius: 999px;
  color: oklch(0.44 0.11 47);
  background: oklch(0.94 0.04 62);
}

.idea__chip--muted {
  color: var(--color-ink-muted);
  background: oklch(0.95 0.008 80);
}

.idea__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 18px;
  letter-spacing: -0.015em;
  line-height: 1.2;
  color: var(--color-subheading);
  margin: 0 0 6px;
}

.idea__desc {
  font-size: 13px;
  line-height: 1.62;
  color: var(--color-ink-muted);
  margin: 0 0 14px;
  flex: 1;
}

.idea__cta {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-ember);
  text-decoration: none;
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding-bottom: 4px;
  border-bottom: 1.5px solid var(--color-ember);
  transition: gap var(--duration-fast) var(--ease-standard);
}

.idea__cta:hover { gap: 10px; }

/* Modal footer */
.ideas__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding-top: clamp(18px, 2.4vw, 24px);
  border-top: 1px solid var(--color-border-soft);
}

.ideas__foot-eyebrow {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 13px;
  color: var(--color-ink);
  display: block;
}

.ideas__foot-note {
  font-size: 13px;
  line-height: 1.6;
  color: var(--color-ink-muted);
  margin: 4px 0 0;
  max-width: 42ch;
}

.ideas__foot .btn { flex: none; }

/* Mobile — stack the footer */
@media (max-width: 640px) {
  .modal--ideas .modal__container {
    padding: 24px 20px 20px;
    max-height: 92svh;
  }

  .ideas__foot {
    flex-direction: column;
    align-items: stretch;
    gap: 14px;
  }

  .ideas__foot .btn { width: 100%; text-align: center; }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .card--interactive::after,
  .card__cta > span,
  .idea,
  .idea__media img,
  .idea__cta {
    transition: none !important;
  }

  .idea:hover,
  .idea:hover .idea__media img {
    transform: none !important;
  }
}