/* Galería de tarjetas de canciones (Inicio y Buscar). Reemplaza las tarjetas
   ".post" simples por algo más elegante: en pantallas anchas se ve una
   grilla normal, pero en celular (max-width: 700px) se convierte en un
   carrusel horizontal que se recorre deslizando con el dedo (scroll-snap;
   no depende de ninguna librería ni gesto armado a mano en JS — el navegador
   ya sabe hacer scroll horizontal con el dedo, sólo se lo "encarrila" a que
   cada tarjeta quede centrada). Ver wwwroot/js/galeria-canciones.js para el
   color de la etiqueta de nota y los puntitos indicadores.
   Usa las mismas variables de tema (--sb-*) que el resto del sitio — ver
   site.css — para que respete el tema claro/oscuro elegido en el navbar. */

.galeria-encabezado-ayuda {
    display: none;
    text-align: center;
    color: var(--sb-text-muted-card);
    font-size: 0.85rem;
    margin-bottom: 0.5rem;
}

.tarjeta-cancion {
    background-color: var(--sb-bg-card);
    color: var(--sb-text-card);
    border-radius: 14px;
    box-shadow: 0 4px 12px var(--sb-shadow-card);
    padding: 1.1rem 1.2rem 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
    height: 100%;
    transition: transform var(--dur-normal, 200ms) var(--ease-out-apple, ease),
                box-shadow var(--dur-normal, 200ms) var(--ease-out-apple, ease);
}

.tarjeta-cancion:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 24px var(--sb-shadow-card);
}

.tarjeta-cancion-encabezado {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 0.5rem;
}

.tarjeta-cancion-titulos {
    min-width: 0; /* para que text-overflow funcione adentro de un flex item */
}

.tarjeta-cancion-titulo {
    display: block;
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--sb-text-card);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-decoration: none;
}

.tarjeta-cancion-titulo:hover {
    color: var(--sb-link);
    text-decoration: underline;
}

/* Subtítulo de la tarjeta: antes mostraba el artista/intérprete, ahora las
   Etiquetas de la canción (ver Views/Shared/_TarjetaCancion.cshtml) — mismo estilo. */
.tarjeta-cancion-subtitulo {
    font-size: 0.85rem;
    color: var(--sb-text-muted-card);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Etiqueta de la nota/tono. Sigue siendo un enlace real a /Tag (filtrar por
   ese tono, comportamiento que ya existía) — sólo cambia el estilo, de texto
   suelto a esta "píldora" de color. El fondo/color de texto los pone
   galeria-canciones.js según el nombre de la nota (mismo color siempre para
   la misma nota), no varían con el tema claro/oscuro a propósito: son un
   fondo clarito fijo, para que el texto oscuro adentro siempre se lea bien
   sin tener que mantener una paleta aparte para modo oscuro. */
.chip-nota {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    background-color: var(--chip-nota-bg, #eef2ff);
    color: var(--chip-nota-text, #3949ab);
    font-size: 0.78rem;
    font-weight: 700;
    padding: 0.25rem 0.55rem;
    border-radius: 999px;
    text-decoration: none;
    white-space: nowrap;
}

.chip-nota:hover {
    filter: brightness(0.95);
}

.chip-nota svg {
    width: 0.75rem;
    height: 0.75rem;
    flex-shrink: 0;
}

.tarjeta-cancion-letra {
    /* Un poco más grande que antes (el sitio usa html{font-size:14px}, así
       que 0.88rem eran sólo ~12px). En celular esto se vuelve además
       "fluido" — ver el @media de abajo — y crece un poco más con el ancho
       de pantalla. */
    font-size: 1.1rem;
    color: var(--sb-text-muted-card);
    margin: 0;
    line-height: 1.45;
    flex-grow: 1;
    /* Bug clásico de flexbox: por defecto un flex item tiene min-height:auto,
       o sea que NO se achica por debajo del alto de su contenido completo
       (sin recortar) aunque el padre lo estire más (ej. cuando esta tarjeta
       queda en una fila de grilla junto a otra con título de 2 líneas y
       subtítulo, más alta). Eso hacía que la caja terminara más alta que las
       3 líneas del recorte, y asomaba un pedacito de la 4ª línea antes de
       que overflow:hidden la cortara. min-height:0 se lo permite. */
    min-height: 0;
    /* Recorta a 3 líneas parejas sin importar cuánto midiera el extracto de
       letra (aunque ChordFormatterService.Extracto ya lo recorta por
       caracteres en el servidor; esto es una segunda red de seguridad visual
       para que todas las tarjetas de una fila queden a la misma altura). */
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.tarjeta-cancion-pie {
    display: flex;
    justify-content: flex-end;
}

/* ---- Escritorio / tablet: grilla normal ---- */
.galeria-canciones {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
    /* body { display:flex } (ver site.css, es el truco para que el pie de
       página quede siempre pegado abajo) convierte a este contenedor en un
       "flex item" más arriba en la cadena de ancestros. Sin min-width:0, un
       flex item nunca se achica por debajo del ancho de su contenido — y
       como las tarjetas del carrusel de celular usan flex:0 0 84vw (no se
       achican, a propósito), eso terminaba empujando el ancho de TODA la
       página en vez de quedarse sólo dentro de este contenedor. */
    min-width: 0;
}

/* Mismo motivo que el min-width:0 de arriba, pero para cada tarjeta: un
   título largo con white-space:nowrap (.tarjeta-cancion-titulo) no puede
   partirse en dos líneas, así que su ancho "mínimo automático" es el ancho
   completo del texto. Tanto en una columna de grid ("1fr") como en un
   flex item, ese mínimo automático le gana a un track/flex-basis más chico
   si no se aclara min-width:0 — sin esto, la tarjeta con el título más
   largo terminaba agrandando su columna/tarjeta mucho más que las demás. */
.galeria-canciones > .galeria-item {
    min-width: 0;
}

.galeria-indicadores {
    display: none;
}

/* ---- Celular: carrusel deslizable ---- */
@media (max-width: 700px) {
    .galeria-encabezado-ayuda {
        display: block;
    }

    .galeria-canciones {
        display: flex;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        gap: 0.75rem;
        /* el padding lateral (en vez de 0) es lo que deja ver un pedacito de
           la tarjeta anterior/siguiente — la pista visual de que hay más
           para deslizar. Chico a propósito: la tarjeta ocupa casi toda la
           pantalla (92vw) y sólo queda este margen para el asomo. */
        padding: 0.25rem 4vw 0.5rem;
        margin: 0 calc(var(--bs-gutter-x, 1.5rem) * -0.5);
        scrollbar-width: none;
    }

    .galeria-canciones::-webkit-scrollbar {
        display: none;
    }

    .galeria-canciones > .galeria-item {
        /* 92vw en vez del 84vw original: la tarjeta se estira a casi toda la
           pantalla en vertical, dejando sólo un pedacito de la siguiente
           (ver el padding de 4vw de arriba) como pista de que hay más. */
        flex: 0 0 92vw;
        /* Sin min-width:0 aquí, un título largo con white-space:nowrap
           (.tarjeta-cancion-titulo) puede forzar a esta tarjeta a medir más
           que el 92vw declarado: el tamaño mínimo automático de un flex item
           se calcula por el contenido (min-content) y le gana a un
           flex-basis más chico si el contenido no puede achicarse. Por eso
           esta tarjeta en particular quedaba casi el doble de ancha que las
           demás y el carrusel nunca llegaba a alinear la siguiente. */
        min-width: 0;
        scroll-snap-align: center;
    }

    /* --alto-tarjeta la calcula galeria-canciones.js (ajustarAltoCarrusel):
       "casi toda la pantalla" = el espacio que queda entre el carrusel y el
       final de la pantalla, dejando un margen para los puntitos. Si por lo
       que sea el JS no llega a correr, 60vh es un alto razonable de
       respaldo. overflow:hidden recorta cualquier resto de letra que no
       entre, ya que el line-clamp de abajo es generoso a propósito. */
    .tarjeta-cancion {
        height: var(--alto-tarjeta, 60vh);
        overflow: hidden;
    }

    /* Con la tarjeta mucho más alta, 3 líneas de letra se ven pobres y dejan
       un hueco enorme vacío — se sube el recorte a muchas más líneas (la
       tarjeta más el overflow:hidden de arriba son los que realmente
       limitan cuánto se ve, así que este número sólo necesita ser "grande
       de sobra"). */
    .tarjeta-cancion-letra {
        -webkit-line-clamp: 20;
        /* Fluido: crece con el ancho de pantalla (clamp(mínimo, preferido,
           máximo)) en vez de un tamaño fijo — en un celular chico se lee
           cómodo, y en uno grande (o la tablet, antes de pasar a la
           grilla) se aprovecha el espacio de más sin volverse gigante. */
        font-size: clamp(1.2rem, 0.65rem + 2.2vw, 1.5rem);
    }

    .galeria-indicadores {
        display: flex;
        justify-content: center;
        gap: 0.4rem;
        margin-top: 0.9rem;
    }

    .galeria-punto {
        width: 7px;
        height: 7px;
        border-radius: 50%;
        background-color: var(--sb-border-card);
        transition: background-color 150ms ease, transform 150ms ease;
    }

    .galeria-punto.activo {
        background-color: var(--sb-link);
        transform: scale(1.3);
    }
}