/* ========= 🌾 Explorar POIs (exclusiu) ========= */
.explorar{
  --accent: #2b73ff;
  --card-bg: linear-gradient(180deg,#ffffff 0%,#f8fbff 48%,#eef3ff 100%);
  --card-border: #d6e4ff;
  --toolbar-bg: rgba(0,0,0,0.02);
  --img-bg: #eef3f8;
}

/* Títol + subtítol */
.explorar .explorar-header{ margin-bottom:1rem; }
.explorar .explorar-header .expl-subline{
  margin-top:.35rem;
  padding-left:.75rem;
  border-left:3px solid var(--card-border);
  color:#6c757d;
}

/* Botonera (filtres per Tipus) */
.explorar .poi-toolbar{
  display:flex; flex-wrap:wrap; gap:.5rem;
  margin-top:.75rem; margin-bottom:1.25rem;
  padding:.5rem .75rem;
  background:var(--toolbar-bg);
  border:1px dashed #dfe7f5; border-radius:.75rem;
}
.explorar .poi-toolbar .btn{
  border-radius:9999px; font-weight:600;
  padding:.35rem .8rem; text-shadow:none;
  transition:transform .06s ease;
}
.explorar .poi-toolbar .btn-outline-secondary{
  background:#fff; color:#334155; border-color:#cbd5e1;
  box-shadow:0 1px 0 rgba(0,0,0,.04);
}
.explorar .poi-toolbar .btn-outline-secondary:hover,
.explorar .poi-toolbar .btn-outline-secondary:focus{
  background:#eaf0ff; color:#1d4ed8; border-color:#c7d2fe;
}
.explorar .poi-toolbar .btn-primary{
  background:#2b73ff; border-color:#2b73ff; color:#fff;
  box-shadow:0 2px 6px rgba(43,115,255,.25);
  transform:translateY(-1px);
}
.explorar .poi-toolbar .btn-primary:hover,
.explorar .poi-toolbar .btn-primary:focus{
  background:#255fcc; border-color:#255fcc;
}

/* Llistat */
.explorar #pois{ scroll-margin-top:72px; }

/* Targetes */
.explorar #pois .card{
  border:1.5px solid var(--card-border) !important;
  background:var(--card-bg);
  border-radius:16px;
  box-shadow:0 8px 20px rgba(0,0,0,.08);
  overflow:hidden;
}
.explorar #pois .card-body{
  padding:12px 14px 14px;
  display:flex; flex-direction:column;
  padding-bottom:.35rem;
}
.explorar #pois .card-title{
  font-size:1.08rem; line-height:1.22;
  margin-bottom:.25rem !important;
}

/* Ocultar imatges “trencades” */
.explorar #pois img.card-img-top:not([src]),
.explorar #pois img.card-img-top[src=""],
.explorar #pois img.card-img-top[src="about:blank"]{ display:none; }

/* Peu: localització + enllaç mapa */
.explorar .poi-footer{
  display:flex; align-items:center; gap:12px;
  color:#4f6fd7; font-size:.80rem;
  margin-top:.18rem !important;
  padding-top:.08rem !important;
  margin-bottom:.60rem !important;
}
.explorar .poi-footer .loc{ display:inline-flex; align-items:center; gap:.35rem; }
.explorar .poi-footer .loc-ico{
  display:inline-flex; align-items:center; justify-content:center;
  width:20px; height:20px; border-radius:6px;
  color:#4f6fd7; text-decoration:none;
  border:1px solid #c7d2fe;
}
.explorar .poi-footer .loc-ico:hover{
  background:#eef2ff; color:#1d4ed8; border-color:#a5b4fc;
}
.explorar .poi-footer .maplink{ display:none !important; }

/* Línia meta enganxada a baix */
.explorar .poi-meta{
  margin-top:auto !important;
  margin-bottom:.12rem;
  display:flex; justify-content:space-between; align-items:center;
  font-size:.68rem; color:#94a3b8; padding:0 .125rem;
}
.explorar .poi-meta .meta-type{ font-weight:700; letter-spacing:.03em; }
.explorar .poi-meta .meta-id{ font-weight:600; }

/* Mòbil */
@media (max-width:576px){
  .explorar .poi-toolbar{ padding:.5rem; border-radius:.5rem; }
  .explorar #pois .card{ border-radius:14px; }
}


/* ===== Slideshow de cada POI ===== */
.explorar .poi-slideshow {
  position: relative;
  width: 100%;
  aspect-ratio: 16/9;
  min-height: 160px;
  overflow: hidden;
  border-radius: 10px;
  background: var(--img-bg); /* gris clar per defecte */
}

/* Slide genèric */
.explorar .poi-slideshow .slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  display: none;
  transition: opacity 1.8s ease-in-out;
}

/* Actiu */
.explorar .poi-slideshow .slide.active {
  opacity: 1;
  display: block;
  z-index: 1;
}

/* Imatges */
.explorar .poi-slideshow img {
  width: 100%;
  height: 100%;
  object-fit: contain;  /* manté proporcions, deixa franges */
  background: #000;     /* només per imatges */
}

/* Descripció (text) */
.explorar .poi-slideshow .slide:not(:has(img)) {
  background: #fff;        /* fons blanc o clar */
  color: #333;             /* text fosc */
  padding: .75rem;         /* aire */
  font-size: .9rem;
  line-height: 1.4;
  overflow-y: auto;        /* si el text és llarg */
}
.explorar .poi-slideshow img {
  object-fit: contain;
  background: transparent; /* sense color */
}

/* ==== Enlaces del título: subrayado punteado y azul más oscuro ==== */
.explorar #pois .card-title a{
  color: #1b3a8a;                 /* azul más “negro” */
  font-weight: 500;
  text-decoration-line: underline;
  text-decoration-color: currentColor;
  text-decoration-style: dotted;  /* subrayado con puntos */
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;     /* separa el subrayado del texto */
}
.explorar #pois .card-title a:hover{
  color: #102a6b;                 /* un poco más oscuro al hover */
  text-decoration-style: solid;   /* sólido al pasar el ratón */
}
.explorar #pois .card-title a:focus-visible{
  outline: 2px solid #60a5fa;
  outline-offset: 2px;
  border-radius: 4px;
}

/* Fallback para navegadores sin text-decoration-style */
@supports not (text-decoration-style: dotted){
  .explorar #pois .card-title a{
    text-decoration: none;
    border-bottom: 2px dotted currentColor;
  }
  .explorar #pois .card-title a:hover{
    border-bottom-style: solid;
  }
}

/* Modo oscuro: sube un poco el brillo para contraste */
body.dark .explorar #pois .card-title a{
  color: #9bb8ff;
}
body.dark .explorar #pois .card-title a:hover{
  color: #c6d7ff;
}
/* ===== Estados extra del enlace del título ===== */

/* Visitado (link "usado") */
.explorar #pois .card-title a:visited{
  color: #34405e;                 /* azul grisáceo más sobrio */
  text-decoration-style: dotted;  /* mantiene el punteado */
}

/* Activo (mientras se pulsa) */
.explorar #pois .card-title a:active{
  color: #0c1a46;                 /* más oscuro al click */
  text-decoration-style: solid;   /* subrayado sólido al click */
  text-decoration-thickness: 3px; /* un pelín más grueso */
}

/* Accesible al tabulador (por si no lo tenías) */
.explorar #pois .card-title a:focus-visible{
  outline: 2px solid #60a5fa;
  outline-offset: 2px;
  border-radius: 4px;
}

/* Fallback para navegadores sin text-decoration-style */
@supports not (text-decoration-style: dotted){
  .explorar #pois .card-title a:visited{
    border-bottom: 2px dotted currentColor;
    text-decoration: none;
  }
  .explorar #pois .card-title a:active{
    border-bottom: 3px solid currentColor;
  }
}

/* Modo oscuro */
body.dark .explorar #pois .card-title a:visited{ color:#b7c6e8; }
body.dark .explorar #pois .card-title a:active{ color:#c6d7ff; }


/* Título más “negro” y subrayado punteado */
.explorar #pois .card-title a{
  color:#1b3a8a;
  text-decoration: underline dotted;
  text-decoration-thickness:2px;
  text-underline-offset:3px;
}
.explorar #pois .card-title a:hover{ text-decoration-style: solid; }
.explorar #pois .card-title a:visited{ color:#34405e; } /* link usado */