/* ==========================================================================
   DISNEY ACADEMY — responsive.css
   Load AFTER style.css. Breakpoints: 1200 / 1080 / 1024 / 900 / 768 / 560 / 400
   ========================================================================== */

@media (max-width: 1200px) {
  :root { --sp-7: 5.2rem; --sp-6: 3.8rem; }
  .nav-list a { padding: .5rem .6rem; font-size: .92rem; }
  .brand img { height: 52px; }
}

@media (max-width: 1080px) {
  .nav-list { display: none; }
  .burger { display: block; }
  .nav-actions .btn--nav { display: none; }
  .foot-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 1024px) {
  .panel, .contact-grid { grid-template-columns: 1fr; gap: var(--sp-4); }
  .panel--flip .panel__media { order: 0; }
  .panel__media { aspect-ratio: 4 / 3; max-width: 640px; margin-inline: auto; }
  .g4 { grid-template-columns: repeat(2, 1fr); }
  .mosaic { columns: 2; }
  .newsletter { grid-template-columns: 1fr; }
  .hero-ribbon { grid-template-columns: repeat(2, 1fr); }
  .hero-ribbon div:nth-child(2) { border-right: 0; }
  .hero-ribbon div:nth-child(1), .hero-ribbon div:nth-child(2) { border-bottom: 1px solid rgba(255,255,255,.14); }
}

@media (max-width: 900px) {
  :root { --sp-7: 4.2rem; --sp-6: 3.2rem; --nav-h: 76px; }
  .g3 { grid-template-columns: repeat(2, 1fr); }
  .stats { grid-template-columns: repeat(2, 1fr); }
  .topline .container { justify-content: center; text-align: center; }
  .topline .tl-hide { display: none; }
  .cta-band { padding: 2rem 1.5rem; }
  :root { --r-arch: 110px 110px 24px 24px; }
}

@media (max-width: 768px) {
  .container, .narrow { width: min(100% - 2rem, var(--container)); }
  .g2, .g3, .g4 { grid-template-columns: 1fr; }
  .f-grid { grid-template-columns: 1fr; }
  .mosaic { columns: 1; }
  .hero-cta .btn { flex: 1 1 auto; justify-content: center; }
  .story-step { grid-template-columns: 76px 1fr; gap: .9rem; padding: .85rem 1rem; }
  .story-step:hover { transform: none; }
  .milestone { padding: 1.2rem 1.2rem 1.2rem 4rem; }
  .milestone::before { left: .8rem; top: 1.2rem; width: 46px; height: 46px; font-size: .74rem; }
  .lightbox { padding: 3.5rem .85rem; }
  .lb-prev { left: 10px; } .lb-next { right: 10px; }
  .lb-prev, .lb-next { width: 44px; height: 44px; }
  .floaters { right: 14px; bottom: 14px; }
  .fab { width: 52px; height: 52px; font-size: 1.2rem; }
  .wa-tip { display: none; }
  .foot-bottom { justify-content: center; text-align: center; }
  .panel__num { right: 12px; bottom: 12px; width: 66px; height: 66px; font-size: 1.5rem; }
}

@media (max-width: 560px) {
  :root { --sp-7: 3.4rem; --sp-6: 2.6rem; --sp-5: 2.2rem; --r-lg: 22px; --r-arch: 90px 90px 20px 20px; }
  body { font-size: .97rem; }
  .brand img { height: 44px; }
  .stats { grid-template-columns: repeat(2, 1fr); }
  .form-card { padding: 1.25rem; }
  .btn { padding: .85rem 1.5rem; font-size: .94rem; }
  .btn--lg { padding: 1rem 1.8rem; font-size: 1rem; }
  .filters { justify-content: flex-start; overflow-x: auto; flex-wrap: nowrap; padding-bottom: .5rem; -webkit-overflow-scrolling: touch; }
  .filter-btn { flex: none; }
  .nl-form { flex-direction: column; }
  .nl-form .btn { width: 100%; }
  .hero-crest { width: clamp(160px, 46vw, 220px); }
  .rail-btn { width: 42px; height: 42px; }
  .site-footer, .hero, .page-banner { border-radius: 32px 32px 0 0; }
  .hero, .page-banner { border-radius: 0 0 32px 32px; }
}

@media (max-width: 400px) {
  .stats { grid-template-columns: 1fr; }
  .hero-ribbon { grid-template-columns: 1fr; }
  .hero-ribbon div { border-right: 0; border-bottom: 1px solid rgba(255,255,255,.14); }
  .hero-cta { flex-direction: column; align-items: stretch; }
  .story-step { grid-template-columns: 1fr; }
  .story-time { justify-self: start; padding: .4rem 1rem; }
}

/* ==========================================================================
   MOBILE PERFORMANCE
   Blur, backdrop-filter and large soft glows are the three most expensive
   things on a phone GPU. Below 900px all three are dialled back hard.
   ========================================================================== */
@media (max-width: 900px) {
  .nav, .drawer, .hero-ribbon, .lightbox, .pslide-nav button {
    -webkit-backdrop-filter: blur(9px);
    backdrop-filter: blur(9px);
  }
  .glow { filter: blur(48px); opacity: .42; }
  /* NOTE: `content-visibility: auto` was removed here on purpose. It stops the
     browser rendering off-screen sections, which meant ScrollTrigger never
     measured them and their entrance animations never ran — leaving text stuck
     at opacity 0. Correctness beats the small paint saving. */
  .arch, .product, .info, .quote { box-shadow: var(--sh-xs); }
  .watermark { display: none; }
}

/* Save-data / metered connection */
@media (prefers-reduced-data: reduce) {
  #starfield, .glow { display: none; }
}

/* Touch: no hover transforms */
@media (hover: none) {
  .arch:hover, .prog:hover, .product:hover, .tile:hover, .info:hover, .story-step:hover { transform: none; }
  .tile__cap { opacity: 1; background: linear-gradient(180deg, transparent 55%, rgba(27,16,53,.78)); }
}

/* Short landscape phones */
@media (max-height: 520px) and (orientation: landscape) {
  .hero { padding-block: 1.75rem 0; }
  .page-banner { padding-block: 2rem 1.5rem; }
}

/* Print */
@media print {
  #starfield, .floaters, .site-header, .progress, #preloader, .newsletter, .glow { display: none !important; }
  body { color: #000; }
  .hero, .page-banner, .site-footer, .cta-band, .band-dusk { background: #fff !important; color: #000 !important; }
  .hero h1, .page-banner h1, .cta-band h2 { color: #000 !important; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: .8em; }
  .arch, .prog, .product { break-inside: avoid; box-shadow: none; }
}

/* Forced colours / high contrast */
@media (forced-colors: active) {
  .btn, .filter-btn.is-active { border: 2px solid currentColor; }
  .arch, .prog, .product { border: 1px solid currentColor; }
}