/* ic-spacing-harmony.css — Night-3 (2026-05-26)
   Sistema spaziale 8px-grid + fix elementi orfani.
   Override mirati, caricato come ultimo CSS per vincere la cascada. */

/* ────────────────────────────────────────────────────────────
   1) Fix "IT" orfano: il <button class="ic-lang-pill"> appare
   fuori dal flusso header per legacy. Lo nascondiamo via CSS
   senza toccare HTML (il dropdown lingua resta funzionante).
   ──────────────────────────────────────────────────────────── */
html body > .ic-lang-pill,
html body header + .ic-lang-pill,
html body .ic-lang-pill {
  display: none !important;
}

/* ────────────────────────────────────────────────────────────
   2) Sistema spaziale 8px grid (custom properties)
   ──────────────────────────────────────────────────────────── */
:root {
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;
  --sp-7: 48px;
  --sp-8: 64px;
  --sp-9: 80px;
  --ic-container-max: 1200px;
}

/* ────────────────────────────────────────────────────────────
   3) HERO — ritmo verticale armonico
   Title (h1) → Subtitle → Search → Stats → Pills
   ──────────────────────────────────────────────────────────── */

/* Hero section: padding generoso e simmetrico */
html body section.hero.hero--puglia-map.hero--puglia-map {
  padding: var(--sp-7) var(--sp-5) var(--sp-7) !important;  /* 48/24/48 */
  margin: 0 !important;
}

/* Hero content: container centrato con larghezza armoniosa */
html body .hero--puglia-map .hero-content,
html body .hero--puglia-map .hero-content--compact {
  max-width: var(--ic-container-max) !important;
  margin: 0 auto !important;
  padding: 0 !important;
  text-align: center !important;
}

/* H1 title: spazio sotto = 12px (ridotto, va al subtitle stretto) */
html body .ic-hero-h1-visible {
  margin: 0 0 var(--sp-3) !important;       /* 0 0 12px */
  font-size: clamp(28px, 4.2vw, 44px) !important;
  line-height: 1.15 !important;
  letter-spacing: -0.015em !important;
}

/* Subtitle: separato dal titolo da 12px, dal search da 32px */
html body .ic-hero-h1-visible__sub,
html body [data-i18n="home_hero_h1_sub"] {
  display: block !important;
  margin: var(--sp-3) auto var(--sp-6) !important;  /* 12 auto 32 */
  font-size: clamp(15px, 1.8vw, 18px) !important;
  font-weight: 400 !important;
  color: #4b5563 !important;
  max-width: 640px !important;
  line-height: 1.5 !important;
}

/* Search box (se presente nel hero, .ic-search o .hero-search): margin */
html body .hero--puglia-map .ic-search,
html body .hero--puglia-map .hero-search,
html body .hero--puglia-map [role="search"] {
  margin: 0 auto var(--sp-4) !important;        /* 0 auto 16 */
  max-width: 720px !important;
}

/* Stats strip (257 COMUNI · 6 PROVINCE...): margin */
html body .hero--puglia-map .hero-stats,
html body .hero--puglia-map .ic-hero-stats,
html body .hero--puglia-map .ic-hero-meta {
  margin: 0 auto var(--sp-7) !important;         /* 0 auto 48 */
  font-size: 13px !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  color: #6b7283 !important;
}

/* ────────────────────────────────────────────────────────────
   4) PROV-PILLS — grid gap armonico
   ──────────────────────────────────────────────────────────── */
@media (min-width: 1024px) {
  html body #provPills.prov-pills.prov-pills,
  html body .prov-pills.prov-pills.prov-pills {
    gap: var(--sp-4) !important;                /* 16px row+column */
    max-width: var(--ic-container-max) !important;
    margin: 0 auto var(--sp-8) !important;       /* 0 auto 64 — distanza dalla sezione sotto */
    padding: 0 var(--sp-5) !important;           /* respiro laterale 24 */
  }
}

@media (min-width: 640px) and (max-width: 1023px) {
  html body #provPills.prov-pills,
  html body .prov-pills {
    gap: var(--sp-4) !important;
    margin: 0 auto var(--sp-7) !important;       /* mobile-tablet 48 */
    padding: 0 var(--sp-4) !important;
  }
}

@media (max-width: 639px) {
  html body #provPills.prov-pills,
  html body .prov-pills {
    gap: var(--sp-3) !important;                 /* 12px su mobile */
    margin: 0 auto var(--sp-6) !important;       /* 32 */
    padding: 0 var(--sp-4) !important;
  }
}

/* ────────────────────────────────────────────────────────────
   5) SECTION TRANSITIONS — spazio tra sezioni principali
   "Argomenti del cittadino" e successive: padding-top 48-64
   ──────────────────────────────────────────────────────────── */
html body section.section,
html body main > section:not(.hero) {
  padding-top: var(--sp-7) !important;           /* 48 */
  padding-bottom: var(--sp-7) !important;
}

@media (max-width: 768px) {
  html body section.section,
  html body main > section:not(.hero) {
    padding-top: var(--sp-6) !important;         /* 32 */
    padding-bottom: var(--sp-6) !important;
  }
}

/* Subtitle/kicker sopra h2 ("ARGOMENTI DEL CITTADINO") */
html body .section-kicker,
html body .ic-kicker,
html body [class*="kicker"] {
  margin: 0 0 var(--sp-3) !important;
  font-size: 12.5px !important;
  letter-spacing: 0.10em !important;
  text-transform: uppercase !important;
  font-weight: 700 !important;
  color: #6b7283 !important;
}

/* H2 di sezione: margin coerente */
html body section h2,
html body main > section:not(.hero) > .container > h2,
html body main > section:not(.hero) > h2 {
  margin: 0 0 var(--sp-5) !important;             /* 0 0 24 */
  font-size: clamp(24px, 3vw, 34px) !important;
  line-height: 1.2 !important;
  letter-spacing: -0.012em !important;
}

/* ────────────────────────────────────────────────────────────
   6) Container max-width coerente per layout largo
   ──────────────────────────────────────────────────────────── */
html body section .container,
html body main .container {
  max-width: var(--ic-container-max) !important;
  margin: 0 auto !important;
  padding-left: var(--sp-5) !important;
  padding-right: var(--sp-5) !important;
}

@media (max-width: 639px) {
  html body section .container,
  html body main .container {
    padding-left: var(--sp-4) !important;
    padding-right: var(--sp-4) !important;
  }
}