/* ============================================================
   ACHERER — impaginato per il telefono
   ============================================================

   Questo file non corregge il desktop rimpicciolito: ricompone le
   sezioni per uno schermo verticale. Si carica dopo style.css,
   quindi vince sulle regole precedenti senza bisogno di !important.

   Le scelte del gruppo di lavoro, in breve:

   - Un ritmo verticale unico. Sul desktop ogni sezione ha i suoi
     margini; su un telefono quella varietà diventa disordine,
     perché si vede una sezione per volta e non il loro rapporto.
   - Una sola colonna, tranne galleria e riconoscimenti, che a due
     si leggono meglio e accorciano una pagina già lunga.
   - Proporzioni delle fotografie costanti, 4:5. Altezze diverse a
     caso fanno sembrare il sito montato male anche quando non lo è.
   - Niente elementi decorativi posizionati in assoluto: i numeri
     giganti di sfondo e le scritte in filigrana, che sul desktop
     danno profondità, su 390 pixel diventano rumore sotto al testo.
   - Ogni cosa toccabile misura almeno 44 pixel di lato.

   Soglia: 760px. Sopra resta tutto come prima.
   ============================================================ */

@media (max-width: 760px) {

  /* ---------- fondamenta ---------- */

  :root {
    /* Ritmo verticale delle sezioni, un valore solo per tutte. */
    --m-sez: 3.6rem;
    --m-lato: 1.35rem;
    --m-gap: 1.1rem;
  }

  /* Nessuna colonna può allargarsi oltre lo schermo per contenere una
     parola lunga: è la causa numero uno dello scorrimento laterale. */
  section,
  section > *,
  .collection-grid, .macarons-grid, .gallery-grid, .awards-grid,
  .boutique-grid, .craft-steps, .blumen-grid, .nat-griglia,
  .atelier-content, .editorial-spread-content, .pan-inner {
    min-width: 0;
  }

  /* ---------- ritmo e larghezze ---------- */

  section {
    padding-left: var(--m-lato);
    padding-right: var(--m-lato);
    padding-top: var(--m-sez);
    padding-bottom: var(--m-sez);
  }

  /* ---------- titoli ---------- */

  .section-title,
  .macarons-hero h2,
  .craft-header h2,
  .gallery-header h2,
  .blumen-header h2,
  .nat-titolo,
  .pan-titolo,
  .recognitions .section-title {
    font-size: clamp(1.7rem, 8.4vw, 2.4rem);
    line-height: 1.12;
    letter-spacing: -0.02em;
    overflow-wrap: break-word;
  }

  .section-intro,
  .craft-header p,
  .blumen-header p {
    font-size: 0.95rem;
    line-height: 1.75;
    max-width: none;
  }

  /* Occhielli: più piccoli e meno spaziati, o vanno a capo male. */
  .label,
  .hero-eyebrow,
  .editorial-spread-tag,
  .nat-occhiello,
  .pan-occhiello,
  .gallery-item-tag,
  .boutique-tag {
    font-size: 0.56rem;
    letter-spacing: 0.24em;
  }

  /* ---------- una colonna ---------- */

  .collection-grid,
  .macarons-grid,
  .craft-steps,
  .boutique-grid,
  .blumen-grid,
  .nat-griglia,
  .atelier-content,
  .editorial-spread-content,
  .pan-inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--m-gap);
  }

  /* Galleria e riconoscimenti restano a due: sono riquadri piccoli e
     ripetuti, e a colonna singola la pagina diventerebbe infinita. */
  .gallery-grid,
  .awards-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.9rem;
  }

  /* Le card delle Collezioni perdono lo sfalsamento: in verticale non
     si legge come composizione, si legge come errore. */
  .collection-card,
  .card-large, .card-medium, .card-tall, .card-medium-2, .card-wide {
    grid-column: auto !important;
    transform: none !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  /* ---------- fotografie ---------- */

  .card-image,
  .macaron-card-img,
  .nat-foto,
  .blumen-duo-img,
  .gallery-item {
    aspect-ratio: 4 / 5;
    height: auto !important;
    min-height: 0 !important;
    width: 100% !important;
  }

  .gallery-item { aspect-ratio: 1; }

  /* ---------- decorazioni che spariscono ---------- */

  .hero-bignumber,
  .craft-bg-text,
  .atelier-decoration,
  .boutiques-bg,
  .marquee-mark { display: none; }

  /* ---------- fascia scorrevole ---------- */

  .marquee { padding: 1.6rem 0; }
  .marquee-item {
    font-size: 1.5rem;
    padding: 0 1.2rem;
  }

  /* ---------- manifesto ---------- */

  .manifesto { padding-top: 4rem; padding-bottom: 4rem; }
  .manifesto-quote { font-size: clamp(1.5rem, 7.4vw, 2.1rem); line-height: 1.25; }
  .manifesto-intro { font-size: 0.95rem; }
  .manifesto-line { height: 32px; }

  /* ---------- sezioni di prodotto (macarons e simili) ---------- */

  .macarons-hero { padding: 2.4rem 1.35rem; }
  .macarons-hero-content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1.6rem;
  }
  .macarons-hero-stat { display: flex; align-items: baseline; gap: 0.7rem; }
  .macarons-hero-stat .num { font-size: 2rem; }

  .macaron-card .num { font-size: 0.58rem; }
  .macaron-card h3 { font-size: 1.3rem; }
  .macaron-card .flavors { font-size: 0.9rem; line-height: 1.6; }

  /* ---------- atelier ed editoriale ---------- */

  /* Le due fotografie sovrapposte diventano una sopra l'altra, con un
     piccolo scarto: la sovrapposizione in orizzontale su 390 pixel
     nasconde metà di entrambe. */
  .atelier-images,
  .editorial-spread-images {
    position: relative;
    height: auto;
    display: flex;
    flex-direction: column;
    gap: 0;
  }
  .atelier-images > *,
  .editorial-spread-images > * {
    position: relative !important;
    inset: auto !important;
    transform: none !important;
    width: 100%;
  }
  .atelier-img-accent,
  .editorial-spread-img-2 {
    width: 62% !important;
    margin: -3rem 0 0 auto;
    z-index: 2;
  }
  /* La firma sovrapposta all'atelier torna nel flusso, sotto le foto. */
  .signature {
    position: relative !important;
    inset: auto !important;
    transform: none !important;
    margin: 1.2rem 0 0;
    width: 100%;
  }

  .editorial-seealso {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.4rem;
  }

  /* ---------- savoir-faire ---------- */

  .craft-step { padding: 1.4rem 0; }
  .craft-step .num { font-size: 1.6rem; }

  /* ---------- riconoscimenti ---------- */

  .awards-grid > * + * { border-left: 0; }
  .award-item { padding: 1.4rem 0.4rem; }
  .award-mark { width: 3.2rem; height: 3.2rem; font-size: 0.9rem; }
  .award-title { font-size: 1rem; }
  .award-logo-img { height: 30px; }
  .award-org, .award-detail { font-size: 0.64rem; }

  /* ---------- boutiques ---------- */

  .boutique-card { padding: 1.6rem 0; }
  .boutique-name { font-size: 1.35rem; }
  .boutique-address, .boutique-hours { font-size: 0.9rem; line-height: 1.7; }

  /* ---------- panettone e dolci di Natale ---------- */

  .pan { padding: var(--m-sez) var(--m-lato); }
  .pan-visivo { aspect-ratio: 1; cursor: default; }
  .pan-fatti { gap: 1.4rem; }
  .pan-fatti li { flex: 1 1 40%; }
  .pan-fatti .n { font-size: 1.25rem; }
  .pan-cta, .nat-cta { display: block; text-align: center; padding: 1.05rem 1.4rem; }

  .nat { padding: var(--m-sez) var(--m-lato); }
  .nat-griglia { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.9rem; }
  .nat-foto { aspect-ratio: 4 / 5; }
  .nat-nome { font-size: 0.98rem; margin-top: 0.8rem; }
  .nat-nota { font-size: 0.78rem; }
  .nat-prezzo { font-size: 0.86rem; }

  /* ---------- newsletter ---------- */

  .newsletter-form {
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
  }
  .newsletter-form input[type="email"],
  .newsletter-form button {
    width: 100%;
    min-height: 3rem;
  }
  .newsletter-consent { font-size: 0.72rem; line-height: 1.6; }

  /* ---------- cose da toccare ---------- */

  /* Sotto ai 44 pixel un dito sbaglia, ed è la misura consigliata da
     Apple e Google. Vale per ogni bottone e per i link isolati. */
  .btn-primary,
  .btn-link,
  .boutique-link,
  .card-discover,
  .pan-cta,
  .nat-cta,
  .newsletter-form button {
    min-height: 2.75rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  /* Il cursore personalizzato non esiste senza mouse: l'area di scoperta
     sulle card diventa un normale collegamento. */
  .collection-card { cursor: pointer; }
  .card-overlay, .card-discover { display: none; }

  /* ---------- piè di pagina ---------- */

  footer { padding: 3rem var(--m-lato) 2rem; }
  .footer-content { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2.2rem; }
  .footer-col { min-width: 0; }
  .footer-bottom {
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
  }
  .footer-bottom-links { flex-wrap: wrap; gap: 0.8rem 1.4rem; }

  /* Dati dell'impresa: riga lunga, va lasciata respirare. */
  .footer-impresa { font-size: 0.62rem; line-height: 1.85; margin-top: 1.2rem; }
}

/* ============================================================
   Telefoni stretti: sotto i 380 pixel si stringe ancora un po'.
   ============================================================ */

@media (max-width: 380px) {
  :root { --m-lato: 1.1rem; --m-sez: 3rem; }

  .gallery-grid,
  .awards-grid,
  .nat-griglia { grid-template-columns: minmax(0, 1fr); }

  .macarons-hero-stat .num { font-size: 1.7rem; }
  .marquee-item { font-size: 1.25rem; }
}