/* --- Overlay base (lo que ya tienes) --- */
.search-overlay .category-list-wrap { display:block !important; }
.search-overlay{ position:fixed; inset:0; z-index:1200; }
.search-overlay__backdrop{ position:absolute; left:0; right:0; top:var(--header-h,96px); bottom:0; background:rgba(0,0,0,.45); }

.search-overlay__panel{
  position: relative;
  max-height: 100vh;
  overflow: auto;
  padding-top: 30px;
  margin-top: calc(var(--header-h, 96px) - 10px);
  display: flex;
  flex-direction: column;
}

body.no-scroll{ overflow:hidden; }

/* --- Estilos del listado, scopeados SOLO al overlay --- */
/* Wrapper visual idéntico al original */
.search-overlay :where(.blog-list-wrap-new.category-list-wrap){
  padding:60px 0;
  background-color:var(--primary-color);
  box-shadow:0 0 21px rgba(0,0,0,.5);
  color:var(--white-color);
  position:relative;
  z-index:4;
}

/* Patrones decorativos */
.search-overlay :where(.blog-list-wrap-new) > .pattern-right{
  position:absolute; right:0; bottom:0; height:100%; width:533px; object-fit:cover;
}
.search-overlay :where(.blog-list-wrap-new) > .pattern-left{
  position:absolute; left:0; bottom:0; height:100%; width:533px; object-fit:cover;
}

/* Grid de items */
.search-overlay :where(.category-list-wrap ul.blog-list-items){
  display:grid; gap:40px; grid-template-columns:repeat(3,1fr);
}
@media(max-width:1024px){
  .search-overlay :where(.category-list-wrap ul.blog-list-items){
    gap:30px; grid-template-columns:repeat(2,1fr);
  }
}
@media(max-width:767px){
  .search-overlay :where(.category-list-wrap ul.blog-list-items){
    gap:30px; grid-template-columns:1fr;
  }
}

/* Card */
.search-overlay :where(.blog-list-wrap-new .feature-image){
  position: relative;
  padding-bottom: 58%;
  overflow: hidden;          /* <-- NUEVO: evita que se “salga” nada */
  background: #f3f3f3;       /* opcional: skeleton */
}
.search-overlay :where(.blog-list-wrap-new .feature-image img){
  position: absolute;
  height: 100%;
  object-fit: cover;         /* mantiene proporción y recorta */
}
.search-overlay :where(.blog-post){ background-color:var(--white-color); }
.search-overlay :where(.blog-list-wrap-new .blog-info){
  text-align:left; color:#fff; background:#fff; padding:40px 30px 30px; border-top:3px solid var(--primary-color); position:relative;
}

.search-overlay :where(.blog-list-wrap-new .blog-info h3){ 
  font-size:32px; 
  font-weight:600; 
  line-height:1.2; 
  padding-bottom:20px; 
  display: -webkit-box;
  -webkit-line-clamp: 2;    /* ya lo tienes en <a>, aquí consolida */
  -webkit-box-orient: vertical;
  overflow: hidden;
  height: calc(32px * 1.2 * 2 + 20px)
}
.search-overlay :where(.blog-list-wrap-new .blog-info h3 a){
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.search-overlay :where(.blog-list-wrap-new .blog-info .post-content p){
  display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden;
}
.search-overlay :where(.learn-more-link){ color:var(--primary-color); font-family:Alumni Sans,sans-serif !important; font-size:22px; letter-spacing:.22px; line-height:1.2; font-weight:600; }
.search-overlay :where(.blog-list-wrap-new .learn-more-link a){ color:var(--primary-color); display:inline-flex; transition:all .3s; }
.search-overlay :where(.blog-list-wrap-new .learn-more-link a .arrow-icon){ margin-left:15px; transition:all .3s; }
.search-overlay :where(.blog-list-wrap-new .learn-more-link a:hover .arrow-icon){ margin-left:20px; }
.search-overlay :where(.blog-list-items .type){
  background-color:var(--primary-color); padding:10px; border:2px solid #fff; font-weight:bold;
}
.search-overlay .blog-list-items > li:empty { display: none; }
.search-overlay .blog-list-items > li:not(:has(.blog-post)) { display: none; } /* :has soportado en navegadores modernos. */
/* Título */
.search-overlay :where(.searchtitle h2){
  text-align:center; font-size:48px !important; font-weight:bold; margin-bottom:15px;
}

/* --- NO usar en overlay (reset suave si llegan a colarse clases de form) --- */
.search-overlay :where(.form-wrap, .form-box, .blog-search){ all:unset; }  /* neutraliza si alguien mete esas clases dentro por error */
.search-overlay__panel{
  display: flex;            
  flex-direction: column;
  position: relative;
  max-height: 100vh;
  overflow: auto;
  padding-top: 30px;
  margin-top: calc(var(--header-h, 96px) - 10px);
}
.search-overlay__close {
  position: absolute;
  top: 30px;
  right: 30px;             /* Asegura que se mantenga en el borde derecho */
  z-index: 10;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  font-size: 50px;
  line-height: 1;
  border: 0;
  background: transparent;
  color: #fff;
  cursor: pointer;
  /* Añadimos un fondo sutil para asegurar visibilidad */
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);  
}

/* Responsiveness: Reducimos el tamaño de la X en pantallas pequeñas */
@media(max-width: 1024px) {
  .search-overlay__close {
    width: 36px;
    height: 36px;
    font-size: 40px;
  }
}

@media(max-width: 767px) {
  .search-overlay__close {
    width: 32px;
    height: 32px;
    font-size: 36px;
    top: 100px;
    right: 30px;
  }
}

@supports (display: grid) {
  .search-overlay__panel {
    display: grid;
  }
  .search-overlay__close {
    justify-self: end; /* Coloca la X al final del panel */
  }
}
@supports (display: grid) {
  .search-overlay__panel{ display: grid; }
  .search-overlay__close{ justify-self: end; }
}
.result_container {
  padding-bottom: 50px !important;
}
.search-overlay :where(.blog-list-items > li .blog-post){
  display: flex;
  flex-direction: column; 
  overflow: hidden;
  box-sizing: border-box;
}

/* La imagen mantiene su alto fijo (ya lo controlas con padding-bottom) */
.search-overlay :where(.blog-post .feature-image){
  flex: 0 0 auto;
}

/* El bloque de info rellena el espacio disponible */
.search-overlay :where(.blog-post .blog-info){
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

/* CTA siempre al fondo del bloque de info */
.search-overlay :where(.blog-post .learn-more-link){
  margin-top: auto;
}

/* Chip de tipo pegado al borde inferior del card */
.search-overlay :where(.blog-post .type){
  flex: 0 0 auto;
}

/* Fallback para navegadores sin aspect-ratio */
@supports not (aspect-ratio: 1 / 1){
  .search-overlay :where(.blog-list-items > li .blog-post){
    height: 520px;        /* ajusta este valor para que todas queden iguales */
  }
}