/* ============================================================
   Disney+ — mobile (<= 820px)
   Da linkare in disney.html dopo css/style.css.
   Scala dell'intro allineata alle altre pagine del sito
   (stessi valori di mangiare-scroll.css: titolo 33px, brand 14px, desc 12.5px).
   ============================================================ */

@media (max-width: 820px) {

  /* ---- Nav: stessa barra delle altre pagine (fondo carta, 54px) ----
     Senza queste due regole la cover partiva da y=0 e passava sotto una
     nav trasparente: la barra spariva dentro la copertina. ---- */
  .pg-disney .nav {
    height: 54px;
    padding-block: 0;
    background: var(--paper-85);
    border-bottom-color: var(--line);
    -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  }
  .pg-disney .nav__brand { font-size: 15px; }
  .pg-disney .nav__links { font-size: 14px; }
  /* selettore lungo per battere `[data-snap] main > section.case-intro`
     di style.css, che azzera il padding */
  .pg-disney main > section.case-intro { padding-top: 54px; }

  /* ---- Intro: cover che prende l'altezza residua, testo alla scala mobile ---- */
  .pg-disney .case-head__brand { font-size: 14px; margin-bottom: 5px; }
  .pg-disney .case-head__title { font-size: 33px; line-height: 0.98; letter-spacing: -0.028em; }
  .pg-disney .case-meta { margin-top: 14px; padding-top: 13px; gap: 11px; }
  .pg-disney .case-meta dt { font-size: 10px; }
  .pg-disney .case-meta dd { font-size: 14px; }
  .pg-disney .case-meta__desc dd { font-size: 12.5px; line-height: 1.42; }
  .pg-disney .section-label { font-size: 10px; }

  /* ---- Social: un clip grande in vista, il secondo che si intravede ---- */
  .pg-disney .pills {
    --pgap: clamp(16px, 4.5vw, 30px);
    padding-left: calc(var(--gutter) + 14px);
    scroll-padding-left: calc(var(--gutter) + 14px);
  }

  /* ---- Radio: barra corta e centrata ---- */
  .pg-disney .radio__player { width: min(100%, 320px); padding: 12px 14px; }
}