/*---resources page starts--->*/

:root {
  --resources-max: 1700px;
  --resources-pad: clamp(var(--ndo-m), 3vw, var(--ndo-xl));
}

.entry-content.wp-block-post-content.is-layout-flow.wp-block-post-content-is-layout-flow {
  margin-top: 0;
}

.resources__page__wrapper {
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 100%;
}

/* =========================
   Ancho unificado (H1 + intro + filtros + grid)
   ========================= */

h1,
#resources__intro.resources__intro,
#resources-filters.resources__first__block__section,
.resources__grid {
  width: min(100% - (var(--resources-pad) * 2), var(--resources-max));
  margin-inline: auto;
  box-sizing: border-box;
}

h1 {
  text-align: left;
  padding-bottom: 0;
}

#resources__intro.resources__intro {
  padding: 0 0 var(--ndo-xl);
  margin-top: var(--ndo-xl);
  text-align: left;
}

#resources__micro__copy.resources__micro__copy {
  font-size: var(--ndo-m);
}

#resources__micro__copy.resources__micro__copy a {
  text-decoration: underline;
  transition: all .3s ease;
}

#resources__micro__copy.resources__micro__copy a:hover {
  color: var(--hover-blue-color);
  opacity: .7;
}

#resources-filters.resources__first__block__section {
  display: block;
  padding: 0 0 var(--ndo-xl);
}

/* =========================
   Filtros
   ========================= */

.resources__first__block__section .filters__section {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--ndo-m);
  /* padding: var(--ndo-m); */
  padding-bottom: var(--ndo-xxl) !important;
  border-bottom: 1px solid rgba(0, 0, 0, 0.12);

}

.resources__first__block__section .filters__section input {
  width: var(--filter-input-width);
  padding: var(--filter-input-padding);
  margin: var(--filter-input-margin);
  border: var(--filter-input-border);
  border-radius: var(--filter-input-border-radius);
}

/* =========================
   Grid
   ========================= */

.resources__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--ndo-xl);
  padding: 0;            /* el padding lateral ya lo da el contenedor unificado */
  margin-top: var(--ndo-m);
  margin-bottom: var(--ndo-m);
}

/* =========================
   Cards
   ========================= */

.resource__card {
  display: flex;
  flex-direction: column;
  width: 100%;
  border-radius: 2px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
  transition: all 0.3s ease;
}

.resource__card__img__title__container {
  position: relative;
  background: url("https://neurodivergenciaonline.com/wp-content/uploads/2025/09/imageNotFound-1.png");
  background-repeat: no-repeat;
  background-position: center;
  aspect-ratio: 1 / 1;
  overflow: hidden;
}

.resource__card__img {
  width: 100%;
  height: 100%;
}

.resource__card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(0.95) contrast(0.95);
  transition: filter 0.3s ease;
}

.resource__card:hover {
  transform: translateY(-0.1rem);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.16);
}

.resource__card__img__placeholder,
.resource__card__image__mask {
  width: 100%;
  height: 100%;
}

.resource__card__image__mask {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  background-color: var(--dark-color);
  opacity: 0.8;
  z-index: 1;
  transition: opacity 0.3s ease;
}

.resource__card:hover .resource__card__image__mask {
  opacity: 0.4;
}

.resource__card__description__container {
  position: relative;
}

.resource__card__description__container h2 {
  font-size: var(--ndo-l);
  font-weight: 400;
  padding: 0 var(--ndo-xs);
}

.resource__card__description {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--ndo-xxxs) var(--ndo-m);
  margin: 0 0 var(--ndo-m) 0;
  padding: var(--ndo-xs);
}

.resource__card__description dt {
  font-weight: bold;
  margin: 0;
}

.resource__card__description dd {
  margin: 0;
}

.resource__card__button.ndo__button {
  width: 70%;
  display: flex;
  justify-content: center;
  place-self: center;
  align-items: flex-end;
  margin-top: auto;
  margin-bottom: var(--ndo-m);
  border-radius: var(--wp--custom--elements--button--border--radius);
  
}

.resource__card__button.ndo__button  a {
  text-decoration: none;
  line-height: inherit;
  padding: var(--ndo-xs) var(--ndo-xl);
}

/* =========================
   Responsive
   ========================= */

@media screen and (max-width: 767px) {
  .resources__grid {
    grid-template-columns: 1fr;
  }
}

@media screen and (min-width: 768px) {
  .resources__first__block__section .filters__section {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .resources__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media screen and (min-width: 1000px) {
  .resources__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media screen and (min-width: 1400px) {
  .resources__first__block__section .filters__section {
    grid-template-columns: repeat(6, minmax(0, 1fr));
    padding-bottom: 0;
  }

  .resources__grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

@media screen and (min-width: 2200px) {
  .resources__grid {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
}