/**
 * Celeb Gallery front-end.
 *
 * Mobile-first: the audience arrives from social apps on phones, so the phone
 * layout is the base and the desktop refinements sit in a media query.
 */

.celebgal {
	--celebgal-accent: #d6204a;
	--celebgal-accent-text: #fff;
	--celebgal-bg: #fff;
	--celebgal-text: #16181d;
	--celebgal-muted: #61656e;
	--celebgal-border: #e2e4e9;
	/* A quiet neutral, not near-black: this shows only while an image loads. */
	--celebgal-media-bg: #e9ebef;

	/*
	 * How much of the screen one slide's image may occupy. The rest has to
	 * leave room for the caption and the Next button without scrolling —
	 * on mobile that reachability is the whole tap-through model.
	 */
	--celebgal-max-h: 72vh;

	max-width: 760px;
	margin: 0 auto 2rem;
	color: var(--celebgal-text);
	background: var(--celebgal-bg);
}

@media (prefers-color-scheme: dark) {
	.celebgal {
		--celebgal-bg: #14161c;
		--celebgal-text: #f2f3f5;
		--celebgal-muted: #a2a7b2;
		--celebgal-border: #2b2f39;
		--celebgal-media-bg: #23262e;
	}
}

/*
 * Desktop viewports are short relative to a portrait photo, so a phone-sized
 * cap would leave the image needlessly small. No thumb-reach concern here.
 */
@media (min-width: 700px) {
	.celebgal {
		--celebgal-max-h: 82vh;
	}
}

.celebgal__slides {
	list-style: none;
	margin: 0;
	padding: 0;
}

.celebgal__slide[hidden] {
	display: none;
}

.celebgal__figure {
	margin: 0;
}

/*
 * The media box is sized to the image's own shape, so it hugs the image with no
 * letterbox bars — and because the box is reserved before the image loads, the
 * layout never shifts either.
 *
 * The important trick is capping the box's WIDTH, not the image's height. These
 * celebrity shots are usually tall portraits: at 736x1401 a full-width box is
 * nearly twice as tall as it is wide. Capping the image's height inside that
 * box (the obvious approach) leaves the rest of the box showing as dead space.
 * Capping the width at `max height x ratio` makes the box reach the height
 * limit exactly, so image and box are the same size at every viewport.
 */
.celebgal__media {
	position: relative;
	width: 100%;
	max-width: min(
		100%,
		calc( var( --celebgal-max-h ) * var( --celebgal-ratio, 1 ) )
	);
	aspect-ratio: var( --celebgal-ratio, 1 );
	margin-inline: auto;
	overflow: hidden;
	/* Only ever visible in the moment before the image paints. */
	background: var(--celebgal-media-bg);
}

.celebgal__media img {
	display: block;
	width: 100%;
	height: 100%;
	/* The box already matches the image's ratio, so nothing is actually
	   cropped; this just avoids sub-pixel seams at the edges. */
	object-fit: cover;
}

.celebgal__media--empty {
	--celebgal-ratio: 1.3333;
}

/* ---------------------------------------------------------------------------
 * Arrows drawn on the photo
 *
 * These sit inside the media box, so they track the image's edges rather than
 * the page margin. They duplicate what the nav bar does — the nav bar stays,
 * because a big thumb-height Next button is what actually drives tap-through.
 * ------------------------------------------------------------------------ */

/*
 * Selector is doubled up deliberately. Themes commonly set a min-width on
 * buttons — the active theme uses 90px — which silently beats a plain `width`
 * and stretches these into ovals. The extra class outranks `.entry-content
 * button` style rules, and min-width:0 removes the floor itself.
 */
.celebgal .celebgal__arrow {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 2;

	/* 44px is the minimum comfortable tap target. */
	width: 44px;
	height: 44px;
	min-width: 0;
	max-width: none;
	flex: none;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	border: 0;
	border-radius: 50%;
	cursor: pointer;

	/* Translucent so it never fully hides part of the photo, with a shadow so
	   it stays visible against a light background too. */
	background: rgba(255, 255, 255, 0.82);
	color: #16181d;
	box-shadow: 0 1px 6px rgba(0, 0, 0, 0.28);
	-webkit-backdrop-filter: blur(2px);
	backdrop-filter: blur(2px);
	transition: background-color 0.15s ease, transform 0.15s ease;
}

.celebgal .celebgal__arrow--prev {
	left: 10px;
}

.celebgal .celebgal__arrow--next {
	right: 10px;
}

.celebgal__arrow svg {
	width: 24px;
	height: 24px;
	fill: none;
	stroke: currentColor;
	stroke-width: 2.5;
	stroke-linecap: round;
	stroke-linejoin: round;
	display: block;
}

.celebgal .celebgal__arrow:hover {
	background: rgba(255, 255, 255, 0.96);
}

.celebgal .celebgal__arrow:active {
	transform: translateY(-50%) scale(0.92);
}

.celebgal .celebgal__arrow:focus-visible {
	outline: 3px solid var(--celebgal-accent);
	outline-offset: 2px;
}

/* Keep the tap targets clear of each other on very narrow phones. */
@media (max-width: 360px) {
	.celebgal .celebgal__arrow {
		width: 40px;
		height: 40px;
	}

	.celebgal .celebgal__arrow--prev {
		left: 6px;
	}

	.celebgal .celebgal__arrow--next {
		right: 6px;
	}
}

.celebgal__caption-wrap {
	padding: 1rem 1rem 0.25rem;
}

.celebgal__slide-title {
	margin: 0 0 0.5rem;
	font-size: 1.35rem;
	line-height: 1.25;
}

/* Captions are the reason this is content and not a photo farm — give them
   real reading comfort, not fine print. */
.celebgal__caption {
	font-size: 1.05rem;
	line-height: 1.6;
}

.celebgal__caption p {
	margin: 0 0 0.75rem;
}

.celebgal__credit {
	margin: 0.5rem 0 0;
	font-size: 0.8rem;
	color: var(--celebgal-muted);
}

/* ---------------------------------------------------------------------------
 * Navigation
 * ------------------------------------------------------------------------ */

.celebgal__nav {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	padding: 1rem;
	border-top: 1px solid var(--celebgal-border);
	margin-top: 0.75rem;
}

.celebgal__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.4rem;
	/* Thumb-sized on purpose: this is the one control that matters. */
	min-height: 52px;
	padding: 0 1.25rem;
	font-size: 1.05rem;
	font-weight: 700;
	border: 0;
	border-radius: 8px;
	cursor: pointer;
	font-family: inherit;
}

.celebgal__btn--next {
	flex: 1;
	background: var(--celebgal-accent);
	color: var(--celebgal-accent-text);
}

.celebgal__btn--next:hover {
	filter: brightness(0.92);
}

.celebgal__btn--prev {
	background: transparent;
	color: var(--celebgal-muted);
	border: 1px solid var(--celebgal-border);
	padding: 0 0.85rem;
}

.celebgal__btn--prev:disabled {
	opacity: 0.35;
	cursor: default;
}

.celebgal__btn[hidden] {
	display: none;
}

.celebgal__btn:focus-visible {
	outline: 3px solid var(--celebgal-accent);
	outline-offset: 2px;
}

.celebgal__progress {
	margin: 0;
	font-size: 0.9rem;
	font-variant-numeric: tabular-nums;
	color: var(--celebgal-muted);
	white-space: nowrap;
}

/* Hide the "Back" word on small screens; the arrow carries the meaning. */
@media (max-width: 420px) {
	.celebgal__btn--prev .celebgal__btn-text {
		display: none;
	}
}

/* ---------------------------------------------------------------------------
 * Ads
 * ------------------------------------------------------------------------ */

.celebgal__ad {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.25rem;
	margin: 1rem 0;
	min-height: 0;
}

.celebgal__ad[hidden] {
	display: none;
}

.celebgal__ad-label {
	font-size: 0.65rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--celebgal-muted);
}

/*
 * The bottom unit sits in normal flow, below the nav. It is deliberately NOT
 * sticky or fixed.
 *
 * Two reasons. The site already runs its own site-wide anchor ad, so a second
 * pinned unit would be doubling up. And as a sticky last child it rose off its
 * flow position and painted over the nav: measured at 390x844 the Next button
 * overlapped it by 31px, and elementFromPoint at the centre of Next returned
 * the ad's IFRAME — a visitor aiming for "Next" would have tapped the ad.
 * In-flow, that cannot happen.
 */
.celebgal__ad--bottom,
.celebgal__ad--anchor {
	margin: 1rem 0 0;
	padding-top: 0.75rem;
	border-top: 1px solid var(--celebgal-border);
}

/* ---------------------------------------------------------------------------
 * End screen
 * ------------------------------------------------------------------------ */

.celebgal__end {
	padding: 1.25rem 1rem;
}

.celebgal__end-title {
	margin: 0 0 1rem;
	font-size: 1.3rem;
}

.celebgal__grid {
	list-style: none;
	margin: 0 0 1.25rem;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 0.9rem;
}

@media (min-width: 600px) {
	.celebgal__grid {
		grid-template-columns: repeat(3, 1fr);
	}
}

.celebgal__grid-item a {
	display: block;
	text-decoration: none;
	color: inherit;
}

.celebgal__grid-thumb {
	display: block;
	aspect-ratio: 1 / 1;
	background: var(--celebgal-media-bg);
	border-radius: 8px;
	overflow: hidden;
	margin-bottom: 0.4rem;
}

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

.celebgal__grid-title {
	display: block;
	font-size: 0.92rem;
	font-weight: 600;
	line-height: 1.35;
}

.celebgal__restart {
	background: none;
	border: 1px solid var(--celebgal-border);
	border-radius: 8px;
	color: var(--celebgal-muted);
	cursor: pointer;
	font-family: inherit;
	font-size: 0.9rem;
	min-height: 44px;
	padding: 0 1rem;
}

/* On the end screen the progress counter is meaningless. */
.celebgal--end .celebgal__progress {
	visibility: hidden;
}

/* ---------------------------------------------------------------------------
 * Galleries index — [celeb_galleries]
 *
 * Two columns on a phone is deliberate: one column per row makes the visitor
 * scroll past very few options before losing interest, and this grid exists to
 * get them into a gallery.
 * ------------------------------------------------------------------------ */

.celebgal-index {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 1.25rem 1rem;
	margin: 0 0 1.75rem;
	padding: 0;
	list-style: none;
}

@media (min-width: 600px) {
	.celebgal-index--cols-3 {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.celebgal-index--cols-4 {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

.celebgal-card {
	margin: 0;
}

.celebgal-card__link {
	display: block;
	text-decoration: none;
	color: inherit;
}

.celebgal-card__thumb {
	position: relative;
	display: block;
	aspect-ratio: 1 / 1;
	overflow: hidden;
	border-radius: 10px;
	background: #e9ebef;
	margin-bottom: 0.55rem;
}

.celebgal-card__thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 0.25s ease;
}

.celebgal-card__link:hover .celebgal-card__thumb img {
	transform: scale(1.04);
}

/* A visible photo count is the single strongest reason to tap a card: it
   promises how much there is to see. */
.celebgal-card__count {
	position: absolute;
	right: 8px;
	bottom: 8px;
	padding: 3px 8px;
	border-radius: 999px;
	font-size: 0.72rem;
	font-weight: 700;
	line-height: 1.4;
	color: #fff;
	background: rgba(0, 0, 0, 0.66);
	-webkit-backdrop-filter: blur(2px);
	backdrop-filter: blur(2px);
}

.celebgal-card__body {
	display: block;
}

.celebgal-card__celeb {
	display: block;
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--celebgal-accent);
	margin-bottom: 0.15rem;
}

.celebgal-card__title {
	display: block;
	font-size: 0.97rem;
	font-weight: 600;
	line-height: 1.35;
	color: var(--celebgal-text);
}

.celebgal-card__link:hover .celebgal-card__title {
	text-decoration: underline;
}

.celebgal-card__link:focus-visible {
	outline: 3px solid var(--celebgal-accent);
	outline-offset: 3px;
	border-radius: 10px;
}

.celebgal-index__pagination {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem;
	align-items: center;
	margin-bottom: 2rem;
}

.celebgal-index__pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 40px;
	min-height: 40px;
	padding: 0 0.7rem;
	border: 1px solid var(--celebgal-border);
	border-radius: 8px;
	text-decoration: none;
	color: var(--celebgal-text);
	font-size: 0.92rem;
}

.celebgal-index__pagination .page-numbers.current {
	background: var(--celebgal-accent);
	border-color: var(--celebgal-accent);
	color: var(--celebgal-accent-text);
	font-weight: 700;
}

.celebgal-index__pagination .page-numbers.dots {
	border-color: transparent;
	min-width: 0;
	padding: 0 0.2rem;
}

.celebgal-index__empty {
	color: var(--celebgal-muted);
}