/* ==========================================================================
   ARTAGALLERY Studio — portfolio gallery, filter, lightbox
   Mobile  (<768):  controlled 2-column grid, consistent 4:5 crops, wide
                    projects span both columns at 3:2. Titles always visible.
   Tablet  (768+):  3-column masonry, only "large" tiles span 2 columns.
   Desktop (1280+): 4-column editorial masonry, "wide" + "large" span 2.
   Masonry row spans are set by portfolio.js; without JS the grid still
   works as a regular aligned grid.
   ========================================================================== */

.ag-gallery { --ag-gap: 10px; }

/* ---------- Filter ---------- */
.ag-filter {
	display: flex; gap: 6px; margin: 0 calc(var(--ag-gutter) * -1) 24px; padding: 0 var(--ag-gutter) 4px;
	overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; scroll-snap-type: x proximity;
	mask-image: linear-gradient(90deg, transparent 0, #000 var(--ag-gutter), #000 calc(100% - 32px), transparent 100%);
}
.ag-filter::-webkit-scrollbar { display: none; }
.ag-filter__btn {
	flex: 0 0 auto; scroll-snap-align: start; min-height: 40px; padding: 0 16px;
	background: transparent; border: 1px solid var(--ag-line-dark); border-radius: var(--ag-radius);
	font-family: var(--ag-font-mono); font-size: 0.6875rem; letter-spacing: .14em; text-transform: uppercase;
	color: var(--ag-muted-dark); transition: color .2s, border-color .2s, background-color .2s;
}
.ag-filter__btn:hover { color: var(--ag-white); border-color: rgba(255, 255, 255, 0.3); }
.ag-filter__btn.is-active { color: var(--ag-ink); background: var(--ag-gold); border-color: var(--ag-gold); }
.ag-section:not(.ag-section--dark) .ag-filter__btn { border-color: var(--ag-line); color: var(--ag-muted); }
.ag-section:not(.ag-section--dark) .ag-filter__btn.is-active { color: var(--ag-ink); }

@media (min-width: 768px) {
	.ag-filter { margin: 0 0 36px; padding: 0; flex-wrap: wrap; overflow: visible; mask-image: none; }
}

/* ---------- Grid (mobile first) ---------- */
.ag-grid-masonry { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-flow: row dense; gap: 20px var(--ag-gap); }
.ag-tile { min-width: 0; }
.ag-tile.is-hidden, .ag-tile.is-batched { display: none !important; }
.ag-tile.is-entering { animation: ag-tile-in .5s var(--ag-ease) both; }
@keyframes ag-tile-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }

.ag-tile__link { display: block; color: inherit; }
.ag-tile__media { position: relative; overflow: hidden; background: var(--ag-graphite); }
.ag-tile__media img { width: 100%; height: 100% !important; aspect-ratio: 4 / 5; object-fit: cover; transition: transform 1s var(--ag-ease), filter .6s; }
.ag-tile--wide, .ag-tile--large { grid-column: span 2; }
.ag-tile--wide .ag-tile__media img, .ag-tile--large .ag-tile__media img { aspect-ratio: 3 / 2; }

.ag-tile__meta { padding-top: 10px; }
.ag-tile__title { font-family: var(--ag-font-body) !important; font-size: 0.875rem; font-weight: 500 !important; letter-spacing: 0 !important; line-height: 1.35 !important; }
.ag-tile__cat { margin: 4px 0 0 !important; font-family: var(--ag-font-mono); font-size: 0.625rem; letter-spacing: .14em; text-transform: uppercase; color: var(--ag-muted-dark); }
.ag-section:not(.ag-section--dark) .ag-tile__cat { color: var(--ag-muted); }

/* ---------- Tablet & desktop: masonry ---------- */
@media (min-width: 768px) {
	.ag-gallery { --ag-gap: 14px; }
	.ag-grid-masonry { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--ag-gap); }
	.ag-tile--wide { grid-column: span 1; }
	.ag-tile__media img, .ag-tile--wide .ag-tile__media img, .ag-tile--large .ag-tile__media img { aspect-ratio: var(--ar, 0.8); }

	/* JS-driven masonry: rows of 4px, each tile spans N rows. */
	.ag-grid-masonry.is-masonry { grid-auto-rows: 4px; grid-auto-flow: row dense; row-gap: 0; align-items: start; }
	.ag-grid-masonry.is-masonry .ag-tile { padding-bottom: var(--ag-gap); }
}

@media (min-width: 1280px) {
	.ag-gallery { --ag-gap: 16px; }
	.ag-grid-masonry { grid-template-columns: repeat(4, minmax(0, 1fr)); }
	.ag-tile--wide { grid-column: span 2; }
	.ag-gallery--selected .ag-grid-masonry { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* Hover reveal on devices with a real pointer (meta overlays the image). */
@media (min-width: 768px) and (hover: hover) and (pointer: fine) {
	.ag-tile__link { position: relative; }
	.ag-tile__meta {
		position: absolute; inset: auto 0 0 0; padding: 48px 18px 16px;
		background: linear-gradient(180deg, rgba(12, 12, 13, 0) 0%, rgba(12, 12, 13, 0.82) 100%);
		color: var(--ag-white); opacity: 0; transform: translateY(8px);
		transition: opacity .35s var(--ag-ease), transform .35s var(--ag-ease); pointer-events: none;
	}
	.ag-tile__title { font-family: var(--ag-font-head) !important; font-size: 1.0625rem; font-weight: 400 !important; }
	.ag-tile__cat { color: var(--ag-gold-light) !important; }
	.ag-tile__link:hover .ag-tile__meta, .ag-tile__link:focus-visible .ag-tile__meta { opacity: 1; transform: none; }
	.ag-tile__link:hover img, .ag-tile__link:focus-visible img { transform: scale(1.035); }
	.ag-grid-masonry:hover .ag-tile__link:not(:hover) img { filter: brightness(0.72) saturate(0.9); }
}

.ag-gallery__more { text-align: center; margin-top: 40px; }
.ag-section--dark .ag-gallery__more .ag-btn--outline { color: var(--ag-white); }

/* ---------- Lightbox ---------- */
.ag-lightbox {
	position: fixed; inset: 0; z-index: 1000; background: rgba(8, 8, 9, 0.96);
	display: grid; grid-template-rows: auto 1fr auto; color: var(--ag-white);
	opacity: 0; transition: opacity .25s var(--ag-ease);
}
.ag-lightbox.is-open { opacity: 1; }
.ag-lightbox__bar { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px var(--ag-gutter); font-size: 0.875rem; }
.ag-lightbox__title { font-family: var(--ag-font-head); font-size: 1rem; }
.ag-lightbox__count { font-family: var(--ag-font-mono); font-size: 0.75rem; color: var(--ag-muted-dark); letter-spacing: .1em; }
.ag-lightbox__stage { display: grid; place-items: center; padding: 0 var(--ag-gutter); min-height: 0; }
.ag-lightbox__stage img { max-width: 100%; max-height: 100%; object-fit: contain; }
.ag-lightbox__nav { display: flex; justify-content: center; gap: 12px; padding: 16px; }
.ag-lightbox button {
	width: 48px; height: 48px; display: grid; place-items: center; background: transparent;
	border: 1px solid var(--ag-line-dark); border-radius: 50%; color: var(--ag-white); font-size: 1.25rem; line-height: 1;
}
.ag-lightbox button:hover { border-color: var(--ag-gold); color: var(--ag-gold-light); }
body.ag-lock { overflow: hidden; }