body[data-preview="dj-school"] .hero {
  min-height: clamp(460px, 72vh, 660px);
  background: var(--hero-lacquer);
  isolation: isolate;
}

body[data-preview="dj-school"] .hero::before {
  content: "";
  position: absolute;
  inset: 0 0 0 auto;
  width: 52%;
  z-index: -1;
  background: url("assets/dj-school-hero.webp") center / cover no-repeat;
  mask-image: linear-gradient(90deg, transparent, #000 33%);
}

[data-preview="dj-school"] .hero .shell { padding-block: clamp(48px, 7vw, 82px); }
[data-preview="dj-school"] .hero h1 {
  max-width: min(720px, 61%);
  font: 500 clamp(2.1rem, 5vw, 4.5rem)/1.06 Georgia, serif;
  letter-spacing: -.035em;
  text-shadow: 0 2px 12px #21022f;
}

.school-slogan {
  margin: 0 0 14px;
  color: var(--lavender);
  font: 500 clamp(1.12rem, 2.2vw, 1.7rem)/1.35 Georgia, serif;
}

[data-preview="dj-school"] .hero :is(.lead, .buttons, .benefits) {
  max-width: min(630px, 57%);
}

body[data-preview="dj-school"] .school-light {
  color: var(--charcoal);
  background: var(--paper);
  --muted: #4f4055;
}

[data-preview="dj-school"] .school-light :is(h2, h3, .eyebrow, .module .num) { color: var(--deep); }
[data-preview="dj-school"] .school-light .lead { color: var(--muted); }
[data-preview="dj-school"] .school-light .module {
  background: linear-gradient(145deg, #fffcf6, #f2e7f6);
  border-color: #cab3d4;
}
[data-preview="dj-school"] .school-light .note {
  background: var(--cream-white);
  border-color: #a98bbb;
  color: #46374b;
}
[data-preview="dj-school"] .course {
  background: linear-gradient(145deg, #481557, #32103f 64%, #220c31);
  border-color: #c5a46d88;
}
[data-preview="dj-school"] .course .fact {
  background: #230d31;
  border-color: #c5a46d55;
}
[data-preview="dj-school"] .section[id] { scroll-margin-top: 78px; }

@media (max-width: 850px) {
  body.mobile-nav-ready[data-preview="dj-school"] > header.mobile-header {
    background: linear-gradient(110deg, var(--cream-white), var(--lavender));
  }
  body[data-preview="dj-school"] .hero { min-height: 0; }
  body[data-preview="dj-school"] .hero::before {
    inset: 0 0 auto;
    width: 100%;
    height: clamp(200px, 40vw, 335px);
    background-position: center 53%;
    mask-image: linear-gradient(#000 47%, transparent);
  }
  [data-preview="dj-school"] .hero .shell { padding-block: clamp(175px, 36vw, 300px) 42px; }
  [data-preview="dj-school"] .hero :is(h1, .lead, .buttons, .benefits) { max-width: 100%; }
  [data-preview="dj-school"] .section[id] { scroll-margin-top: 0; }
}

@media (max-width: 520px) {
  [data-preview="dj-school"] .hero .buttons .btn { width: 100%; text-align: center; }
  [data-preview="dj-school"] .school-light .module { padding: 20px; }
}

body[data-preview="dj-school"] .hero a.academy-secondary {
  background: transparent !important;
  border-color: var(--champagne) !important;
  color: #f5dcae !important;
  box-shadow: none !important;
}

body[data-preview="dj-school"] .hero a.academy-secondary:hover {
  background: #c5a46d20 !important;
}

[data-preview="dj-school"] .school-light :is(p, .bullets, .module ul) { color: #49394e; }

[data-preview="dj-school"] .academy-gallery {
  background: var(--purple);
}

.academy-gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 245px), 1fr));
  gap: clamp(14px, 2.5vw, 24px);
  margin-top: 24px;
}

.academy-gallery-grid figure {
  min-width: 0;
  margin: 0;
  overflow: hidden;
  border: 1px solid #bda0c8;
  border-radius: 15px;
  background: var(--paper);
  color: var(--charcoal);
}

.academy-gallery-grid img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: contain;
  background: #200c2a;
}

.academy-gallery-grid figcaption { padding: 12px 15px 15px; }
.academy-gallery-grid figcaption strong { display: block; color: var(--deep); }
.academy-gallery-grid figcaption span { color: #55445c; font-size: .88rem; }

@media (max-width: 850px) {
  [data-preview="dj-school"] .section { padding-block: clamp(32px, 6vw, 52px); }
  [data-preview="dj-school"] .section h2 { font-size: clamp(1.6rem, 4.5vw, 2.25rem); }
  [data-preview="dj-school"] .hero h1 { font-size: clamp(1.95rem, 5.2vw, 2.8rem); margin-block: 12px 14px; }
  [data-preview="dj-school"] .hero .shell { padding-block: clamp(152px, 32vw, 255px) 32px; }
  [data-preview="dj-school"] .hero .buttons { gap: 9px; }
  [data-preview="dj-school"] .hero .buttons .btn { min-height: 44px; padding-block: 9px; }
  [data-preview="dj-school"] .academy-gallery-grid { margin-top: 16px; }
}