/**
 * BBW Entity — creator, destination, waterpark and collection page layouts.
 *
 * Builds exclusively on the bbw-core.css language (tokens, buttons, badges,
 * cards, rails). Loaded only on entity singulars and archives. Every class is
 * namespaced bbw-entity-* (page-scope) and follows the same conventions as
 * the rest of the system: BEM-ish naming, .is-* states, mobile-first at
 * 640/900/1180. Facts/FAQ re-declare the single-beach visual idiom scoped to
 * this layer (never @import) so the beach stylesheet stays page-scoped too.
 *
 * Index
 *  1. Hero banner
 *  2. Header (avatar, title, terms, lede)
 *  3. CTA row
 *  4. Reading column and prose
 *  5. Gallery (lightbox)
 *  6. Quick facts
 *  7. FAQ
 *  8. Related rail
 *  9. Archive (chips, grid, pagination, empty state)
 * 10. Closing band
 */

/* ------------------------------------------------------------------ *
 * 1. Hero banner
 * ------------------------------------------------------------------ */

.bbw-entity-hero {
	position: relative;
	overflow: hidden;
	isolation: isolate;
	background: var(--bbw-bg-deep);
	border-bottom: 1px solid var(--bbw-line);
}

.bbw-entity-hero__media {
	position: relative;
	aspect-ratio: 16 / 9;
	max-height: clamp(240px, 46svh, 520px);
	width: 100%;
	overflow: hidden;
}

.bbw-entity-hero__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* Scrim: keeps the banner base dark so the overlapping header reads clean. */
.bbw-entity-hero__media::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(10, 24, 48, 0.25) 0%, rgba(10, 24, 48, 0) 42%, rgba(10, 24, 48, 0.88) 100%);
}

/* Text-forward band for media-less pages (today every destination): the same
 * navy glow language as the closing band, so an image-less opening still
 * looks intentional. */
.bbw-entity-hero--text {
	min-height: clamp(140px, 24svh, 240px);
	background:
		radial-gradient(120% 160% at 100% 0, rgba(30, 127, 255, 0.24), transparent 62%),
		linear-gradient(160deg, rgba(45, 212, 196, 0.1), transparent 55%),
		var(--bbw-bg-deep);
}

/* ------------------------------------------------------------------ *
 * 2. Header (avatar, title, terms, lede)
 * ------------------------------------------------------------------ */

.bbw-entity-header {
	position: relative;
	padding-block: var(--bbw-space-5) var(--bbw-space-2);
}

/* Round avatar overlapping the banner edge (creators). The media wrapper is a
 * real block so the frame crops reliably. */
.bbw-entity-header__avatar {
	display: block;
	width: 96px;
	height: 96px;
	margin-top: calc(var(--bbw-space-5) * -1 - 48px);
	margin-bottom: var(--bbw-space-3);
	position: relative;
	z-index: 2;
	border: 3px solid var(--bbw-bg);
	border-radius: 50%;
	overflow: hidden;
	background: var(--bbw-panel);
	box-shadow: var(--bbw-shadow);
}

.bbw-entity-header__avatar img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.bbw-entity-header__title {
	margin: 0 0 var(--bbw-space-3);
	font-family: var(--bbw-font-display);
	font-size: clamp(2rem, 1.2rem + 3.4vw, 3.6rem);
	font-weight: 800;
	line-height: 1.05;
	letter-spacing: -0.02em;
	color: var(--bbw-ink);
}

.bbw-entity-header__terms {
	display: flex;
	flex-wrap: wrap;
	gap: var(--bbw-space-2);
	margin-bottom: var(--bbw-space-3);
}

.bbw-entity-header__lede {
	margin: 0;
	max-width: 56ch;
	font-family: var(--bbw-font);
	font-size: var(--bbw-text-lg);
	line-height: 1.55;
	color: var(--bbw-ink-soft);
}

@media (min-width: 900px) {
	.bbw-entity-header__avatar {
		width: 128px;
		height: 128px;
		margin-top: calc(var(--bbw-space-5) * -1 - 64px);
	}
}

/* ------------------------------------------------------------------ *
 * 3. CTA row
 * ------------------------------------------------------------------ */

.bbw-entity-ctas {
	display: flex;
	flex-wrap: wrap;
	gap: var(--bbw-space-3);
	margin-block: var(--bbw-space-4) var(--bbw-space-5);
}

/* Center wrapped button labels too (core centers the single-line run). */
.bbw-entity-ctas .bbw-btn {
	text-align: center;
}

/* ------------------------------------------------------------------ *
 * 4. Reading column and prose
 * ------------------------------------------------------------------ */

.bbw-entity {
	padding-bottom: var(--bbw-space-6);
}

/* Centered, contained reading width — matches the beach post column. */
.bbw-entity-col {
	max-width: 44rem;
	margin-inline: auto;
}

.bbw-entity-prose {
	margin-block: var(--bbw-space-5) var(--bbw-space-6);
	font-family: var(--bbw-font);
	color: var(--bbw-ink-soft);
	font-size: 1.0625rem;
	line-height: 1.75;
}

.bbw-entity-prose h2,
.bbw-entity-prose h3 {
	margin: var(--bbw-space-6) 0 var(--bbw-space-3);
	font-family: var(--bbw-font-display);
	color: var(--bbw-ink);
	line-height: 1.15;
	letter-spacing: -0.01em;
	scroll-margin-top: calc(var(--bbw-header-h) + var(--bbw-space-4));
}

.bbw-entity-prose h2 {
	font-size: var(--bbw-text-xl);
	font-weight: 700;
}

.bbw-entity-prose h3 {
	font-size: var(--bbw-text-lg);
	font-weight: 600;
}

.bbw-entity-prose p {
	margin: 0 0 var(--bbw-space-4);
}

.bbw-entity-prose a {
	color: var(--bbw-accent-bright);
	text-decoration: none;
}

.bbw-entity-prose a:hover {
	text-decoration: underline;
}

.bbw-entity-prose img {
	border-radius: var(--bbw-radius);
	height: auto;
	max-width: 100%;
}

.bbw-entity-prose ul,
.bbw-entity-prose ol {
	margin: 0 0 var(--bbw-space-4);
	padding-left: 1.4em;
}

/* ------------------------------------------------------------------ *
 * 5. Gallery (lightbox targets)
 * ------------------------------------------------------------------ */

.bbw-entity-gallery {
	display: grid;
	gap: var(--bbw-space-3);
	grid-template-columns: repeat(2, 1fr);
}

@media (min-width: 900px) {
	.bbw-entity-gallery {
		grid-template-columns: repeat(3, 1fr);
	}
}

/* Uniform 16:9 crop-to-frame items. The frame is a real block (buttons are
 * inline-block by default), so aspect-ratio applies — the same inline-box
 * trap the single-beach layer documents for .bbw-card__media. */
.bbw-entity-gallery__item {
	display: block;
	width: 100%;
	position: relative;
	aspect-ratio: 16 / 9;
	padding: 0;
	border: 1px solid var(--bbw-line);
	border-radius: var(--bbw-radius);
	overflow: hidden;
	background: var(--bbw-bg-deep);
	cursor: zoom-in;
}

.bbw-entity-gallery__item img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform calc(var(--bbw-speed) * 2) var(--bbw-ease);
}

.bbw-entity-gallery__item:hover img,
.bbw-entity-gallery__item:focus-visible img {
	transform: scale(1.05);
}

.bbw-entity-gallery__item:focus-visible {
	outline: 2px solid var(--bbw-accent-bright);
	outline-offset: 2px;
}

/* ------------------------------------------------------------------ *
 * 6. Quick facts
 * ------------------------------------------------------------------ */

.bbw-entity-facts {
	margin-block: var(--bbw-space-5);
	display: grid;
	/* 1px grid gaps over the line-colored container draw the dividers between
	 * every fact cell and row; each item paints itself back with --bbw-panel. */
	gap: 1px;
	border: 1px solid var(--bbw-line);
	border-radius: var(--bbw-radius);
	overflow: hidden;
	background: var(--bbw-line);
	grid-template-columns: 1fr;
}

@media (min-width: 640px) {
	.bbw-entity-facts {
		grid-template-columns: repeat(2, 1fr);
	}
}

.bbw-entity-facts__item {
	padding: var(--bbw-space-3) var(--bbw-space-4);
	background: var(--bbw-panel);
}

.bbw-entity-facts__label {
	display: block;
	margin-bottom: var(--bbw-space-1);
	font-family: var(--bbw-font);
	font-size: var(--bbw-text-xs);
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--bbw-ink-muted);
}

.bbw-entity-facts__value {
	font-family: var(--bbw-font);
	font-size: var(--bbw-text-sm);
	font-weight: 600;
	color: var(--bbw-ink);
	line-height: 1.4;
}

/* ------------------------------------------------------------------ *
 * 7. FAQ
 * ------------------------------------------------------------------ */

.bbw-entity-faq details {
	margin-bottom: var(--bbw-space-3);
	border: 1px solid var(--bbw-line);
	border-radius: var(--bbw-radius);
	background: var(--bbw-panel);
	overflow: hidden;
}

.bbw-entity-faq summary {
	padding: var(--bbw-space-4) var(--bbw-space-5);
	font-family: var(--bbw-font);
	font-size: var(--bbw-text-md);
	font-weight: 600;
	color: var(--bbw-ink);
	cursor: pointer;
	list-style: none;
	position: relative;
	padding-right: calc(var(--bbw-space-5) + 1.2em);
}

.bbw-entity-faq summary::-webkit-details-marker {
	display: none;
}

.bbw-entity-faq summary::after {
	content: "+";
	position: absolute;
	right: var(--bbw-space-5);
	top: 50%;
	transform: translateY(-50%);
	color: var(--bbw-accent-bright);
	font-size: 1.2em;
	font-weight: 700;
	transition: transform var(--bbw-speed) var(--bbw-ease);
}

.bbw-entity-faq details[open] summary::after {
	transform: translateY(-50%) rotate(45deg);
}

.bbw-entity-faq details p {
	margin: 0;
	padding: 0 var(--bbw-space-5) var(--bbw-space-4);
	font-size: var(--bbw-text-sm);
	line-height: 1.65;
	color: var(--bbw-ink-soft);
}

/* ------------------------------------------------------------------ *
 * 8. Related rail
 * ------------------------------------------------------------------ */

/* Reuses the site-wide .bbw-rail; wider cards so titles read clean over the
 * thumbnail scrim, matching the beach post's related rail. */
.bbw-rail--entity .bbw-rail__item {
	flex-basis: min(80vw, 380px);
}

/* Uniform 16:9 frames: the shared .bbw-card__media is a <span> (inline), so
 * its aspect-ratio is inert until it becomes a block box here — that crops
 * every thumbnail to the same frame. Scoped to this rail. */
.bbw-rail--entity .bbw-card__media {
	display: block;
	aspect-ratio: 16 / 9;
}

/* ------------------------------------------------------------------ *
 * 9. Archive (chips, grid, pagination, empty state)
 * ------------------------------------------------------------------ */

.bbw-entity-archive__chips {
	display: flex;
	flex-wrap: wrap;
	gap: var(--bbw-space-2);
	margin-bottom: var(--bbw-space-5);
}

.bbw-entity-archive__grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
	gap: var(--bbw-space-4);
}

@media (min-width: 1180px) {
	.bbw-entity-archive__grid {
		gap: var(--bbw-space-5);
	}
}

/* Same inline-span block fix as the rail, for both card variants. */
.bbw-entity-archive__grid .bbw-card__media {
	display: block;
	aspect-ratio: 16 / 9;
}

.bbw-entity-archive__grid .bbw-card--creator .bbw-card__media {
	aspect-ratio: 1;
}

.bbw-entity-archive .navigation.pagination {
	margin-top: var(--bbw-space-6);
}

.bbw-entity-archive .nav-links {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--bbw-space-2);
}

.bbw-entity-archive .page-numbers {
	display: inline-flex;
	align-items: center;
	padding: 0.45em 0.95em;
	border: 1px solid var(--bbw-line-strong);
	border-radius: var(--bbw-radius-pill);
	background: var(--bbw-panel);
	font-family: var(--bbw-font);
	font-size: var(--bbw-text-sm);
	font-weight: 600;
	color: var(--bbw-ink);
	text-decoration: none;
}

.bbw-entity-archive .page-numbers.current {
	background: var(--bbw-accent);
	border-color: var(--bbw-accent);
	color: #fff;
}

.bbw-entity-archive a.page-numbers:hover {
	border-color: var(--bbw-teal);
	background: rgba(45, 212, 196, 0.12);
}

.bbw-entity-archive__empty {
	display: grid;
	justify-items: start;
	gap: var(--bbw-space-4);
	padding: var(--bbw-space-6) var(--bbw-space-5);
	border: 1px dashed var(--bbw-line-strong);
	border-radius: var(--bbw-radius-lg);
	background: var(--bbw-panel);
}

.bbw-entity-archive__empty p {
	margin: 0;
	font-family: var(--bbw-font);
	font-size: var(--bbw-text-md);
	line-height: 1.6;
	color: var(--bbw-ink-soft);
}

/* ------------------------------------------------------------------ *
 * 10. Closing band (full-bleed LovExplor hand-off)
 * ------------------------------------------------------------------ */

/* Sits outside the containers, so it spans full width like the hero; the
 * inner .bbw-container re-centers the copy. No 100vw — no scrollbar risk. */
.bbw-entity-closing {
	margin-top: var(--bbw-space-6);
	padding-block: var(--bbw-space-7);
	background:
		radial-gradient(120% 160% at 100% 0, rgba(30, 127, 255, 0.22), transparent 62%),
		linear-gradient(160deg, rgba(45, 212, 196, 0.08), transparent 55%),
		var(--bbw-bg-deep);
	border-block: 1px solid var(--bbw-line);
}

.bbw-entity-closing__inner {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--bbw-space-4);
}

.bbw-entity-closing__eyebrow {
	display: block;
	margin-bottom: var(--bbw-space-2);
	font-family: var(--bbw-font);
	font-size: var(--bbw-text-xs);
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--bbw-gold);
}

.bbw-entity-closing__title {
	margin: 0;
	font-family: var(--bbw-font-display);
	font-size: var(--bbw-text-xl);
	font-weight: 700;
	line-height: 1.1;
	letter-spacing: -0.01em;
	color: var(--bbw-ink);
}

.bbw-entity-closing__lede {
	margin: var(--bbw-space-2) 0 0;
	max-width: 54ch;
	font-family: var(--bbw-font);
	font-size: var(--bbw-text-md);
	line-height: 1.55;
	color: var(--bbw-ink-soft);
}

.bbw-entity-closing__cta {
	flex-shrink: 0;
	text-align: center;
}

@media (min-width: 900px) {
	.bbw-entity-closing__inner {
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		gap: var(--bbw-space-6);
	}
}

/* Motion safety, matching the core policy. */
@media (prefers-reduced-motion: reduce) {
	.bbw-entity-gallery__item img,
	.bbw-entity-faq summary::after {
		transition: none;
	}

	.bbw-entity-gallery__item:hover img,
	.bbw-entity-gallery__item:focus-visible img {
		transform: none;
	}
}