/* ════════════════════════════════════════════════════
   responsive.css — Due Elle Import-Export Srl
   Breakpoints:
     ≤ 1199px  →  Laptop
     ≤ 1023px  →  Tablet
     ≤  767px  →  Mobile
     ≤  479px  →  Mobile Small
════════════════════════════════════════════════════ */


/* ══════════════════════════════
   LAPTOP  ( ≤ 1199px )
══════════════════════════════ */
@media (max-width: 1199px) {

  header { padding: 0 32px; }

  #home { background-image: url('../images/banner-bg-1200w.webp'); }
  .hero-inner { padding: 70px 48px; }

  #servizi,
  #chi-siamo,
  #servizi-doganali,
  #contatti { padding-left: 48px; padding-right: 48px; }

  .legal-page { padding-left: 48px; padding-right: 48px; }

  footer { padding-left: 48px; padding-right: 48px; }

  .servizi-grid,
  .about-grid  { gap: 56px; }
  .contact-wrap { gap: 56px; }
  .footer-grid  { gap: 40px; }
}


/* ══════════════════════════════
   TABLET  ( ≤ 1023px )
══════════════════════════════ */
@media (max-width: 1023px) {

  /* ── Header ── */
  header { padding: 0 28px; }
  nav    { display: none; }
  .menu-toggle { display: flex; }

  /* Menu mobile overlay */
  nav.open {
    display: flex;
    flex-direction: column;
    position: fixed;
    top: 72px; left: 0; right: 0;
    background: rgba(255,255,255,0.98);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--mid);
    padding: 16px 28px;
    gap: 4px;
    z-index: 999;
    box-shadow: 0 8px 24px rgba(0,0,0,0.08);
  }
  nav.open a {
    padding: 12px 16px;
    font-size: 16px;
    border-radius: 8px;
    color: var(--text);
  }
  nav.open a:hover { background: var(--light); color: var(--accent); }

  /* ── Hero ── */
  #home { background-image: url('../images/banner-bg-960w.webp'); }
  .hero-inner { padding: 60px 32px; }
  .hero-logo  { height: 76px; }

  /* ── Sezioni ── */
  #servizi,
  #chi-siamo,
  #servizi-doganali,
  #contatti {
    padding-top: 72px; padding-bottom: 72px;
    padding-left: 32px; padding-right: 32px;
  }
  footer { padding: 52px 32px 28px; }

  .legal-page { padding: 128px 32px 72px; }

  /* ── Griglie → singola colonna ── */
  .servizi-grid,
  .about-grid,
  .contact-wrap { grid-template-columns: 1fr; gap: 40px; }

  /* ── Servizi Doganali: accordion (niente scroll orizzontale, niente hover) ── */
  .doganali-wrap {
    padding: 8px;
    min-height: 0;
  }
  .doganali-wrap::before { display: none; }

  .dog-head {
    width: 100%;
    margin: 0 0 6px; padding: 14px 16px;
    background: rgba(29,78,216,.06);
    border-left: none; border-radius: 10px;
    font-size: 14px; color: var(--dark);
    min-height: 48px;
  }
  .dog-head .nav-text { flex: 1; }
  .dog-head .nav-num { color: var(--accent2); }
  .dog-head:hover {
    background: rgba(29,78,216,.10);
    border-left-color: transparent; padding-left: 16px;
  }
  .dog-head.active {
    background: rgba(29,78,216,.10); color: var(--accent);
    border-left-color: transparent; padding-left: 16px;
    border-radius: 10px 10px 0 0; margin-bottom: 0;
  }
  .dog-chevron {
    display: block; font-size: 14px; line-height: 1;
    color: var(--accent); flex-shrink: 0;
    transition: transform .25s ease;
  }
  .dog-head.active .dog-chevron { transform: rotate(180deg); }

  .dog-body {
    position: static; width: auto; bottom: auto;
    padding: 14px 16px 18px; margin: 0 0 6px;
    border: 1px solid rgba(29,78,216,.12); border-top: none;
    border-radius: 0 0 10px 10px;
    overflow: visible;
  }
  .dog-body.active { animation: panelDown .25s ease forwards; }
  @keyframes panelDown { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: translateY(0); } }
  /* numero e titolo sono gia' nell'header dell'accordion */
  .dog-body .p-num,
  .dog-body h3 { display: none; }
  .dog-body .p-tags { gap: 10px; }

  /* ── About badge ── */
  .about-image { padding-bottom: 8px; padding-right: 8px; }
  .about-badge { bottom: 0; right: 0; }
  .about-badge .num { font-size: 34px; }

  /* ── Footer: 2 colonne ── */
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 36px; }
  .footer-brand { grid-column: 1 / -1; }
}


/* ══════════════════════════════
   MOBILE  ( ≤ 767px )
══════════════════════════════ */
@media (max-width: 767px) {

  /* ── Header ── */
  header { padding: 0 20px; height: 64px; }
  nav.open { top: 64px; padding: 12px 20px; }
  .header-logo img { height: 42px; }

  /* ── Hero ── */
  #home { background-image: url('../images/banner-bg-640w.webp'); min-height: 110vw; }
  .hero-inner  { padding: 56px 20px; gap: 20px; }
  .hero-logo   { height: 64px; }
  .hero-tagline { font-size: 1.1rem; max-width: 100%; }

  /* ── Sezioni ── */
  #servizi,
  #chi-siamo,
  #servizi-doganali,
  #contatti {
    padding-top: 60px; padding-bottom: 60px;
    padding-left: 20px; padding-right: 20px;
  }
  footer { padding: 44px 20px 24px; }

  .legal-page { padding: 104px 20px 56px; }

  /* ── Servizi Doganali ── */
  .doganali-top { margin-bottom: 32px; }
  .doganali-top h2 { font-size: 1.6rem; }
  .dog-head { font-size: 13.5px; padding: 13px 14px; gap: 10px; }
  .dog-body { padding: 12px 14px 16px; }

  /* ── About ── */
  .about-text h2 { font-size: 1.6rem; }
  .about-image { padding: 0; }
  .about-badge {
    position: static;
    display: inline-flex;
    align-items: center;
    gap: 16px;
    border-radius: 12px;
    margin-top: 16px;
    padding: 14px 20px;
    box-shadow: 0 4px 16px rgba(29,78,216,.3);
  }
  .about-badge .num { font-size: 32px; line-height: 1; }
  .about-badge .lbl { text-align: left; }

  /* ── Contatti ── */
  .contact-info h2 { font-size: 1.6rem; }
  .form-row { grid-template-columns: 1fr; }
  .contact-form-box { padding: 28px 20px; }

  /* ── Footer ── */
  .footer-grid {
    grid-template-columns: 1fr;
    gap: 24px;
    margin-bottom: 24px;
  }
  .footer-brand { grid-column: auto; }
  .footer-bottom { flex-direction: column; align-items: flex-start; gap: 8px; }

  /* ── WhatsApp ── */
  .wa-btn { width: 48px; height: 48px; bottom: 20px; right: 20px; }
  .wa-btn i { font-size: 24px; }
}


/* ══════════════════════════════
   MOBILE SMALL  ( ≤ 479px )
══════════════════════════════ */
@media (max-width: 479px) {

  /* ── Header ── */
  header { padding: 0 16px; }
  nav.open { padding: 10px 16px; }
  .header-phone span { display: none; }
  .header-phone i { font-size: 20px; }

  /* ── Hero ── */
  .hero-inner  { padding: 48px 16px; }
  .hero-logo   { height: 52px; }
  .hero-tagline { font-size: 1rem; }

  /* ── Sezioni ── */
  #servizi,
  #chi-siamo,
  #servizi-doganali,
  #contatti {
    padding-top: 48px; padding-bottom: 48px;
    padding-left: 16px; padding-right: 16px;
  }
  footer { padding: 36px 16px 20px; }

  /* ── Servizi Doganali ── */
  .doganali-top h2 { font-size: 1.4rem; }
  .doganali-wrap { padding: 6px; }
  .dog-head { font-size: 13px; padding: 12px; gap: 9px; }
  .dog-head .nav-num { min-width: 18px; }
  .dog-body { padding: 10px 12px 14px; }
  .dog-body .p-tags span { font-size: 13px; }

  /* ── About ── */
  .about-text h2 { font-size: 1.4rem; }

  /* ── Contatti ── */
  .contact-info h2 { font-size: 1.4rem; }
  .contact-form-box { padding: 20px 14px; }
  .contact-form-box h3 { font-size: 17px; }
  .btn-submit { font-size: 14px; }

  /* ── Footer ── */
  .footer-brand p { font-size: 13px; }
  .footer-col h4 { font-size: 12px; }
}