/* Telefono e tablet — riccardosponchiado.com
   Le pagine sono scritte con stili in linea per il desktop; qui si correggono
   solo gli schermi piccoli, tramite classi r-*. Regole: Design/DESIGN.md §9. */

/* Tema scuro per barre di scorrimento e controlli di sistema; ancore e focus
   non finiscono sotto l'header fisso; niente lampo azzurro al tocco (Revisione 2, A6–A7) */
:root { color-scheme: dark; scroll-padding-top: 100px; scroll-behavior: smooth; -webkit-tap-highlight-color: transparent; }

/* "Salta al contenuto": nascosto finché non lo raggiunge il tasto Tab (Revisione 1, B) */
.r-skip { position: absolute; left: 16px; top: -120px; z-index: 30; background: #F4D35E; color: #0D1B2A !important; font-size: 15px; font-weight: 500; padding: 12px 18px; border-radius: 2px; }
.r-skip:focus { top: 12px; }

/* Focus da tastiera: contorno Ottone, solo con :focus-visible (Revisione 2, A5) */
:focus-visible { outline: 2px solid #F4D35E; outline-offset: 3px; }
[tabindex="-1"]:focus { outline: none; }
label:has(+ input[type="file"]:focus-visible) { outline: 2px solid #F4D35E; outline-offset: 3px; }

/* Area cliccabile di almeno 44px senza cambiare l'impaginazione (Revisione 2, A9) */
.r-logo, .r-hit { position: relative; }
.r-logo::after, .r-hit::after { content: ""; position: absolute; inset: -13px -6px; }

/* Bottoni ← → dei caroselli (Revisione 2, B4): come il bottone secondario, 44×44 */
.r-arrow { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0; background: none; border: 1px solid #778DA9; border-radius: 2px; color: #E0E1DD; cursor: pointer; transition: border-color 220ms ease, color 220ms ease; }
.r-arrow:hover { border-color: #F4D35E; }
.r-arrow[aria-disabled="true"] { border-color: #1B263B; color: #778DA9; cursor: default; }

/* Menu a scomparsa: nascosto su desktop */
.r-burger, .r-mmenu { display: none !important; }

@media (max-width: 900px) {
  .r-nav { display: none !important; }
  .r-burger { display: inline-flex !important; padding: 14px 16px !important; }
  .r-mmenu { display: flex !important; overscroll-behavior: contain; }
}

@media (max-width: 767px) {
  /* Margini laterali 20px e spazi verticali ridotti (valori in --mp) */
  .r-wrap { padding: var(--mp) !important; }
  .r-head { gap: 16px !important; }
  .r-logo { font-size: 22px !important; }

  /* Griglie a due colonne → una colonna */
  .r-stack { grid-template-columns: minmax(0, 1fr) !important; gap: 28px !important; }
  .r-tl { text-align: left !important; flex-direction: row !important; gap: 28px !important; }

  /* Piè di pagina: link alti 44px */
  .r-tl a { display: inline-flex; align-items: center; min-height: 44px; }
  .r-contacts a { display: inline-block; min-height: 44px; padding-top: 10px; }
  .r-static { position: static !important; }
  .r-portrait { order: -1; max-width: 300px; width: 100%; }

  /* Titoli */
  .r-h1 { font-size: clamp(44px, 13vw, 64px) !important; }
  .r-lead { font-size: 19px !important; }

  /* Caroselli: la carta successiva si intravede */
  .r-card { flex: 0 0 min(78vw, 320px) !important; width: min(78vw, 320px) !important; }
  .r-ex { flex: 0 0 min(84vw, 440px) !important; width: min(84vw, 440px) !important; }

  /* Elementi solo da desktop (es. indice della Privacy) */
  .r-hide-m { display: none !important; }

  /* Pannello del modulo */
  .r-panel { padding: 28px 20px 32px !important; }
}

/* Nessuna animazione per chi l'ha disattivata nel sistema */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}