/***!  /templates/joomla-italia-theme/user.css?1761907833  !***/

/* ==========================================================
   HOME — Circolari / Eventi / Notizie (3 colonne x 3 card)
   ========================================================== */

:root{
  --grid-gap: 1rem;
  --card-min: 200px;
}

/* Contenitore padre: rimuovo padding-top/bottom di Bootstrap */
.container.mod-news.pt-4.pb-5 {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  margin-top: 0 !important;
}

/* Colonne (Circolari / Eventi / Notizie) */
.mod-news .row > .col-12.col-lg-4:has(> a.view-all:is(
  [href*="/novita/circolari"],
  [href*="/novita/eventi"],
  [href*="/novita/notizie"]
)) {
  display: grid !important;
  grid-template-columns: 1fr;
  grid-template-rows:
    auto
    repeat(3, minmax(var(--card-min), auto))
    auto;
  gap: var(--grid-gap);
  position: relative;
  align-content: start;
  grid-auto-rows: min-content;
}

/* Titoli e "Vedi tutti" */
.mod-news .row > .col-12.col-lg-4:has(> a.view-all) .title-section,
.mod-news .row > .col-12.col-lg-4:has(> a.view-all) .view-all {
  grid-column: 1 / -1;
}

.mod-news .row > .col-12.col-lg-4:has(> a.view-all) .title-section {
  grid-row: 1;
  text-align: center;
  margin: 0 0 10px 0 !important;   /* titolo compatto */
  padding: 0 !important;
}

.mod-news .row > .col-12.col-lg-4:has(> a.view-all) .view-all {
  grid-row: 5;
  text-align: center;
}

/* --- FIX: elimina scalone, lascia grid-row auto --- */
.mod-news .row > .col-12.col-lg-4:has(> a.view-all) > :is(.card, .card-icon-main) {
  grid-row: auto !important; 
  margin-top: 0 !important;   /* nessun margine sopra le card */
  margin-bottom: 0 !important;
}

/* Mostra solo le prime 3 card (titolo = primo figlio, quindi 2-4 card visibili) */
.mod-news .row > .col-12.col-lg-4:has(> a.view-all)
  > :is(.card, .card-icon-main):nth-child(n+5) {
  display: none !important;
}

/* Altezza uniforme + clamp testo */
.mod-news .row > .col-12.col-lg-4:has(> a.view-all) .scheda-item {
  min-height: var(--card-min);
  display: flex;
  flex-direction: column;
  gap: .5rem;
}
.mod-news .row > .col-12.col-lg-4:has(> a.view-all) .mod-news-title {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.mod-news .row > .col-12.col-lg-4:has(> a.view-all) .scheda-item p {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin: 0;
}

/* ===== Placeholder per riempire slot liberi ===== */
.mod-news .row > .col-12.col-lg-4:has(> a.view-all) .ph {
  border: 1px dashed rgba(0,0,0,.15);
  border-radius: .5rem;
  min-height: var(--card-min);
  display:flex;
  align-items:center;
  justify-content:center;
  font-style: italic;
  opacity:.6;
}

/* 1 placeholder se ci sono 2 card */
.mod-news .row > .col-12.col-lg-4:has(> a.view-all > .card:nth-of-type(2):nth-last-of-type(1))::after {
  content:"In arrivo";
  display:flex;
  align-items:center;
  justify-content:center;
  border:1px dashed rgba(0,0,0,.15);
  border-radius:.5rem;
  min-height:var(--card-min);
  font-style:italic;
  opacity:.6;
}

/* 2 placeholder se c'è 1 card */
.mod-news .row > .col-12.col-lg-4:has(> a.view-all > .card:nth-of-type(1):nth-last-of-type(1))::before,
.mod-news .row > .col-12.col-lg-4:has(> a.view-all > .card:nth-of-type(1):nth-last-of-type(1))::after {
  content:"In arrivo";
  display:flex;
  align-items:center;
  justify-content:center;
  border:1px dashed rgba(0,0,0,.15);
  border-radius:.5rem;
  min-height:var(--card-min);
  font-style:italic;
  opacity:.6;
}
.mod-news .row > .col-12.col-lg-4:has(> a.view-all > .card:nth-of-type(1):nth-last-of-type(1))::before { grid-row:auto; }
.mod-news .row > .col-12.col-lg-4:has(> a.view-all > .card:nth-of-type(1):nth-last-of-type(1))::after  { grid-row:auto; }

/* Responsive */
@media (max-width: 991.98px) {
  :root{ --card-min: 190px; }
}
@media (max-width: 767.98px) {
  :root{ --card-min: 180px; }
}

/* Elimina gutter verticale di Bootstrap nella row */
.mod-news .row { 
  --bs-gutter-y: 0 !important;
}
/* stile mokup*/
/* ==========================================================
   PLACEHOLDER — SOLO per Circolari / Eventi / Notizie
   Conteggio robusto delle card (evita errori e sezioni esterne)
   ========================================================== */

/* base style dei 2 pseudo-elementi del contenitore colonna target */
.mod-news .row > .col-12.col-lg-4:has(> a.view-all:is(
  [href*="/novita/circolari"],
  [href*="/novita/eventi"],
  [href*="/novita/notizie"]
))::before,
.mod-news .row > .col-12.col-lg-4:has(> a.view-all:is(
  [href*="/novita/circolari"],
  [href*="/novita/eventi"],
  [href*="/novita/notizie"]
))::after{
  content:"";
  display:none;
  align-items:center;
  justify-content:center;
  border:2px dashed rgba(24,37,56,.22);
  border-radius:14px;
  min-height:var(--card-min,200px);
  background:repeating-linear-gradient(45deg, rgba(24,37,56,.03) 0 10px, transparent 10px 20px);
  color:#5b6b7a;
  font-style:italic;
}

/* === esattamente 2 card -> 1 placeholder in fondo (row 4) === */
.mod-news .row > .col-12.col-lg-4:has(> a.view-all:is(
  [href*="/novita/circolari"],
  [href*="/novita/eventi"],
  [href*="/novita/notizie"]
)):has(> .card + .card):not(:has(> .card + .card + .card))::after{
  content:"In arrivo";
  display:flex;
  grid-row:4;
}

/* === esattamente 1 card -> 2 placeholder (row 3 e row 4) === */
.mod-news .row > .col-12.col-lg-4:has(> a.view-all:is(
  [href*="/novita/circolari"],
  [href*="/novita/eventi"],
  [href*="/novita/notizie"]
)):has(> .card):not(:has(> .card + .card))::before{
  content:"In arrivo";
  display:flex;
  grid-row:3;
}
.mod-news .row > .col-12.col-lg-4:has(> a.view-all:is(
  [href*="/novita/circolari"],
  [href*="/novita/eventi"],
  [href*="/novita/notizie"]
)):has(> .card):not(:has(> .card + .card))::after{
  content:"In arrivo";
  display:flex;
  grid-row:4;
}

/* === 0 card -> 2 placeholder (row 2 e row 3) === */
.mod-news .row > .col-12.col-lg-4:has(> a.view-all:is(
  [href*="/novita/circolari"],
  [href*="/novita/eventi"],
  [href*="/novita/notizie"]
)):not(:has(> .card))::before{
  content:"In arrivo";
  display:flex;
  grid-row:2;
}
.mod-news .row > .col-12.col-lg-4:has(> a.view-all:is(
  [href*="/novita/circolari"],
  [href*="/novita/eventi"],
  [href*="/novita/notizie"]
)):not(:has(> .card))::after{
  content:"In arrivo";
  display:flex;
  grid-row:3;
}

/* ==========================================================
   FINE PLACEHOLDER — Circolari / Eventi / Notizie
   ========================================================== */
/*fine stile mokup*/

/* ==========================================================
   HERO SINISTRA — GRADIENTE + SPRITE TECNICI
   ========================================================== */

/* 1) Gradiente sinistra */
body .section-hero-left{
  background:#0b3a6e !important;
  background-image: linear-gradient(to right, #0b3a6e 0%, #2b69a3 55%, #5aa0d6 100%) !important;
  filter:none !important;
}

/* 2) Pattern tecnico */
body .section-hero-left .item-banner::before{
  content:"";
  position:absolute; inset:0;
  z-index:-1;
  opacity:.12;
  background-repeat:repeat;
  background-size:80px 80px;
  background-image: url("data:image/svg+xml;utf8,\
  <svg xmlns='http://www.w3.org/2000/svg' width='80' height='80' viewBox='0 0 80 80'>\
    <g fill='none' stroke='%23FFFFFF' stroke-width='1.2' stroke-linecap='round' opacity='0.7'>\
      <path d='M10 10 H35 M35 10 V35 M35 35 H60'/>\
      <circle cx='10' cy='10' r='2'/>\
      <circle cx='35' cy='35' r='2'/>\
      <circle cx='60' cy='35' r='2'/>\
    </g>\
  </svg>") !important;
}

/* 3) Disattivo decorazioni originali */
body .section-hero-left .decoration-01::before,
body .section-hero-left .decoration-02::before{
  background-image:none !important;
}

/* 4) Cerchio tecnico */
body .section-hero-left .decoration-01{ position:absolute; z-index:0; top:50%; left:50%; width:312px; height:312px; margin:-156px 0 0 -156px; }
body .section-hero-left .decoration-01::before{
  content:"";
  position:absolute; inset:0;
  width:280px; height:280px; margin:auto;
  border:2px dashed rgba(255,255,255,0.35);
  border-radius:50%;
  box-shadow:0 0 0 20px rgba(255,255,255,0.05);
}

/* 5) Chip elettronico */
body .section-hero-left .decoration-02{ position:absolute; z-index:0; bottom:50px; left:50px; width:120px; height:120px; }
body .section-hero-left .decoration-02::before{
  content:"";
  position:absolute; inset:0;
  border:2px solid rgba(255,255,255,0.4);
  background:transparent;
  box-sizing:border-box;
}
body .section-hero-left .decoration-02::after{
  content:"";
  position:absolute; inset:0;
  padding:6px;
  background:
    repeating-linear-gradient(to right, rgba(255,255,255,0.4) 0 2px, transparent 2px 12px),
    repeating-linear-gradient(to bottom, rgba(255,255,255,0.4) 0 2px, transparent 2px 12px);
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  box-sizing:border-box;
}

/* 6) Responsive */
@media (max-width: 991px) {
  body .section-hero-left .decoration-01{ transform: scale(.8); }
  body .section-hero-left .decoration-02{ bottom: 20px; left: 20px; transform: scale(.9); }
  body .section-hero-left .item-banner::before{ background-size:64px 64px; opacity:.10; }
}
/*articolo*/
/* ==========================================================
   EVENTO/ARTICOLO — compact hero (solo view-article)
   ========================================================== */

/* Scope solo alle pagine articolo (com_content -> view article) */
body.com-content.view-article {

  /* 1) Sezione hero più compatta */
  /* la sezione che vedi nel DOM: <section class="section ... section-hero"> */
  /* riduco il padding verticale enorme ereditato da py-5 */
  /* NB: !important perché Bootstrap/utility hanno priorità alta */
}
body.com-content.view-article .section-hero {
  padding-top: 1.5rem !important;   /* prima erano ~3rem (py-5) */
  padding-bottom: 1.5rem !important;
  min-height: 0 !important;
}

/* 2) Blocco verde SVG limitato (quello in .title-img) */
body.com-content.view-article .section-hero .title-img {
  max-height: 100px;               /* regola qui quanto “alto” vuoi il green */
  overflow: hidden;                 /* taglia eventuale eccesso */
  opacity: .85;                     /* un filo più soft */
}
body.com-content.view-article .section-hero .title-img svg {
  height: 100%;                     /* sta dentro al max-height di .title-img */
  width: 100%;
  object-fit: cover;
  display: block;
}

/* 3) Il contenuto testuale deve stare sopra e vicino */
body.com-content.view-article .section-hero .container {
  position: relative;
  z-index: 1;
  margin-top: 0 !important;        /* niente scaloni */
}

/* 4) Mobile: l'hero può essere leggermente più alto ma proporzionato */
@media (max-width: 991.98px) {
  body.com-content.view-article .section-hero {
    padding-top: 1.25rem !important;
    padding-bottom: 1.25rem !important;
  }
  body.com-content.view-article .section-hero .title-img {
    max-height: 46vh;               /* proporzionale allo schermo */
    opacity: .9;
  }
}

/* --- OPZIONALE: se vuoi togliere del tutto il verde (commenta/scommenta) --- */
/*
body.com-content.view-article .section-hero .title-img{
  display:none !important;
}
*/


/*immagine in articolo avviso*/

/* 1. Prendiamo tutta l'area hero e la riscriviamo come layout verticale semplice */
.section-hero {
    display: block !important;
    max-width: 1200px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 2rem !important;
    padding-right: 2rem !important;
    padding-top: 2rem !important;
    padding-bottom: 2rem !important;
    text-align: center !important;
    background: transparent !important;
}

/* 2. Forziamo .row e .align-items-center a NON fare più la griglia bootstrap */
.section-hero .row,
.section-hero .row.align-items-center {
    display: block !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* 3. Tutte le colonne interne diventano blocchi pieni al 100% */
.section-hero [class*="col-"] {
    float: none !important;
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    flex: none !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

/* 4. Banner immagine */
.section-hero .title-img {
    width: 100% !important;
    max-width: 1000px !important;
    height: 260px !important;
    margin: 0 auto 2rem auto !important;
    background-size: contain !important;
    background-repeat: no-repeat !important;
    background-position: center center !important;
    background-color: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}

/* 5. Blocco testo (titolo + paragrafi) */
.section-hero .hero-title,
.section-hero .container {
    max-width: 1000px !important;   /* <--- APRE DAVVERO */
    width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;

    text-align: left !important;
    line-height: 1.55 !important;
    font-size: 1.1rem !important;
    color: #1a2d3e;
}

/* 6. Titolo dell'articolo */
.section-hero .hero-title h1,
.section-hero .hero-title h2,
.section-hero .container h1,
.section-hero .container h2 {
    margin-bottom: 1rem !important;
    line-height: 1.2 !important;
}

/* 7. Paragrafi sotto */
.section-hero .hero-title p,
.section-hero .container p {
    margin-bottom: 1rem !important;
    max-width: 75ch;  /* limite di leggibilità, NON restringe la colonna totale */
}
/* --- HERO EVENTO / ARTICOLO --- */

/* DESKTOP: immagine di sfondo sopra al testo, niente sovrapposizioni */
@media (min-width: 992px) {

  /* 1) Il blocco con background */
  .section-hero .title-img {
    /* annulla qualsiasi overlay/float preesistente */
    position: relative !important;   /* era spesso absolute */
    z-index: 0 !important;
    float: none !important;
    clear: both !important;
    display: block !important;

    /* dimensioni + spaziatura */
    width: 100%;
    max-width: 1100px;
    margin: 0 auto 2rem !important;

    /* fai occupare spazio al div con il background */
    aspect-ratio: 16 / 9;            /* cambia se il banner ha altro ratio */
    min-height: 320px;               /* fallback se aspect-ratio non c'è */

    /* gestione immagine */
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: contain !important; /* usa cover se vuoi riempire */
  }

  /* 2) Il testo deve stare sopra e NON sotto l’immagine in z-index */
  .section-hero .hero-title,
  .section-hero .container {
    position: relative !important;
    z-index: 1 !important;
  }
}

/* Mantieni allineati a sinistra titoli e liste */
.item-page .com-content-article__body h1,
.item-page .com-content-article__body h2,
.item-page .com-content-article__body h3,
.item-page .com-content-article__body ul,
.item-page .com-content-article__body ol,
.section-hero .hero-title h1 {
  text-align: left;
}

/* === PARAGRAFI ARTICOLO + HERO (puliti) === */
.item-page .com-content-article__body p,
.section-hero .hero-title p,
.section-hero .container p {
  display: block !important;
  margin: 0 0 1rem !important;
  line-height: 1.6 !important;

  /* allineamento di default (sinistra) */
  text-align: left !important;
  text-justify: auto !important;

  white-space: normal !important;
  word-break: normal !important;
  overflow-wrap: break-word !important;
  -webkit-hyphens: auto !important;
  hyphens: auto !important;
}

/* Se il section ha anche la classe .d-lg-flex di Bootstrap, neutralizzala */
@media (min-width: 992px) {
  .section-hero.d-lg-flex { display: block !important; }
}

/* (Opzionale già presente nel tuo file) rispetto a capi se usi la classe .preline */
.section-hero .hero-title .preline,
.item-page .com-content-article__body .preline {
  white-space: pre-line !important;
}
/* css */
/* --- FIX SPAZIATURA PARAGRAFI ARTICOLI --- */
html body.com-content.view-article .section-hero .container p,
html body.com-content.view-article .item-page .com-content-article__body p {
  display: block !important;
  margin-top: 0 !important;
  margin-bottom: 1.5rem !important;   /* aggiunge aria tra paragrafi */
  line-height: 1.6 !important;
  white-space: normal !important;
}

/* --- FIX OVERFLOW / CONTAINER COMPRESSO --- */
html body.com-content.view-article .section-hero .container {
  overflow: visible !important;
  padding-top: 1rem !important;
  padding-bottom: 1rem !important;
}
/* fix rotazione*/
/* --- HERO: fix mobile + landscape, no overlap --- */

/* 1) Rimuovi il tappo a 100px e l'overflow che taglia */
body.com-content.view-article .section-hero .title-img {
  max-height: none !important;
  overflow: visible !important;
  opacity: .85; /* lasciamo il tono soft se ti piace */
}

/* 2) Usa aspect-ratio su TUTTE le viewport (non solo desktop) */
.section-hero .title-img {
  position: relative !important;
  z-index: 1 !important;            /* immagine sotto al testo solo se si sovrapponessero */
  display: block !important;
  width: 100% !important;
  aspect-ratio: 16 / 9 !important;  /* blocco ben proporzionato */
  min-height: 220px !important;     /* evita che si “appiattisca” su telefoni piccoli */
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: contain !important; /* resta come da tuo design */
}

/* 3) In landscape su smartphone, dai un po’ più respiro all’immagine */
@media (max-width: 991.98px) and (orientation: landscape) {
  .section-hero .title-img {
    aspect-ratio: 21 / 9 !important;
    min-height: 180px !important;   /* evita il collasso */
  }
}

/* 4) Il testo resta un blocco separato, sopra in flusso normale */
.section-hero .hero-title,
.section-hero .container {
  position: relative !important;
  z-index: 2 !important;            /* assicura che non ci sia sovrapposizione visiva */
}
/* fix testo */