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

/* ==========================================================
   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;
}
*/