/* ============================================================
   Horizon Music Academy — homepage-specific styles
   Loaded after base.css. Uses the shared design system tokens.
   ============================================================ */

/* ---------- hero ---------- */
.hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--navy-900);
  padding: clamp(4rem, 8vw, 7rem) 0 clamp(4.5rem, 9vw, 8rem);
}
.hero__bg {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 70% 30%;
}
.hero__scrim {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(100deg, rgba(10, 17, 32, .94) 0%, rgba(14, 23, 41, .86) 42%, rgba(20, 35, 61, .58) 72%, rgba(20, 35, 61, .45) 100%),
    radial-gradient(1200px 500px at 15% 10%, rgba(201, 150, 47, .18), transparent 60%);
}
.hero__inner {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  align-items: center;
  gap: clamp(2rem, 5vw, 4.5rem);
}
.hero__copy { color: rgba(255, 255, 255, .82); }
.hero h1 {
  color: #fff;
  margin-bottom: .35em;
}
.hero h1::first-line { color: var(--gold-300); }
.hero__lede {
  color: rgba(255, 255, 255, .8);
  max-width: 48ch;
  font-size: clamp(1.05rem, 1.7vw, 1.25rem);
}
.hero__actions { margin-top: 2rem; }

/* reserved stage for the 3D interactive module */
.hero__stage {
  position: relative;
  min-height: clamp(320px, 42vw, 520px);
  display: grid;
  place-items: center;
}
.hero__stage-ring {
  position: absolute;
  inset: 8% 6%;
  border: 1px solid rgba(230, 189, 99, .35);
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 55%, rgba(217, 168, 63, .22), rgba(14, 23, 41, 0) 62%),
    radial-gradient(circle at 50% 55%, rgba(255, 255, 255, .05), rgba(14, 23, 41, 0) 70%);
  box-shadow: inset 0 0 80px rgba(201, 150, 47, .12);
}
.hero__stage-ring::before,
.hero__stage-ring::after {
  content: "";
  position: absolute;
  border: 1px solid rgba(230, 189, 99, .22);
  border-radius: 50%;
}
.hero__stage-ring::before { inset: -7%; }
.hero__stage-ring::after { inset: 14%; border-style: dashed; opacity: .5; }
/* the 3D module mounts here and layers above the ring decoration */
.hero__3d {
  position: relative;
  z-index: 1;
  width: 100%;
  height: clamp(320px, 42vw, 520px);
}
.hero__rule {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--gold-500), var(--gold-300) 35%, rgba(201, 150, 47, 0) 85%);
  opacity: .8;
}
@media (max-width: 900px) {
  .hero__inner { grid-template-columns: 1fr; }
  .hero__bg { object-position: 60% 25%; }
  .hero__scrim {
    background:
      linear-gradient(180deg, rgba(10, 17, 32, .9) 0%, rgba(14, 23, 41, .8) 55%, rgba(20, 35, 61, .72) 100%),
      radial-gradient(900px 400px at 20% 0%, rgba(201, 150, 47, .16), transparent 60%);
  }
  .hero__stage { min-height: 300px; }
  .hero__3d { height: 300px; }
}

/* ---------- section heads ---------- */
.section-head { max-width: 780px; margin: 0 auto clamp(2.4rem, 5vw, 3.6rem); }
.section-head:not(.center) { margin-inline: 0; }

/* ---------- methodology cards ---------- */
.method-grid { align-items: stretch; }
.method-card {
  padding: 2.3rem 2.2rem;
  border-radius: var(--radius-lg);
  background:
    linear-gradient(180deg, var(--paper), var(--gold-050));
}
.method-card__glyph {
  display: grid;
  place-items: center;
  width: 56px; height: 56px;
  margin-bottom: 1.1rem;
  border-radius: 16px;
  font-size: 1.5rem;
  color: var(--navy-900);
  background: linear-gradient(135deg, var(--gold-200), var(--gold-050));
  border: 1px solid rgba(201, 150, 47, .35);
}
.method-card h3 { margin-bottom: .4rem; }

/* ---------- journey ---------- */
.section--journey { background: linear-gradient(180deg, var(--cream), var(--gold-050) 55%, var(--cream)); }
.journey-card {
  display: flex;
  flex-direction: column;
  padding: 1.1rem 1.1rem 1.6rem;
  border-radius: var(--radius-lg);
}
.journey-card__img {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  border-radius: var(--radius);
  margin-bottom: 1.3rem;
  box-shadow: var(--shadow-sm);
}
.journey-card h3 { font-size: clamp(1.15rem, 1.8vw, 1.35rem); padding-inline: .6rem; }
.journey-card p { padding-inline: .6rem; font-size: .98rem; color: var(--text-soft); flex: 1; }
.journey-card__cta {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  margin: .6rem .6rem 0;
  font-weight: 600;
  font-size: .92rem;
  color: var(--gold-500);
  transition: gap .25s var(--ease), color .25s var(--ease);
}
.journey-card__cta:hover { gap: .8rem; color: var(--navy-800); }

/* ---------- services (navy) ---------- */
.services { position: relative; overflow: hidden; }
.services::before {
  content: "";
  position: absolute;
  width: 620px; height: 620px;
  right: -180px; top: -220px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(201, 150, 47, .16), transparent 65%);
  pointer-events: none;
}
.services__inner {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}
.services__media { position: relative; }
.services__media img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  position: relative;
  z-index: 1;
}
.services__media-accent {
  position: absolute;
  inset: auto -18px -18px auto;
  width: 55%;
  height: 55%;
  border: 1px solid rgba(230, 189, 99, .45);
  border-radius: var(--radius-lg);
  z-index: 0;
}
.services .lede { color: rgba(255, 255, 255, .78); }
.services .actions { margin-top: 1.8rem; }
@media (max-width: 900px) {
  .services__inner { grid-template-columns: 1fr; }
  .services__media-accent { inset: -12px -12px auto auto; display: none; }
}

/* ---------- studios ---------- */
.studio-card {
  display: flex;
  flex-direction: column;
  gap: .2rem;
  padding: 1.7rem 1.6rem;
  border-radius: var(--radius);
}
.studio-card h3 { font-size: 1.3rem; margin-bottom: .3rem; }
.studio-card p { color: var(--text-soft); font-size: .95rem; flex: 1; }
.studio-card__link {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  margin-top: .9rem;
  font-size: .85rem;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--gold-500);
  transition: gap .25s var(--ease);
}
.studio-card:hover .studio-card__link { gap: .75rem; }

/* ---------- instructors ---------- */
.section--instructors {
  background: linear-gradient(180deg, var(--cream) 0%, var(--gold-050) 45%, var(--cream) 100%);
}
.team-grid { align-items: stretch; }
.team-card {
  padding: 0;
  overflow: hidden;
  border-radius: var(--radius);
}
.team-card img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  object-position: top center;
  filter: saturate(.96);
  transition: transform .5s var(--ease), filter .5s var(--ease);
}
.team-card:hover img { transform: scale(1.04); filter: saturate(1.05); }
.team-card__body { padding: 1.2rem 1.3rem 1.5rem; }
.team-card h3 { font-size: 1.2rem; margin-bottom: .2rem; }
.team-card__role {
  margin: 0 0 .45rem;
  font-size: .82rem;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--gold-500);
}
.team-card__loc { margin: 0; font-size: .92rem; color: var(--text-soft); }
.team-more { margin-top: 2.6rem; }

/* ---------- final CTA ---------- */
.final-cta {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(1000px 420px at 85% 0%, rgba(201, 150, 47, .2), transparent 60%),
    linear-gradient(180deg, var(--navy-800), var(--navy-950));
  color: rgba(255, 255, 255, .8);
  padding: clamp(4.5rem, 9vw, 7rem) 0;
}
.final-cta h2 { color: #fff; }
.final-cta .lede { color: rgba(255, 255, 255, .78); margin-inline: auto; }
.final-cta .actions { margin-top: 2rem; }

@media (max-width: 620px) {
  .hero { padding-top: 3rem; }
  .actions .btn { flex: 1 1 100%; }
}