/* Costantini Portfolio — responsive.
   Il telefono non è il desktop rimpicciolito: sotto i 700px il sito adotta
   una propria composizione (immagini a filo, intestazioni impilate, scala
   tipografica dedicata, rail a scorrimento con anteprima). */

/* ═══════════ base ═══════════ */
html { -webkit-text-size-adjust: 100%; }
body { overflow-x: hidden; }
img, video, canvas, iframe, svg { max-width: 100%; }
img { height: auto; }
[style*="overflow-x:hidden"], [style*="overflow-x:clip"] { max-width: 100vw; }

[data-rail], [data-mood-rail], [data-app-rail], [class~="rail"] {
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
}

/* ═══════════ tablet orizzontale (≤1023px) ═══════════ */
@media (max-width: 1023px) {
  [style*="padding:clamp(76px,12vh,148px) clamp(20px,6vw,96px)"],
  [style*="padding:clamp(72px,13vh,168px) clamp(20px,6vw,96px)"],
  [style*="padding:clamp(70px,13vh,170px) clamp(20px,6vw,96px)"],
  [style*="padding:clamp(70px,13vh,160px) clamp(20px,6vw,96px)"] {
    padding-left: 32px !important;
    padding-right: 32px !important;
  }
}

/* ═══════════ tablet verticale (≤900px) ═══════════ */
@media (max-width: 900px) {

  /* due colonne → una */
  [style*="minmax(0,"][style*="fr) minmax(0,"] { grid-template-columns: minmax(0, 1fr) !important; }
  [style*="grid-template-columns:1fr 1fr"] { grid-template-columns: minmax(0, 1fr) !important; }
  [style*="grid-template-columns:repeat(2,minmax(0,300px))"] { grid-template-columns: minmax(0, 1fr) !important; }
  [style*="minmax(0,1fr) 200px"],
  [style*="minmax(0,1fr) 186px"],
  [style*="minmax(0,1fr) 220px"] { grid-template-columns: minmax(0, 1fr) !important; }

  [style*="grid-template-columns:repeat(4,minmax(0,1fr))"] { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  [style*="grid-template-columns:repeat(3,minmax(0,1fr))"] { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  [style*="grid-template-columns:repeat(6,minmax(0,1fr))"] { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
  [style*="grid-template-columns:repeat(24,minmax(0,1fr))"] { grid-template-columns: repeat(8, minmax(0, 1fr)) !important; }
  [style*="columns:4"] { columns: 2 !important; }

  /* sticky non ha senso in un impaginato impilato */
  [style*="position:sticky"] { position: static !important; }

  [style*="width:clamp(208px,20vw,268px)"] { width: 182px !important; }

  /* riquadri larghi accorciati: su verticale il soggetto va perso */
  [style*="aspect-ratio:16 / 9"], [style*="aspect-ratio:16 / 10"], [style*="aspect-ratio:16 / 11"] { aspect-ratio: 4 / 3 !important; }
  [style*="aspect-ratio:1.414 / 1"] { aspect-ratio: 1 / 1 !important; }
  [style*="aspect-ratio:3 / 5"] { aspect-ratio: 3 / 4 !important; }
  [style*="width:104%"], [style*="width:108%"], [style*="width:126%"] { max-width: 116% !important; }
}

/* ═══════════════════════════════════════════════════════════════════
   TELEFONO (≤700px) — composizione propria
   ═══════════════════════════════════════════════════════════════════ */
@media (max-width: 700px) {

  /* ── 1. griglie a più tracce → una colonna (auto-fit/auto-fill si adattano
         già da sole, e le scene pixel scalate restano intatte) ── */
  [style*="grid-template-columns:repeat(2,"]:not([style*="transform-origin"]),
  [style*="grid-template-columns:repeat(3,"]:not([style*="transform-origin"]),
  [style*="grid-template-columns:repeat(4,"]:not([style*="transform-origin"]),
  [style*="grid-template-columns:1fr 1fr"]:not([style*="transform-origin"]),
  [style*="fr) minmax(0,"]:not([style*="transform-origin"]),
  [style*="minmax(0,1fr) 200px"], [style*="minmax(0,1fr) 186px"], [style*="minmax(0,1fr) 220px"] {
    grid-template-columns: minmax(0, 1fr) !important;
  }
  /* griglie fluide: passo minimo adatto al telefono, non una colonna sola */
  [style*="repeat(auto-fit,minmax(2"], [style*="repeat(auto-fit,minmax(3"] {
    grid-template-columns: minmax(0, 1fr) !important;
  }
  [style*="repeat(auto-fill,minmax(1"] { grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)) !important; }
  [style*="repeat(auto-fill,minmax(2"] { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)) !important; }

  /* niente larghezze fisse in flusso: sono la causa dei margini superati */
  [style*="width:3"][style*="px;"], [style*="width:4"][style*="px;"] { max-width: 100% !important; }
  [style*="width:352px"], [style*="width:340px"], [style*="width:376px"] { width: 100% !important; max-width: 340px !important; }
  [style*="columns:2"], [style*="columns:4"] { columns: 1 !important; }

  /* ── 2. ritmo verticale del telefono: sezioni più corte, gutter di 22px ── */
  section, footer {
    padding-left: 22px !important;
    padding-right: 22px !important;
    padding-top: 56px !important;
    padding-bottom: 56px !important;
  }

  /* ── 3. scala tipografica dedicata ── */
  h1 { font-size: 15vw !important; line-height: .9 !important; letter-spacing: -.02em !important; }
  h2 { font-size: 30px !important; line-height: 1.04 !important; letter-spacing: -.02em !important; text-wrap: balance; }
  h3 { font-size: 21px !important; line-height: 1.18 !important; }
  p  { font-size: 16px !important; line-height: 1.6 !important; max-width: none !important; }
  /* occhielli: il tracking largo del desktop spezza le righe corte */
  [style*="letter-spacing:.34em"] { letter-spacing: .18em !important; }
  [style*="letter-spacing:.28em"], [style*="letter-spacing:.26em"] { letter-spacing: .16em !important; }
  [style*="letter-spacing:.24em"], [style*="letter-spacing:.22em"], [style*="letter-spacing:.2em"] { letter-spacing: .14em !important; }
  [style*="font-size:clamp(13px,1.5vw,20px)"] { font-size: 16px !important; letter-spacing: .04em !important; }

  /* ── 4. intestazioni di sezione: impilate, filetto a tutta larghezza ── */
  [style*="justify-content:space-between"][style*="border-bottom"],
  [style*="align-items:flex-end"][style*="border-bottom"],
  [style*="align-items:baseline"][style*="border-bottom"] {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 12px !important;
  }
  [style*="border-top:1px solid"][style*="align-items:baseline"] {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 10px !important;
  }

  /* ── 5. immagini a filo schermo: idioma mobile, non card rimpicciolite ── */
  [data-clip] {
    margin-left: -22px !important;
    margin-right: -22px !important;
    border-left: 0 !important;
    border-right: 0 !important;
  }
  /* i ritratti tondi e i piccoli riquadri restano nel gutter */
  [style*="border-radius:999px"][style*="aspect-ratio:1"],
  [data-clip][style*="border-radius:999px"] { margin-left: 0 !important; margin-right: 0 !important; }

  /* proporzioni pensate per il verticale */
  [style*="aspect-ratio:4 / 3"] { aspect-ratio: 5 / 4 !important; }
  [style*="aspect-ratio:3 / 4"], [style*="aspect-ratio:376 / 475"] { aspect-ratio: 4 / 5 !important; }
  [style*="aspect-ratio:9 / 19.5"] { max-height: 52vh !important; }

  /* ── 6. apertura: manifesto verticale ── */
  section[style*="height:100vh"] {
    height: auto !important;
    min-height: 96svh !important;
    padding-top: 76px !important;
    padding-bottom: 0 !important;
  }
  section[style*="height:100vh"] > div[style*="z-index:5"] {
    padding: 0 22px 44px !important;
    gap: 16px !important;
  }
  /* l'indicatore di scroll non serve dove si scorre col dito */
  [style*="animation:cue"] { display: none !important; }

  /* ── 7. rail: scorrono a filo schermo con anteprima della card successiva ── */
  [data-rail], [data-mood-rail], [data-app-rail] {
    margin-left: -22px !important;
    margin-right: -22px !important;
    padding-left: 22px !important;
    padding-right: 22px !important;
    scroll-snap-type: x proximity;
  }
  [data-rail] > div > div, [data-mood-rail] > div, [data-app-rail] > div { scroll-snap-align: start; }
  [style*="width:clamp(208px,20vw,268px)"] { width: 74vw !important; max-width: 300px !important; }

  /* ── 8. navigazione ── */
  a[style*="position:fixed"][style*="border-radius:999px"] {
    left: 14px !important; top: 12px !important;
    padding: 11px 16px !important; font-size: 11px !important;
  }
  #lang-toggle[style*="position:fixed"] { right: 12px !important; top: 12px !important; }
  #lang-toggle[style*="position:fixed"] span { padding: 11px 12px !important; font-size: 10px !important; }
  [style*="position:fixed"][style*="height:64px"] { height: 54px !important; }

  /* ── 9. footer impilato ── */
  footer > div, footer[style*="display:flex"] {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 20px !important;
  }

  /* ── 10. touch ── */
  a, button, [role="button"], [onclick] { min-height: 44px; }
  [style*="width:52px"][style*="height:52px"] { width: 48px !important; height: 48px !important; }
  /* frecce dei lightbox sotto la foto, non sopra il soggetto */
  [style*="position:absolute"][style*="top:50%"][style*="border-radius:999px"] {
    top: auto !important; bottom: 20px !important;
    translate: 0 0 !important; transform: none !important;
  }

  /* ── 11. matrici di icone e swatch: passo tattile ── */
  [style*="minmax(58px,1fr)"] { grid-template-columns: repeat(auto-fill, minmax(52px, 1fr)) !important; }
  [style*="minmax(110px,1fr)"] { grid-template-columns: repeat(auto-fill, minmax(88px, 1fr)) !important; }
  [style*="minmax(220px,1fr)"] { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)) !important; }

  [style*="width:104%"], [style*="width:108%"], [style*="width:126%"] { max-width: 136% !important; }

  /* ── 11b. componenti pixel costruiti da JS: dimensioni proprie per telefono
           (le 5 stelle a 30px + gap 9px non stanno in una colonna singola) ── */
  [style*="width:30px;height:30px;flex:none"] { width: 19px !important; height: 19px !important; }
  [style*="display:flex;gap:9px;margin-left:auto"] { gap: 4px !important; }
  [style*="width:44px;height:44px"][style*="flex:none"] { width: 34px !important; height: 34px !important; }
  [style*="font:400 16px Silkscreen"] { font-size: 12px !important; white-space: normal !important; }
  [style*="font:700 11px Silkscreen"] { font-size: 9px !important; }
  /* righe con tile + etichetta + stelle: niente traboccamento */
  [style*="align-items:center"][style*="gap:16px"],
  [style*="align-items:center"][style*="gap:18px"] { gap: 9px !important; }

  /* ── 12. titoli fuori dai tag h1/h2 (span/div con px fissi) ── */
  [style*="font-size:64px"] { font-size: 34px !important; }
  [style*="font-size:56px"], [style*="font-size:52px"] { font-size: 31px !important; }
  [style*="font-size:48px"], [style*="font-size:44px"] { font-size: 27px !important; }
  [style*="font-size:40px"], [style*="font-size:38px"] { font-size: 24px !important; }
  [style*="font-size:34px"], [style*="font-size:30px"] { font-size: 21px !important; }
  [style*="white-space:nowrap"] { white-space: normal !important; }

  /* ── 13. sezioni con misura interna: il gutter è già sulla sezione ── */
  [style*="max-width:1280px;margin:0 auto"],
  [style*="max-width:1080px;margin:0 auto"],
  [style*="max-width:1440px;margin:0 auto"] { padding-left: 0 !important; padding-right: 0 !important; }
}

/* ═══════════ telefoni piccoli (≤380px) ═══════════ */
@media (max-width: 380px) {
  h1 { font-size: 16vw !important; }
  h2 { font-size: 26px !important; }
  p  { font-size: 15px !important; }
  section, footer { padding-left: 17px !important; padding-right: 17px !important; }
  [data-clip], [data-rail], [data-mood-rail], [data-app-rail] { margin-left: -17px !important; margin-right: -17px !important; }
  a[style*="position:fixed"][style*="border-radius:999px"] span:last-child { display: none; }
}

/* ═══════════ parallasse: solo con puntatore preciso ═══════════ */
@media (hover: none), (max-width: 700px) {
  [data-par] { transform: none !important; }
}

/* ═══════════ touch: l'hover non esiste ═══════════ */
@media (hover: none) {
  [data-shot-stage] [data-live] { transition: opacity .25s ease; }
  [style*="style-hover"] { transform: none; }
  [data-loop] { animation-play-state: running; }
}

/* ═══════════ movimento ridotto ═══════════ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  [data-rev], [data-clip], [data-rv] { opacity: 1 !important; transform: none !important; clip-path: none !important; }
}