/* =====================================================
   IC DESKTOP REFINE v1
   Obiettivi: layout fluido su 1280 / 1440 / 1920 / 2560+,
   densita informativa piu alta, pulsanti meno invadenti,
   tono istituzionale sobrio per turisti e cittadini.
   Caricato DOPO tutti gli altri CSS.
   Scope: solo >= 900px. Mobile non toccato.
   ===================================================== */

/* ---------- 1) Container fluido multistadio ---------- */
:root { --container-max: 1200px; }
@media (min-width: 1400px){ :root{ --container-max: 1320px; } }
@media (min-width: 1680px){ :root{ --container-max: 1440px; } }
@media (min-width: 2000px){ :root{ --container-max: 1560px; } }
@media (min-width: 2400px){ :root{ --container-max: 1680px; } }

@media (min-width: 900px){
  .container{
    width: min(94vw, var(--container-max));
    padding-inline: clamp(16px, 2vw, 32px);
  }
}

/* ---------- 2) Tipografia fluida e silenziosa ---------- */
@media (min-width: 900px){
  main h1, .hero h1 {
    font-size: clamp(26px, 2.1vw + 14px, 40px) !important;
    line-height: 1.18;
    letter-spacing: -.01em;
  }
  main h2 {
    font-size: clamp(20px, 1.1vw + 14px, 28px);
    line-height: 1.25;
  }
  main h3 {
    font-size: clamp(17px, .55vw + 14px, 22px);
    line-height: 1.3;
  }
  .hero__puglia-title{
    font-size: clamp(1.4rem, 1.3vw + .6rem, 2.1rem) !important;
    letter-spacing: .12em !important;
    margin-bottom: clamp(.7rem, 1vw, 1.2rem) !important;
  }
  .hero p, .hero .lead {
    font-size: clamp(15px, .35vw + 13px, 18px);
    max-width: 68ch;
    margin-inline: auto;
  }
}

/* ---------- 3) Header responsivo ---------- */
@media (min-width: 1400px){
  .site-header__inner { min-height: clamp(56px, 3vw, 68px); }
  .site-header__logo  { height: clamp(32px, 2vw, 40px); }
}

/* ---------- 4) Hero: spazi e pill province piu ariosi su schermi grandi ---------- */
@media (min-width: 1200px){
  .hero-content--compact { max-width: min(1320px, 90vw); }
  .prov-pills {
    max-width: min(1120px, 80vw);
    gap: 14px;
  }
  .prov-pill-wrap > summary.prov-pill{
    height: 52px;
    min-height: 52px;
    max-height: 52px;
    font-size: .86rem;
    letter-spacing: .5px;
  }
}
@media (min-width: 1680px){
  .hero-content--compact { max-width: 1440px; }
  .prov-pills { max-width: 1200px; gap: 16px; }
  .prov-pill-wrap > summary.prov-pill{ height: 54px; min-height: 54px; max-height: 54px; }
}
@media (min-width: 2000px){
  .prov-pills { max-width: 1280px; }
}

/* Hero padding piu contenuto sui grandi monitor (no spreco verticale) */
@media (min-width: 1200px){
  .hero { padding-block: clamp(36px, 3vw, 56px) !important; }
  .hero--dark { padding: clamp(28px, 2.5vw, 40px) clamp(16px, 2vw, 32px) clamp(24px, 2vw, 36px) !important; }
  .hero--puglia-map { padding: clamp(40px, 3vw, 60px) clamp(16px, 2vw, 32px) clamp(32px, 2.5vw, 48px) !important; }
}

/* ---------- 5) Sezioni: padding fluido ---------- */
@media (min-width: 900px){
  .section { padding-block: clamp(32px, 3.6vw, 64px); }
}

/* ---------- 6) Griglie card: auto-fill per densita adattiva ---------- */
@media (min-width: 1100px){
  .cards-grid,
  .cards,
  .card-grid,
  .services-grid,
  .news-grid,
  .bandi-grid {
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)) !important;
    gap: clamp(14px, 1.1vw, 22px) !important;
  }
}
/* Ultrawide: alza il min per card non nano */
@media (min-width: 1680px){
  .cards-grid,
  .cards,
  .card-grid,
  .services-grid,
  .news-grid,
  .bandi-grid {
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)) !important;
  }
}

/* ---------- 7) Footer adattivo su schermi grandi ---------- */
@media (min-width: 1100px){
  .site-footer .container { max-width: var(--container-max) !important; }
  .site-footer__grid--4 {
    gap: clamp(24px, 2vw, 48px) !important;
  }
}
@media (min-width: 1680px){
  .site-footer__grid--4 {
    grid-template-columns: 1.3fr repeat(3, 1fr) !important;
  }
}

/* ---------- 8) CTA: tono istituzionale, meno invadenti ---------- */
@media (min-width: 900px){
  .sf-cta-btn,
  .sf-cta-btn--wa {
    padding: .6rem 1.25rem !important;
    font-size: .875rem !important;
    min-height: 40px;
  }
  /* Rete Civica / Attiva il tuo Comune / CTA hero editoriale */
  .ed-cta, .btn-primary, .btn--primary, .cta-primary {
    padding: 10px 20px !important;
    font-size: .9rem !important;
    min-height: 40px;
    line-height: 1.2;
  }
}

/* ---------- 9) Vivi la Puglia: calendario/eventi/mappa piu distesi su schermi grandi ---------- */
@media (min-width: 1400px){
  .cal-trio{
    grid-template-columns: 380px 1fr 1.1fr !important;
    gap: clamp(16px, 1.2vw, 28px) !important;
  }
}
@media (min-width: 1680px){
  .cal-trio{
    grid-template-columns: 400px 1fr 1.2fr !important;
  }
}

/* ---------- 10) Safety: non lasciare testi di paragrafo illeggibili su ultrawide ---------- */
@media (min-width: 1680px){
  main section p:not([class]),
  main section .lead {
    max-width: 72ch;
  }
}

/* ---------- 11) Meteo / news / eventi hero strips: centratura pulita ---------- */
@media (min-width: 1200px){
  .meteo-section .container,
  .news-section .container,
  .eventi-section .container {
    width: min(94vw, var(--container-max));
  }
}

/* ---------- 12) Scrollbar discreta su contenitori overflow interni ---------- */
@media (min-width: 900px){
  .prov-pill-wrap .prov-dd { scrollbar-width: thin; }
}

/* ---------- 13) Tabs comune: sticky SOTTO l'header principale ----------
   Fix: ic-kiosk-skin.css forza top:0 globalmente (non solo kiosk) e l'inline
   #ui-v15 aggiunge margin-top:-64px che fa entrare la barra sotto l'header.
   Ripristiniamo il comportamento corretto: la barra scorre con la hero e
   si incolla a var(--header-h) quando lo raggiunge. */
html body .comune-tabs,
html body nav.comune-tabs {
  position: sticky !important;
  top: var(--header-h, 64px) !important;
  margin-top: 0 !important;
  z-index: 40 !important;
}
/* Piccola ombra quando e sticky, per separare visivamente */
html body .comune-tabs { box-shadow: 0 2px 10px rgba(0,0,0,.18) !important; }

/* Assicura che nessun antenato abbia overflow che rompe position:sticky */
body.minisite-comune, body.page-comune, main { overflow: visible !important; }

/* =====================================================
   FINE IC DESKTOP REFINE v1
   ===================================================== */