/* ==========================================================================
   SULPL 2026 - fogli di stile del template figlio di Cassiopeia
   File: media/templates/site/cassiopeia_sulpl/css/user.css

   Sistema grafico dal progetto "Redesign SULPL website"
   (G:\SULPL-2026\Redesign SULPL website\SULPL 2026 Home.dc.html)
   Palette: blu notte #0B1F3A, blu #1B4E8C, rosso #CD212A, verde #008C45.
   Font: Archivo (titoli) + Source Sans 3 (testo).

   INDICE
   1. Variabili e basi
   2. Sistema riusabile (bottoni, box, sezioni, griglie)
   3. Tricolore e header
   4. Notizie in primo piano (hero + card)
   5. Moduli in card / sidebar
   6. Fasce a tutta larghezza (Servizi, Newsletter)
   7. Footer a colonne
   8. Varianti regionali
   9. Form di invio notizie
   ========================================================================== */


/* ==========================================================================
   1. VARIABILI E BASI
   ========================================================================== */

:root, [data-bs-theme="light"] {
  --link-color: #1B4E8C;
  --link-hover-color: #0B1F3A;
  --border-radius: .7rem;
  --border-color: #E2E8F0;
  --body-color: #16202E;
  --cassiopeia-color-primary: #0B1F3A;
  --cassiopeia-color-hover: #1B4E8C;

  --sulpl-blu-notte: #0B1F3A;
  --sulpl-blu: #1B4E8C;
  --sulpl-rosso: #CD212A;
  --sulpl-rosso-scuro: #A81A22;
  --sulpl-verde: #008C45;
  --sulpl-grigio-testo: #5A6779;
  --sulpl-grigio-meta: #8794A8;
  --sulpl-bordo: #E2E8F0;
  --sulpl-fondo-tenue: #F1F5FA;
  --sulpl-fondo-sezione: #F5F7FA;
}

body {
  font-family: "Source Sans 3", system-ui, sans-serif;
}
h1, h2, h3, h4, h5, h6,
.card-header {
  font-family: Archivo, system-ui, sans-serif;
  font-weight: 800;
  letter-spacing: -.01em;
}


/* ==========================================================================
   2. SISTEMA RIUSABILE
   Classi generiche per qualunque modulo o pagina futura.
   ========================================================================== */

/* --- Bottoni --- */
.sulpl-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5em;
  padding: .75em 1.3em;
  border-radius: .6rem;
  font-weight: 700;
  font-size: 15px;
  line-height: 1.2;
  text-decoration: none;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background-color .15s, border-color .15s, color .15s;
}
.sulpl-btn:hover { text-decoration: none; }

.sulpl-btn--primary { background: var(--sulpl-rosso); color: #fff; }
.sulpl-btn--primary:hover { background: var(--sulpl-rosso-scuro); color: #fff; }

.sulpl-btn--dark { background: var(--sulpl-blu-notte); color: #fff; }
.sulpl-btn--dark:hover { background: #132a49; color: #fff; }

.sulpl-btn--light { background: #fff; color: var(--sulpl-blu-notte); }
.sulpl-btn--light:hover { background: #E6EDF7; color: var(--sulpl-blu-notte); }

.sulpl-btn--outline { background: transparent; color: #16202E; border-color: var(--sulpl-bordo); }
.sulpl-btn--outline:hover { border-color: var(--sulpl-blu); color: var(--sulpl-blu-notte); background: var(--sulpl-fondo-tenue); }

.sulpl-btn--pill { border-radius: 999px; }
.sulpl-btn--sm { padding: .45em .9em; font-size: 13.5px; }

/* --- Etichette / badge --- */
.sulpl-badge {
  display: inline-flex;
  align-items: center;
  gap: .4em;
  padding: 5px 12px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.sulpl-badge--accent {
  background: rgba(205,33,42,.16);
  border: 1px solid rgba(205,33,42,.5);
  color: #FFB3B8;
}

/* --- Contenitore e sezioni --- */
.sulpl-container { max-width: 1240px; margin: 0 auto; padding: 0 20px; }

.sulpl-section { padding: clamp(28px, 4vw, 48px) 0; }
.sulpl-section--tight { padding: clamp(16px, 2vw, 28px) 0; }
.sulpl-section--dark { background: var(--sulpl-blu-notte); color: #fff; }
.sulpl-section--dark .sulpl-section-title { color: #fff; }
.sulpl-section--muted {
  background: var(--sulpl-fondo-sezione);
  border-top: 1px solid var(--sulpl-bordo);
  border-bottom: 1px solid var(--sulpl-bordo);
}
.sulpl-section-title {
  font-size: clamp(20px, 2.2vw, 26px);
  color: var(--sulpl-blu-notte);
  margin: 0 0 .8em;
}

/* --- Box / card generico --- */
.sulpl-box {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 18px 20px;
  border: 1px solid var(--sulpl-bordo);
  border-radius: 12px;
  background: #fff;
  color: inherit;
  text-decoration: none;
  transition: border-color .15s, box-shadow .15s, background-color .15s, transform .15s;
}
.sulpl-box:hover {
  border-color: var(--sulpl-blu);
  background: #F7FAFD;
  text-decoration: none;
  box-shadow: 0 8px 20px rgba(11,31,58,.08);
  transform: translateY(-2px);
}
.sulpl-box-title {
  font-family: Archivo, system-ui, sans-serif;
  font-weight: 700;
  font-size: 16.5px;
  color: var(--sulpl-blu-notte);
}
.sulpl-box-text { font-size: 14.5px; color: var(--sulpl-grigio-testo); line-height: 1.5; }

/* --- Box CTA su fondo blu --- */
.sulpl-cta-box {
  border-radius: 14px;
  padding: 22px;
  background: linear-gradient(165deg, var(--sulpl-blu), var(--sulpl-blu-notte));
  color: #fff;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.sulpl-cta-box h3 {
  font-family: Archivo, system-ui, sans-serif;
  font-size: 20px;
  font-weight: 800;
  color: #fff;
  margin: 0;
}
.sulpl-cta-box p { margin: 0; font-size: 15px; line-height: 1.55; color: #C6D2E4; }
.sulpl-cta-box .sulpl-btn { justify-content: center; }

/* --- Griglie --- */
.sulpl-grid-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 22px; }
.sulpl-grid-3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; }
.sulpl-grid-4 { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; }
.sulpl-grid-5 { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; }


/* ==========================================================================
   3. TRICOLORE E HEADER
   ========================================================================== */

.sulpl-tricolore {
  height: 4px;
  background: linear-gradient(to right,
    var(--sulpl-verde) 0%, var(--sulpl-verde) 33.333%,
    #F4F5F0 33.333%, #F4F5F0 66.666%,
    var(--sulpl-rosso) 66.666%, var(--sulpl-rosso) 100%);
}

.container-header {
  background: #fff;
  background-image: none;
  box-shadow: none;
  border-bottom: 1px solid var(--sulpl-bordo);
  position: sticky !important;
  top: 0;
  transition: transform .28s ease;
  will-change: transform;
}

/* Header che si ritrae scorrendo verso il basso e riappare risalendo.
   La classe .sulpl-header-nascosto la mette lo script in index.php del child. */
.container-header.sulpl-header-nascosto {
  transform: translateY(-100%);
}

/* Barra di servizio scura sopra l'header */
.container-topbar {
  background: var(--sulpl-blu-notte);
  color: #B9C6D8;
  font-size: 13.5px;
  padding: 0;
}
.container-topbar .grid-child {
  display: flex;
  align-items: center;
  justify-content: space-between;
  /* 8px in valore assoluto, NON .5em: qui il font e' 13.5px, quindi .5em
     darebbe 6.75px e il testo non sarebbe incolonnato col logo (che sta in un
     .grid-child con font 16px) */
  padding: 7px 8px;
}
.container-topbar .mod-custom { width: 100%; }
.container-topbar .mod-custom p { margin: 0; }
.container-topbar a { color: #B9C6D8; text-decoration: none; }
.container-topbar a:hover { color: #fff; text-decoration: none; }

/* Barra di servizio: claim + email a sinistra, social + accesso a destra */
.sulpl-topbar {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 18px;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}
.sulpl-topbar-sx,
.sulpl-topbar-dx {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 14px;
}
.sulpl-topbar-sx { gap: 6px 18px; }
.sulpl-topbar-dx { gap: 6px 28px; }
.sulpl-topbar-claim { font-weight: 600; color: #fff; }
.sulpl-topbar-sep { opacity: .5; }
.sulpl-topbar-riservato {
  color: #fff !important;
  font-weight: 600;
  border: 1px solid rgba(255,255,255,.28);
  padding: 4px 12px;
  border-radius: 999px;
}
.sulpl-topbar-riservato:hover { background: rgba(255,255,255,.1); }

@media (max-width: 600px) {
  .sulpl-topbar { justify-content: flex-start; }
}

/* Logo + testo del marchio */
.container-header .navbar-brand { padding: .6em 0; }
.container-header .navbar-brand .brand-logo {
  display: flex;
  align-items: center;
  gap: 14px;
}
.container-header .navbar-brand .brand-logo img {
  display: block;
  /* 48 -> 62 -> 81px, portato a 120px su richiesta il 2026-08-04 */
  height: 120px;
  width: auto;
  max-height: 120px;
}
.brand-text { display: flex; flex-direction: column; gap: 2px; line-height: 1; }
.brand-name {
  font-family: Archivo, system-ui, sans-serif;
  font-weight: 800;
  /* 20px +40% richiesto il 2026-08-04 */
  font-size: 28px;
  color: var(--sulpl-blu-notte);
}
.brand-tagline {
  /* 12px +40% richiesto il 2026-08-04 */
  font-size: 16.8px;
  color: var(--sulpl-grigio-testo);
  letter-spacing: .04em;
  text-transform: uppercase;
}

/* Menu principale.
   ⚠️ Cassiopeia dichiara ".container-header .mod-menu { color: #fff }" e
   ".container-header .mod-menu > li > a { color: currentcolor }": su header
   BIANCO i link diventano invisibili. Vanno battuti con selettori almeno
   altrettanto specifici, non basta ".container-nav .mod-menu a". */
.container-header .mod-menu,
.container-header .container-nav .mod-menu {
  color: #16202E;
}
.container-header .mod-menu > li > a,
.container-header .mod-menu a,
.container-brandbar .mod-menu > li > a {
  color: #16202E;
  font-weight: 600;
  padding: .5em .10em;
  border-radius: .5rem;
  text-decoration: none;
}
.container-header .mod-menu > li > a:hover,
.container-header .mod-menu a:hover,
.container-header .mod-menu .current > a,
.container-brandbar .mod-menu > li > a:hover {
  background: var(--sulpl-fondo-tenue);
  color: var(--sulpl-blu-notte);
  text-decoration: none;
}
.container-header .mod-menu .current > a {
  padding-left: calc(.10em + 5px);
  padding-right: calc(.10em + 5px);
}
/* Voce "Iscriviti": bottone rosso */
.container-header .mod-menu .item-1460 > a,
.container-header .mod-menu .item-1460 > a:hover {
  background: var(--sulpl-rosso);
  color: #fff;
  font-weight: 700;
  margin-left: .3em;
  padding-left: 1.1em;
  padding-right: 1.1em;
}
.container-header .mod-menu .item-1460 > a:hover {
  background: var(--sulpl-rosso-scuro);
}
.container-search .js-finder-search-query { border-radius: .5rem; }


/* ==========================================================================
   3-bis. NAVIGAZIONE: logo a sinistra, menu a destra sulla stessa riga
   ========================================================================== */

.container-brandbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  margin-bottom: 20px;
}
.container-brandbar .container-nav {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  justify-content: flex-end;
  margin: 0;
  padding: 0;
}
.container-brandbar .mod-menu {
  flex-direction: row;
  flex-wrap: wrap;
  gap: 2px;
  margin: 0;
  align-items: center;
}
.container-brandbar .mod-menu > li {
  flex: 0 1 auto;
  min-width: 0;
}
.container-brandbar .mod-menu > li > a {
  white-space: normal;
  word-break: normal;
  overflow-wrap: break-word;
}

/* Su schermi desktop stretti il menu NON deve scendere sotto il logo:
   resta alla sua altezza e manda le proprie voci su piu' righe. */
@media (min-width: 768px) {
  .container-brandbar { flex-wrap: nowrap; align-items: center; }
  .container-brandbar .navbar-brand { flex: 0 0 auto; }
  .container-brandbar .container-nav {
    flex: 1 1 auto;
    min-width: 0;
  }

  /* "Iscriviti" resta SEMPRE ancorato a destra su una riga sola:
     va a capo solo il resto delle voci. Lo spazio glielo riserva il
     padding-right del menu (bottone ~95px + margine). */
  .container-brandbar .container-nav { position: relative; }
  .container-brandbar .mod-menu { padding-right: 120px; }
  .container-brandbar .mod-menu > li.item-1460 {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    margin: 0;
  }
}


/* ==========================================================================
   4. FASCIA "IN PRIMO PIANO" (hero) e CARD DELLE NOTIZIE
   L'hero e' il modulo "In primo piano" (mod_articles, solo articoli in
   evidenza, 1 elemento) in posizione below-top: sta subito sotto il menu,
   a piena larghezza, prima dei quattro riquadri dei servizi.
   Le card sono generate dall'override
   html/com_content/category/blog_item.php di questo template.
   ========================================================================== */

/* L'hero si vede SOLO sulla home.
   L'assegnazione del modulo alla sola voce Home non basta: gli articoli aperti
   dalla home ereditano il suo Itemid (640) e quindi mostrerebbero il modulo.
   Qui lo leghiamo anche alla vista: home = view-category + layout-blog. */
.container-hero { display: none; }
body.itemid-640.view-category.layout-blog .container-hero {
  display: block;
  background: var(--sulpl-blu-notte);
  color: #fff;
  padding: clamp(28px, 4vw, 56px) clamp(20px, 4vw, 60px);
}
.container-hero .grid-child { display: block; }
.container-hero .mod-articles-items {
  list-style: none;
  margin: 0;
  padding: 0;
  display: block;
}
.container-hero .mod-articles-item {
  padding: 0;
  border: none;
}

/* Struttura reale di mod_articles: tutto sta dentro
   .mod-articles-item-content, con l'immagine in una <figure class="mod-articles-image">.
   Quindi il contenuto stesso diventa la griglia a due colonne:
   testo a sinistra, immagine a destra. */
.container-hero .mod-articles-item-content {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(18px, 3vw, 44px);
  align-items: center;
}
@media (min-width: 768px) {
  .container-hero .mod-articles-item-content {
    /* due metà esatte: il titolo occupa la sinistra, la foto la destra */
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
      "titolo  media"
      "meta    media";
    grid-template-rows: max-content max-content;
    align-content: start;
    /* la fascia deve essere alta almeno quanto l'immagine, altrimenti il
       riquadro sborda sopra e sotto il fondo blu */
    min-height: 280px;
  }
  /* Il titolo NON va mai troncato (richiesta del 2026-08-04): niente line-clamp
     e niente riga a altezza fissa. Si puo' fare perche' l'immagine ora ha
     altezza FISSA (280px) e non dipende piu' dall'altezza delle righe: e' finito
     il "row blowout" che aveva costretto ai 150px fissi. */
  .container-hero .mod-articles-title {
    grid-area: titolo;
    align-self: start;
  }
  .container-hero .mod-articles-item-content > dl { grid-area: meta; align-self: start; }
  /* ATTENZIONE: l'elemento della griglia NON e' la <figure> ma il link
     .mod-articles-image-link creato dall'override html/mod_articles/default_items.php.
     Mettere grid-area/align-self sulla figure non ha alcun effetto. */
  .container-hero .mod-articles-image-link { grid-area: media; align-self: start; }
  .container-hero .mod-articles-image { grid-area: media; align-self: start; }
  .container-hero .mod-articles-item-content > p { display: none; }
}

.container-hero .mod-articles-title {
  font-family: Archivo, system-ui, sans-serif;
  font-size: clamp(26px, 3.4vw, 46px);
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -.015em;
  margin: 0 0 .4em;
}
.container-hero .mod-articles-title a { color: #fff; text-decoration: none; }
.container-hero .mod-articles-title a:hover { color: #fff; text-decoration: none; }

.container-hero .mod-articles-item-content > dl {
  margin: 0;
  font-size: 14px;
  color: #8FA2BC;
}
.container-hero .mod-articles-date,
.container-hero time { color: #8FA2BC; font-size: 14px; }

/* Immagine a destra: altezza fissa e ancorata in alto, cosi' si taglia SOLO
   il fondo. L'aspect-ratio 16/10 e' stato tolto il 2026-08-04 perche' con una
   foto verticale il riquadro diventava piu' alto della fascia blu e sbordava
   sopra e sotto (stessa "row blowout" gia' vista sulla griglia). */
.container-hero .mod-articles-image {
  margin: 0;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.14);
  height: 280px;
  background: #132a49;
  width: 100%;
}
.container-hero .mod-articles-image-link { display: block; width: 100%; }
.container-hero .mod-articles-image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  border-radius: 0;
}

.container-hero .mod-articles-readmore,
.container-hero a.btn {
  display: inline-flex;
  align-items: center;
  padding: .8em 1.4em;
  border-radius: .6rem;
  background: #fff;
  color: var(--sulpl-blu-notte);
  font-weight: 700;
  font-size: 15px;
  text-decoration: none;
  border: none;
  margin-top: .5em;
}
.container-hero .mod-articles-readmore:hover,
.container-hero a.btn:hover { background: #E6EDF7; color: var(--sulpl-blu-notte); }

/* --- Titolo della sezione notizie --- */
.com-content-category-blog > h1 {
  font-size: clamp(22px, 2.2vw, 28px);
  color: var(--sulpl-blu-notte);
  border-bottom: 2px solid var(--sulpl-blu-notte);
  padding-bottom: .35em;
  margin-bottom: .9em;
}

/* --- Griglia delle card: due colonne --- */
.com-content-category-blog__items.blog-items {
  display: grid !important;
  grid-template-columns: 1fr;
  gap: 22px;
  margin: 0;
  padding: 0;
}
@media (min-width: 768px) {
  .com-content-category-blog__items.blog-items {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
.com-content-category-blog__item.blog-item {
  margin: 0;
  padding: 0;
  width: auto;
}

/* --- La card: immagine, titolo, estratto, data --- */
.sulpl-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  border: 1px solid var(--sulpl-bordo);
  border-radius: 14px;
  overflow: hidden;
  background: #fff;
  transition: border-color .15s, box-shadow .15s, transform .15s;
}
.sulpl-card:hover {
  border-color: #C3D2E6;
  box-shadow: 0 10px 26px rgba(11,31,58,.12);
  transform: translateY(-2px);
}
.sulpl-card-media {
  display: block;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: #EDF1F7;
}
.sulpl-card-media img {
  width: 100%;
  height: 100%;
  /* Ritaglio dall'alto: si vede la parte superiore della foto */
  object-fit: cover;
  object-position: center top;
  display: block;
}
.sulpl-card-body {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 18px 20px 20px;
  flex: 1;
}
.sulpl-card-title {
  font-family: Archivo, system-ui, sans-serif;
  font-size: 18.5px;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -.01em;
  margin: 0;
}
.sulpl-card-title a { color: #132a49; text-decoration: none; }
.sulpl-card-title a:hover { color: var(--sulpl-blu); text-decoration: none; }
.sulpl-card-text {
  margin: 0;
  font-size: 15px;
  line-height: 1.55;
  color: var(--sulpl-grigio-testo);
}
.sulpl-card-date {
  margin-top: auto;
  font-size: 13.5px;
  color: var(--sulpl-grigio-meta);
}

/* --- Paginazione a pillole --- */
.pagination .page-link {
  border-radius: 9px;
  min-width: 40px;
  text-align: center;
  color: #16202E;
  border-color: var(--sulpl-bordo);
  text-decoration: none;
}
.pagination .page-item.active .page-link {
  background: var(--sulpl-blu-notte);
  border-color: var(--sulpl-blu-notte);
}


/* ==========================================================================
   4-bis. LINK: nessuna sottolineatura, in nessun punto del sito
   Cassiopeia imposta --link-decoration: underline; qui la togliamo e la
   lasciamo comparire solo al passaggio del mouse dentro il testo degli
   articoli, dove aiuta a capire che una parola e' cliccabile.
   ========================================================================== */

:root, [data-bs-theme="light"] { --link-decoration: none; }

a { text-decoration: none; }

h1 a, h2 a, h3 a, h4 a, h5 a, h6 a,
.page-header a,
.mod-articles-title a,
.mod-menu a,
.sulpl-box,
.sulpl-btn {
  text-decoration: none;
}
h1 a:hover, h2 a:hover, h3 a:hover, h4 a:hover, h5 a:hover, h6 a:hover,
.page-header a:hover,
.mod-articles-title a:hover,
.mod-menu a:hover {
  text-decoration: none;
}

/* Nel testo degli articoli il link si sottolinea solo al passaggio del mouse */
.com-content-article__body a:hover,
.com-content-category-blog__item a:not(.sulpl-card-media):hover {
  text-decoration: underline;
}
.com-content-article__body a,
.com-content-article__body a:visited { color: var(--link-color); }


/* ==========================================================================
   5. MODULI IN CARD / SIDEBAR
   ========================================================================== */

.card { --card-border-color: var(--sulpl-bordo); }
.card-header {
  background: var(--sulpl-fondo-tenue);
  border-bottom: 1px solid var(--sulpl-bordo);
  font-size: 15px;
  letter-spacing: .02em;
  color: var(--sulpl-blu-notte);
  text-transform: uppercase;
}
.card-header::before {
  content: "";
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 99px;
  background: var(--sulpl-rosso);
  margin-right: .5em;
}

/* Il box CTA non deve avere la cornice della card che lo contiene */
.container-sidebar-right .card:has(.sulpl-cta-box) {
  border: none;
  background: transparent;
}
.container-sidebar-right .card:has(.sulpl-cta-box) .card-body { padding: 0; }

/* Menu "Territorio": pillole */
.container-sidebar-right #mod-menu780 {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.container-sidebar-right #mod-menu780 .nav-item { list-style: none; }
.container-sidebar-right #mod-menu780 a {
  display: inline-flex;
  padding: 7px 13px;
  border-radius: 999px;
  border: 1px solid #DCE4EE;
  font-size: 14px;
  font-weight: 600;
  color: #16202E;
}
.container-sidebar-right #mod-menu780 a:hover {
  border-color: var(--sulpl-blu);
  background: var(--sulpl-fondo-tenue);
  text-decoration: none;
}

/* Flash News (mod_articles): elenco compatto, data sopra il titolo */
.mod-articles-items {
  list-style: none;
  margin: 0;
  padding: 0;
}
.mod-articles-items > li {
  border-bottom: 1px solid #EEF2F7;
  padding: 0;
}
.mod-articles-items > li:last-child { border-bottom: none; }
.mod-articles-item { padding: 12px 0; }
.mod-articles-title {
  margin: 0;
  font-family: "Source Sans 3", system-ui, sans-serif;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: 0;
}
.mod-articles-title a { color: #132a49; }
.mod-articles-title a:hover { color: var(--sulpl-blu); text-decoration: none; }
.mod-articles-item .mod-articles-info,
.mod-articles-item time,
.mod-articles-item .mod-articles-date {
  display: block;
  font-size: 12px;
  color: var(--sulpl-grigio-meta);
  font-weight: 600;
  margin-bottom: 3px;
}


/* ==========================================================================
   6. FASCE A TUTTA LARGHEZZA
   bottom-a = "Servizi, uffici e documenti" su fondo chiaro
   bottom-b = "Iscriviti alla newsletter" su fondo blu
   ========================================================================== */

.container-bottom-a {
  display: block;
  background: var(--sulpl-fondo-sezione);
  border-top: 1px solid var(--sulpl-bordo);
  border-bottom: 1px solid var(--sulpl-bordo);
  padding: clamp(30px, 4vw, 52px) 1em;
  margin-top: clamp(28px, 3vw, 44px);
  grid-column: full-start / full-end !important;
}
.container-bottom-a .card,
.container-bottom-a .moduletable {
  max-width: 1240px;
  margin: 0 auto;
  background: transparent;
  border: none;
}
.container-bottom-a .card-header {
  background: transparent;
  border: none;
  padding: 0 0 .7em;
  font-size: clamp(20px, 2.2vw, 26px);
  color: var(--sulpl-blu-notte);
  text-transform: none;
  letter-spacing: -.01em;
}
.container-bottom-a .card-header::before { display: none; }
.container-bottom-a .card-body { padding: 0; }
.container-bottom-a .mod-menu {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 12px;
}
.container-bottom-a .mod-menu .nav-item { list-style: none; }
.container-bottom-a .mod-menu a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  background: #fff;
  border: 1px solid var(--sulpl-bordo);
  border-radius: 11px;
  padding: 16px 18px;
  font-size: 15px;
  font-weight: 600;
  color: #132a49;
}
.container-bottom-a .mod-menu a::after {
  content: "\2192";
  color: var(--sulpl-blu);
  flex: none;
}
.container-bottom-a .mod-menu a:hover {
  border-color: var(--sulpl-blu);
  color: var(--sulpl-blu-notte);
  text-decoration: none;
  box-shadow: 0 6px 16px rgba(11,31,58,.07);
}

.container-bottom-b {
  display: block;
  background: var(--sulpl-blu-notte);
  color: #fff;
  padding: clamp(30px, 4vw, 48px) 1em;
  grid-column: full-start / full-end !important;
}
.container-bottom-b .card,
.container-bottom-b .moduletable {
  max-width: 1240px;
  margin: 0 auto;
  background: transparent;
  border: none;
}
.container-bottom-b .card-header {
  background: transparent;
  border: none;
  color: #fff;
  padding: 0 0 .5em;
  font-size: clamp(20px, 2.4vw, 28px);
  text-transform: none;
}
.container-bottom-b .card-header::before { display: none; }
.container-bottom-b .card-body { padding: 0; }
.container-bottom-b input[type="email"],
.container-bottom-b input[type="text"] {
  min-height: 46px;
  padding: 0 16px;
  border-radius: .6rem;
  border: 1px solid rgba(255,255,255,.22);
  background: rgba(255,255,255,.08);
  color: #fff;
  font-size: 16px;
}
.container-bottom-b input::placeholder { color: #9FB2CB; }
.container-bottom-b button,
.container-bottom-b input[type="submit"] {
  min-height: 46px;
  padding: 0 22px;
  border-radius: .6rem;
  border: 0;
  background: #fff;
  color: var(--sulpl-blu-notte);
  font-weight: 700;
  font-size: 16px;
  cursor: pointer;
}
.container-bottom-b a { color: #fff; }

/* Contenuto della fascia newsletter */
.sulpl-newsletter {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px 28px;
  align-items: center;
}
@media (min-width: 768px) {
  .sulpl-newsletter { grid-template-columns: 1.4fr 1fr; }
  .sulpl-newsletter-azione { align-items: flex-end; text-align: right; }
}
.sulpl-newsletter-testo h2 {
  font-size: clamp(20px, 2.4vw, 28px);
  font-weight: 800;
  color: #fff;
  margin: 0 0 .3em;
}
.sulpl-newsletter-testo p {
  margin: 0;
  color: #C6D2E4;
  font-size: 16px;
  line-height: 1.55;
}
.sulpl-newsletter-azione {
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: flex-start;
}
.sulpl-newsletter-nota {
  font-size: 13.5px;
  color: #9FB2CB;
  line-height: 1.45;
}


/* --------------------------------------------------------------------------
   6-bis. MODULO ISCRIZIONE ACYMAILING (sostituisce il vecchio mailto)
   -------------------------------------------------------------------------- */

.container-bottom-b .card-header {
  font-size: clamp(20px, 2.4vw, 28px);
  font-weight: 800;
  color: #fff;
  margin: 0 0 .5em;
  padding: 0;
  border: 0;
  background: none;
}
.container-bottom-b .acym_module_form { width: 100%; }
.container-bottom-b .acym_form {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 20px;
}
.container-bottom-b .onefield.fieldacy2 label {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.container-bottom-b .acym__users__creation__fields__title {
  color: #C6D2E4;
  font-size: 14px;
  font-weight: 600;
}
.container-bottom-b input.acym__user__edit__email {
  min-width: 260px;
  padding: .7em 1em;
  border: 0;
  border-radius: 6px;
  background: #fff;
  color: var(--sulpl-blu-notte, #0B1F3A);
  font-size: 15px;
}
.container-bottom-b .fieldacyterms { flex-basis: 100%; }
.container-bottom-b .fieldacyterms label {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #C6D2E4;
  font-size: 14px;
  font-weight: 400;
  cursor: pointer;
}
.container-bottom-b .fieldacyterms input.checkbox {
  width: 18px;
  height: 18px;
  flex: none;
}
.container-bottom-b .acym__modal__handle {
  color: #fff;
  font-weight: 700;
  text-decoration: underline;
}
.container-bottom-b .acysubbuttons { margin: 4px 0 0; flex-basis: 100%; }
.container-bottom-b .subbutton {
  padding: .7em 1.8em;
  border: 0;
  border-radius: 999px;
  background: #fff;
  color: var(--sulpl-blu-notte, #0B1F3A);
  font-weight: 700;
  font-size: 16px;
  cursor: pointer;
}
.container-bottom-b .subbutton:hover { background: #e8edf5; }
.container-bottom-b .acym__field__error__block { color: #ffd4d4; font-size: 13px; }

/* ==========================================================================
   7. FOOTER A COLONNE
   ========================================================================== */

.container-footer.footer {
  background: #071427;
  color: #8FA2BC;
  padding: clamp(30px, 4vw, 48px) 0 1.5em;
  font-size: 15px;
}
.container-footer .grid-child {
  display: grid;
  grid-template-columns: 1fr;
  gap: 28px;
  align-items: start;
}
@media (min-width: 600px) {
  .container-footer .grid-child { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 992px) {
  .container-footer .grid-child { grid-template-columns: 1.4fr 1fr 1fr 1fr; }
}

/* Riga finale con il copyright */
.sulpl-foot-legal {
  max-width: 1240px;
  margin: 28px auto 0;
  padding: 18px 1em 0;
  border-top: 1px solid rgba(255,255,255,.1);
  font-size: 13.5px;
  color: #8FA2BC;
}
.container-footer .card,
.container-footer .moduletable {
  background: transparent;
  border: none;
}
.container-footer .card-body { padding: 0; }
.container-footer .card-header {
  background: transparent;
  border: none;
  padding: 0 0 .6em;
  color: #fff;
  font-weight: 700;
  font-size: 15px;
  letter-spacing: .02em;
  text-transform: none;
}
.container-footer .card-header::before { display: none; }

.container-footer .mod-menu {
  display: flex;
  flex-direction: column;
  gap: 9px;
}
.container-footer .mod-menu .nav-item { list-style: none; }
.container-footer .mod-menu a { color: #8FA2BC; font-size: 15px; padding: 0; }
.container-footer .mod-menu a:hover { color: #fff; }

.sulpl-foot-brand { display: flex; flex-direction: column; gap: 10px; }
.sulpl-foot-brand-name {
  font-family: Archivo, system-ui, sans-serif;
  font-weight: 800;
  font-size: 19px;
  color: #fff;
}
.sulpl-foot-brand p { margin: 0; line-height: 1.6; }
.sulpl-foot-cf { font-size: 13.5px; }

.container-footer .mod-custom a { color: #8FA2BC; }
.container-footer #mod-custom723 a {
  display: inline-flex;
  margin-top: .5em;
  padding: 8px 16px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.28);
  color: #fff;
  font-weight: 600;
  font-size: 13.5px;
}
.container-footer #mod-custom723 a:hover { background: rgba(255,255,255,.1); }


/* ==========================================================================
   8. VARIANTI REGIONALI
   La classe regione-<slug> viene aggiunta al <body> da
   templates/cassiopeia_sulpl/index.php in base alla categoria della pagina
   (categoria regionale o sua sottocategoria) oppure alla categoria forzata
   dalla voce di menu del form di invio notizie.
   Categorie pubbliche: Emilia-Romagna 49, Liguria 51, Campania 54,
   Sicilia 56, Piemonte 68, Umbria 77.
   Categorie dei delegati: 62, 70, 66, 71, 72, 76.
   ========================================================================== */

body.regione-emilia-romagna {
  --cassiopeia-color-primary: #0a6b3d;
  --cassiopeia-color-hover: #084f2d;
  --link-color: #0a6b3d;
  --link-hover-color: #084f2d;
  --sulpl-regione-nome: "Emilia-Romagna";
}
body.regione-liguria {
  --cassiopeia-color-primary: #0b5c8a;
  --cassiopeia-color-hover: #084664;
  --link-color: #0b5c8a;
  --link-hover-color: #084664;
  --sulpl-regione-nome: "Liguria";
}
body.regione-campania {
  --cassiopeia-color-primary: #8b1d2b;
  --cassiopeia-color-hover: #6d1622;
  --link-color: #8b1d2b;
  --link-hover-color: #6d1622;
  --sulpl-regione-nome: "Campania";
}
body.regione-sicilia {
  --cassiopeia-color-primary: #a35a00;
  --cassiopeia-color-hover: #7d4500;
  --link-color: #a35a00;
  --link-hover-color: #7d4500;
  --sulpl-regione-nome: "Sicilia";
}
body.regione-piemonte {
  --cassiopeia-color-primary: #6a2b6b;
  --cassiopeia-color-hover: #4f204f;
  --link-color: #6a2b6b;
  --link-hover-color: #4f204f;
  --sulpl-regione-nome: "Piemonte";
}
body.regione-umbria {
  --cassiopeia-color-primary: #2f6b2f;
  --cassiopeia-color-hover: #24521f;
  --link-color: #2f6b2f;
  --link-hover-color: #24521f;
  --sulpl-regione-nome: "Umbria";
}

/* Nastro col nome della regione sopra il contenuto */
body[class*="regione-"] .container-component::before {
  content: var(--sulpl-regione-nome, "");
  display: block;
  margin: 0 0 1rem;
  padding: .35rem .75rem;
  border-left: 5px solid var(--cassiopeia-color-primary);
  background: color-mix(in srgb, var(--cassiopeia-color-primary) 8%, transparent);
  color: var(--cassiopeia-color-primary);
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  font-size: .85rem;
}
/* Sul form il nastro non serve: lo dice gia' il titolo */
body[class*="regione-"].view-form .container-component::before { content: none; }


/* ==========================================================================
   9. FORM DI INVIO NOTIZIE DAL FRONT-END (com_content, view=form)
   ========================================================================== */

body.view-form.layout-edit .container-component { max-width: 60rem; }
body.view-form.layout-edit fieldset {
  border: 1px solid var(--cassiopeia-color-primary);
  border-radius: .25rem;
  padding: 1rem;
  margin-bottom: 1.5rem;
}
body.view-form.layout-edit legend {
  width: auto;
  padding: 0 .5rem;
  font-size: 1rem;
  font-weight: 700;
  color: var(--cassiopeia-color-primary);
}


/* --------------------------------------------------------------------------
   10. RIQUADRI SERVIZI RAPIDI: nascosti su mobile quando si apre un articolo
   -------------------------------------------------------------------------- */

@media (max-width: 767px) {
  body.view-article .container-top-a { display: none; }
}


/* ==========================================================================
   11. PAGINE INTERNE: ARTICOLO, CATEGORIA REGIONALE, FORM E CONTATTI
   ========================================================================== */

/* --- 11a. Corpo articolo --- */
.com-content-article__body {
  max-width: 46rem;
  line-height: 1.7;
  font-size: 16px;
  color: var(--body-color);
}
.com-content-article__body p { margin: 0 0 1.1em; }
.com-content-article__body h2,
.com-content-article__body h3,
.com-content-article__body h4 {
  font-family: Archivo, system-ui, sans-serif;
  color: var(--sulpl-blu-notte);
  margin: 1.4em 0 .6em;
}
.com-content-article__body img {
  max-width: 100%;
  height: auto;
  border-radius: var(--border-radius);
}
.com-content-article__body blockquote {
  margin: 1.2em 0;
  padding: .6em 1.2em;
  border-left: 4px solid var(--sulpl-verde);
  background: var(--sulpl-fondo-tenue);
  color: var(--sulpl-grigio-testo);
}
.com-content-article__body ul,
.com-content-article__body ol { padding-left: 1.4em; margin: 0 0 1.1em; }
.com-content-article__body li { margin-bottom: .35em; }
.com-content-article__body table {
  width: 100%;
  border-collapse: collapse;
  margin: 1.2em 0;
}
.com-content-article__body table th,
.com-content-article__body table td {
  border: 1px solid var(--sulpl-bordo);
  padding: .5em .7em;
}

/* --- 11b. Meta articolo --- */
.article-info.text-muted {
  display: flex;
  align-items: center;
  gap: .5em;
  color: var(--sulpl-grigio-meta) !important;
  font-size: 13.5px;
  margin-bottom: 1.2em;
}
.article-info .icon-calendar { color: var(--sulpl-grigio-meta); }

/* --- 11c. Elenco sottocategorie (posizione main-top) --- */
ul.mod-articlescategory.category-module {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  list-style: none;
  padding: 0;
  margin: 0;
}
ul.mod-articlescategory.category-module li { margin: 0; }
ul.mod-articlescategory.category-module a {
  display: inline-flex;
  align-items: center;
  padding: 5px 14px;
  border-radius: 999px;
  background: var(--sulpl-fondo-tenue);
  color: var(--sulpl-blu-notte);
  font-size: 13.5px;
  font-weight: 700;
  text-decoration: none;
}
ul.mod-articlescategory.category-module a:hover {
  background: var(--sulpl-blu);
  color: #fff;
}

/* --- 11d. Form nativi di Joomla (contatti + invio notizie delegati) --- */
.com-contact__form .well,
body.view-form.layout-edit .container-component {
  background: transparent;
  border: none;
  box-shadow: none;
  padding: 0;
}
.control-group .control-label label,
.com-contact__form label {
  font-weight: 700;
  color: var(--sulpl-blu-notte);
  font-size: 14.5px;
}
.controls input[type="text"],
.controls input[type="email"],
.controls input[type="tel"],
.controls textarea,
.controls select,
.com-contact__form input[type="text"],
.com-contact__form input[type="email"],
.com-contact__form textarea {
  width: 100%;
  border: 1px solid var(--sulpl-bordo);
  border-radius: .5rem;
  padding: .6em .8em;
  font-size: 15px;
  font-family: inherit;
  transition: border-color .15s, box-shadow .15s;
}
.controls input:focus,
.controls textarea:focus,
.controls select:focus,
.com-contact__form input:focus,
.com-contact__form textarea:focus {
  border-color: var(--sulpl-blu);
  box-shadow: 0 0 0 3px rgba(27,78,140,.15);
  outline: none;
}
.controls .btn.btn-primary,
.com-contact__form .btn.btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5em;
  padding: .75em 1.3em;
  border-radius: .6rem;
  font-weight: 700;
  font-size: 15px;
  border: none;
  background: var(--sulpl-rosso);
  color: #fff;
  text-shadow: none;
  box-shadow: none;
}
.controls .btn.btn-primary:hover,
.com-contact__form .btn.btn-primary:hover {
  background: var(--sulpl-rosso-scuro);
}


/* --- 11f. Landing "Gallerie e Locandine": due bottoni grandi --- */
.sulpl-landing-buttons {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  margin: 1.5em 0;
}
@media (max-width: 600px) {
  .sulpl-landing-buttons { grid-template-columns: 1fr; }
}
.sulpl-landing-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .4em;
  padding: 3em 1.5em;
  border-radius: 14px;
  font-weight: 800;
  font-size: 22px;
  text-decoration: none;
  text-align: center;
  transition: transform .15s, box-shadow .15s;
  box-shadow: 0 4px 14px rgba(11,31,58,.15);
}
.sulpl-landing-btn:hover {
  transform: translateY(-3px);
  text-decoration: none;
  box-shadow: 0 8px 20px rgba(11,31,58,.22);
}
.sulpl-landing-btn small {
  font-weight: 500;
  font-size: 14px;
  opacity: .85;
}
.sulpl-landing-btn--dark { background: var(--sulpl-blu-notte); color: #fff; }
.sulpl-landing-btn--dark:hover { background: #132a49; color: #fff; }
.sulpl-landing-btn--primary { background: var(--sulpl-rosso); color: #fff; }
.sulpl-landing-btn--primary:hover { background: var(--sulpl-rosso-scuro); color: #fff; }

/* --- 11e. Box informazioni di contatto --- */
.com-contact__info,
.com-contact__miscinfo {
  border: 1px solid var(--sulpl-bordo);
  border-radius: 12px;
  padding: 18px 20px;
  background: #fff;
  margin-bottom: 1.2em;
}


/* --- 12. Galleria Locandine: mosaico (spostato dall'articolo, era inline) --- */
.sulpl-locandine-mosaic {
  column-count: 2;
  column-gap: clamp(10px, 2vw, 32px);
}
.sulpl-locandine-mosaic a {
  display: block;
  break-inside: avoid;
  margin-bottom: clamp(10px, 2vw, 32px);
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(11,31,58,.12);
}
.sulpl-locandine-mosaic img {
  display: block;
  width: 100%;
  height: auto;
}
@media (max-width: 480px) {
  .sulpl-locandine-mosaic { column-count: 1; }
}

/* --- 13. Mobile: topbar nascosta, menu principale ad hamburger --- */
.sulpl-menu-toggle {
  display: none;
}
@media (max-width: 767px) {
  .container-topbar {
    display: none;
  }

  .container-header {
    position: relative;
  }
  .sulpl-menu-toggle {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 5px;
    width: 40px;
    height: 40px;
    padding: 0;
    border: none;
    background: transparent;
    cursor: pointer;
    position: absolute;
    top: 14px;
    right: 16px;
    z-index: 30;
    flex-shrink: 0;
  }
  .sulpl-menu-toggle-bar {
    display: block;
    width: 26px;
    height: 3px;
    border-radius: 2px;
    background: var(--sulpl-blu-notte, #0B1F3A);
  }

  .container-brandbar {
    flex-wrap: wrap;
  }
  .container-nav {
    width: 100%;
    flex-wrap: wrap;
  }
  .container-nav .mod-menu {
    display: none;
    width: 100%;
    flex-direction: column;
    order: 3;
  }
  body.sulpl-menu-open .container-nav .mod-menu {
    display: flex;
  }
  .container-nav .container-search {
    display: none;
  }
}