/* =============================================================================
   Tania KA · I Codici Genealogici — regole per i telefoni.
   Sta in un file a parte perche' style.css era arrivato al limite di righe.
   Va caricato DOPO style.css: qui dentro ci sono solo correzioni di misura.
   ========================================================================== */

/* =============================================================================
   Telefoni: la prima e l'ultima schermata devono leggersi come un blocco solo
   Il primo schermo occupa esattamente l'altezza del display: testo in alto,
   ritratto che riempie lo spazio che avanza. Niente pezzi tagliati a meta'.
   ========================================================================== */
@media (max-width: 899px) {
  .topbar { font-size: 11px; letter-spacing: 0.06em; padding: 10px 16px; }

  .hero {
    min-height: calc(100svh - 38px);
    display: flex; flex-direction: column;
    padding-top: 24px;
  }
  .hero__grid { flex: 1 1 auto; gap: 10px; display: flex; flex-direction: column; }
  .hero__intro { flex: 0 0 auto; }
  /* flex-basis 0: cosi l'altezza del riquadro la decide lo spazio che avanza,
     e il ritratto si adatta invece di allungare la pagina */
  /* nel flex verticale l'allineamento del blocco base spingeva la foto a
     destra: qui deve occupare tutta la larghezza e restare centrata */
  .hero__grid { align-items: stretch; }
  .hero__photo { flex: 1 1 0; min-height: 200px; align-self: stretch; }
  .hero__photo img {
    width: 100%; height: 100%;
    object-fit: contain; object-position: bottom center;
  }

  .hero h1 { margin-top: 14px; font-size: clamp(31px, 8.2vw, 42px); }
  .hero__claim { margin-top: 13px; font-size: 17px; }
  .hero__text  { margin-top: 11px; font-size: 15px; }
  .hero__dates { margin-top: 13px; font-size: 14px; }

  /* bottone e riga di rassicurazione: una cosa sola, non due */
  .hero__cta {
    margin-top: 18px;
    flex-direction: column; align-items: stretch; gap: 8px;
  }
  .hero__cta .btn { width: 100%; }
  .hero__note { text-align: center; }

  /* Bottoni piu' visibili: Tania segnala che dal telefono passano inosservati.
     A tutta larghezza, testo piu' pesante, altezza da pollice. */
  .btn {
    width: 100%; min-height: 56px;
    font-size: 15.5px; padding: 16px 18px;
    text-align: center; line-height: 1.25;
  }
  .btn--big { font-size: 16.5px; padding: 18px 18px; }
  .sticky .btn { font-size: 15px; padding: 15px 14px; min-height: 52px; }

  /* il titolo dell'hero e' su due righe: la seconda resta leggibile */
  .hero__h1b { font-size: 0.66em; margin-top: 6px; }

  /* chi sono: prima il ritratto, poi il testo */
  .bio__photo img { width: min(74%, 260px); }
  .bio__cap { font-size: 10.5px; letter-spacing: 0.1em; }
  .diamond { margin: 26px 0; }

  .sticker { width: 96px; height: 96px; font-size: 9.5px; }
  .sticker b { font-size: 25px; }

  /* --- ultima schermata: titolo e modulo entrano insieme ------------------ */
  #iscriviti-fine { padding: 46px 0; }
  #iscriviti-fine h2 { font-size: clamp(28px, 7.4vw, 36px); }
  #iscriviti-fine .card-form { margin-top: 22px; padding: 22px 20px; }
  #iscriviti-fine .field { margin-bottom: 11px; }
  #iscriviti-fine .field input { padding: 14px 16px; }
  #iscriviti-fine .consent { margin: 14px 0 16px; }
  #iscriviti-fine .count { margin-top: 18px; padding-top: 18px; }
  #iscriviti-fine .count__num { font-size: 27px; }

  /* La barra fissa si nasconde gia' sull'ultima schermata, quindi qui sotto
     non serve tenere spazio libero per lei: il footer chiude subito. */
  .foot { padding: 30px 0 calc(26px + env(safe-area-inset-bottom)); font-size: 13px; }
  .foot__brand { font-size: 19px; margin-bottom: 6px; }
  .foot__links { margin-top: 8px; gap: 6px 14px; }
}

/* --- telefoni bassi (iPhone SE e simili): stessa idea, misure piu strette -- */
@media (max-width: 899px) and (max-height: 800px) {
  .hero { padding-top: 18px; }
  .hero__badge { padding: 8px 13px; }
  .hero h1 { font-size: clamp(28px, 7.6vw, 34px); margin-top: 12px; }
  .hero__claim { margin-top: 11px; font-size: 16px; }
  .hero__text  { margin-top: 9px;  font-size: 14.5px; }
  .hero__dates { margin-top: 11px; font-size: 13.5px; }
  .hero__cta   { margin-top: 14px; }
  .hero__photo { min-height: 150px; }
  .sticker { width: 84px; height: 84px; font-size: 8.5px; }
  .sticker b { font-size: 21px; }

  #iscriviti-fine { padding: 36px 0; }
  #iscriviti-fine h2 { font-size: 26px; }
  #iscriviti-fine .lead { font-size: 15px; }
  #iscriviti-fine .card-form { margin-top: 16px; padding: 18px 16px; }
  #iscriviti-fine .form__note { display: none; }
  #iscriviti-fine .count { margin-top: 12px; padding-top: 12px; }
  #iscriviti-fine .count__cell { padding: 8px 3px 7px; }
  #iscriviti-fine .count__num { font-size: 22px; }
}