/* =========================================================
   CASO DI RIUSO – CSS Asset Injector (COPIA-INCOLLA)
   - Nodo singolo: SOLO "caso di riuso"
   - Mosaico: SOLO view "casi-di-riutilizzo" (Responsive Grid)
   ========================================================= */

/* ================================
   1) NODO SINGOLO – CASO DI RIUSO
   body class: page-node-typecaso-di-riuso
   ================================ */

body.page-node-typecaso-di-riuso .main-container{
  max-width: 1040px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-top: 1.5rem !important;
}

body.page-node-typecaso-di-riuso article{
  max-width: 1100px;
  padding-top: 1rem;
  font-size: 1.1rem !important;
  line-height: 1.65 !important;
}

body.page-node-typecaso-di-riuso article[data-history-node-id] > div > div{
  margin: 0 0 .35rem 0 !important;
}

body.page-node-typecaso-di-riuso article[data-history-node-id] > div > div > div:first-child{
  font-weight: 700 !important;
}

body.page-node-typecaso-di-riuso article[data-history-node-id] > div > div > div:first-child,
body.page-node-typecaso-di-riuso article[data-history-node-id] > div > div > div:nth-child(2){
  display: inline !important;
}

body.page-node-typecaso-di-riuso article[data-history-node-id] > div > div > div:first-child::after{
  content: " " !important;
  font-weight: 400 !important;
}

body.page-node-typecaso-di-riuso .main-container a{
  color: #0066cc !important;
  text-decoration: underline !important;
}

body.page-node-typecaso-di-riuso a{ word-break: break-word; }

body.page-node-typecaso-di-riuso article img{
  margin-top: .5rem;
  border-radius: 6px;
}

body.page-node-typecaso-di-riuso a[href^="http"]{ font-weight: 600; }

body.page-node-typecaso-di-riuso .caso-riuso-h1{
  color: #0066cc !important;
  font-size: 2.4rem !important;
  font-weight: 800 !important;
  line-height: 1.15 !important;
  margin: 1.2rem 0 1.5rem !important;
}

body.page-node-typecaso-di-riuso .tema-plain{
  color: inherit;
  text-decoration: none;
  font-weight: 400;
}

body.page-node-typecaso-di-riuso .field--name-field-tema .field__item,
body.page-node-typecaso-di-riuso .views-field-field-tema .field-content{
  display: inline-flex;
  align-items: center;
}

/* Thumb grande nel nodo singolo (script "makeThumbs") */
body.page-node-typecaso-di-riuso .caso-riuso-thumb-img{
  width: 100%;
  height: 440px;
  object-fit: cover;
  display: block;
  border-radius: 10px;
  margin-top: .75rem;
}

/* =========================================================
   2) MOSAICO – /casi-di-riutilizzo
   ========================================================= */

/* Grid più compatto */
body.path-casi-di-riutilizzo .views-view-responsive-grid--horizontal{
  --views-responsive-grid--cell-min-width: 260px !important;
  --views-responsive-grid--layout-gap: 1rem !important;
  max-width: 1040px !important;
  margin: 0 auto !important;
  padding: 0 16px !important;
  width: 100% !important;
}

/* Header della view: centrato come le card (DOM reale) */
body.path-casi-di-riutilizzo
#it-block-bootstrap-italia-content
.views-element-container .contextual-region> footer{
  max-width: 1040px !important;
  margin: 2.5rem auto 0 auto !important; /* 👈 spazio sopra */
  padding: 0 16px !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

/* Intestazione della view "casi-di-riutilizzo": centrato + più in basso */
/* Header introduttivo view "casi-di-riutilizzo"
   centrato come le card + più in basso */
body.path-casi-di-riutilizzo
#it-block-bootstrap-italia-content
.views-element-container.contextual-region header {
  max-width: 1040px !important;
  margin: 2.5rem auto 0 !important; /* lo abbassa */
  padding: 0 16px !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

body.path-casi-di-riutilizzo
#it-block-bootstrap-italia-content
.views-element-container header {
  max-width: 1040px !important;
  margin: 2.5rem auto 0 !important; /* lo abbassa */
  padding: 0 16px !important;
  width: 100% !important;
  box-sizing: border-box !important;
}
/* Header intro: aggiungo "respiro" sotto per non far sovrapporre i filtri */
body.path-casi-di-riutilizzo
#it-block-bootstrap-italia-content
.views-element-container header{
  padding-bottom: 1.5rem !important;   /* oppure 2rem */
  margin-bottom: 1.5rem !important;    /* extra sicurezza */
}

/* Header intro: aggiungo "respiro" sotto per non far sovrapporre i filtri */
body.path-casi-di-riutilizzo
#it-block-bootstrap-italia-content
.views-element-container.contextual-region header{
  padding-bottom: 1.5rem !important;   /* oppure 2rem */
  margin-bottom: 1.5rem !important;    /* extra sicurezza */
}

/* Footer della view "casi-di-riutilizzo": centrato + più in basso */
body.path-casi-di-riutilizzo
#it-block-bootstrap-italia-content
.views-view-responsive-grid + footer{
  max-width: 1040px !important;
  margin: 2.5rem auto 0 !important; /* <-- lo abbassa */
  padding: 0 16px !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

body.path-casi-di-riutilizzo
#it-block-bootstrap-italia-content
.views-element-container .js-view-dom-id-c14f03cba7a5a5f25d509994c3b261324a0f8de8cd8156c7c6a6e4811e0f6791> header{
  max-width: 1040px !important;
  margin: 0 auto !important;
  padding: 0 16px !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

/* Card compatta */
body.path-casi-di-riutilizzo .views-view-responsive-grid__item-inner{
  background: #fff !important;
  border: 1px solid rgba(0,0,0,.15) !important;
  border-radius: 12px !important;
  padding: .9rem .9rem 1rem !important;
  height: 100%;
  overflow: hidden;
  box-shadow: 0 6px 20px rgba(0,0,0,.06) !important;
  transition: box-shadow .2s ease, transform .2s ease;
}

body.path-casi-di-riutilizzo .views-view-responsive-grid__item-inner:hover{
  box-shadow: 0 10px 28px rgba(0,0,0,.10) !important;
  transform: translateY(-2px);
}

body.path-casi-di-riutilizzo .views-view-responsive-grid__item-inner,
body.path-casi-di-riutilizzo .views-view-responsive-grid__item-inner *{
  font-size: 16px !important;
  line-height: 1.45 !important;
}

body.path-casi-di-riutilizzo .views-view-responsive-grid__item-inner .views-label{
  font-weight: 700 !important;
}

body.path-casi-di-riutilizzo .views-view-responsive-grid__item-inner .views-field{
  margin-bottom: .55rem;
}
body.path-casi-di-riutilizzo .views-view-responsive-grid__item-inner .views-field:last-child{
  margin-bottom: 0;
}

/* Link "Dettagli" */
body.path-casi-di-riutilizzo .views-view-responsive-grid__item-inner a{
  font-weight: 700 !important;
  display: inline-block !important;
  margin-top: .55rem !important;
}

/* ===== THUMB QUADRATA + FALLBACK SOLO SE MANCANTE ===== */
body.path-casi-di-riutilizzo .thumb-wrap{
  width: 100% !important;
  aspect-ratio: 1 / 1 !important;
  overflow: hidden !important;
  border-radius: 10px !important;
  background: #f3f3f3 !important;  /* neutro di base */
  position: relative !important;
}

body.path-casi-di-riutilizzo .thumb-wrap{
  width: 100% !important;
  aspect-ratio: 1 / 1 !important;
  overflow: hidden !important;
  border-radius: 10px !important;
  background: #f3f3f3 !important;
}

body.path-casi-di-riutilizzo .thumb-img{
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
}

body.path-casi-di-riutilizzo .thumb-wrap.img-missing{
  background: #f3f3f3 url('/sites/default/files/2026-01/imgnotfound.png') center center no-repeat !important;
  background-size: contain !important;
}
/* ===== FIX DEFINITIVO THUMB + FALLBACK (solo mosaico) ===== */
body.path-casi-di-riutilizzo a.thumb-link{
  display: block !important;
}

body.path-casi-di-riutilizzo .thumb-wrap{
  display: block !important;
  width: 100% !important;

  /* non fidarti di aspect-ratio: qui forziamo */
  height: 160px !important;     /* <-- cambia a gusto: 150/160/180 */
  min-height: 160px !important;

  overflow: hidden !important;
  border-radius: 10px !important;
  background: #f3f3f3 !important;
}

body.path-casi-di-riutilizzo .thumb-img{
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}

/* FALLBACK visibile */
body.path-casi-di-riutilizzo .thumb-wrap.img-missing{
  background-image: url('/sites/default/files/2026-01/imgnotfound.png') !important;
  background-repeat: no-repeat !important;
  background-position: center center !important;
  background-size: contain !important;
}

body.path-casi-di-riutilizzo .thumb-wrap.img-missing .thumb-img{
  display: none !important;
}
/* =========================================================
   NODO "CASO DI RIUSO" – NASCONDI AUTORE + DATA ("Submitted")
   ========================================================= */

/* Drupal core / Bootstrap: spesso è .submitted oppure .node__meta */
body.page-node-typecaso-di-riuso .node__meta,
body.page-node-typecaso-di-riuso .submitted,
body.page-node-typecaso-di-riuso .node__submitted,
body.page-node-typecaso-di-riuso .node__meta .author,
body.page-node-typecaso-di-riuso .node__meta .date {
  display: none !important;
}

/* Backup: se il tema lo mette in un blocco/area diversa */
body.page-node-typecaso-di-riuso .region-content .submitted,
body.page-node-typecaso-di-riuso article .submitted {
  display: none !important;
}
body.page-node-typecaso-di-riuso img.caso-riuso-thumb-img{
  width: 50%;
  height: 440px;
  object-fit: cover;
  display: block;
  border-radius: 10px;
  margin-top: .75rem;
  background: #f3f3f3;
}

/* Respiro sotto le card nella vista "casi di riutilizzo" */
body.path-casi-di-riutilizzo
.views-element-container {
  margin-bottom: 4rem;
}
/* Box filtri centrato come le card */
body.path-casi-di-riutilizzo .views-exposed-form{
  max-width: 1040px !important;
  margin: 0 auto 1.25rem !important;
  padding: 0 16px !important;
}

/* Layout “a righe” di pill */
body.path-casi-di-riutilizzo .views-exposed-form .form-checkboxes{
  display: flex !important;
  flex-wrap: wrap !important;
  gap: .5rem !important;
}

/* Nascondo la checkbox nativa (ma la lascio accessibile) */
body.path-casi-di-riutilizzo .views-exposed-form input[type="checkbox"]{
  position: absolute !important;
  opacity: 0 !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
}

/* Rendo “pill” le label */
body.path-casi-di-riutilizzo .views-exposed-form .form-type-checkbox{
  margin: 0 !important;
  position: relative !important;
}

body.path-casi-di-riutilizzo .views-exposed-form .form-type-checkbox label{
  display: inline-block !important;
  padding: .35rem .75rem !important;
  border: 1px solid #cbd5e1 !important;
  border-radius: 999px !important;
  cursor: pointer !important;
  line-height: 1.2 !important;
  background: #fff !important;
}

/* Stato selezionato */
body.path-casi-di-riutilizzo .views-exposed-form input[type="checkbox"]:checked + label{
  border-color: #0066cc !important;
  background: #e6f0ff !important;
}

/* Focus tastiera (accessibilità) */
body.path-casi-di-riutilizzo .views-exposed-form input[type="checkbox"]:focus-visible + label{
  outline: 3px solid rgba(0,102,204,.35) !important;
  outline-offset: 2px !important;
}

body.page-node-typecaso-di-riuso .dataset-utilizzati-box{
  margin-top: 1.75rem !important;
  padding: 1rem 1.25rem !important;
  background: #f8f9fa !important;
  border-left: 4px solid #0066cc !important;
  border-radius: 6px !important;
}

/* Label */
body.page-node-typecaso-di-riuso .dataset-utilizzati-box > div:first-child{
  font-weight: 700 !important;
  margin-bottom: .5rem !important;
}

/* Contenuto */
body.page-node-typecaso-di-riuso .dataset-utilizzati-box > div:nth-child(2){
  font-size: .95rem !important;
  line-height: 1.55 !important;
  word-break: break-all !important;
}

/* Ingrandisce la label "Tema" nel filtro della view casi-di-riutilizzo */
body.path-casi-di-riutilizzo 
.views-exposed-form label {
  font-size: 1.25rem !important;   /* leggermente più grande */
  font-weight: 600 !important;     /* più coerente con Bootstrap Italia */
  color: #17324d !important;       /* blu scuro coerente col tema */
  margin-bottom: 0.5rem !important;
  display: block;
}
/* Più spazio tra i blocchi filtro */
.views-exposed-form .form-item {
  margin-bottom: 2rem !important;
}