/* Aprilbox — regole comuni. Le pagine vengono dal mockup con gli stili in linea:
   qui ci sono solo le cose che il mockup non poteva sapere (larghezza dello schermo,
   telefono, carosello, video, modulo). */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { min-height: 100vh; }
img, video { max-width: 100%; }
.pagina { width: 100%; overflow-x: clip; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

a:focus-visible, button:focus-visible, summary:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, .car-wrap:focus-visible {
  outline: 3px solid #D46837; outline-offset: 2px;
}

/* Foto */
.foto.cover { display: block; width: 100%; height: 100%; object-fit: cover; }

/* Schermi larghi: lo sfondo delle sezioni va da bordo a bordo, il contenuto resta a 1152 px */
@media (min-width: 1281px) {
  .pagina > header, .pagina > section, .pagina > footer {
    padding-left: calc((100% - 1152px) / 2) !important;
    padding-right: calc((100% - 1152px) / 2) !important;
  }
}

/* Video verticali (reel) */
.split-video { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 32px; align-items: start; }
.reel { margin: 0; }
.reel video { display: block; width: 100%; height: auto; aspect-ratio: 9 / 16; border-radius: 18px; background: #211A15; }
.reel figcaption { margin-top: 10px; font-size: 14px; line-height: 1.45; color: #5C5148; text-align: center; }

/* Carosello dei box (pagina Le misure) */
.car-wrap { overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain; border-radius: 18px; }
.car-wrap::-webkit-scrollbar { display: none; }
.car-track { display: flex; gap: 24px; }
.car-card { flex: 0 0 calc((100% - 48px) / 3); scroll-snap-align: start; }
[data-car] { transition: opacity .2s; }
[data-car][disabled] { opacity: .35; cursor: default !important; }

/* Modulo di richiesta */
.motivi label { border-color: #E6DED2 !important; }
.motivi label:has(input:checked) { border-color: #A84A20 !important; box-shadow: 0 0 0 1px #A84A20; }
input:user-invalid, textarea:user-invalid { border-color: #B3261E !important; }

/* Menu: pulsante visibile solo quando il menu non ci sta */
.menu-btn { display: none; width: 46px; height: 46px; border: 1px solid #E6DED2; background: #FFFFFF; border-radius: 10px; align-items: center; justify-content: center; cursor: pointer; margin-left: auto; }

@media (max-width: 1120px) {
  .site-header { height: 68px !important; padding: 0 18px !important; gap: 12px !important; flex-wrap: wrap; }
  .site-header .logo img { height: 38px !important; }
  .site-header nav, .site-header > a:not(.logo) { display: none !important; }
  .menu-btn { display: flex; }
  .site-header.open { height: auto !important; padding-top: 14px !important; padding-bottom: 18px !important; }
  .site-header.open nav { display: flex !important; flex-direction: column; align-items: stretch !important; gap: 0 !important; width: 100%; order: 3; }
  .site-header.open nav a { padding: 14px 4px; border-bottom: 1px solid #F0EAE0 !important; border-top: 0; padding-bottom: 14px !important; }
  .site-header.open > a:not(.logo) { display: block !important; order: 4; width: 100%; text-align: center; margin-top: 10px; }
  /* «Sedi»: nel menu del telefono la tendina è sempre aperta, sotto la voce */
  .site-header.open .menu-sedi { height: auto !important; flex-direction: column; align-items: stretch !important; border-bottom: 1px solid #F0EAE0; }
  .site-header.open .menu-sedi > button { padding: 14px 4px !important; border: 0 !important; width: 100%; cursor: default; color: #211A15 !important; }
  .site-header.open .menu-sedi > button svg { display: none; }
  .site-header.open .menu-sedi .tendina { display: flex !important; position: static !important; min-width: 0 !important; box-shadow: none !important; border: 0 !important; padding: 0 0 10px 10px !important; }
  .site-header.open nav .tendina a { border-bottom: 0 !important; padding: 10px 12px !important; }
  /* «Area clienti»: nel menu del telefono mostra direttamente le tre sedi */
  .site-header .menu-area { display: none !important; }
  .site-header.open .menu-area { display: flex !important; order: 4; width: 100%; height: auto !important; flex-direction: column; align-items: stretch !important; margin-top: 10px; }
  .site-header.open .menu-area > button { justify-content: flex-start; width: 100%; cursor: default; border: 0 !important; padding: 14px 4px 0 4px !important; font-size: 16px !important; color: #211A15 !important; }
  .site-header.open .menu-area > button svg { display: none; }
  .site-header.open .menu-area .tendina { display: flex !important; position: static !important; min-width: 0 !important; box-shadow: none !important; border: 0 !important; padding: 6px 0 0 0 !important; }
  .site-header.open > a:not(.logo) { order: 5; }
}

/* Telefono e tablet */
@media (max-width: 900px) {
  .pagina > section, .pagina > footer { padding: 44px 18px !important; }
  h1 { font-size: 36px !important; line-height: 1.08 !important; }
  h2[style*="Bricolage"] { font-size: 27px !important; line-height: 1.15 !important; }
  [style*="font-size: 40px"] { font-size: 32px !important; }
  [style*="font-size: 20px"], [style*="font-size: 19px"] { font-size: 17px !important; }

  [data-fw] { width: auto !important; max-width: 100% !important; }
  [data-fh] { height: auto !important; min-height: 0 !important; }
  .hero-foto[data-fh] { height: 260px !important; width: 100%; flex: none !important; }
  [data-fh][style*="dashed"] { height: 160px !important; }
  .ph-foto[data-fh] { height: 220px !important; }
  .ph-foto[data-fh][style*="height: 466px"] { height: auto !important; aspect-ratio: 4 / 5; }
  .locker-foto { width: 96px !important; height: 120px !important; }
  #mappa { min-height: 300px !important; flex: none !important; }

  section[data-row] { flex-direction: column !important; align-items: stretch !important; gap: 28px !important; }
  section[data-row] > * { min-width: 0; max-width: 100%; }
  [data-row] > [style*="flex-grow: 1"] { min-width: 0; }
  [data-row]:has(> a + a) { flex-wrap: wrap; }
  [data-row]:has(> a + a) > a { flex: 1 1 auto; text-align: center; justify-content: center; white-space: normal !important; }
  [data-row]:has(> h2), [data-row]:has(> [data-fw]) { flex-direction: column !important; align-items: flex-start !important; gap: 12px !important; }
  footer [data-row] { flex-direction: column !important; align-items: flex-start !important; gap: 24px !important; }

  [data-g="1"] { grid-template-columns: minmax(0, 1fr) !important; }
  [data-g="2"] { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  [data-g="t"] { grid-template-columns: .8fr 1fr 1fr !important; }
  [data-g="t"] > div { padding: 12px 10px !important; font-size: 14px !important; }
  .motivi [data-g="1"] { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }

  form[data-fw] { padding: 20px !important; }
  .split-video { grid-template-columns: minmax(0, 1fr); }
  .reel { max-width: 320px; margin: 0 auto; width: 100%; }
  .car-card { flex-basis: 82%; }
  aside[data-fw], nav[data-fw] { width: 100% !important; }
}

@media (max-width: 480px) {
  .motivi [data-g="1"] { grid-template-columns: minmax(0, 1fr) !important; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}