/* ==========================================================================
   Rifiniture per schermi piccoli (≤ 48rem)
   Scala compatta stile app (riferimento: Airbnb mobile):
   corpo 16px, titoli sezione ~25px, label 11px, bottoni ~48pt.
   ========================================================================== */

@media (max-width: 47.99rem) {

  /* --- Scala tipografica ------------------------------------------------ */
  :root {
    --step--1: 0.875rem;   /* 14 — testi secondari    */
    --step-0: 1rem;        /* 16 — corpo              */
    --step-1: 1.0625rem;   /* 17 — lead, card title   */
    --step-2: 1.1875rem;   /* 19 — sottotitoli        */
    --step-3: 1.375rem;    /* 22                      */
    --step-4: 1.5625rem;   /* 25 — titoli di sezione  */
    --header-h: 60px;
  }

  body { line-height: 1.55; }

  .section { padding-block: 2.5rem; }
  .section-head { margin-bottom: 1.4rem; }
  .section-head p { font-size: 0.9375rem; line-height: 1.5; margin-top: 0.7rem; }
  .eyebrow { margin-bottom: 0.7rem; font-size: 0.6875rem; letter-spacing: 0.13em; }
  .eyebrow::before { width: 1.25rem; }

  h2 { line-height: 1.15; }

  /* --- Header ----------------------------------------------------------- */
  .brand img { height: 30px; }
  .header-cta { min-height: 44px; padding: 0.6em 1em; font-size: 0.8125rem; }
  .brand { min-height: 44px; }
  .nav-toggle { width: 44px; height: 44px; }

  /* --- Hero ------------------------------------------------------------- */
  .hero {
    background: var(--ink-900);
    display: flex;
    flex-direction: column;
  }
  .factbar { order: 3; }

  /* Impilata: prima il testo con la CTA, poi il ritratto. L'ordine tiene il
     pulsante vicino alla piega invece che sotto una foto alta mezzo schermo. */
  .hero__grid {
    min-height: 0;
    justify-content: flex-start;
    gap: 1.5rem;
    padding-top: 1.5rem;
    padding-bottom: 1.75rem;
  }
  .hero__portrait img { border-radius: var(--radius); }

  .hero__kicker {
    margin-bottom: 1rem;
    padding: 0.35rem 0.7rem;
    font-size: 0.625rem;
    letter-spacing: 0.09em;
  }
  .hero h1 { font-size: 1.75rem; line-height: 1.16; }
  .hero__lead { margin-top: 0.9rem; font-size: 0.9375rem; line-height: 1.55; }

  .hero__actions { margin-top: 1.4rem; gap: 0.6rem; }
  .hero__actions .btn { width: 100%; }
  .hero__meta { margin-top: 0.9rem; font-size: 0.75rem; }

  /* --- Bottoni: altezza da app (~48pt) ---------------------------------- */
  .btn--lg { padding: 0.95em 1.5em; font-size: 0.9375rem; }  /* 44px netti */
  .btn { font-size: 0.875rem; }

  /* --- Barra dati: 2×2 compatta ----------------------------------------- */
  .factbar .grid--4 {
    grid-template-columns: 1fr 1fr;
    gap: 0;
    padding-block: 0;
  }
  .factbar .stat {
    padding: 0.9rem 0.75rem 0.9rem 0;
    border-top: 1px solid var(--line-dark);
  }
  .factbar .stat:nth-child(odd) { border-right: 1px solid var(--line-dark); }
  .factbar .stat + .stat { border-left: 0; padding-left: 0; }
  .factbar .stat:nth-child(even) { padding-left: 0.9rem; }
  .stat__value { font-size: 1.5rem; }
  .stat__label { margin-top: 0.3rem; font-size: 0.75rem; line-height: 1.4; }
  .stat__note { display: none; }

  /* --- Card servizi ------------------------------------------------------ */
  .grid--3, .grid--2, .bento { gap: 0.75rem; }
  .card { padding: 1.1rem 1rem; border-radius: var(--radius); }
  .card__num { margin-bottom: 0.5rem; font-size: 1rem; }
  .card h3 { font-size: 1.0625rem; margin-bottom: 0.4rem; }
  .card p { font-size: 0.875rem; line-height: 1.5; }
  .card__list { margin-top: 0.75rem; gap: 0.4rem; }
  .card__list li { font-size: 0.8125rem; line-height: 1.45; padding-left: 1.1rem; }
  .card__list li::before { width: 5px; height: 5px; top: 0.5em; }

  /* --- Timeline: verticale con filo ------------------------------------- */
  .timeline { position: relative; padding-left: 1.25rem; }
  .timeline::before {
    content: "";
    position: absolute;
    left: 3px; top: 0.4rem; bottom: 2rem;
    width: 1px;
    background: linear-gradient(180deg, var(--gold-500), rgba(196, 162, 101, 0.15));
  }
  .timeline__item { padding: 0 0 1.4rem; border-top: 0; }
  .timeline__item::before { top: 0.35rem; left: -1.25rem; width: 7px; height: 7px; }
  .timeline__step { margin-bottom: 0.3rem; font-size: 0.625rem; }
  .timeline__item h3 { font-size: 1.0625rem; margin-bottom: 0.35rem; }
  .timeline__item p { font-size: 0.875rem; line-height: 1.5; }
  .timeline__when { margin-top: 0.6rem; font-size: 0.6875rem; padding: 0.25rem 0.55rem; }

  /* --- Testo corrente fuori dai componenti -------------------------------- */
  /* Prima erano stili in linea nell'HTML a var(--step-1): la biografia usciva
     a 17px, più grande dei sommari di sezione (15px) e del testo delle card
     (14px). Qui rientrano nella stessa scala di tutto il resto. */
  .lede { margin-top: 1rem; font-size: 0.9375rem; line-height: 1.55; }
  .prosa { margin-top: 0.85rem; font-size: 0.9375rem; line-height: 1.6; }

  /* --- Sezione studio ---------------------------------------------------- */
  .split { gap: 1.5rem; }
  .bio__creds { margin-top: 1.25rem; padding-top: 1.1rem; gap: 0.65rem; }
  .bio__creds li { font-size: 0.8125rem; line-height: 1.5; gap: 0.6rem; }
  .bio__creds svg { width: 15px; height: 15px; }

  /* --- Testimonianze: carosello ------------------------------------------ */
  #testimonianze {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 62%;
    grid-template-columns: none;
    gap: 0.75rem;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--gutter);
    -webkit-overflow-scrolling: touch;
    padding-bottom: 0.6rem;
    margin-inline: calc(var(--gutter) * -1);
    padding-inline: var(--gutter);
    scrollbar-width: none;
  }
  #testimonianze::-webkit-scrollbar { display: none; }
  #testimonianze .vcard { scroll-snap-align: start; }
  .vcard__caption { padding: 0.65rem 0.8rem 0.8rem; }
  .vcard__caption strong { font-size: 0.8125rem; }
  .vcard__caption span { font-size: 0.6875rem; }
  .vcard__play span { width: 46px; height: 46px; }

  .clienti-hint {
    display: block;
    margin-top: 0.75rem;
    font-size: 0.6875rem;
    color: var(--text-on-dark-muted);
  }

  /* --- FAQ ---------------------------------------------------------------- */
  .faq summary {
    padding: 0.95rem 0;
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 0.9375rem;
    line-height: 1.4;
    gap: 0.65rem;
  }
  .faq summary::after { width: 8px; height: 8px; margin-top: 0.35em; }
  .faq__body { padding-bottom: 1rem; font-size: 0.875rem; line-height: 1.6; }

  /* --- Contatti e form ---------------------------------------------------- */
  .contact__list { gap: 0.9rem; margin-top: 1.25rem; }
  .contact__list dt { font-size: 0.625rem; margin-bottom: 0.2rem; }
  .contact__list dd { font-size: 0.875rem; line-height: 1.5; }
  /* 0.7rem porta il collegamento a 44px di altezza: sotto quella soglia
     centrare il dito su un indirizzo email diventa un terno al lotto. */
  .contact__list dd a { display: inline-block; padding-block: 0.7rem; }

  .booking { min-height: 0; }
  .booking__calendar iframe { min-height: 540px; }

  .qualify { padding: 1.25rem 1.1rem 1.4rem; }
  .qualify__title { font-size: 1.1875rem; }
  .qualify__sub { margin-top: 0.45rem; margin-bottom: 1.2rem; font-size: 0.8125rem; }
  .qualify__field { margin-bottom: 1.1rem; }
  .qualify__field legend,
  .qualify__field > label { font-size: 0.6875rem; margin-bottom: 0.45rem; }
  /* NB: input ≥16px, sotto quella soglia iOS zooma sul focus */
  .qualify__field input[type="text"],
  .qualify__field textarea { font-size: 1rem; padding: 0.75rem 0.85rem; }
  /* Due colonne fisse invece del flusso a capo libero. Con otto pillole di
     lunghezza diversa, il flex-wrap produceva sette righe con sette
     allineamenti diversi e un margine destro tutto frastagliato: era il punto
     più disordinato della pagina. In griglia le pillole hanno tutte la stessa
     larghezza e il blocco si legge come un blocco. */
  .qualify__chips {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.4rem;
  }
  .qualify__chips span {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;          /* bersaglio tattile */
    padding: 0.45rem 0.7rem;
    font-size: 0.8125rem;
    line-height: 1.25;
    text-align: center;
  }
  .qualify__note { font-size: 0.6875rem; }

  .note { padding: 0.8rem 0.9rem; font-size: 0.8125rem; line-height: 1.5; }

  /* --- Footer ------------------------------------------------------------- */
  .site-footer { font-size: 0.8125rem; }
  .site-footer .wrap { gap: 1.4rem; }
  .site-footer img { height: 38px; }
  .site-footer h4 { font-size: 0.625rem; margin-bottom: 0.5rem; }
  .site-footer li { margin: 0; }
  .site-footer li + li { margin-top: 0; border-top: 1px solid rgba(232, 237, 243, 0.08); }
  .site-footer li a,
  .site-footer li:not(:has(a)) {
    display: block;
    padding-block: 0.8rem;   /* 44px netti */
  }
  .footer-partner ul { gap: 0.9rem 1.5rem; }
  .footer-partner li + li { border-top: 0; }
  .footer-partner img { height: 22px; }
  .footer-partner img[src*="rakez"] { height: 34px; }
  .footer-legal { margin-top: 1.4rem; gap: 0.5rem; font-size: 0.6875rem; }
  .footer-legal a { display: inline-block; padding-block: 0.85rem; }

  /* --- Barra di azione fissa ---------------------------------------------- */
  .actionbar {
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 90;
    display: flex;
    gap: 0.5rem;
    padding: 0.6rem var(--gutter) calc(0.6rem + env(safe-area-inset-bottom));
    background: rgba(8, 19, 31, 0.96);
    backdrop-filter: blur(12px);
    border-top: 1px solid var(--line-dark);
    transform: translateY(110%);
    transition: transform 0.3s var(--ease);
  }
  .actionbar.is-visible { transform: none; }
  .actionbar .btn { flex: 1; min-height: 44px; padding: 0.8em 0.5em; font-size: 0.8125rem; }
  .actionbar .btn--ghost { flex: 0 0 auto; padding-inline: 1em; }

  body { padding-bottom: 0; }
  body.has-actionbar { padding-bottom: 4.25rem; }
}

@media (min-width: 48rem) {
  .actionbar { display: none; }
  .clienti-hint { display: none; }
}