/**
 * sm-tours.css — galería pública de tours (/tours/)
 *
 * Depende de sm-site.css, que aporta los tokens, la tipografía, la cabecera
 * clara, el skyline, el pie y los botones. Aquí vive solo lo propio de la
 * galería: portadilla, barra de filtros y tarjetas.
 *
 * La página la escribe generate_gallery2.php. Las clases de las tarjetas
 * (.tour-card*) las emiten DOS constructores que han de ir a la par: el de PHP
 * y su espejo en JavaScript para los resultados de búsqueda. Si se renombra una
 * clase de tarjeta hay que tocar los dos.
 */

/* ---------- Portadilla ---------- */

/* Lleva .container al lado, que ya centra y pone las guardas laterales de 24px.
   Aquí solo se estrecha la medida: tocar `padding` con la forma corta borraría
   esas guardas y el texto quedaría pegado al borde en el móvil. */
.tours-masthead {
    padding-top: clamp(40px, 6vw, 72px);
    padding-bottom: clamp(26px, 4vw, 38px);
    text-align: center;
}
.tours-masthead__inner { max-width: 760px; }
.tours-masthead__title {
    margin: 10px 0 14px;
    font-size: clamp(31px, 5vw, 50px);
    line-height: 1.1;
    letter-spacing: -0.02em;
    color: var(--sm-ink-hero);
}
/* Mismo patrón que el h1 de precios (SonicMaps Editor, en azul): la palabra del
   producto va en su color. Aquí toca el verde del Player, porque esta página es
   donde se escucha. Se usa --sm-green y no --sm-player: el segundo está pensado
   para fondo oscuro y sobre este claro se queda en 2,99:1, por debajo del 3:1
   que pide el texto grande. */
.tours-masthead__title span { color: var(--sm-green); }
.tours-masthead__lead {
    margin: 0 auto;
    max-width: 620px;
    font-size: clamp(16px, 2vw, 18px);
    line-height: 1.6;
    color: var(--sm-muted);
}
/* ---------- Barra de filtros ---------- */

/* Se queda pegada arriba al desplazar. La cabecera del sitio es `position:
   relative`, no fija, así que se va con la página y no hay dos barras
   peleándose por el borde superior. */
.filter-bar {
    position: sticky;
    top: 0;
    z-index: 30;
    background: var(--sm-surface);
    border-top: 1px solid var(--sm-border);
    border-bottom: 1px solid var(--sm-border);
}
.filter-bar__inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 10px 14px;
    padding-top: 12px;
    padding-bottom: 12px;
}

.filter-bar input[type="text"],
.filter-bar select {
    font-family: inherit;
    font-size: 15px;
    color: var(--sm-ink);
    padding: 10px 14px;
    border: 1px solid var(--sm-border);
    border-radius: 10px;
    background: var(--sm-surface);
    transition: border-color 0.15s ease;
}
.filter-bar input[type="text"] { flex: 1 1 240px; max-width: 360px; }
.filter-bar input[type="text"]::placeholder { color: #8A96A8; }
.filter-bar select { cursor: pointer; }
/* Solo el borde cambia al enfocar: el aro de foco global de sm-site.css sigue
   saliendo, que es lo que guía a quien navega con el teclado. */
.filter-bar input[type="text"]:focus,
.filter-bar select:focus { border-color: var(--sm-blue); }

.cat-pills { display: flex; flex-wrap: wrap; justify-content: center; gap: 7px; }
.cat-pill {
    font-family: inherit;
    font-size: 14px;
    font-weight: 600;
    color: var(--sm-muted);
    padding: 8px 15px;
    border: 1px solid var(--sm-border);
    border-radius: 999px;
    background: var(--sm-surface);
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.cat-pill:hover { border-color: var(--sm-blue); color: var(--sm-blue-dark); }
.cat-pill.active { background: var(--sm-blue); border-color: var(--sm-blue); color: #FFFFFF; }

/* El JS enseña y esconde este botón con la clase .visible, así que el reposo
   tiene que ser display:none aquí y no en el marcado. */
.clear-filters {
    display: none;
    font-family: inherit;
    font-size: 14px;
    font-weight: 600;
    padding: 8px 15px;
    border: 1px solid #D9BDBD;
    border-radius: 999px;
    background: var(--sm-surface);
    color: #A1352F;
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.clear-filters.visible { display: inline-flex; }
.clear-filters:hover { background: #A1352F; border-color: #A1352F; color: #FFFFFF; }

/* A partir de 1248px el contenedor ya está en su ancho máximo (1200 menos las
   guardas = 1152px útiles), así que por encima de ese punto la barra siempre
   mide lo mismo. Ahí se prohíbe el salto de línea para que "Clear filters" no
   caiga a una segunda fila, y se deja que ceda ancho solo el campo de búsqueda:
   con min-width:0 encoge lo que haga falta, de modo que la fila entra entera
   sin depender de cuánto ocupe cada etiqueta. */
@media (min-width: 1248px) {
    .filter-bar__inner { flex-wrap: nowrap; gap: 10px; }
    .filter-bar__inner > * { flex-shrink: 0; }
    .cat-pills { flex-wrap: nowrap; }
    .cat-pill { padding: 8px 13px; }
    .filter-bar select { padding: 10px 12px; }
    .filter-bar input[type="text"] { flex: 1 1 auto; min-width: 0; max-width: 360px; }
}

/* ---------- Encabezados de bloque ---------- */

/* No usan .section: en sm-site.css esa clase trae de 64 a 112px de relleno
   vertical para las franjas de la portada, y aquí solo hace falta un título. */
.tours-head { max-width: 1200px; margin: 0 auto; padding: 0 24px; }
.tours-head__title {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px 10px;
    margin: clamp(26px, 4vw, 38px) 0 18px;
    font-size: clamp(22px, 3vw, 28px);
    color: var(--sm-ink-hero);
}
.tours-head__title .count {
    font-family: var(--sm-font);
    font-size: 14px;
    font-weight: 600;
    color: var(--sm-muted);
}

/* ---------- Rejilla y tarjetas ---------- */

.gallery-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 22px;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 24px 36px;
}

.tour-card {
    background: var(--sm-surface);
    border: 1px solid var(--sm-border);
    border-radius: 14px;
    overflow: hidden;
    transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}
.tour-card:hover {
    transform: translateY(-3px);
    border-color: #CFD8E6;
    box-shadow: 0 18px 36px -18px rgba(14, 26, 43, 0.35);
}
.tour-card-link { display: flex; text-decoration: none; color: inherit; }

/* La miniatura se estira al alto de la tarjeta (es un hijo flex sin alto
   propio), y el min-height sostiene las tarjetas de texto corto. */
.tour-card-thumb {
    position: relative;
    flex: 0 0 190px;
    min-height: 190px;
    overflow: hidden;
    background: var(--sm-blue-tint);
}
.tour-card-thumb img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}
.tour-card:hover .tour-card-thumb img { transform: scale(1.04); }

.tour-card-badge {
    position: absolute;
    top: 10px;
    right: 10px;
    padding: 4px 9px;
    border-radius: 7px;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

/* min-width:0 porque un hijo flex arranca en min-width:auto y el texto largo
   sin espacios lo empujaría fuera de la tarjeta. */
.tour-card-body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    padding: 15px 17px 16px;
}
.tour-card-title {
    margin: 0 0 5px;
    font-size: 17px;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: -0.01em;
    color: var(--sm-ink-hero);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.tour-card-author,
.tour-card-location {
    font-size: 13.5px;
    color: var(--sm-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.tour-card-author { font-weight: 600; margin-bottom: 2px; }
.tour-card-location { margin-bottom: 8px; }

/* ---------- Pin de ubicación (tarjeta de la galería y ficha del tour) -------- */

/* Va en CSS y no en el marcado a propósito: la ubicación de una tarjeta la
   escriben DOS constructores que han de ir a la par, el de PHP y su espejo en
   JavaScript, así que un icono puesto ahí habría que mantenerlo por duplicado.
   Aquí una sola regla sirve a la galería y a la ficha.

   Se dibuja como máscara para que tome el color del texto que acompaña: no hay
   que mantener una copia del SVG por cada color. Y va dentro de @supports
   porque sin máscaras el pseudoelemento saldría como un cuadrado sólido; así,
   en ese caso simplemente no hay icono y el texto se lee igual. */
@supports (mask-image: none) or (-webkit-mask-image: none) {
    /* El viewBox va recortado al dibujo (x 5→19, y 2→22 del lienzo de 24) y no
       a 0 0 24 24. Con el lienzo entero, el pin solo llenaba el 70% del ancho
       de su caja y se veía bastante más pequeño de lo que decía la medida.
       Recortado, el alto que se pide es el alto que se ve, y la caja lleva la
       proporción del propio dibujo (14:20) para que no sobre aire a los lados. */
    .tour-card-location::before,
    .tour-hero__location::before {
        content: "";
        display: inline-block;
        width: 10px;
        height: 14px;
        margin-right: 5px;
        vertical-align: -2px;
        background-color: currentColor;
        /* Más claro que el texto, para que acompañe sin competir. Se hace con
           opacidad y no con un gris fijo para que el pin siga atado al color de
           su texto: si este cambia, el icono sigue siendo su versión suave.
           Sobre el fondo claro esto queda en un gris de ~#9BA3AF; subir el
           número lo oscurece y bajarlo lo difumina. */
        opacity: 0.55;
        -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='5 2 14 20'%3E%3Cpath d='M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5a2.5 2.5 0 1 1 0-5 2.5 2.5 0 0 1 0 5z'/%3E%3C/svg%3E") no-repeat center / contain;
        mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='5 2 14 20'%3E%3Cpath d='M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5a2.5 2.5 0 1 1 0-5 2.5 2.5 0 0 1 0 5z'/%3E%3C/svg%3E") no-repeat center / contain;
    }
    /* En la ficha el texto es mayor (15px frente a 13,5), así que el pin sube. */
    .tour-hero__location::before { width: 12px; height: 17px; margin-right: 7px; }
}
.tour-card-desc {
    font-size: 13.5px;
    line-height: 1.5;
    color: var(--sm-muted-2);
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
/* El contador se va al fondo de la tarjeta, tenga o no descripción encima. */
.tour-card-views {
    margin-top: auto;
    padding-top: 10px;
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 13px;
    color: var(--sm-muted-2);
}
.tour-card-views svg { flex-shrink: 0; }

@media (max-width: 860px) {
    .gallery-grid { grid-template-columns: 1fr; gap: 16px; padding: 0 20px 28px; }
    .tours-head { padding: 0 20px; }
}
@media (max-width: 560px) {
    .tour-card-link { flex-direction: column; }
    /* En columna el flex-basis pasa a medir el alto, así que los 190px de ancho
       de arriba se sustituyen por un alto de banda propio. */
    .tour-card-thumb { flex: 0 0 200px; min-height: 200px; }
}

/* ---------- Estados de la búsqueda ---------- */

/* Estos tres salen ocultos desde el marcado con style="display:none" y no desde
   aquí: el JS los enseña con style.display='', que borra el estilo en línea y
   deja mandar al CSS. Si el CSS dijese display:none, no aparecerían nunca. */
.no-results { text-align: center; padding: 64px 24px; color: var(--sm-muted); }
.no-results h3 { margin: 0 0 8px; font-size: 20px; color: var(--sm-ink-hero); }
.no-results p { margin: 0; font-size: 15px; }

.results-info {
    text-align: center;
    padding: 12px 24px 0;
    font-size: 14px;
    font-weight: 600;
    color: var(--sm-muted-2);
}

.loading-indicator { text-align: center; padding: 22px; font-size: 14px; color: var(--sm-muted); }
.scroll-sentinel { width: 100%; height: 1px; }


/* ===========================================================================
   Página de detalle de un tour  (/tours/{id}/)
   =========================================================================== */

/* La escribe generate_tours2.php con los bloques de tour_template.php. Comparte
   con la galería la cabecera, el pie y el skyline de sm-site.css.
   Columna estrecha a propósito: el texto de los proyectos puede ser largo y a
   todo lo ancho se vuelve ilegible. */
.tour__inner { max-width: var(--sm-measure); }

/* ---------- Miga de pan ---------- */

.tour-breadcrumb {
    padding-top: 22px;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    font-size: 14px;
    color: var(--sm-muted-2);
}
.tour-breadcrumb a { color: var(--sm-blue); text-decoration: none; font-weight: 600; }
.tour-breadcrumb a:hover { text-decoration: underline; }
.tour-breadcrumb__sep { color: #A8B2C1; }

/* ---------- Ficha de cabecera ---------- */

.tour-hero {
    display: flex;
    gap: clamp(20px, 4vw, 34px);
    align-items: flex-start;
    padding: clamp(22px, 4vw, 34px) 0 clamp(26px, 4vw, 38px);
}
/* Las portadas son cuadradas (100x100 las antiguas, 300x300 las de ahora), así
   que la caja va cuadrada y con medida fija: 200px es el término medio que no
   pixela las viejas ni desperdicia las nuevas. Ancho y alto explícitos en lugar
   de aspect-ratio, y object-fit para que, si alguna portada no fuese cuadrada,
   se recorte en vez de deformarse. */
.tour-hero__cover {
    display: block;
    width: 200px;
    height: 200px;
    flex-shrink: 0;
    object-fit: cover;
    border-radius: 16px;
    border: 1px solid var(--sm-border);
    background: var(--sm-blue-tint);
}
/* min-width:0 para que un título largo sin espacios no empuje la ficha. */
.tour-hero__text { min-width: 0; }
.tour-hero__title {
    margin: 8px 0 10px;
    font-size: clamp(27px, 4.2vw, 40px);
    line-height: 1.12;
    letter-spacing: -0.02em;
    color: var(--sm-ink-hero);
}
.tour-hero__location {
    margin: 0 0 18px;
    font-size: 15px;
    line-height: 1.5;
    color: var(--sm-muted);
}
.tour-hero__meta {
    margin: 14px 0 0;
    font-size: 13.5px;
    color: var(--sm-muted-2);
}

/* ---------- Bloques ---------- */

.tour-section { padding-bottom: clamp(26px, 4vw, 38px); }
.tour-section + .tour-section { border-top: 1px solid var(--sm-border); padding-top: clamp(24px, 4vw, 34px); }
.tour-section__title {
    margin: 0 0 14px;
    font-size: clamp(20px, 2.6vw, 25px);
    color: var(--sm-ink-hero);
}

.tour-prose { font-size: 16px; line-height: 1.7; color: var(--sm-muted); }
.tour-prose p { margin: 0 0 14px; }
.tour-prose p:last-child { margin-bottom: 0; }
/* Descripciones que son texto plano: pre-line respeta los saltos de línea que
   escribió el autor y sigue colapsando los espacios sobrantes. La pone el PHP
   solo cuando el texto no trae marcado de bloque propio. */
.tour-prose--plain { white-space: pre-line; }
/* El JS quita y pone .collapsed; el recorte a cuatro líneas vive aquí. */
.tour-prose.collapsed {
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.read-more {
    margin: 12px 0 0;
    padding: 0;
    border: 0;
    background: none;
    font-family: inherit;
    font-size: 15px;
    font-weight: 700;
    color: var(--sm-blue);
    cursor: pointer;
}
.read-more:hover { color: var(--sm-blue-dark); text-decoration: underline; }

/* ---------- Muestras de audio ---------- */

.tour-samples__row { display: flex; flex-wrap: wrap; gap: 16px; }
.tour-sample {
    flex: 1 1 230px;
    min-width: 0;
    padding: 15px 16px 16px;
    border: 1px solid var(--sm-border);
    border-radius: 12px;
    background: var(--sm-surface);
}
.tour-sample__name { margin: 0 0 10px; font-size: 15px; font-weight: 700; color: var(--sm-ink-hero); }
.custom-audio-player { display: flex; align-items: center; gap: 10px; }
.audio-play-btn {
    width: 38px;
    height: 38px;
    flex-shrink: 0;
    border: 1px solid var(--sm-border);
    border-radius: 50%;
    background: var(--sm-surface);
    color: var(--sm-blue);
    font-size: 15px;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.audio-play-btn:hover { background: var(--sm-blue); border-color: var(--sm-blue); color: #FFFFFF; }
.audio-time { font-size: 13.5px; color: var(--sm-muted-2); font-variant-numeric: tabular-nums; }
.audio-description {
    margin: 10px 0 0;
    font-size: 13.5px;
    line-height: 1.5;
    color: var(--sm-muted-2);
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* ---------- Autor ---------- */

.tour-creator__row { display: flex; align-items: flex-start; gap: 14px; }
.tour-creator__avatar {
    width: 62px;
    height: 62px;
    flex-shrink: 0;
    border-radius: 50%;
    object-fit: cover;
    border: 1px solid var(--sm-border);
}
.tour-creator__text { min-width: 0; }
.tour-creator__name { margin: 2px 0 5px; font-size: 16px; font-weight: 700; color: var(--sm-ink-hero); }
.tour-creator__bio { margin: 0; font-size: 14px; line-height: 1.6; color: var(--sm-muted); }

/* ---------- Más como este ---------- */

.tour-related__row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.tour-related__card {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 14px 15px;
    border: 1px solid var(--sm-border);
    border-radius: 12px;
    background: var(--sm-surface);
    text-decoration: none;
    transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}
.tour-related__card:hover {
    transform: translateY(-3px);
    border-color: #CFD8E6;
    box-shadow: 0 16px 32px -18px rgba(14, 26, 43, 0.35);
}
.tour-related__name { font-size: 15px; font-weight: 700; line-height: 1.3; color: var(--sm-ink-hero); }
.tour-related__author { font-size: 13.5px; color: var(--sm-muted); }

@media (max-width: 680px) {
    .tour-hero { flex-direction: column; }
    .tour-related__row { grid-template-columns: 1fr; }
}