/*
 * depo0 — page styles of /gallery ("With your eyes"): the parts of the front page CSS
 * (front/public/css/pages/gallery.css) that templates/gallery/index.php + gallery/_cards.php use —
 * filters, masonry grid, cards, like / favorite buttons, sensitive cover. Tokens come from site.css.
 */

/* filters (category / sorting / speciality tabs) */
.gallery-filters { display: flex; flex-direction: column; gap: 10px; margin-bottom: 24px; }
.gallery-filters__row { align-items: center; margin: 0; }
.gallery-filters__title { margin-right: 8px; color: var(--gray); font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; }

.gallery-grid { columns: 5 200px; }
@media (max-width: 991px) { .gallery-grid { columns: 2; column-gap: 10px; } }
.gallery-card .card__media { aspect-ratio: 4 / 5; }
.gallery-card .card__media img { width: 100%; height: 100%; object-fit: cover; }
.add-media {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; aspect-ratio: 4 / 5;
    border: 1px dashed var(--line-strong); color: var(--muted); font-weight: 700; transition: color var(--trans), border-color var(--trans);
}
.add-media .icon { width: 36px; height: 36px; }

/* sensitive content cover (ImageForVision .blur) */
.gallery-card.is-sensitive .card__media img { filter: blur(24px); transform: scale(1.1); }
.sensitive {
    position: absolute; inset: 0; z-index: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px;
    background: rgb(0 0 0 / 0.35); text-align: center; font-weight: 700;
}


/* member badge (free / paid) */
.member-badge { display: inline-flex; vertical-align: middle; color: var(--gray); }
.member-badge .icon { width: 16px; height: 16px; }
.member-badge.is-paid { color: var(--yellow); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* helpers */
.center { text-align: center; }

/* Like button of the gallery cards: the heart of the open-photo feed (heart.svg / heart-active.svg). */
/* Top-right corner of the card: favorite (bookmark) + like. */
.gallery-card__actions { position: absolute; top: 10px; right: 10px; z-index: 2; display: flex; align-items: center; gap: 6px; }
.gallery-card__like {
    opacity: 0;
    display: inline-flex; align-items: center; gap: 5px; height: 28px; padding: 0 9px 0 6px; border: 0; border-radius: 999px;
    background: rgb(0 0 0 / 0.45); color: #fff; font: 600 12px/1 var(--font); cursor: pointer; pointer-events: auto;
    backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); transition: transform 120ms ease, background var(--trans), opacity var(--trans);
}
.gallery-card__like:hover { background: rgb(0 0 0 / 0.6); transform: scale(1.05); }
.gallery-card__like:disabled { cursor: default; }
.gallery-card__heart { display: block; width: 20px; height: 20px; }
.gallery-card__heart--liked, .gallery-card__like.is-liked .gallery-card__heart { display: none; }
.gallery-card__like.is-liked .gallery-card__heart--liked { display: block; }
.gallery-card__fav {
    display: inline-grid; place-items: center; width: 28px; height: 28px; padding: 0; border: 0; border-radius: 50%;
    background: rgb(0 0 0 / 0.45); color: #fff; cursor: pointer; opacity: 0; pointer-events: auto;
    backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
    transition: transform 120ms ease, background var(--trans), opacity var(--trans), color var(--trans);
}
.gallery-card__fav:hover { background: rgb(0 0 0 / 0.6); transform: scale(1.05); }
.gallery-card__fav:disabled { cursor: default; }
/* globals.css paints every element (`* { color: #fff }`), the <use> inside the icon too. */
.gallery-card__fav .icon, .gallery-card__fav .icon * { width: 16px; height: 16px; color: inherit; }
.gallery-card__fav.is-favorite { color: var(--yellow, #fbbf24); }
.gallery-card__fav.is-favorite .icon, .gallery-card__fav.is-favorite .icon * { fill: currentColor; }
/* Shown with the overlay (hover / focus / touch); a liked / saved photo keeps its button visible. */
.gallery-card:hover :is(.gallery-card__like, .gallery-card__fav),
.gallery-card:focus-within :is(.gallery-card__like, .gallery-card__fav),
.gallery-card__like.is-liked, .gallery-card__fav.is-favorite { opacity: 1; }
@media (hover: none) { .gallery-card__like, .gallery-card__fav { opacity: 1; } }
.gallery-card.is-sensitive .gallery-card__actions { display: none; }

/* depo0 always loads globals.css (the site loads it only on legacy pages): undo its `.btn { width: 140px }`. */
.gallery-feed .btn { width: auto; }