/*
 * ChillZone page only. Enqueued by slug in functions.php.
 *
 * Carries the homepage section's language onto the page: Bungee lockup in blue
 * + orange, hard offset shadows, the tilted CTA. The homepage puts video first;
 * here the pitch leads and the video answers it, so the two read as a pair
 * rather than the same block twice.
 */

/* Brand colors are the homepage section's, repeated here rather than promoted
   to :root — nothing outside ChillZone uses them. */
.page--chillzone {
	--cz-blue: #4183bb;
	--cz-orange: #eba424;
	--cz-shadow: rgb(0 0 0 / 27%);
}

/* ---------------------------------------------------------------------------
 * Hero.
 * ------------------------------------------------------------------------- */

/* Same artwork + milky wash as the homepage section: the comic-pop background
   is loud, so the wash is what keeps navy body copy at AA over it. */
.cz-hero {
	position: relative;
	isolation: isolate;
	padding-block: clamp(3.5rem, 7vw, 6rem);
	background-image: url("../../images/chillzone-bg.jpg");
	background-size: cover;
	background-position: center;
	color: var(--ink);
}

.cz-hero::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: rgb(255 255 255 / 72%);
}

.cz-hero__inner {
	display: grid;
	grid-template-columns: 1fr 1fr;
	align-items: center;
	gap: clamp(2rem, 5vw, 4rem);
	max-width: 1480px;
}

.cz-hero__title {
	margin: 0;
	font-family: var(--fun);
	font-size: clamp(4.75rem, 3.4vw, 2.5rem);
	font-weight: 400; /* Bungee ships a single weight. */
	line-height: 1.1;
	text-wrap: balance;

	/* Tight offset: the shadow hugs the letters and lifts them off the busy
	   artwork rather than reading as a separate drop shadow. */
	text-shadow: 3px 3px 0 var(--cz-shadow);
}

.cz-hero__verb {
	color: var(--cz-blue);
}

.cz-hero__brand {
	color: var(--cz-orange);
}

.cz-hero__lead {
	margin: 1.5rem 0 0;
	max-width: 52ch;
	font-size: clamp(1.05rem, 1.4vw, 1.15rem);
	line-height: 1.7;
}

.cz-hero__note {
	margin: 1rem 0 0;
	color: var(--muted);
	font-size: 0.95rem;
	font-style: italic;
}

/* Sits slightly off-square, in the heading's orange, with the same hard shadow. */
.cz-hero__cta {
	margin-top: 2.25rem;
	padding: 1.15rem 2.5rem;
	border-color: var(--cz-orange);
	background: var(--cz-orange);
	color: #fff;
	font-family: var(--fun);
	font-size: clamp(1rem, 1.5vw, 1.25rem);
	font-weight: 400;
	box-shadow: 7px 7px 0 0 var(--cz-shadow);
	rotate: -2.5deg;
	transition: rotate 0.2s ease, scale 0.2s ease, background 0.25s ease,
		box-shadow 0.2s ease;
}

.cz-hero__cta:hover {
	background: #f5b53f;
	border-color: #f5b53f;
	color: #fff;
	scale: 1.06;
	box-shadow: 10px 10px 0 0 var(--cz-shadow);
}

/* Wobble on hover, squash on click. Both off under reduced motion. The
   keyframes are duplicated from home.css rather than shared: page stylesheets
   load one at a time, so this page never sees that file's copy. */
@media (prefers-reduced-motion: no-preference) {
	.cz-hero__cta:hover {
		animation: sjc-wobble 0.6s ease-in-out infinite;
	}

	.cz-hero__cta:active {
		animation: none;
		transform: none;
		scale: 0.94;
		rotate: 1deg;
		box-shadow: 2px 2px 0 0 var(--cz-shadow);
	}
}

@keyframes sjc-wobble {
	0%,
	100% {
		rotate: -4deg;
	}

	50% {
		rotate: 1deg;
	}
}

/* ---------------------------------------------------------------------------
 * Gallery.
 * ------------------------------------------------------------------------- */

/* White, so the photographs carry the color after the artwork band above.
   Clipped: the tilted tiles and their hover growth both reach past the
   container, and the page must not gain a horizontal scrollbar for it. */
.cz-gallery {
	position: relative;
	isolation: isolate;
	padding-block: clamp(3.5rem, 7vw, 5.5rem);
	background: var(--bg);
	overflow-x: clip;
}

/* Tiled pattern behind the photos, faded almost to nothing: texture, not a
   competing graphic. A pseudo-element rather than background-image directly
   on .cz-gallery so the opacity doesn't also wash out the white base. */
.cz-gallery::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background-image: url("../../images/chillzone-pattern.webp");
	background-repeat: repeat;
	background-size: 500px;
	opacity: 0.08;
}

.cz-gallery__header {
	max-width: 62ch;
	margin: 0 auto 2.5rem;
	text-align: center;
}

.cz-gallery__title {
	margin: 0;
	font-family: var(--fun);
	font-size: clamp(4.75rem, 3.4vw, 2.5rem);
	font-weight: 400;
	line-height: 1.2;
	text-shadow: 2px 2px 0 var(--cz-shadow);
}

.cz-gallery__verb {
	color: var(--cz-blue);
}

.cz-gallery__brand {
	color: var(--cz-orange);
}

.cz-gallery__intro {
	margin: 0.75rem 0 0;
	color: var(--muted);
	font-size: clamp(1.05rem, 1.5vw, 1.2rem);
	line-height: 1.6;
}

/* auto-fill rather than a fixed count: the grid reflows on its own at every
   width, so the gallery needs no breakpoints of its own. The extra row gap
   pays for the tiles that hang below their cell. */
.cz-gallery__grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
	gap: 32px 20px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.cz-gallery__item {
	margin: 0;
}

/* Square wells: the folder mixes portrait and landscape phone shots, and a
   uniform crop is what keeps the grid from turning ragged.
   The white border + hard shadow make each one a printed photo. */
.cz-gallery__tile {
	position: relative;
	z-index: 1;
	display: block;
	width: 100%;
	aspect-ratio: 1;
	padding: 0;
	overflow: hidden;
	background: var(--tint);
	border: 3px solid #fff;
	border-radius: var(--radius-sm);
	box-shadow: 5px 5px 0 0 var(--cz-shadow);
	cursor: pointer;
	transition: rotate 0.25s ease, scale 0.25s ease, translate 0.25s ease,
		box-shadow 0.25s ease;
}

/*
 * Photos pinned to a board, not cells in a spreadsheet: the tilt and drop run
 * on a five-tile cycle, which is coprime with every column count the grid
 * settles on, so no two neighbours ever land on the same angle.
 */
.cz-gallery__item:nth-child(5n + 1) .cz-gallery__tile {
	rotate: -3deg;
}

.cz-gallery__item:nth-child(5n + 2) .cz-gallery__tile {
	rotate: 2deg;
	translate: 0 14px;
}

.cz-gallery__item:nth-child(5n + 3) .cz-gallery__tile {
	rotate: -1.5deg;
}

.cz-gallery__item:nth-child(5n + 4) .cz-gallery__tile {
	rotate: 3.5deg;
	translate: 0 8px;
}

.cz-gallery__item:nth-child(5n + 5) .cz-gallery__tile {
	rotate: -2.5deg;
	translate: 0 18px;
}

/*
 * Hover picks the photo up off the board: the whole tile grows, straightens,
 * and rises above its neighbours. The image inside never moves — the crop
 * stays put and the frame is what changes.
 */
.cz-gallery__tile:hover,
.cz-gallery__tile:focus-visible {
	z-index: 2;
	rotate: 0deg;
	scale: 1.12;
	translate: 0 -6px;
	box-shadow: 10px 12px 0 0 var(--cz-shadow);
}

.cz-gallery__tile:focus-visible {
	outline: 3px solid var(--cz-blue);
	outline-offset: 3px;
}

.cz-gallery__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* ---------------------------------------------------------------------------
 * Lightbox.
 * ------------------------------------------------------------------------- */

/* Fades in/out; JS toggles .is-open one frame after unhiding so the transition
   has a starting state to animate from. */
.cz-lightbox {
	position: fixed;
	inset: 0;
	z-index: 999;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: clamp(0.5rem, 2vw, 2rem);
	padding: 2rem;
	background: rgb(4 18 28 / 94%);
	opacity: 0;
	transition: opacity 0.25s ease-in-out;
}

.cz-lightbox.is-open {
	opacity: 1;
}

.cz-lightbox[hidden] {
	display: none;
}

.cz-lightbox__figure {
	margin: 0;
	max-width: min(90vw, 1000px);
	max-height: 90vh;
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
	transform: scale(0.94);
	transition: transform 0.25s ease-in-out;
}

.cz-lightbox.is-open .cz-lightbox__figure {
	transform: scale(1);
}

.cz-lightbox__img {
	max-width: 100%;
	max-height: 80vh;
	object-fit: contain;
	border-radius: var(--radius-sm);
}

.cz-lightbox__caption {
	color: #fff;
	text-align: center;
	font-size: 1.05rem;
}

.cz-lightbox__caption[hidden] {
	display: none;
}

.cz-lightbox__close {
	position: absolute;
	top: 1.25rem;
	right: 1.5rem;
	width: 44px;
	height: 44px;
	font-size: 1.75rem;
	line-height: 1;
	color: #fff;
	background: rgb(255 255 255 / 12%);
	border: none;
	border-radius: 50%;
	cursor: pointer;
}

.cz-lightbox__nav {
	flex: none;
	display: grid;
	place-items: center;
	width: 48px;
	height: 48px;
	padding: 0;
	font-size: 2rem;
	line-height: 1;
	color: #fff;
	background: rgb(255 255 255 / 12%);
	border: none;
	border-radius: 50%;
	cursor: pointer;
	transition: background 0.15s ease;
}

.cz-lightbox__close:hover,
.cz-lightbox__nav:hover {
	background: rgb(255 255 255 / 24%);
}

.cz-lightbox__close:focus-visible,
.cz-lightbox__nav:focus-visible {
	outline: 2px solid #fff;
	outline-offset: 3px;
}

/* ---------------------------------------------------------------------------
 * Responsive.
 * ------------------------------------------------------------------------- */

@media (max-width: 900px) {
	.cz-hero__inner {
		grid-template-columns: 1fr;
	}

	/* Video first on narrow screens: it sells the night faster than the copy. */
	.cz-hero__media {
		order: -1;
	}
}

@media (max-width: 560px) {
	.cz-gallery__grid {
		grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
		gap: 12px;
	}

	/* Arrows would crowd the photo at this width; swipe and keys still work. */
	.cz-lightbox__nav {
		display: none;
	}
}

/* The tilt itself stays: it is the layout, not an animation. Only the easing
   between states goes. */
@media (prefers-reduced-motion: reduce) {
	.cz-gallery__tile,
	.cz-lightbox,
	.cz-lightbox__figure {
		transition: none;
	}

	.cz-lightbox__figure {
		transform: none;
	}
}