/**
 * CRAF ENS - filtros pastilla (collapsiblock + checkbox).
 * Cerrados por defecto; al abrir: encima del contenido y responsive.
 */
body[class*="path-recursos-accions-formatives"] .block-facets-ajax,
body[class*="path-recursos-accions-formatives-listado"] .block-facets-ajax {
  --radius: 20px;
  --bg-color: #ffffff;
  position: relative;
}

/* El fondo decorativo no debe recortar los desplegables */
body[class*="path-recursos-accions-formatives"] main[role="main"] > .container-fluid,
body[class*="path-recursos-accions-formatives-listado"] main[role="main"] > .container-fluid {
  overflow-x: hidden;
  overflow-y: visible;
}

/* Grid: cada filtro alinea arriba para que al abrir empuje filas */
body[class*="path-recursos-accions-formatives"] .region.region-content,
body[class*="path-recursos-accions-formatives-listado"] .region.region-content {
  align-items: start;
}

/* Resultados por debajo en stacking; filtros abiertos por encima */
body[class*="path-recursos-accions-formatives"] #block-crafens-content,
body[class*="path-recursos-accions-formatives-listado"] #block-crafens-content {
  position: relative;
  z-index: 1;
}

body[class*="path-recursos-accions-formatives"] .block-facet--checkbox,
body[class*="path-recursos-accions-formatives-listado"] .block-facet--checkbox {
  position: relative;
  z-index: 2;
  align-self: start;
  width: 100%;
  min-width: 0; /* evita desborde en grid */
}

/* Al abrir: elevar sobre hermanos y sobre el listado */
body[class*="path-recursos-accions-formatives"] .block-facet--checkbox:has(.collapsiblockTitle:not(.collapsiblockTitleCollapsed)),
body[class*="path-recursos-accions-formatives-listado"] .block-facet--checkbox:has(.collapsiblockTitle:not(.collapsiblockTitleCollapsed)),
body[class*="path-recursos-accions-formatives"] .block-facet--checkbox:has(.collapsiblockContent:not(.collapsiblockContentCollapsed)),
body[class*="path-recursos-accions-formatives-listado"] .block-facet--checkbox:has(.collapsiblockContent:not(.collapsiblockContentCollapsed)) {
  z-index: 40;
}

/* Boton pastilla */
body[class*="path-recursos-accions-formatives"] .collapsiblockTitle button[id*="collapse"],
body[class*="path-recursos-accions-formatives-listado"] .collapsiblockTitle button[id*="collapse"] {
  width: 100%;
  padding-block: var(--10-5, 0.7rem);
  padding-inline: var(--15-10, 1rem) var(--40-20, 2.5rem);
  background-color: var(--bg-color, #fff);
  border-radius: var(--radius, 20px);
  background-image: url("../images/icono_chevron_left.svg");
  background-repeat: no-repeat;
  background-position-x: calc(100% - (var(--40-20, 2.5rem) / 3));
  background-position-y: 50%;
  background-size: calc(var(--body-fs, 1rem) / 1.33);
  border: 0;
  text-align: left;
  color: var(--azul-osc, #010938);
  transition: all 0s linear;
}

body[class*="path-recursos-accions-formatives"] .collapsiblockTitle:not(.collapsiblockTitleCollapsed) button[id*="collapse"],
body[class*="path-recursos-accions-formatives-listado"] .collapsiblockTitle:not(.collapsiblockTitleCollapsed) button[id*="collapse"] {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  background-image: url("../images/icono_chevron_down.svg");
}

body[class*="path-recursos-accions-formatives"] button[id*="collapse"] h2,
body[class*="path-recursos-accions-formatives-listado"] button[id*="collapse"] h2 {
  font-size: var(--body-fs, 1rem);
  color: var(--azul-osc, #010938);
  margin: 0;
  font-weight: 500;
}

body[class*="path-recursos-accions-formatives"] .collapsiblockContent,
body[class*="path-recursos-accions-formatives-listado"] .collapsiblockContent,
body[class*="path-recursos-accions-formatives"] .facets-widget-checkbox.collapsiblockContent,
body[class*="path-recursos-accions-formatives-listado"] .facets-widget-checkbox.collapsiblockContent {
  background-color: var(--bg-color, #fff);
  font-size: calc(var(--body-fs, 1rem) - 2px);
  box-sizing: border-box;
  width: 100%;
}

/* Abierto: caja de opciones visible, con scroll si es larga, sin tapar mal */
body[class*="path-recursos-accions-formatives"] .collapsiblockContent:not(.collapsiblockContentCollapsed),
body[class*="path-recursos-accions-formatives-listado"] .collapsiblockContent:not(.collapsiblockContentCollapsed),
body[class*="path-recursos-accions-formatives"] .facets-widget-checkbox.collapsiblockContent:not(.collapsiblockContentCollapsed),
body[class*="path-recursos-accions-formatives-listado"] .facets-widget-checkbox.collapsiblockContent:not(.collapsiblockContentCollapsed) {
  border-bottom-left-radius: var(--radius, 20px);
  border-bottom-right-radius: var(--radius, 20px);
  display: block !important;
  height: auto !important;
  max-height: min(50vh, 320px);
  overflow-x: hidden !important;
  overflow-y: auto !important;
  padding-bottom: var(--10-5, 0.5rem);
  position: relative;
  z-index: 41;
  box-shadow: 0 8px 16px rgba(1, 9, 56, 0.12);
}

/* Cerrado */
body[class*="path-recursos-accions-formatives"] .collapsiblockContent.collapsiblockContentCollapsed,
body[class*="path-recursos-accions-formatives-listado"] .collapsiblockContent.collapsiblockContentCollapsed {
  display: none !important;
  height: 0 !important;
  max-height: 0 !important;
  overflow: hidden !important;
  padding: 0 !important;
  margin: 0 !important;
  box-shadow: none;
}

/* Antes de JS: ocultar lista */
body[class*="path-recursos-accions-formatives"] .block-facet--checkbox > .facets-widget-checkbox:not(.collapsiblockContent),
body[class*="path-recursos-accions-formatives-listado"] .block-facet--checkbox > .facets-widget-checkbox:not(.collapsiblockContent) {
  display: none !important;
}

body[class*="path-recursos-accions-formatives"] .collapsiblockContent ul,
body[class*="path-recursos-accions-formatives-listado"] .collapsiblockContent ul {
  display: flex;
  flex-direction: column;
  padding-inline: var(--15-10, 1rem);
  list-style: none;
  row-gap: var(--10-5, 0.5rem);
  margin: 0;
}

body[class*="path-recursos-accions-formatives"] .collapsiblockContent ul li,
body[class*="path-recursos-accions-formatives-listado"] .collapsiblockContent ul li {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  align-items: center;
  max-width: 100%;
}

body[class*="path-recursos-accions-formatives"] .collapsiblockContent ul li a,
body[class*="path-recursos-accions-formatives-listado"] .collapsiblockContent ul li a {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 5px;
  max-width: 100%;
  word-break: break-word;
}

/* Fallback titulo pastilla */
body[class*="path-recursos-accions-formatives"] .block-facet--checkbox:not(:has(.collapsiblockContent)) .collapsiblockTitle,
body[class*="path-recursos-accions-formatives"] .block-facet--checkbox:not(:has(button[id*="collapse"])) .collapsiblockTitle,
body[class*="path-recursos-accions-formatives-listado"] .block-facet--checkbox:not(:has(.collapsiblockContent)) .collapsiblockTitle,
body[class*="path-recursos-accions-formatives-listado"] .block-facet--checkbox:not(:has(button[id*="collapse"])) .collapsiblockTitle {
  background-color: var(--bg-color, #fff);
  border-radius: var(--radius, 20px);
  padding-block: var(--10-5, 0.7rem);
  padding-inline: var(--15-10, 1rem) var(--40-20, 2.5rem);
  background-image: url("../images/icono_chevron_left.svg");
  background-repeat: no-repeat;
  background-position-x: calc(100% - (var(--40-20, 2.5rem) / 3));
  background-position-y: 50%;
  background-size: calc(var(--body-fs, 1rem) / 1.33);
}

body[class*="path-recursos-accions-formatives"] .block-facet--checkbox:not(:has(.collapsiblockContent)) .collapsiblockTitle h2,
body[class*="path-recursos-accions-formatives"] .block-facet--checkbox:not(:has(button[id*="collapse"])) .collapsiblockTitle h2,
body[class*="path-recursos-accions-formatives-listado"] .block-facet--checkbox:not(:has(.collapsiblockContent)) .collapsiblockTitle h2,
body[class*="path-recursos-accions-formatives-listado"] .block-facet--checkbox:not(:has(button[id*="collapse"])) .collapsiblockTitle h2 {
  margin: 0;
  font-size: var(--body-fs, 1rem);
  color: var(--azul-osc, #010938);
  font-weight: 500;
}

/* Nou */
[id*="block-esnou"] .facets-widget-checkbox,
[id*="block-esnoulist"] .facets-widget-checkbox,
[id*="-esnou"] .facets-widget-checkbox {
  display: block !important;
  height: auto !important;
  max-height: none !important;
  overflow: visible !important;
  background-color: var(--bg-color, #fff);
  border-radius: var(--radius, 20px);
  padding-block: var(--10-5, 0.5rem) !important;
  padding-inline: var(--15-10, 10px) !important;
  box-shadow: none;
}
[id*="-esnou"] h2 {
  display: none;
}

/* Responsive: apilar filtros */
@media (max-width: 991.98px) {
  body[class*="path-recursos-accions-formatives"] .region.region-content,
  body[class*="path-recursos-accions-formatives-listado"] .region.region-content {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
  body[class*="path-recursos-accions-formatives"] .busqueda-texto,
  body[class*="path-recursos-accions-formatives"] .busqueda-nou,
  body[class*="path-recursos-accions-formatives"] .busqueda-ambit-promotor-formacio,
  body[class*="path-recursos-accions-formatives"] .busqueda-colleccio,
  body[class*="path-recursos-accions-formatives"] .busqueda-tematica-formativa,
  body[class*="path-recursos-accions-formatives"] #block-crafens-content,
  body[class*="path-recursos-accions-formatives"] :is(.busqueda-tipus-formacio, .busqueda-canal-formatiu, .busqueda-format, .busqueda-tipus-recurs) {
    grid-column: auto !important;
    grid-row: auto !important;
    width: 100%;
  }
  body[class*="path-recursos-accions-formatives"] .busqueda-texto,
  body[class*="path-recursos-accions-formatives"] .busqueda-ambit-promotor-formacio,
  body[class*="path-recursos-accions-formatives"] #block-crafens-content {
    grid-column: 1 / -1 !important;
  }
}

@media (max-width: 575.98px) {
  body[class*="path-recursos-accions-formatives"] .region.region-content,
  body[class*="path-recursos-accions-formatives-listado"] .region.region-content {
    grid-template-columns: minmax(0, 1fr) !important;
  }
  body[class*="path-recursos-accions-formatives"] .busqueda-nou,
  body[class*="path-recursos-accions-formatives"] .busqueda-colleccio,
  body[class*="path-recursos-accions-formatives"] .busqueda-tematica-formativa,
  body[class*="path-recursos-accions-formatives"] :is(.busqueda-tipus-formacio, .busqueda-canal-formatiu, .busqueda-format, .busqueda-tipus-recurs) {
    grid-column: 1 / -1 !important;
  }
}