/**
 * Estilos do bloco de álbuns do Flickr ([dc_flickr_albums]).
 *
 * Layout "chapado": card sem fundo/borda/sombra — vive direto sobre a seção
 * (azul, na home). Capa (4:3) + legenda em BRANCO logo abaixo. O badge
 * "N fotos" é MANTIDO como está (retângulo rosa no canto da capa). Grid sempre
 * 4 colunas no desktop; carrossel mostra 4 por vez (slider compartilhado).
 *
 * Cores/fontes: consomem os tokens da marca (--stb-*), com fallback em cada
 * var() caso o bloco apareça sem o stylesheet do tema.
 */

.dc-flickr {
    --dc-flickr-gap: 40px;
}

/* ---------- Grid: sempre 4 colunas no desktop ---------- */

.dc-flickr__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--dc-flickr-gap);
}

/* ---------- Card chapado (compartilhado entre grid e carrossel) ---------- */

.dc-flickr-card {
    display: flex;
    flex-direction: column;
    gap: 12px;
    text-decoration: none;
    color: inherit;
    background: transparent;
    border-radius: 0;
    box-shadow: none;
    overflow: visible;
}

.dc-flickr-card:hover,
.dc-flickr-card:focus-visible {
    outline: none;
}

.dc-flickr-card__image {
    position: relative;
    display: block;
    width: 100%;
    aspect-ratio: 1 / 1;
    background-color: var(--stb-placeholder, #6a6a6a);
    background-size: cover;
    background-position: center;
}

/* Badge "N fotos" — MANTIDO sem alterar layout (retângulo rosa no canto). */
.dc-flickr-card__count {
    position: absolute;
    right: 12px;
    bottom: 12px;
    padding: 5px 12px;
    border-radius: 8px;
    font-family: var(--stb-font-body, 'Helvetica Neue', Arial, sans-serif);
    font-size: 13px;
    line-height: 1.2;
    font-weight: 700;
    color: var(--stb-beige-rgb, #ffffff);
    background: var(--stb-pink, #FF0051);
}

/* Legenda em branco, direto abaixo da capa. */
.dc-flickr-card__title {
    display: block;
    padding: 0;
    font-family: var(--stb-font-body, 'Helvetica Neue', Arial, sans-serif);
    font-size: 14px;
    line-height: 1.4;
    font-weight: 600;
    color: var(--stb-beige-rgb, #ffffff);
    transition: color 0.2s ease;
}

.dc-flickr-card:hover .dc-flickr-card__title,
.dc-flickr-card:focus-visible .dc-flickr-card__title {
    color: var(--stb-white, #D3C3A7);
}

/* ---------- Carrossel: 4 por vez no desktop ---------- */
.dc-flickr.dc-social-slider {
    --dc-social-slide-width: calc((100% - 3 * var(--dc-social-gap)) / 4);
}

@media (max-width: 1024px) {
    .dc-flickr__grid { grid-template-columns: repeat(2, 1fr); }
    .dc-flickr.dc-social-slider {
        --dc-social-slide-width: calc((100% - var(--dc-social-gap)) / 2);
    }
}

@media (max-width: 600px) {
    .dc-flickr__grid { grid-template-columns: 1fr; }
    .dc-flickr.dc-social-slider {
        --dc-social-slide-width: 82vw;
    }
}

@media (prefers-reduced-motion: reduce) {
    .dc-flickr-card {
        transition: none;
    }
}