/* ============================================================
   RD EDILE — responsive.css
   Mobile-first breakpoints
   ============================================================ */

/* ─── XL DESKTOP 1400px+ ─────────────────────────────────── */
@media (min-width: 1400px) {
  .container { max-width: 1380px; padding: 0 48px; }
}

/* ─── LARGE DESKTOP max 1279px ───────────────────────────── */
@media (max-width: 1279px) {
  .services-grid { grid-template-columns: repeat(2, 1fr); }
  .footer-grid   { grid-template-columns: 1fr 1fr; gap: 36px; }
  .header-nav a  { padding: 7px 9px; font-size: .82rem; }
}

/* ─── TABLET LANDSCAPE max 1023px ────────────────────────── */
@media (max-width: 1023px) {

  .section    { padding: 72px 0; }
  .section-sm { padding: 52px 0; }

  /* Header — mobile flex: [icons left] [logo center] [hamburger right] */
  .header-nav   { display: none; }
  .header-phone { display: none; }
  .header-right { display: none; }
  .header-bar {
    display: flex;
    align-items: center;
    height: 64px;
    gap: 0;
  }
  .mobile-left-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
  }
  .header-logo {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .mobile-right-actions {
    display: flex;
    align-items: center;
    flex-shrink: 0;
  }
  .header-logo img { height: 40px; }
  .header.scrolled .header-logo img { height: 36px; }

  /* Hero */
  .hero-grid {
    grid-template-columns: 1fr;
    text-align: center;
    gap: 44px;
    padding: 48px 0;
  }
  .hero-btns    { justify-content: center; }
  .hero-benefits{ justify-content: center; }
  .hero-sub     { margin-left: auto; margin-right: auto; }
  .hero-media   { display: none; }
  .hero-media-mobile {
    display: block;
    margin: 20px auto 28px;
    max-width: 520px;
    width: 100%;
    position: relative;
  }
  .hero-media-mobile .hero-card {
    position: relative;
    bottom: auto;
    left: auto;
    margin-top: 12px;
    justify-content: center;
    width: 100%;
  }
  .hero-card    { left: -10px; bottom: -16px; }

  /* Why us */
  .why-us-grid { grid-template-columns: 1fr; gap: 44px; }
  .why-img-wrap { max-width: 520px; aspect-ratio: 16/9; }

  /* Serramenti */
  .serramenti-grid { grid-template-columns: 1fr; gap: 44px; }
  .serr-visual     { max-width: 520px; aspect-ratio: 16/9; }

  /* Gallery */
  .gallery-grid { grid-template-columns: repeat(2, 1fr); }

  /* Quote */
  .quote-wrap { grid-template-columns: 1fr; }
  .q-left  { padding: 52px 40px; text-align: center; }
  .q-icons { align-items: center; }
  .q-right { padding: 52px 40px; }

  /* Local SEO */
  .local-grid { grid-template-columns: 1fr; gap: 44px; }

  /* Testimonials */
  .testi-grid { grid-template-columns: 1fr; max-width: 500px; margin-left: auto; margin-right: auto; }

  /* CTA */
  .cta-final { padding: 80px 0; }

  /* Footer */
  .footer-grid { grid-template-columns: 1fr 1fr; }

  /* Lightbox nav */
  .lb-prev { left: -44px; }
  .lb-next { right: -44px; }
}

/* ─── TABLET PORTRAIT max 767px ──────────────────────────── */
@media (max-width: 767px) {

  .section    { padding: 56px 0; }
  .section-sm { padding: 40px 0; }

  h1 { font-size: clamp(1.8rem, 8vw, 2.5rem); }
  h2 { font-size: clamp(1.5rem, 6vw, 2.2rem); }

  /* Services → slider orizzontale su mobile */
  .services-grid {
    display: flex;
    flex-wrap: nowrap;
    gap: 14px;
    overflow-x: scroll;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    -ms-overflow-style: none;
    padding-bottom: 4px;
  }
  .services-grid::-webkit-scrollbar { display: none; }
  .services-grid .srv-card {
    flex: 0 0 calc(100vw - 80px);
    scroll-snap-align: start;
  }

  .form-grid { grid-template-columns: 1fr; }

  .footer-grid { grid-template-columns: 1fr; gap: 28px; }
  .f-bottom    { flex-direction: column; text-align: center; }
  .f-legal     { justify-content: center; }

  .cta-btns { flex-direction: column; align-items: center; }
  .cta-btns .btn { width: 100%; max-width: 340px; justify-content: center; }

  .testi-grid { max-width: 100%; }

  .hero-card { position: relative; bottom: auto; left: auto; margin-top: 16px; justify-content: center; }

  .why-img-badge { bottom: 16px; right: 16px; padding: 10px 14px; font-size: .875rem; }

  .lb-prev, .lb-next { display: none; }
}

/* ─── MOBILE max 575px ───────────────────────────────────── */
@media (max-width: 575px) {

  .container { padding: 0 16px; }
  .section    { padding: 44px 0; }
  .section-sm { padding: 32px 0; }

  /* Header */
  .header-bar      { height: 62px; }
  .header-logo img { height: 40px; }
  .header.scrolled .header-logo img { height: 34px; }

  /* Hero */
  .hero { padding-top: 62px; min-height: auto; }
  .hero-grid { padding: 36px 0 52px; }
  .hero-btns { flex-direction: column; }
  .hero-btns .btn { width: 100%; justify-content: center; }
  .hero-benefits { flex-direction: column; align-items: flex-start; text-align: left; }

  /* Services slider — card leggermente più larga su schermi piccoli */
  .services-grid .srv-card { flex: 0 0 calc(100vw - 48px); }

  /* Gallery */
  .gallery-grid { grid-template-columns: 1fr; }
  .gallery-filters { gap: 6px; }
  .gf-btn { padding: 7px 14px; font-size: .8rem; }

  /* Quote */
  .q-left  { padding: 40px 22px; }
  .q-right { padding: 40px 22px; }

  /* Drawer full width */
  .drawer { width: 100%; right: -100%; }

  /* Why & Serramenti */
  .why-us-grid .why-img-wrap  { aspect-ratio: 4/3; }
  .serramenti-grid .serr-visual { aspect-ratio: 4/3; }

  /* CTA */
  .cta-final { padding: 64px 0; }
  .cta-btns .btn { font-size: .9375rem; padding: 16px 24px; }

  /* WhatsApp float */
  .wa-float { bottom: 18px; right: 16px; }
  .wa-btn   { width: 52px; height: 52px; }
  .wa-btn svg { width: 24px; height: 24px; }

  /* Cookie banner */
  .cookie-banner { flex-direction: column; align-items: flex-start; }
  .cookie-btns   { width: 100%; }
  .cookie-accept, .cookie-decline { flex: 1; text-align: center; }

  .legal-page table { display: block; max-width: 100%; overflow-x: auto; }

  /* Testimonials */
  .t-card { padding: 24px 20px; }
}

/* ─── CHI SIAMO PAGE breakpoints ─────────────────────────── */
@media (max-width: 1023px) {
  .val-grid { grid-template-columns: repeat(2, 1fr); }
  .svc-links-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 575px) {
  .val-grid { grid-template-columns: 1fr; }
  .svc-links-grid { grid-template-columns: 1fr; }
}

/* ─── MOBILE XS max 375px ────────────────────────────────── */
@media (max-width: 375px) {
  h1 { font-size: 1.75rem; }
  h2 { font-size: 1.5rem; }
  .hero-badge { font-size: .72rem; }
  .btn { padding: 13px 22px; }
  .btn-lg { padding: 16px 28px; font-size: 1rem; }
  .hero-card { gap: 14px; }
  .hero-stat-n { font-size: 1.4rem; }
}

/* ─── MOBILE XXS max 360px ───────────────────────────────── */
@media (max-width: 360px) {
  .header-logo img { height: 34px; }
  .mobile-left-actions { gap: 6px; }
  .mobile-icon-btn,
  .hamburger { width: 36px; height: 36px; }
}

/* ─── SERVICES CTA responsive ────────────────────────────── */
@media (max-width: 767px) {
  .services-cta-inner { flex-direction: column; text-align: center; }
  .services-cta-text strong { font-size: 1.125rem; }
  .services-cta-btns { width: 100%; justify-content: center; }
}
@media (max-width: 575px) {
  .services-cta { padding: 28px 0; }
  .services-cta-btns { flex-direction: column; }
  .services-cta-btns .btn { width: 100%; justify-content: center; }
}

/* ─── FAQ responsive ─────────────────────────────────────── */
@media (max-width: 767px) {
  .faq-grid { grid-template-columns: 1fr; }
  .faq-q    { font-size: .9375rem; padding: 17px 18px; }
  .faq-a:not([hidden]) { padding: 0 18px 16px; }
}
@media (max-width: 575px) {
  .faq-grid { gap: 10px; }
}

/* ─── SERVICE PAGES responsive ───────────────────────────── */
@media (max-width: 1023px) {
  .svc-hero-grid {
    grid-template-columns: 1fr;
    text-align: center;
    gap: 40px;
    padding: 44px 0;
  }
  .svc-hero-grid .hero-btns { justify-content: center; }
  .svc-hero-img { max-width: 520px; margin: 0 auto; aspect-ratio: 16/9; }
  .ben-cards { grid-template-columns: repeat(2, 1fr); }
  .steps-grid { grid-template-columns: repeat(2, 1fr); }
  .svc-detail-grid { grid-template-columns: 1fr; gap: 44px; }
  .svc-detail-img { position: static; aspect-ratio: 4/3; }
  .related-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 767px) {
  .ben-cards { grid-template-columns: 1fr; }
  .steps-grid { grid-template-columns: 1fr; }
}
@media (max-width: 575px) {
  .svc-hero { padding-top: 62px; }
  .svc-hero-grid { padding: 32px 0 48px; }
  .mid-cta { padding: 40px 0; }
  .mid-cta-btns { flex-direction: column; align-items: center; }
  .mid-cta-btns .btn { width: 100%; max-width: 320px; justify-content: center; }
  .related-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 375px) {
  .related-grid { grid-template-columns: 1fr; }
}

/* ─── DESKTOP SAFETY — nasconde elementi mobile su viewport > 1023px ── */
@media (min-width: 1024px) {
  .mobile-left-actions,
  .mobile-right-actions { display: none !important; }
  .hero-media-mobile     { display: none !important; }
}

/* ─── PRINT ──────────────────────────────────────────────── */
@media print {
  .header, .wa-float, .cookie-banner, .drawer, .drawer-overlay { display: none !important; }
  body { color: #000; background: #fff; }
  a { text-decoration: underline; }
}

/* ─── REDUCED MOTION ─────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    transition-duration: .001ms !important;
  }
  .anim-up, .anim-left, .anim-right, .anim-fade {
    opacity: 1 !important;
    transform: none !important;
  }
}