/* --------------------------------------------------------- */
/*  FIX RESPONSIVE – CONTATTI & FOOTER  (≤ 767 px / ≤ 479 px) */
/* --------------------------------------------------------- */

/* ---------- 1. Griglia “Contatti” ---------- */
@media screen and (max-width: 767px) {
  .grid-contact{
    grid-template-columns: 1fr;         /* una sola colonna */
    grid-row-gap: 48px;                 /* spazio fra le card */
  }
  .single-column-contact{
    padding: 0 16px;                    /* respiro laterale */
  }
  /* Instagram preview: 2 col su small */
  .grid-insta-fourths{
    grid-template-columns: 1fr 1fr;
  }
}
@media screen and (max-width: 479px){
  /* su telefoni stretti: card Instagram a pila singola */
  .grid-insta-fourths{
    grid-template-columns: 1fr;
  }
}

/* ---------- 2. Footer ---------- */
@media screen and (max-width: 767px){
  .grid-footer{
    grid-template-columns: 1fr;         /* stacca le due macro-colonne */
    grid-row-gap: 64px;
  }
  .grid-right-footer{
    /* tre blocchi (“Links”) ora su due colonne simmetriche */
    grid-template-columns: 1fr 1fr;
    grid-row-gap: 32px;
  }
}
@media screen and (max-width: 479px){
  .grid-right-footer{
    grid-template-columns: 1fr;         /* impila tutto sul telefono */
  }
}

/* ---------- 3. Piccoli ritocchi estetici ---------- */
@media screen and (max-width: 479px){
  .text-style-h3{font-size: 26px;}      /* titoli leggermente più grandi */
  .text-contact-item,
  .link-social,
  .text-bottom-footer{font-size: 16px;}
}


/* ------------------------------------------------ */
/*  TYPO MOBILE TUNING  –  tutti i testi ≤ 767 px    */
/* ------------------------------------------------ */
@media screen and (max-width: 767px){

  /* 1. Override delle CSS custom-properties
     (cambiamo solo i valori, non i nomi)         */
  :root{
    /* titoli */
    --type--h1:      48px;   /* prima 102px */
    --type--h2:      32px;   /* prima 42px  */
    --type--h3:      24px;   /* prima 35px  */
    --type--subtitle:22px;

    /* corpo testo */
    --type--body-regular:18px;   /* prima 20px */
    --type--body-small:  16px;   /* prima 18px */
    --type--body-tiny:   14px;   /* prima 16px */

    /* top-label (“06// Contatti”, ecc.) */
    --type--top-text:    11px;
  }

  /* 2. Line-height leggermente più ariosa */
  body,
  p,
  .body-small,
  .body-tiny{
    line-height: 1.35;      /* ≈135 % */
  }
  h1,h2,h3{
    line-height: 1.2;
  }

  /* 3. Margini verticali più compatti sui titoli */
  h1,h2,h3{
    margin-top: 0.8em;
    margin-bottom: 0.5em;
  }

  /* 4. Titoli nelle card (“text-style-h3”) */
  .text-style-h3{
    font-size: var(--type--h3);   /* 24 px ora */
  }

  /* 5. Small tweaks su componenti ripetitivi */
  .link-arrow,
  .link-social,
  .text-contact-item,
  .text-bottom-footer{
    font-size: 16px;
  }

}

/* ------------------------------------------------ */
/*  EXTRA – telefoni molto stretti (≤ 479 px)        */
/* ------------------------------------------------ */
@media screen and (max-width: 479px){

  :root{
    --type--h1: 40px;
    --type--h2: 28px;
    --type--h3: 22px;
  }

  .menu-cta-heading{   /* heading nel blocco CTA full-width */
    font-size: var(--type--h2);
  }

}

/* --------------------------------------------- */
/*  HERO – tipografia & layout responsive        */
/* --------------------------------------------- */

/* 2.1  Semantica headline / testo base */
.hero-heading  {font-size: var(--type--h1); line-height:1.15; margin:0;}
.hero-address  {font-size: var(--type--body-regular); margin:.6em 0 1.2em;}
.hero-hours    {font-size: var(--type--body-small);   line-height:1.35; margin:0;}

/* 2.2  Layout mobile: colonna unica e font più snelli */
@media screen and (max-width: 767px){
  .bottom-hero-home          {flex-direction:column; align-items:flex-start;}
  .right-bottom-hero-home    {margin-top:24px;}
  .hero-heading              {font-size:48px;}
  .hero-address              {font-size:16px;}
  .hero-hours                {font-size:16px;}
}

@media screen and (max-width: 479px){
  .hero-heading{font-size:40px;}
}