/* ================================================================
   RESPONSIVE.CSS — Media query Mobile-First
   Studio Rag. Ciuccariello

   STRATEGIA: gli stili base in style.css sono per mobile (< 768px).
   Qui aggiungiamo stili progressivi per schermi più grandi.

   BREAKPOINT:
     Mobile:  < 768px   (stili base in style.css)
     Tablet:  ≥ 768px   (min-width: 768px)
     Desktop: ≥ 1024px  (min-width: 1024px)
     Wide:    ≥ 1200px  (min-width: 1200px)
   ================================================================ */


/* ================================================================
   TABLET — min-width: 768px
   ================================================================ */
@media (min-width: 768px) {

  /* ----------------------------------------------------------------
     NAVBAR — Tablet
     Su tablet il menu rimane hamburger ma con più spazio
     ---------------------------------------------------------------- */
  .navbar__container {
    padding-inline: 2rem;
  }

  /* ----------------------------------------------------------------
     HERO — Tablet
     ---------------------------------------------------------------- */
  .hero__cta-group {
    gap: 1.25rem;
  }

  /* I bottoni hero non sono più full-width su tablet */
  .hero__cta-group .btn {
    width: auto;
    min-width: 180px;
  }

  /* ----------------------------------------------------------------
     SEZIONI — Tablet
     ---------------------------------------------------------------- */
  .section__header {
    margin-bottom: 3rem;
  }

  /* ----------------------------------------------------------------
     GRIGLIA SERVIZI — 2 colonne su tablet
     ---------------------------------------------------------------- */
  .grid--servizi {
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
  }

  /* ----------------------------------------------------------------
     CHI SIAMO — Statistiche su riga unica
     ---------------------------------------------------------------- */
  .about__stats {
    gap: 2.5rem;
  }

  /* ----------------------------------------------------------------
     GRIGLIA TEAM — 2 colonne su tablet
     ---------------------------------------------------------------- */
  .grid--team {
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
  }

  /* ----------------------------------------------------------------
     FORM CONTATTI — Riga nome+cognome affiancata su tablet
     ---------------------------------------------------------------- */
  .form-row {
    grid-template-columns: repeat(2, 1fr);
  }

  /* ----------------------------------------------------------------
     FOOTER — 2 colonne su tablet
     ---------------------------------------------------------------- */
  .footer__grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 2rem;
  }

}
/* fine @media 768px */


/* ================================================================
   DESKTOP — min-width: 1024px
   ================================================================ */
@media (min-width: 1024px) {

  /* ----------------------------------------------------------------
     NAVBAR — Desktop: hamburger nascosto, link orizzontali visibili
     ---------------------------------------------------------------- */
  .navbar__hamburger {
    display: none !important;
  }

  .navbar__menu {
    /* Ripristina display normale (override del comportamento mobile) */
    display: flex !important;
    position: static !important;
    max-height: none !important;
    opacity: 1 !important;
    overflow: visible !important;
    background: transparent !important;
    border-top: none !important;
    padding: 0 !important;
    box-shadow: none !important;
    width: auto !important;
  }

  .navbar__list {
    flex-direction: row;
    gap: 1.5rem;
    align-items: center;
  }

  .navbar__link {
    font-size: 0.9rem;
  }

  /* ----------------------------------------------------------------
     HERO — Desktop
     ---------------------------------------------------------------- */
  .hero__content {
    padding-block: 6rem;
  }

  /* I bottoni rimangono auto-width su desktop */
  .hero__cta-group .btn {
    min-width: 200px;
  }

  /* ----------------------------------------------------------------
     GRIGLIA SERVIZI — 3 colonne su desktop
     ---------------------------------------------------------------- */
  .grid--servizi {
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
  }

  /* ----------------------------------------------------------------
     CHI SIAMO — 2 colonne: testo sx, foto dx
     ---------------------------------------------------------------- */
  .about__grid {
    grid-template-columns: 1fr 1fr;
    gap: 5rem;
  }

  /* Su desktop la foto viene a destra (ordine DOM: testo prima, foto dopo) */
  .about__photo {
    order: 2;
  }

  .about__text {
    order: 1;
  }

  /* ----------------------------------------------------------------
     GRIGLIA TEAM — rimane 2 colonne su desktop
     (4 card ben proporzionate)
     ---------------------------------------------------------------- */
  .grid--team {
    grid-template-columns: repeat(2, 1fr);
    gap: 2rem;
    max-width: 800px;
    margin-inline: auto;
  }

  /* ----------------------------------------------------------------
     CONTATTI — 2 colonne: form sx, info dx
     ---------------------------------------------------------------- */
  .contact__grid {
    grid-template-columns: 3fr 2fr;
    gap: 4rem;
    align-items: start;
  }

  /* ----------------------------------------------------------------
     FOOTER — 4 colonne su desktop
     ---------------------------------------------------------------- */
  .footer__grid {
    grid-template-columns: 2fr 1fr 1.5fr 1fr;
    gap: 3rem;
  }

}
/* fine @media 1024px */


/* ================================================================
   WIDE — min-width: 1200px
   Aggiustamenti minori per schermi molto grandi
   ================================================================ */
@media (min-width: 1200px) {

  /* Container padding maggiore */
  :root {
    --container-padding: 2rem;
  }

  /* Team: 4 colonne su schermi molto larghi */
  .grid--team {
    grid-template-columns: repeat(4, 1fr);
    max-width: 100%;
  }

  /* Griglia contatti più bilanciata */
  .contact__grid {
    grid-template-columns: 1fr 1fr;
    gap: 5rem;
  }

}
/* fine @media 1200px */


/* ================================================================
   MOBILE-ONLY OVERRIDES
   Stili applicati SOLO su mobile (max-width)
   ================================================================ */
@media (max-width: 767px) {

  /* ----------------------------------------------------------------
     NAVBAR — Hamburger visibile, menu a tendina
     ---------------------------------------------------------------- */
  .navbar__hamburger {
    display: flex;
  }

  /* Menu mobile: dropdown full-width sotto la navbar */
  .navbar__menu {
    position: absolute;
    top: var(--navbar-height);
    left: 0;
    right: 0;
    background-color: var(--color-white);
    border-top: 1px solid var(--color-border);
    box-shadow: var(--shadow-md);
    padding: 0;
    display: block;  /* Sempre nel DOM, controllato da max-height */
    width: 100vw;
    z-index: 999;
  }

  .navbar__list {
    flex-direction: column;
    gap: 0;
    align-items: stretch;
    padding: 0.5rem 0;
  }

  .navbar__link {
    display: block;
    padding: 0.9rem 1.5rem;
    font-size: 1rem;
    border-radius: 0;
    min-height: 52px;
    line-height: 1;
    border-bottom: 1px solid var(--color-border);
  }

  .navbar__link:last-child {
    border-bottom: none;
  }

  /* CTA "Contatti" nel menu mobile */
  .navbar__link--cta {
    margin: 0.75rem 1.25rem;
    border-radius: var(--radius-full) !important;
    text-align: center;
    border-bottom: none !important;
  }

  /* ----------------------------------------------------------------
     HERO — Mobile
     ---------------------------------------------------------------- */

  /* I bottoni CTA su mobile sono full-width e verticali */
  .hero__cta-group {
    flex-direction: column;
    align-items: stretch;
    gap: 0.75rem;
    max-width: 320px;
    margin-inline: auto;
    width: 100%;
  }

  .hero__cta-group .btn {
    width: 100%;
    justify-content: center;
  }

  /* ----------------------------------------------------------------
     SEZIONI — Mobile
     ---------------------------------------------------------------- */
  .section__header {
    margin-bottom: 2rem;
  }

  /* ----------------------------------------------------------------
     CHI SIAMO — Mobile: foto sopra, testo sotto
     ---------------------------------------------------------------- */
  .about__photo {
    order: -1; /* Foto sopra su mobile */
  }

  .about__stats {
    gap: 1.5rem;
  }

  /* ----------------------------------------------------------------
     FORM — Mobile
     ---------------------------------------------------------------- */
  .contact-form {
    padding: 1.25rem;
  }

  /* ----------------------------------------------------------------
     FOOTER — Mobile
     ---------------------------------------------------------------- */
  .footer__grid {
    grid-template-columns: 1fr;
    gap: 1.75rem;
  }

  /* ----------------------------------------------------------------
     MAPPA — Mobile: altezza ridotta
     ---------------------------------------------------------------- */
  .map-wrap iframe {
    height: 180px;
  }

  /* ----------------------------------------------------------------
     CARD — Hover ridotto su touch (nessun hover reale)
     ---------------------------------------------------------------- */
  @media (hover: none) {
    .card:hover,
    .team-card:hover {
      transform: none;
      box-shadow: var(--shadow-card);
    }
  }

}
/* fine @media max 767px */


/* ================================================================
   IPHONE SE e schermi molto piccoli — max-width: 375px
   Verifiche extra per dispositivi stretti
   ================================================================ */
@media (max-width: 375px) {

  :root {
    --container-padding: 1rem;
  }

  /* Titolo hero non troppo grande */
  .hero__title {
    font-size: 1.75rem;
  }

  /* Logo navbar: nascondi il testo fallback se troppo lungo */
  .navbar__logo-fallback {
    font-size: 0.8rem;
    max-width: 180px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  /* Card servizi: padding ridotto */
  .card {
    padding: 1.25rem;
  }

  /* Statistiche chi siamo: impilate */
  .about__stats {
    flex-direction: column;
    gap: 1rem;
  }

  /* Form: padding ridotto */
  .contact-form {
    padding: 1rem;
  }

  /* Team card: foto leggermente più piccola */
  .team-card__photo-wrap {
    width: 100px;
    height: 100px;
  }

}
/* fine @media max 375px */


/* ================================================================
   STAMPA — Stili base per la stampa della pagina
   ================================================================ */
@media print {

  .navbar,
  .hero__cta-group,
  .footer__social,
  .map-wrap,
  .btn {
    display: none !important;
  }

  body {
    padding-top: 0;
    background-color: white;
    color: black;
  }

  .hero {
    min-height: auto;
    padding: 2rem;
  }

  .hero__bg,
  .hero__overlay {
    display: none;
  }

  .hero__title,
  .hero__subtitle {
    color: black;
  }

  a::after {
    content: " (" attr(href) ")";
    font-size: 0.8em;
    color: #555;
  }

}