/* ---------- Masonry grid ---------- */
.masonry {
    column-count: 2;
    column-gap: var(--space-4);
}
@media (min-width: 640px) { .masonry { column-count: 3; } }
@media (min-width: 1100px) { .masonry { column-count: 4; } }

.masonry__item {
    break-inside: avoid;
    margin-bottom: var(--space-4);
}

/* ---------- Gallery card ---------- */
.gcard {
    position: relative;
    display: block;
    width: 100%;
    border-radius: var(--radius-lg);
    overflow: hidden;
    background: var(--bg-2);
    border: 1px solid var(--border-subtle);
    cursor: pointer;
}

.gcard__media {
    position: relative;
    width: 100%;
    overflow: hidden;
    aspect-ratio: 4 / 5;
}

.gcard__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--dur-slow) var(--ease-out), filter var(--dur-slow) var(--ease-out);
}

.gcard:hover .gcard__img,
.gcard:focus-visible .gcard__img {
    transform: scale(1.06);
}

.gcard__scrim {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0,0,0,0.78) 0%, rgba(0,0,0,0.15) 45%, rgba(0,0,0,0) 65%);
    transition: opacity var(--dur-base) var(--ease-out);
}

.gcard__top {
    position: absolute;
    top: var(--space-3);
    left: var(--space-3);
    right: var(--space-3);
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}

.gcard__bottom {
    position: absolute;
    left: var(--space-4);
    right: var(--space-4);
    bottom: var(--space-4);
}

.gcard__category {
    font-size: var(--fs-xs);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: rgba(255,255,255,0.65);
    font-weight: 700;
    margin-bottom: 2px;
}

.gcard__name {
    font-size: 1.2rem;
    font-weight: 800;
    color: #fff;
    letter-spacing: -0.01em;
}

.gcard__try {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    background: rgba(8,8,12,0.38);
    transition: opacity var(--dur-base) var(--ease-out);
}

.gcard:hover .gcard__try,
.gcard:focus-visible .gcard__try {
    opacity: 1;
}

.gcard__try .btn { transform: translateY(8px); transition: transform var(--dur-base) var(--ease-out); }
.gcard:hover .gcard__try .btn { transform: translateY(0); }

/* Tamaños variados para sensación "pinterest" en el masonry */
.masonry__item--tall .gcard__media { aspect-ratio: 4 / 5.6; }
.masonry__item--short .gcard__media { aspect-ratio: 4 / 4.2; }
.masonry__item--square .gcard__media { aspect-ratio: 1 / 1; }

/* ---------- Category filter bar (Explore) ---------- */
.explore-filters {
    position: sticky;
    top: var(--header-h);
    z-index: 20;
    padding-block: var(--space-4);
    background: linear-gradient(to bottom, var(--bg-0) 70%, transparent);
}

.explore-count {
    color: var(--text-tertiary);
    font-size: var(--fs-sm);
    margin-bottom: var(--space-4);
}