/* ASS World Gallery — frontend styles
   Scoped to .awg-gallery — no :root custom properties. */

/* ── Gallery wrapper ──────────────────────────────────────── */

/* DOM order: main | side(buy + thumbs).
   Mobile:  stacked vertically (main then side).
   Desktop: ⅔ main left, ⅓ side panel right. */

.awg-gallery {
	--awg-thumb-gap: 0.5em;
	--awg-r-badge-bg: #c0392b;
	width: 100%;
}

/* ── Main image ───────────────────────────────────────────── */

.awg-gallery__main {
	position: relative;
	width:    100%;
	overflow: hidden;
	cursor:   default;
}

/* ── R-rated main image gate — "Join" overlay for non-members ── */

.awg-r-main-gate {
	position:        absolute;
	bottom:          1.5rem;
	left:            50%;
	transform:       translateX(-50%);
	z-index:         10;
	display:         inline-flex;
	align-items:     center;
	padding:         0.6rem 1.5rem;
	background:      rgba(255, 255, 255, 0.82);
	color:           #cc3366;
	text-decoration: none;
	font-size:       0.9rem;
	font-weight:     600;
	white-space:     nowrap;
	border-radius:   2rem;
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
	transition:      background 0.2s ease, transform 0.15s ease;
	/* keep centered on transform origin */
	transform-origin: center bottom;
}

.awg-r-main-gate:hover {
	background: rgba(255, 255, 255, 0.96);
	color:      #cc3366;
	transform:  translateX(-50%) translateY(-2px);
}

.awg-r-main-gate.hidden {
	display: none;
}

.awg-gallery__main-img {
	width:      100%;
	height:     auto;
	display:    block;
	transition: opacity 0.15s ease;
}

.awg-gallery__main-img.is-loading {
	opacity: 0.6;
}

/* ── Side panel (buy + thumbs, stacked) ───────────────────── */

.awg-gallery__side {
	display:        flex;
	flex-direction: column;
	gap:            1rem;
	margin-top:     1rem;
}

/* ── Buy button ───────────────────────────────────────────── */

.awg-gallery__buy-btn {
	display:         inline-block;
	padding:         0.65rem 1.75rem;
	background:      #cc3366;
	color:           #fff;
	text-decoration: none;
	font-size:       0.95rem;
	font-weight:     500;
	letter-spacing:  0.02em;
	border-radius:   2rem;
	white-space:     nowrap;
	transition:      background 0.2s ease, transform 0.15s ease;
}

.awg-gallery__buy-btn:hover {
	background: #9966cc;
	color:      #fff;
	transform:  translateY(-1px);
}

/* ── Thumbnail masonry ────────────────────────────────────── */

.awg-gallery__thumbs {
	display:      block;
	column-count: 3;
	column-gap:   var(--awg-thumb-gap);
}

.awg-gallery__thumb {
	position:       relative;
	display:        inline-block;
	width:          100%;
	aspect-ratio:   3 / 4;  /* reserves space before img loads — eliminates flicker */
	overflow:       hidden;
	cursor:         pointer;
	margin-bottom:  var(--awg-thumb-gap);
	break-inside:   avoid;
	outline:        2px solid transparent;
	outline-offset: 2px;
	transition:     outline-color 0.1s ease;
}

.awg-gallery__thumb:hover {
	outline-color: rgba(0, 0, 0, 0.3);
}

.awg-gallery__thumb--active {
	outline:        2px solid currentColor;
	outline-offset: 2px;
}

/* height: 100% fills the 3/4 container — no white gaps */
.awg-gallery__thumb img {
	width:      100%;
	height:     100%;
	object-fit: cover;
	display:    block;
}

/* ── R badge ──────────────────────────────────────────────── */

.awg-gallery__r-badge {
	position:       absolute;
	top:            4px;
	right:          4px;
	background:     var(--awg-r-badge-bg);
	color:          #fff;
	font-size:      9px;
	font-weight:    700;
	line-height:    1;
	padding:        2px 5px;
	border-radius:  3px;
	letter-spacing: 0.05em;
	pointer-events: none;
}

/* ── R-rated gate — signup overlay (injected by JS for non-members) ── */

.awg-r-gate-btn {
	position:        absolute;
	inset:           0;
	display:         flex;
	align-items:     center;
	justify-content: center;
	text-align:      center;
	padding:         0.5rem;
	background:      rgba(0, 0, 0, 0.55);
	color:           #fff;
	text-decoration: none;
	font-size:       0.75rem;
	font-weight:     600;
	line-height:     1.3;
	transition:      background 0.2s ease;
}

.awg-r-gate-btn:hover {
	background: rgba(204, 51, 102, 0.75);
	color:      #fff;
}

/* ── Mobile: swipe carousel + dot indicators ─────────────── */

@media (max-width: 767px) {
	/* Hide static main image when swipe strip is present */
	.awg-gallery:has(.awg-gallery__swipe) .awg-gallery__main {
		display: none;
	}

	/* Hide thumbnail strip — replaced by dots */
	.awg-gallery__thumbs {
		display: none;
	}

	/* Swipe strip — full-bleed breakout from .container */
	.awg-gallery__swipe {
		display:               flex;
		overflow-x:            scroll;
		scroll-snap-type:      x mandatory;
		overscroll-behavior-x: contain;
		scrollbar-width:       none;
		/* Break out of the padded .container to fill the full viewport */
		margin-left:           calc(50% - 50vw);
		width:                 100vw;
	}

	.awg-gallery__swipe::-webkit-scrollbar {
		display: none;
	}

	.awg-gallery__slide {
		flex:              0 0 100%;
		scroll-snap-align: start;
		position:          relative;
		overflow:          hidden;
		aspect-ratio:      4 / 5;
	}

	.awg-gallery__slide img {
		width:      100%;
		height:     100%;
		display:    block;
		object-fit: cover;
	}

	/* Dot indicators */
	.awg-gallery__dots {
		display:         flex;
		justify-content: center;
		align-items:     center;
		gap:             6px;
		padding:         12px 0 4px;
	}

	.awg-gallery__dot {
		display:       inline-block;
		flex-shrink:   0;
		width:         6px;
		height:        6px;
		border-radius: 3px;
		background:    rgba(0, 0, 0, 0.25);
		transition:    width 0.25s ease, background 0.2s ease;
	}

	/* Active pill = 2 × dot-width + 1 × gap — same total space as two dots */
	.awg-gallery__dot--active {
		width:      18px;
		background: rgba(0, 0, 0, 0.85);
	}
}

/* ── Prev / Next arrows ───────────────────────────────────── */

.awg-gallery__arrow {
	position:        absolute;
	top:             50%;
	transform:       translateY(-50%);
	z-index:         10;
	width:           44px;
	height:          44px;
	display:         flex;
	align-items:     center;
	justify-content: center;
	background:      rgba(255, 255, 255, 0.82);
	border:          none;
	border-radius:   50%;
	cursor:          pointer;
	padding:         0;
	opacity:         0;
	transition:      opacity 0.2s ease, background 0.15s ease;
	backdrop-filter: blur(4px);
	-webkit-backdrop-filter: blur(4px);
}

.awg-gallery__main:hover .awg-gallery__arrow,
.awg-gallery__arrow:focus-visible {
	opacity: 1;
}

.awg-gallery__arrow:hover {
	background: rgba(255, 255, 255, 0.96);
}

.awg-gallery__arrow--prev { left: 12px; }
.awg-gallery__arrow--next { right: 12px; }

.awg-gallery__arrow svg {
	color:          #111;
	pointer-events: none;
	flex-shrink:    0;
}

@media (prefers-reduced-motion: reduce) {
	.awg-gallery__arrow { transition: none; }
}

/* ── Desktop: ⅔ main left | ⅓ side right ─────────────────── */

@media (min-width: 768px) {
	/* Swipe strip and dots are mobile-only */
	.awg-gallery__swipe,
	.awg-gallery__dots {
		display: none;
	}

	.awg-gallery {
		display:        flex;
		flex-direction: row;
		gap:            1.5rem;
		align-items:    flex-start;
	}

	.awg-gallery__main {
		flex:     0 0 66.666%;
		position: sticky;
		top:      2rem;
	}

	/* Constrain side panel to viewport height so the thumbnail masonry
	   scrolls internally — prevents the gallery page from being much taller
	   than the homepage. */
	.awg-gallery__side {
		flex:       1;
		min-width:  0;
		margin-top: 0;
		max-height: calc(90vh - 4rem);
		overflow-y: auto;
		position:   sticky;
		top:        2rem;
	}
}

/* ── Reduced motion ───────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
	.awg-gallery__buy-btn,
	.awg-gallery__main-img,
	.awg-gallery__dot {
		transition: none;
	}
}