/**
 * Estilos do bloco de álbuns do Flickr ([arth_flickr_albums]).
 *
 * Grid: cards responsivos com capa + título + contagem de fotos.
 * Carrossel: usa o slider compartilhado (.arth-social-slider*, em
 * assets/css/arth-social-slider.css + assets/js/arth-social-slider.js); aqui só
 * definimos o card. A largura do slide vem do default do slider compartilhado.
 */

.arth-flickr {
    --arth-flickr-radius: 12px;
    --arth-flickr-gap: 24px;
}

/* ---------- Grid ---------- */

.arth-flickr__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: var(--arth-flickr-gap);
}

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

.arth-flickr-card {
    display: flex;
    flex-direction: column;
    text-decoration: none;
    color: inherit;
    border-radius: var(--arth-flickr-radius);
    overflow: hidden;
    background: #fff;
    box-shadow: 0 4px 18px rgba(15, 23, 81, 0.08);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.arth-flickr-card:hover,
.arth-flickr-card:focus-visible {
    transform: translateY(-4px);
    box-shadow: 0 10px 28px rgba(15, 23, 81, 0.16);
    outline: none;
}

.arth-flickr-card__image {
    position: relative;
    display: block;
    width: 100%;
    aspect-ratio: 4 / 3;
    background-color: #e9ecf5;
    background-size: cover;
    background-position: center;
}

.arth-flickr-card__count {
    position: absolute;
    right: 10px;
    bottom: 10px;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 12px;
    line-height: 1.4;
    font-weight: 600;
    color: #fff;
    background: rgba(15, 23, 81, 0.78);
}

.arth-flickr-card__title {
    display: block;
    padding: 16px 18px 20px;
    font-size: 17px;
    line-height: 1.35;
    font-weight: 600;
    color: #111530;
}