/* ============================================================
   Turismo Cáceres — MAPA TURÍSTICO (directorio a pantalla completa)
   shortcodes/tc-directory · js/tc-directorio.js
   ------------------------------------------------------------
   Rejilla de dos columnas que ocupa la pantalla bajo la cabecera
   fija: a la izquierda, buscador, recuento y lista (que se
   desplaza sola); a la derecha, el mapa, con las secciones
   flotando encima. En el móvil, una sola columna y la lista y el
   mapa se alternan en el mismo hueco.
   La altura de la cabecera la mide el script (--tcd-top).
   ============================================================ */

/* --- La cabecera del sitio, compacta en esta página ------------
   Sin la franja superior y con el logo pequeño: el alto es para
   el mapa y la lista. --strip-h a cero recoloca la cabecera (y la
   barra de administración) donde estaba la franja. */
body.tc-directory-page { --strip-h: 0px; }
.tc-directory-page .top-strip { display: none; }
.tc-directory-page .site-header,
.tc-directory-page .site-header.scrolled { padding-top: 8px; padding-bottom: 8px; transition: none; }
.tc-directory-page .site-header.scrolled .nav-logo img { height: 44px; transition: none; }
.tc-directory-page .site-header .brand-tagline { display: none; }

.tcd {
  --tcd-top: 60px;
  --tcd-panel: 440px;
  position: relative;
  display: grid;
  grid-template-columns: var(--tcd-panel) minmax(0, 1fr);
  grid-template-rows: auto auto minmax(0, 1fr);
  /* Relleno y no margen: un margen superior se saldría del envoltorio de
     Enfold (colapso de márgenes) y la página crecería lo que la cabecera. */
  box-sizing: border-box;
  padding-top: var(--tcd-top);
  height: 100vh;
  height: 100dvh;
  min-height: 420px;
  background: var(--cream);
  isolation: isolate; /* los paneles de Leaflet no pasan por encima de la cabecera */
  font-family: var(--font-body);
}

@media (min-width: 1600px) {
  .tcd { --tcd-panel: 480px; }
}

.tcd .screen-reader-text {
  position: absolute !important; width: 1px; height: 1px; overflow: hidden;
  clip: rect(1px, 1px, 1px, 1px); clip-path: inset(50%); white-space: nowrap;
}

/* --- Buscador ------------------------------------------------- */

.tcd-head {
  grid-column: 1;
  grid-row: 1;
  padding: 14px 20px 12px;
  background: var(--white);
  border-top: 1px solid var(--border);
  border-right: 1px solid var(--border);
}

.tcd-search { position: relative; }
.tcd-search svg {
  position: absolute; left: 14px; top: 50%; width: 17px; height: 17px;
  transform: translateY(-50%); color: var(--gold-dk); pointer-events: none;
}
#top .tcd input.tcd-q {
  width: 100%; height: 44px; margin: 0;
  padding: 0 14px 0 42px;
  border: 1px solid var(--border); border-radius: 0;
  background: var(--cream); color: var(--dark);
  font-family: var(--font-body); font-size: 14px;
  box-shadow: none;
}
#top .tcd input.tcd-q:focus { border-color: var(--gold); background: var(--white); outline: none; }

/* --- Secciones: flotan sobre el mapa, arriba ------------------- */

.tcd-chips {
  position: absolute;
  z-index: 800; /* sobre los paneles de Leaflet, bajo sus globos (z 700 en su panel) */
  top: calc(var(--tcd-top) + 12px);
  left: calc(var(--tcd-panel) + 12px);
  right: 64px; /* deja libre el zoom */
  display: flex; flex-wrap: wrap; gap: 6px;
  pointer-events: none; /* el mapa sigue respondiendo entre los botones */
}
.tcd-chip {
  --c: var(--dark);
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 9px 5px 5px;
  border: 1px solid rgba(46, 11, 12, .08); border-radius: 0;
  background: var(--white); color: var(--mid);
  font-family: var(--font-body); font-size: 12px; font-weight: 600; line-height: 1.2;
  box-shadow: 0 2px 10px rgba(46, 11, 12, .16);
  cursor: pointer; pointer-events: auto;
  transition: background .15s, color .15s, border-color .15s;
}
.tcd-chip--all { padding-left: 11px; }
.tcd-chip i {
  display: inline-flex; align-items: center; justify-content: center;
  width: 20px; height: 20px; border-radius: 50%;
  background: var(--c); color: #fff; flex-shrink: 0;
}
.tcd-chip i svg { width: 11px; height: 11px; }
.tcd-chip-n { font-weight: 400; color: var(--gray); font-size: 11px; }
.tcd-chip:hover { border-color: var(--c); color: var(--dark); }
.tcd-chip[aria-pressed="true"] { background: var(--c); border-color: var(--c); color: #fff; }
.tcd-chip[aria-pressed="true"] .tcd-chip-n { color: rgba(255,255,255,.8); }
.tcd-chip[aria-pressed="true"] i { background: #fff; color: var(--c); }
.tcd-chip:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

/* --- Recuento ------------------------------------------------- */

.tcd-bar {
  grid-column: 1;
  grid-row: 2;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 9px 20px;
  background: var(--white);
  border-top: 1px solid var(--border);
  border-right: 1px solid var(--border);
  font-size: 12px; color: var(--gray);
}
.tcd-count { margin: 0; }
.tcd-count strong { color: var(--dark); font-size: 13px; }
.tcd-inview { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; white-space: nowrap; }
#top .tcd-inview input { margin: 0; accent-color: var(--mid); }

/* --- Lista ---------------------------------------------------- */

.tcd-list {
  grid-column: 1;
  grid-row: 3;
  overflow-y: auto;
  overscroll-behavior: contain;
  border-right: 1px solid var(--border);
  border-top: 1px solid var(--border);
  outline: none;
}
.tcd-group[hidden], .tcd-item[hidden] { display: none; }
#top .tcd-group-t {
  position: sticky; top: 0; z-index: 2;
  display: flex; align-items: center; gap: 8px;
  margin: 0; padding: 11px 20px 9px;
  background: rgba(250, 248, 245, .96);
  backdrop-filter: blur(4px);
  border-bottom: 1px solid var(--border);
  font-family: var(--font-body); font-size: 10.5px; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase; color: var(--mid);
}
.tcd-group-t i {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; border-radius: 50%; background: var(--c); color: #fff;
}
.tcd-group-t i svg { width: 12px; height: 12px; }
.tcd-group-n { font-weight: 400; color: var(--gray); letter-spacing: .04em; }

#top .tcd-items { list-style: none; margin: 0; padding: 0; }
#top .tcd-item {
  position: relative;
  display: flex; align-items: stretch;
  margin: 0; padding: 0;
  border-bottom: 1px solid var(--border);
  border-left: 3px solid transparent;
  transition: background .15s, border-color .15s;
}
#top .tcd-item:hover { background: var(--white); }
#top .tcd-item.is-active { background: var(--white); border-left-color: var(--c, var(--gold)); box-shadow: inset 0 0 0 1px var(--border); }

.tcd-row {
  flex: 1; min-width: 0;
  display: flex; align-items: center; gap: 14px;
  padding: 11px 8px 11px 17px;
  border: 0; border-radius: 0; background: none;
  text-align: left; color: inherit; font: inherit; cursor: pointer;
}
.tcd-row:focus-visible { outline: 2px solid var(--gold); outline-offset: -2px; }

.tcd-thumb {
  flex: 0 0 56px; width: 56px; height: 56px; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  background: var(--c); color: #fff;
}
.tcd-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tcd-thumb i svg { width: 22px; height: 22px; opacity: .9; }

.tcd-txt { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.tcd-k {
  font-size: 9.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: var(--gold-dk);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.tcd-n { font-family: var(--font-head); font-size: 16px; line-height: 1.25; color: var(--dark); }
.tcd-a {
  font-size: 12px; line-height: 1.35; color: var(--gray);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

#top .tcd-go {
  flex: 0 0 auto; align-self: center;
  margin-right: 18px; padding: 6px 0;
  font-size: 10px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: var(--gold-dk); text-decoration: none; white-space: nowrap;
}
#top .tcd-go:hover { color: var(--mid); }

.tcd-empty { margin: 0; padding: 28px; font-size: 14px; color: var(--gray); }

/* --- Mapa ----------------------------------------------------- */

.tcd-map {
  grid-column: 2;
  grid-row: 1 / span 3;
  height: 100%;
  min-height: 0;
}
.tcd--nomap .tcd-map { display: none; }
.tcd--nomap { grid-template-columns: 1fr; }

.tcd-map .leaflet-top.leaflet-right { margin-top: 6px; margin-right: 6px; }
.tcd-map .leaflet-bar a { width: 34px; height: 34px; line-height: 34px; }
.tcd-hot .alo-pin { transform: rotate(-45deg) scale(1.3); box-shadow: 0 0 0 4px rgba(184, 149, 106, .45), 0 2px 7px rgba(46,11,12,.45); }

.tcd-pop { display: flex; gap: 12px; align-items: flex-start; }
.tcd-pop-i { flex: 0 0 64px; width: 64px; height: 64px; object-fit: cover; display: block; }
.tcd-pop-b { min-width: 0; }

/* El conmutador lista / mapa: solo en el móvil */
.tcd-switch { display: none; }

/* La página del mapa no se desplaza (no lleva pie: footer.php): solo la
   lista tiene barra. */
html:has(body.tc-directory-page),
body.tc-directory-page { overflow: hidden !important; height: 100%; overscroll-behavior: none; }

/* Sin márgenes de Enfold alrededor del directorio */
.tc-directory-page #main .container_wrap,
.tc-directory-page #main .template-page,
.tc-directory-page #main .entry-content-wrapper { padding: 0; margin: 0; border: 0; }

/* --- Móvil: lista o mapa -------------------------------------- */

@media (max-width: 900px) {
  .tcd {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto auto auto minmax(0, 1fr);
  }
  .tc-directory-page .site-header.scrolled .nav-logo img { height: 34px; }
  .tcd-head { padding: 10px 16px 0; border-right: 0; }
  #top .tcd input.tcd-q { height: 42px; font-size: 16px; } /* 16px: iOS no amplía al escribir */

  /* Las secciones vuelven al panel, en una fila que se desliza */
  .tcd-chips {
    position: static; grid-column: 1; grid-row: 2;
    flex-wrap: nowrap; overflow-x: auto; padding: 10px 16px;
    background: var(--white);
    pointer-events: auto; scrollbar-width: none;
  }
  .tcd-chips::-webkit-scrollbar { display: none; }
  .tcd-chip { flex: 0 0 auto; white-space: nowrap; box-shadow: none; border-color: var(--border); }
  .tcd-bar { grid-row: 3; padding: 8px 16px; border-right: 0; }

  .tcd-list, .tcd-map { grid-column: 1; grid-row: 4; }
  .tcd-list { border-right: 0; }
  #top .tcd-group-t { padding-left: 16px; padding-right: 16px; }
  .tcd-row { padding-left: 13px; }
  #top .tcd-go { margin-right: 14px; }

  /* Los dos ocupan el mismo hueco; el oculto, sin verse pero con su tamaño
     (Leaflet necesita medir el mapa aunque no se vea). */
  .tcd[data-view="list"] .tcd-map,
  .tcd[data-view="map"] .tcd-list { visibility: hidden; pointer-events: none; }
  .tcd[data-view="map"] .tcd-inview { visibility: hidden; }

  .tcd-switch {
    display: inline-flex; align-items: center; gap: 8px;
    position: absolute; left: 50%; bottom: 18px; z-index: 1100;
    transform: translateX(-50%);
    height: 44px; padding: 0 20px;
    border: 0; border-radius: 0;
    background: var(--dark); color: #fff;
    font-family: var(--font-body); font-size: 12px; font-weight: 700;
    letter-spacing: .1em; text-transform: uppercase;
    box-shadow: 0 8px 24px rgba(46,11,12,.3);
    cursor: pointer;
  }
  .tcd[data-view="list"] .tcd-switch-list,
  .tcd[data-view="map"] .tcd-switch-map { display: none; }
}