/*==============================================================
  ARCHIVE SLIDERS (4 estilos distintos)
  - archive-popular-cats   (tiles pequeños)
  - archive-poi-nearby     (card con texto debajo)
  - archive-similar-dests  (panorámico grande)
  - archive-popular-dests  (píldoras horizontales)
==============================================================*/

/* ---------------------------
   0) Variables / base
--------------------------- */
:root{
  --vm-ink:#1e293b;
  --vm-ink-2:#334155;
  --vm-blue:#034f84;
  --vm-bg-soft:#f8fafc;
  --vm-border:#e6edf5;
  --vm-shadow: 0 2px 6px rgba(15,23,42,.10);
  --vm-shadow-2:0 2px 8px rgba(15,23,42,.12);
  --vm-radius:14px;
}

.archive-popular-cats.pop-wrapper,
.archive-poi-nearby.pop-wrapper,
.archive-popular-dests.pop-wrapper,
.archive-similar-dests.pop-wrapper{
  margin:48px auto;
  position:relative;
}

/* Separación “anti-mazacote” cuando hay varios seguidos */
.archive-container .pop-wrapper + .pop-wrapper{
  margin-top:18px;
}

/* Títulos con personalidad por sección (base) */
.archive-popular-cats .section-title,
.archive-poi-nearby .section-title,
.archive-popular-dests .section-title,
.archive-similar-dests .section-title{
  margin:0 0 14px 0;
  letter-spacing:-.2px;
  line-height:1.2;
  font-size: 25px;
}

/* ---------------------------
   1) CORE slider (común)
--------------------------- */
.pop-slider-container{
  display:flex;
  gap:16px;
  overflow-x:auto;
  scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling:touch;
  padding:6px 0 10px;
}
.pop-slider-container::-webkit-scrollbar{display:none;}

/* Nav común (desktop) */
.archive-popular-cats .pop-slider-nav,
.archive-poi-nearby .pop-slider-nav,
.archive-popular-dests .pop-slider-nav,
.archive-similar-dests .pop-slider-nav{
  position:absolute;
  left:0; right:0;
  top:50%;
  transform:translateY(-50%);
  display:flex;
  justify-content:space-between;
  pointer-events:none;
  z-index:5;
  height:0;
}

.pop-prev-btn,
.pop-next-btn{
  pointer-events:auto;
  position:absolute;
  background:#fff;
  color:var(--vm-blue);
  box-shadow:0 1px 3px rgba(0,0,0,.25);
  border-radius:999px;
  padding:7px 16px;
  cursor:pointer;
  font-size:17px;
  line-height:1.5;
  border:none;
  transition:background-color .2s,color .2s;
}
.pop-prev-btn{left:-20px;}
.pop-next-btn{right:-20px;}

.pop-slider-nav button:focus{ background:#fff; color:#034f84; }
.pop-slider-nav button:hover{ background:#f0f5fa; color:#1e293b; }
.pop-slider-nav button:active{ background:#e0eefb; color:#1e293b; }

/* Tarjeta base (cada <a>) */
.pop-slide{
  position:relative;
  scroll-snap-align:start;
  border-radius:8px;
  overflow:hidden;
  cursor:pointer;
  transform:translateZ(0);
}
.pop-slide img{
  width:100%;
  height:100%;
  object-fit:cover;
  transition:transform .45s;
  /* box-shadow: var(--vm-shadow); */
}
.pop-slide:hover img{transform:scale(1.05);}

/* Por defecto: overlay oscuro + caption abajo (lo usan 2 skins) */
.pop-slide::before{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  height:calc(2 * 1.2em + 1rem);
  background:linear-gradient(to top,
    rgba(0,0,0,.62) 0%,
    rgba(0,0,0,.28) 50%,
    rgba(0,0,0,0) 100%
  );
  pointer-events:none;
  z-index:2;
  box-shadow: var(--vm-shadow);
}

.pcat-caption,
.poi-nearby-caption,
.pdest-caption,
.sdest-caption{
    position: absolute;
    left: 12px;
    bottom: 10px;
    z-index: 3;
    color: #fff;
    font-size: 18px;
    font-weight: 700;
    line-height: 1.25;
    text-transform: uppercase;
    text-shadow: 2px 2px 3px rgba(0, 0, 0, .6);
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    padding-right: 10px;
    padding-bottom: .1rem;
    letter-spacing: .2px;
}

/* Ocultar contadores heredados */
.count{display:none!important;}


/*==============================================================
  2) SKIN A — CATEGORÍAS POPULARES
==============================================================*/

.archive-popular-cats{
  /* sin caja extra: se ve “ligero” */
}
.archive-popular-cats .section-title{
  /* border-left:4px solid var(--vm-ink); */
  /* padding-left:10px; */
}

.archive-popular-cats .pop-slide{
  flex:0 0 calc((100% - 64px)/5); /* 5 por fila en desktop */
  aspect-ratio:1/1;
  box-shadow:var(--vm-shadow-2);
}

.archive-popular-cats figure {
    height: 100%;
}

/*==============================================================
  3) SKIN B — POI CERCANOS
==============================================================*/

.archive-poi-nearby{
  --poi-img-h: 168px; /* desktop */
}

/* Wrapper para poder posicionar nav respecto a la zona de imagen */
.archive-poi-nearby .poi-slider-shell{
  position:relative;
}

/* Nav centrado en la imagen (no en el slide completo) */
.archive-poi-nearby .pop-slider-nav{
  top: calc(-10px + (var(--poi-img-h) / 2));
  transform: translateY(-50%);
}

/* El <a> NO recorta (porque también contiene el texto) */
.archive-poi-nearby .pop-slide{
  flex:0 0 calc((100% - 48px)/4);
  height:auto;
  background:transparent;
  border:0;
  box-shadow:none;
  overflow:visible;
  border-radius:0;
}

/* Quitamos overlay por defecto */
.archive-poi-nearby .pop-slide::before{ display:none; }

/* Figure como layout vertical */
.archive-poi-nearby .poi-card{
  margin:0;
  display:flex;
  flex-direction:column;
  gap: 8px;
}

/* Contenedor de imagen: aquí va el recorte del hover */
.archive-poi-nearby .poi-media{
  height: var(--poi-img-h);
  border-radius: 8px;
  overflow:hidden;
  box-shadow: var(--vm-shadow);
  background: #fff;
}

/* Imagen ocupa el media wrapper */
.archive-poi-nearby .poi-media img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;          /* evita “saltitos” por baseline */
}

/* Caption debajo, sin borde ni caja tipo “card” */
.archive-poi-nearby .poi-nearby-caption{
    position: static;
    padding: 0 2px;
    margin: 0;
    color: var(--vm-ink);
    text-shadow: none;
    text-transform: none;
    font-weight: 600;
    font-size: 17px;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
}

/* Hover */
.archive-poi-nearby .pop-slide:hover img{
  transform:scale(1.05);
}
.archive-poi-nearby .pop-slide:hover .poi-nearby-caption{
  text-decoration: underline;
}

/*==============================================================
  4) SKIN C — DESTINOS SIMILARES
==============================================================*/
.archive-similar-dests{
  /* background:linear-gradient(180deg, #ffffff 0%, #f6f9fd 100%); */
  /* border:1px solid var(--vm-border); */
  /* border-radius:var(--vm-radius); */
  /* padding:18px 16px 8px; */
}
.archive-similar-dests .section-title{
  /* border-left:4px solid #22c55e; */
  /* padding-left:10px; */
}

.archive-similar-dests .pop-slide{
  flex: 0 0 calc((100% - 32px)/3); /* 3 grandes */
  aspect-ratio:16/9;
  box-shadow:var(--vm-shadow);
}

/* Más “cinematográfico” */
.archive-similar-dests .pop-slide::before{
  height:55%;
  background:linear-gradient(to top,
    rgba(0,0,0,.70) 0%,
    rgba(0,0,0,.35) 45%,
    rgba(0,0,0,0) 100%
  );
  /* box-shadow: var(--vm-shadow); */
}

section.archive-similar-dests figure {
    height: 100%;
}

/*==============================================================
  5) DESTINOS POPULARES = DESTINOS SIMILARES
==============================================================*/

/* El título igual (sin barra izquierda) */
.archive-popular-dests .section-title{
  border-left:0;
  padding-left:0;
}

/* Misma card que similar-dests (panorámica) */
.archive-popular-dests .pop-slide{
  flex: 0 0 calc((100% - 32px)/3);
  aspect-ratio:16/9;
  height:auto;                 /* anula el height fijo anterior */
  background:transparent;
  border:0;
  box-shadow:var(--vm-shadow);
}

/* Overlay cinematográfico igual */
.archive-popular-dests .pop-slide::before{
  display:block;
  height:55%;
  background:linear-gradient(to top,
    rgba(0,0,0,.70) 0%,
    rgba(0,0,0,.35) 45%,
    rgba(0,0,0,0) 100%
  );
}

.archive-popular-dests .pop-slide figure{
  display:block;
  height: 100%;
  margin:0;
  padding:0;
}
.archive-popular-dests .pop-slide img{
  width:100%;
  height:100%;
  border-radius:0;
}

/*==============================================================
  6) RESPONSIVE
==============================================================*/
@media (max-width:1024px) {
  .archive-popular-cats.pop-wrapper,
  .archive-poi-nearby.pop-wrapper,
  .archive-popular-dests.pop-wrapper,
  .archive-similar-dests.pop-wrapper{ padding-left:15px; padding-right:15px; }

  .pop-slider-nav{ display:none !important; }

  .archive-popular-cats .pop-slide { flex: 0 0 22%; }

  .archive-poi-nearby{ --poi-img-h: 166px; }
  .archive-poi-nearby .pop-slide{ flex:0 0 30%; }

  .archive-similar-dests .pop-slide{ flex:0 0 30%; }

  .archive-popular-dests .pop-slide{ flex:0 0 30%; }
}

@media (max-width:768px) and (min-width:600px){
  /* Cats: 2–3 visibles */
  .archive-popular-cats .pop-slide{ flex:0 0 29%; }

  /* POI: más grandes */
  .archive-poi-nearby{ --poi-img-h: 160px; }
  .archive-poi-nearby .pop-slide{ flex:0 0 45%; }

  /* Similar: muy grandes */
  .archive-similar-dests .pop-slide{ flex:0 0 45%; }

  /* Popular dests: píldoras grandes */
  .archive-popular-dests .pop-slide{ flex:0 0 45%; }
}

@media (max-width:599px){
  /* Cats: estilo “tile” grande, 1.x por vista */
  .archive-popular-cats .pop-slide{ flex:0 0 64%; }

  /* POI: card grande */
  .archive-poi-nearby{ --poi-img-h: unset; }
  .archive-poi-nearby .pop-slide{ flex:0 0 64%; }
  .archive-poi-nearby .poi-media { aspect-ratio: 12 / 11; }

  /* Similar: panorámica grande */
  .archive-similar-dests .pop-slide{ flex:0 0 64%; aspect-ratio: 1 / 1; }

  /* Popular dests: píldoras grandes */
  .archive-popular-dests .pop-slide{ flex:0 0 64%; aspect-ratio: 1 / 1; }

  .pop-slide:only-child{
    flex:0 0 100%!important;
    max-width:100%!important;
    aspect-ratio: 16 / 9;
  }

  .pop-slide:only-child .poi-media{
    aspect-ratio: 16 / 9;
  }
}