/* ============================================================
   FONDITOS · fd-masonry.css
   Masonry compartido: home, populares y cualquier página que use
   /includes/fd_cards.php. Títulos de sección, grid, tarjetas e insignias.
   ============================================================ */

/* ============================================================
   TÍTULOS DE SECCIÓN (mismo estilo que los títulos de view.php)
   barrita rosa · texto en mayúsculas · línea que se desvanece
   ============================================================ */
.home-section-title {
    --hs-accent: #e91e63;
    --hs-text: var(--text-secondary, #444444);
    --hs-line: rgba(0, 0, 0, 0.18);

    display: flex;
    align-items: center;
    gap: 12px;
    margin: 56px 0 18px 0;
    padding: 0;
    font-family: inherit;
    font-size: 13.5px;
    font-weight: 700;
    line-height: 1;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--hs-text);
}

@media (prefers-color-scheme: dark) {
    .home-section-title {
        --hs-text: var(--text-secondary, #cccccc);
        --hs-line: rgba(255, 255, 255, 0.16);
    }
}

.home-section-title::before {
    content: "";
    flex: 0 0 auto;
    width: 3px;
    height: 14px;
    border-radius: 999px;
    background: var(--hs-accent);
}

.home-section-title::after {
    content: "";
    flex: 1;
    height: 1px;
    background: linear-gradient(to right, var(--hs-line), transparent);
}

@media (max-width: 649px) {
    .home-section-title {
        margin-top: 40px;
        font-size: 12.5px;
        letter-spacing: 0.12em;
    }
}

/* ============================================================
   MASONRY (home, populares…)
   Filas de 140px (120px en móvil); cada tarjeta ocupa celdas según su clase.
   grid-auto-flow: dense rellena los huecos con las tarjetas siguientes.
   ============================================================ */
.home-masonry {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    grid-auto-rows: 140px;
    grid-auto-flow: dense;
    gap: 20px;
    width: 100%;
    margin: 0;
}

.home-masonry .masonry-item {
    display: block;
    min-width: 0;
    text-decoration: none;
    border-radius: 20px;
    -webkit-tap-highlight-color: transparent;
}

.home-masonry .masonry-item:focus-visible {
    outline: 2px solid #e91e63;
    outline-offset: 3px;
}

/*        columnas          filas                       */
.home-masonry .card-s   {                       grid-row: span 1; }  /* 1x1 */
.home-masonry .card-std {                       grid-row: span 2; }  /* 1x2 */
.home-masonry .card-v   {                       grid-row: span 3; }  /* 1x3 */
.home-masonry .card-w   { grid-column: span 2;  grid-row: span 1; }  /* 2x1 */
.home-masonry .card-h   { grid-column: span 2;  grid-row: span 2; }  /* 2x2 */
.home-masonry .card-xl  { grid-column: span 2;  grid-row: span 3; }  /* 2x3 */
.home-masonry .card-p   { grid-column: span 3;  grid-row: span 2; }  /* 3x2 */

/* Con menos de 3 columnas la panorámica no cabe: pasa a 2 (si no, el grid se desborda) */
@media (max-width: 779px) {
    .home-masonry .card-p { grid-column: span 2; }
}

@media (min-width: 650px) and (max-width: 1023px) {
    .home-masonry { gap: 16px; }
}

@media (max-width: 649px) {
    .home-masonry {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        grid-auto-rows: 120px;
        gap: 8px;
    }
}

/* Tarjeta (misma base que featured.css, por si esa hoja no está cargada) */
.home-masonry .card {
    position: relative;
    width: 100%;
    height: 100%;
    border-radius: 20px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.05);
    transition: transform 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275),
                box-shadow 0.5s ease, border-color 0.3s ease;
}

.home-masonry .card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.6s ease, opacity 0.4s ease;
}

/* Aparición suave: se ve el color dominante y la miniatura entra con un fundido.
   RENDIMIENTO: solo opacidad (nada de blur/scale mientras carga: con decenas de
   tarjetas en pantalla eso hacía el scroll pesado). */
.home-masonry img.lazy-img {
    opacity: 0;
    filter: none;
    transform: none;
}
.home-masonry img.lazy-img.loaded { opacity: 1; }

@media (hover: hover) {
    .home-masonry .masonry-item:hover .card {
        transform: scale(1.03) translateY(-5px);
        z-index: 10;
        border-color: rgba(255, 255, 255, 0.4);
        box-shadow: 0 15px 30px rgba(0, 0, 0, 0.45), 0 0 0 4px rgba(255, 255, 255, 0.1);
    }
    .home-masonry .masonry-item:hover .card img {
        transform: scale(1.08);
    }
}

/* Título al pasar el ratón */
.home-masonry .card-overlay {
    position: absolute;
    left: 0; right: 0; bottom: 0;
    padding: 20px;
    background: linear-gradient(transparent, rgba(0, 0, 0, 0.8));
    display: flex;
    align-items: flex-end;
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
}

.home-masonry .card-overlay span {
    color: #fff;
    font-weight: 600;
    font-size: 0.85rem;
    background: rgba(0, 0, 0, 0.35);
    -webkit-backdrop-filter: none;   /* el desenfoque detrás de cada tarjeta pesa al hacer scroll */
    backdrop-filter: none;
    padding: 6px 14px !important;
    border-radius: 50px;
    border: 1px solid rgba(255, 255, 255, 0.3);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 90%;
}

@media (hover: hover) {
    .home-masonry .masonry-item:hover .card-overlay { opacity: 1; }
}

@media (max-width: 700px) {
    .home-masonry .card-overlay { display: none; }
    .home-masonry .masonry-item:active .card { transform: scale(0.98); }
}

/* ============================================================
   INSIGNIAS: descargas / likes y puesto (#1, #2, #3)
   ============================================================ */
.home-masonry .card-stat,
.home-masonry .card-rank {
    position: absolute;
    top: 10px;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 5px 9px !important;
    border-radius: 999px;
    font: 600 11px/1 'Inter', system-ui, sans-serif;
    color: #fff;
    background: rgba(0, 0, 0, 0.55);   /* sin backdrop-filter: mismo look, sin costo al hacer scroll */
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
    pointer-events: none;
    letter-spacing: 0.2px;
}

.home-masonry .card-stat { right: 10px; }
.home-masonry .card-rank { left: 10px; font-weight: 800; }

.home-masonry .card-stat svg {
    width: 12px;
    height: 12px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.5;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* Puestos: el #1 en el rosa de Fonditos, #2 y #3 en cristal */
.home-masonry .card-rank--1 { background: rgba(233, 30, 99, 0.92); }
.home-masonry .card-rank--2,
.home-masonry .card-rank--3 { background: rgba(0, 0, 0, 0.5); }

@media (max-width: 649px) {
    .home-masonry .card-stat,
    .home-masonry .card-rank {
        top: 7px;
        padding: 4px 7px !important;
        font-size: 10px;
    }
    .home-masonry .card-stat { right: 7px; }
    .home-masonry .card-rank { left: 7px; }
    .home-masonry .card-stat svg { width: 10px; height: 10px; }
}

@media (prefers-reduced-motion: reduce) {
    .home-masonry .card,
    .home-masonry .card img { transition: none; }
}

/* Primer título de una página (populares): más cerca del hero */
.tab-content > .home-section-title:first-child { margin-top: 24px; }

/* Botón "Cargar más" debajo de un masonry */
.home-masonry + .btn-load-more { margin-top: 28px; }

.fd-empty {
    margin: 0 0 24px;
    font-size: 0.9rem;
    opacity: 0.6;
}