/**
 * Event Catalog pages (templates/event-catalog.html) — the generic, shared
 * template used by every event under "Live Events", not just one — styles
 * scoped to .wow-event-page so nothing here can leak onto/collide with the
 * rest of the site. Loaded conditionally (see functions.php,
 * wow_is_event_catalog_page()) — never sitewide.
 *
 * Originally built for the first event ("2 Tours d'Horloge"), ported from
 * the old Salient child-theme's classic PHP page template and rebuilt with
 * this theme's own design tokens (theme.json color/font presets) and class
 * names instead of the original green Salient styling, then generalized to
 * work for any event with zero per-event code — see [wow_event_catalog] in
 * functions.php for the markup this styles, and assets/js/event-catalog.js
 * for the category/crew/lightbox interactions.
 */

.wow-event-page {
	background-color: #fff;
}

.wow-event-page * {
	box-sizing: border-box;
}

/* ── Banner ───────────────────────────────────────────────────────────── */
/* Full-width, sits directly under the site header (this page's template,
   templates/event-catalog.html, has no top padding above wp:post-content).
   Background comes from the banner_background_desk/banner_background_mobile
   ACF fields via CSS custom properties set inline per page (see
   wow_event_render_banner() in functions.php) — the mobile var wins under
   700px, desktop var wins above it, and #1a1a1a shows through if neither
   field is filled in yet. */
.wow-event-banner {
	position: relative;
	display: flex;
	align-items: flex-end;
	justify-content: center;
	min-height: 440px;
	padding: 48px 32px;
	background-color: #1a1a1a;
	background-image: var(--wow-event-banner-bg-desktop);
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	text-align: center;
}

.wow-event-banner::before {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(0, 0, 0, 0.1) 0%, rgba(0, 0, 0, 0.7) 100%);
}

.wow-event-banner__overlay {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 16px;
}

.wow-event-banner__title {
	font-family: var(--wp--preset--font-family--josefin);
	font-size: clamp(30px, 5vw, 52px);
	font-weight: 700;
	text-transform: uppercase;
	color: #fff;
	margin: 0;
	text-shadow: 0 2px 14px rgba(0, 0, 0, 0.35);
}

.wow-event-banner__pill {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	padding: 9px 20px;
	border-radius: 999px;
	font-family: var(--wp--preset--font-family--josefin);
	font-size: 12px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 1px;
	color: #fff;
	background: rgba(255, 255, 255, 0.12);
	border: 1px solid rgba(255, 255, 255, 0.28);
	backdrop-filter: blur(6px);
}

.wow-event-banner__pill.is-active {
	background: rgba(46, 160, 67, 0.18);
	border-color: rgba(46, 160, 67, 0.45);
}

.wow-event-banner__dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: #9a9a9a;
	flex-shrink: 0;
}

.wow-event-banner__pill.is-active .wow-event-banner__dot {
	background: #2ea043;
	animation: wow-event-banner-pulse 1.8s ease-out infinite;
}

@keyframes wow-event-banner-pulse {
	0% {
		box-shadow: 0 0 0 0 rgba(46, 160, 67, 0.65);
	}
	70% {
		box-shadow: 0 0 0 9px rgba(46, 160, 67, 0);
	}
	100% {
		box-shadow: 0 0 0 0 rgba(46, 160, 67, 0);
	}
}

@media (max-width: 700px) {
	.wow-event-banner {
		background-image: var(--wow-event-banner-bg-mobile, var(--wow-event-banner-bg-desktop));
		min-height: 320px;
		padding: 32px 20px;
	}

	.wow-event-banner__pill.is-closed {
		font-size: 10px;
		letter-spacing: 0;
	}
}

/* ── Hero (intro text under the banner) ──────────────────────────────── */
.wow-event-hero {
	max-width: 760px;
	margin: 0 auto;
	padding: 40px 32px;
	text-align: center;
}

.wow-event-hero__text {
	font-size: 15px;
	line-height: 1.7;
	color: var(--wp--preset--color--grey);
	margin: 0;
}

.wow-event-hero__text + .wow-event-hero__text {
	margin-top: 16px;
}

@media (max-width: 700px) {
	.wow-event-hero {
		padding: 28px 20px;
	}
}

/* ── Category + crew pickers ─────────────────────────────────────────── */
.wow-event-catalog {
	background: #f8f8f8;
	padding: 25px 32px 56px;
}

.wow-event-step {
	max-width: 900px;
	margin: 0 auto 32px;
}

.wow-event-step__label {
	font-family: var(--wp--preset--font-family--josefin);
	font-size: 13px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	color: var(--wp--preset--color--text);
	margin: 0 0 16px;
	text-align: center;
}

.wow-event-category-filters {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 10px;
}

.wow-event-category-filter,
.wow-event-team-btn {
	background-color: #fff;
	border: 1px solid #e2e2e2;
	border-radius: 999px;
	font-family: var(--wp--preset--font-family--josefin);
	font-weight: 700;
	color: var(--wp--preset--color--text);
	cursor: pointer;
	transition: border-color 0.2s ease, color 0.2s ease, background-color 0.2s ease;
}

.wow-event-category-filter {
	padding: 11px 22px;
	font-size: 13px;
}

.wow-event-category-filter:hover,
.wow-event-category-filter:focus-visible {
	border-color: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--accent);
}

.wow-event-category-filter.is-active {
	background-color: var(--wp--preset--color--accent);
	border-color: var(--wp--preset--color--accent);
	color: #fff;
}

.wow-event-teams-grid {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 8px;
}

.wow-event-team-btn {
	padding: 8px 16px;
	font-size: 12px;
	white-space: nowrap;
}

.wow-event-team-btn:hover,
.wow-event-team-btn:focus-visible {
	border-color: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--accent);
}

.wow-event-team-btn.is-active {
	background-color: var(--wp--preset--color--accent);
	border-color: var(--wp--preset--color--accent);
	color: #fff;
}

.wow-event-teams-slider {
	position: relative;
}

.wow-event-teams-nav {
	/* Only relevant once the row actually scrolls, i.e. mobile — see the
	   media query below. */
	display: none;
}

@media (max-width: 700px) {
	.wow-event-catalog {
		padding: 25px 20px 40px;
	}

	.wow-event-teams-slider {
		margin: 0 -20px;
	}

	.wow-event-teams-grid {
		flex-wrap: nowrap;
		justify-content: flex-start;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
		padding: 0 20px;
	}

	.wow-event-teams-grid::-webkit-scrollbar {
		display: none;
	}

	.wow-event-team-btn {
		flex-shrink: 0;
	}

	.wow-event-teams-nav {
		display: flex;
		align-items: center;
		position: absolute;
		top: 0;
		bottom: 0;
		z-index: 2;
		width: 48px;
		border: none;
		background: none;
		padding: 0;
		color: var(--wp--preset--color--text);
		cursor: pointer;
		opacity: 1;
		transition: opacity 0.2s ease;
	}

	.wow-event-teams-nav--prev {
		left: 0;
		justify-content: flex-start;
		padding-left: 4px;
		background: linear-gradient(to right, #f8f8f8 40%, rgba(248, 248, 248, 0) 100%);
	}

	.wow-event-teams-nav--next {
		right: 0;
		justify-content: flex-end;
		padding-right: 4px;
		background: linear-gradient(to left, #f8f8f8 40%, rgba(248, 248, 248, 0) 100%);
	}

	.wow-event-teams-slider.is-at-start .wow-event-teams-nav--prev,
	.wow-event-teams-slider.is-at-end .wow-event-teams-nav--next {
		opacity: 0;
		pointer-events: none;
	}
}

/* ── Photo grid ───────────────────────────────────────────────────────── */
.wow-event-plateau {
	display: none;
}

.wow-event-plateau.is-active {
	display: contents;
}

.wow-event-team-item {
	display: none;
}

.wow-event-team-item.is-active {
	display: contents;
}

.wow-event-photos-wrap {
	max-width: 1270px;
	margin: 0 auto;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
	gap: 20px;
}

@media (max-width: 700px) {
	.wow-event-photos-wrap {
		grid-template-columns: repeat(2, 1fr);
		gap: 12px;
	}
}

.wow-event-photo {
	position: relative;
	margin: 0;
	background-color: #fafafa;
	padding: 5px;
	cursor: pointer;
	opacity: 0;
	transform: translateY(8px);
	transition: opacity 0.35s ease, transform 0.35s ease;
}

.wow-event-photo.is-loaded {
	opacity: 1;
	transform: translateY(0);
}

.wow-event-photo__frame {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	aspect-ratio: 4 / 5;
	overflow: hidden;
	background-color: #f0f0f0;
}

.wow-event-photo.is-horizontal .wow-event-photo__frame {
	aspect-ratio: 3 / 2;
}

.wow-event-photo__img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.3s ease;
}

.wow-event-photo:hover .wow-event-photo__img {
	transform: scale(1.03);
}

.wow-event-empty {
	max-width: 600px;
	margin: 0 auto;
	padding: 60px 32px;
	text-align: center;
	font-size: 15px;
	color: var(--wp--preset--color--grey);
}

/* ── Lightbox / purchase modal ───────────────────────────────────────────
   Same overlay + centered panel pattern as .wow-edition-drawer/.wow-mini-
   cart elsewhere in the theme, just its own namespace since this is a
   different shape (a centered lightbox, not a side drawer). */
.wow-event-modal {
	/* Overrides the global block-editor flow-layout rule
	   (:root :where(.is-layout-flow) > * { margin-block-start: 24px; ... }
	   in style.css) — this element is a direct child of the wp:post-content
	   block's flow layout, so without this it picks up a stray 24px top
	   margin despite already being position:fixed/inset:0. */
	margin-block-start: 0;
	position: fixed;
	inset: 0;
	z-index: 9990;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 24px;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.25s ease, visibility 0s linear 0.25s;
}

.wow-event-modal.is-open {
	opacity: 1;
	visibility: visible;
	transition: opacity 0.25s ease;
}

.wow-event-modal__overlay {
	position: absolute;
	inset: 0;
	background: rgba(10, 8, 6, 0.85);
}

.wow-event-modal__panel {
	position: relative;
	z-index: 1;
	width: 100%;
	max-width: 1080px;
	max-height: 88vh;
	overflow-y: auto;
	/* Same wall photo already used behind the product configurator
	   (.wow-config in style.css) — no wash on the panel itself; the body
	   content below sits on its own white card instead, so both the bg
	   photo and the text stay clean. */
	background-image: url(https://wheelsonwalls.shop/wp-content/uploads/2026/04/WALL-BG.avif);
	background-size: cover;
	background-position: center;
	border-radius: 10px;
	padding: 20px;
}

/* Sibling of .wow-event-modal__panel, positioned against .wow-event-modal
   itself (the fixed, inset:0 overlay wrapper) rather than the panel — sits
   on the dark backdrop in a fixed corner that never overlaps the nav pill's
   own prev/next arrows, which live inside the panel and can otherwise end
   up right under this same corner on narrow/mobile widths. */
.wow-event-modal__close {
	position: absolute;
	top: 20px;
	right: 20px;
	z-index: 3;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	background: rgba(255, 255, 255, 0.1);
	border: 1px solid rgba(255, 255, 255, 0.3);
	border-radius: 50%;
	color: #fff;
	cursor: pointer;
	transition: background-color 0.2s ease, border-color 0.2s ease;
}

.wow-event-modal__close:hover,
.wow-event-modal__close:focus-visible {
	background: rgba(255, 255, 255, 0.2);
	border-color: rgba(255, 255, 255, 0.5);
}

@media (max-width: 700px) {
	.wow-event-modal__close {
		top: 12px;
		right: 12px;
		width: 34px;
		height: 34px;
	}
}

.wow-event-modal__nav {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin: 0 auto 16px;
	max-width: 420px;
	padding: 6px 6px 6px 14px;
	background: #fff;
	border-radius: 999px;
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
}

.wow-event-modal__nav-btn {
	display: inline-flex;
	flex-shrink: 0;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	background: #e4e4e4;
	border: 1px solid #e6e6e6;
	border-radius: 50%;
	color: var(--wp--preset--color--text);
	cursor: pointer;
	transition: border-color 0.2s ease, background-color 0.2s ease, color 0.2s ease;
}

.wow-event-modal__nav-btn:hover:not(:disabled),
.wow-event-modal__nav-btn:focus-visible {
	border-color: var(--wp--preset--color--accent);
	background-color: var(--wp--preset--color--accent);
	color: #fff;
}

.wow-event-modal__nav-btn:disabled {
	opacity: 0.3;
	cursor: default;
}

/* Single row: "Event · Category · Team" plus a small counter, both built as
   one line by JS (see event-catalog.js) rather than stacked spans — keeps
   the whole pill compact instead of growing tall with 2-3 text rows. */
.wow-event-modal__nav-info {
	flex: 1;
	min-width: 0;
	display: flex;
	align-items: baseline;
	justify-content: center;
	gap: 6px;
}

.wow-event-modal__nav-line {
	font-family: var(--wp--preset--font-family--josefin);
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.3px;
	color: var(--wp--preset--color--text);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	min-width: 0;
}

.wow-event-modal__counter {
	flex-shrink: 0;
	font-family: var(--wp--preset--font-family--josefin);
	font-size: 10px;
	font-weight: 500;
	color: var(--wp--preset--color--grey);
}

@media (max-width: 700px) {
	.wow-event-modal__nav {
		max-width: none;
		padding: 5px 5px 5px 10px;
		gap: 8px;
	}

	.wow-event-modal__nav-line {
		font-size: 10px;
	}

	.wow-event-modal__nav-btn {
		/* Bigger than desktop, not smaller — these are the primary way to
		   move between photos on a phone with no keyboard arrow keys, and
		   28px was too small a tap target on an actual iPhone. */
		width: 40px;
		height: 40px;
	}

	.wow-event-modal__nav-btn svg {
		width: 22px;
		height: 22px;
	}
}

/* Purchase panel stays a fixed, contained width (matches the product page's
   own configurator card) — the frame gets whatever's left, which is more
   than a 50/50 split would give it. */
.wow-event-modal__body {
	display: grid;
	grid-template-columns: minmax(0, 520px) 340px;
	justify-content: center;
	gap: 40px;
	align-items: center;
	padding: 30px 0;
}

@media (max-width: 700px) {
	.wow-event-modal__body {
		padding: 0;
	}

	.wow-event-modal__panel {
		padding: 14px;
	}

	.wow-event-modal__body {
		grid-template-columns: 1fr;
		gap: 18px;
	}
}

/* .frame-mockup-container / .frame-mockup-wrapper / .frame / .mat-board-*
   are global rules already defined sitewide in style.css (the same
   component the product page configurator uses) — reused here as-is.
   Crucially, the base `.frame` rule sets BOTH width and height to fixed px
   values, which makes the CSS `aspect-ratio` property a no-op (it only
   takes effect when at least one dimension is `auto`) — that silently
   broke both "frame is too big" and "orientation doesn't visually change
   anything", since the box shape never actually changed regardless of what
   JS set. Freeing height back to auto here, scoped to this modal only, is
   what lets event-catalog.js's aspect-ratio actually do anything. */
.wow-event-modal__mockup-container {
	max-width: 100%;
	margin: 0 auto;
}

/* .frame-mockup-wrapper/.frame-outer are shrink-to-fit by default (their
   flex parent, .frame-mockup-container, uses align-items:center, which
   sizes flex items to content instead of stretching them) — so a
   percentage width on .frame further down had nothing definite to resolve
   against and collapsed. Giving the wrapper an explicit width here (100% of
   the flex container's own — definite, since that one's an ordinary block
   filling the grid column) restores a proper definite-width chain all the
   way down, so .frame's own width:100% finally means something, and it
   shrinks responsively instead of needing a fixed px value that could
   overflow a narrower column. Height is still capped dynamically in JS
   (see applyFrameGeometry in event-catalog.js) so a tall vertical shot at
   this width doesn't blow out the popup's height. */
.wow-event-modal__mockup-container .frame-mockup-wrapper,
.wow-event-modal__mockup-container .frame-outer {
	width: 100%;
	max-width: 480px;
	margin: 0 auto;
}

/* width/height both auto + a max-height + the aspect-ratio JS sets (see
   applyFrameGeometry in event-catalog.js) is enough on its own for modern
   browsers to shrink the frame proportionally once it'd otherwise exceed
   500px tall — no JS "measure the rendered box and shrink it" step needed
   any more (this used to be a fixed-width column that only capped height
   via a manual post-render measurement; removed now that the mockup no
   longer resizes per chosen print size anyway, see event-catalog.js). */
.wow-event-modal__mockup-container .frame {
	width: auto;
	height: auto;
	max-height: 500px;
}

@media (max-width: 700px) {
	.wow-event-modal__mockup-container .frame-mockup-wrapper,
	.wow-event-modal__mockup-container .frame-outer {
		max-width: 300px;
	}

	.wow-event-modal__mockup-container .frame {
		max-height: 370px;
	}
}

.wow-event-modal__meta {
	font-size: 13px;
	line-height: 1.6;
	color: var(--wp--preset--color--grey);
	margin: 12px 0 0;
	text-align: center;
}

.wow-event-modal__right {
	display: flex;
	flex-direction: column;
	justify-content: center;
}

/* ── Purchase panel — frame/size selectors, price, add to cart ─────────
   Same segmented-button visual language as the product page's own
   configurator (.wow-nc__size-btn etc.), just namespaced under
   .wow-event-purchase since the markup/JS here are event-specific. Card
   styling (white surface, soft shadow, rounded corners) so it reads as its
   own contained panel sitting on top of the wall-photo background. */
.wow-event-purchase {
	background-color: #fff;
	box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
	border-radius: 20px;
	padding: 18px;
}

.wow-event-purchase__label {
	font-family: var(--wp--preset--font-family--josefin);
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 1px;
	color: var(--wp--preset--color--grey);
	margin: 0 0 8px;
}

.wow-event-purchase__label:not(:first-child) {
	margin-top: 14px;
}

.wow-event-purchase__options {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 8px;
}

.wow-event-purchase__opt {
	height: 36px;
	border-radius: var(--radius, 6px);
	border: 1px solid #e2e2e2;
	background-color: #fff;
	font-family: var(--wp--preset--font-family--josefin);
	font-size: 13px;
	font-weight: 600;
	color: var(--wp--preset--color--text);
	cursor: pointer;
	transition: border-color 0.2s ease, color 0.2s ease, background-color 0.2s ease, opacity 0.2s ease;
}

.wow-event-purchase__opt:hover,
.wow-event-purchase__opt:focus-visible {
	border-color: var(--wp--preset--color--accent);
}

.wow-event-purchase__opt.is-active {
	background-color: var(--wp--preset--color--accent);
	border-color: var(--wp--preset--color--accent);
	color: #fff;
}

.wow-event-purchase__opt:disabled {
	opacity: 0.35;
	cursor: default;
	border-color: #e2e2e2;
	background-color: #fff;
	color: var(--wp--preset--color--grey);
}

/* Row-style size selector — reuses the sitewide .wow-nc__size-* component
   (see style.css) so it matches the main product configurator's look.
   Only the .is-hidden state is new here: fully removed from layout (not
   just grayed out) once JS decides a size isn't available for the
   currently-selected frame (event-catalog.js). */
.wow-event-purchase .wow-nc__sizes {
	margin-bottom: 14px;
}

.wow-nc__size-btn.is-hidden {
	display: none;
}

/* Frame/Unframed buttons are two-line (bold uppercase title + a smaller
   descriptive line) rather than the plain single-line Size buttons, so they
   get their own height/padding/flex-column layout instead of the shared
   fixed 36px .wow-event-purchase__opt height above. */
.wow-event-purchase__opt--frame {
	height: auto;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 3px;
	padding: 10px 8px;
	text-align: center;
}

.wow-event-purchase__opt-title {
	font-family: var(--wp--preset--font-family--josefin);
	font-size: 13px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.5px;
}

.wow-event-purchase__opt-sub {
	font-size: 11px;
	font-weight: 400;
	text-transform: none;
	letter-spacing: 0;
	color: var(--wp--preset--color--grey);
}

.wow-event-purchase__opt--frame.is-active .wow-event-purchase__opt-sub {
	color: rgba(255, 255, 255, 0.85);
}

/* Price used to be its own row above the button ("Price ⋯ 110 €") — now
   written straight into the button itself by JS (event-catalog.js) as two
   spans either side of a "•" separator, so this rule sits directly above
   the button with a little breathing room instead of a full bordered row. */
.wow-event-purchase__atc {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	width: 100%;
	height: 42px;
	margin-top: 14px;
	background-color: var(--wp--preset--color--accent);
	color: #fff;
	border: none;
	border-radius: 999px;
	font-family: var(--wp--preset--font-family--josefin);
	font-size: 12px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 1px;
	cursor: pointer;
	transition: background-color 0.2s ease, opacity 0.2s ease;
}

.wow-event-purchase__atc-price {
	font-size: 14px;
}

.wow-event-purchase__atc-sep {
	opacity: 0.6;
}

/* Set by JS whenever no price applies (unavailable combo) — hides the price
   + separator rather than showing a bare "• Add to cart". */
.wow-event-purchase__atc--no-price .wow-event-purchase__atc-price,
.wow-event-purchase__atc--no-price .wow-event-purchase__atc-sep {
	display: none;
}

.wow-event-purchase__atc:hover,
.wow-event-purchase__atc:focus-visible {
	background-color: #9e2e2e;
}

.wow-event-purchase__atc:disabled {
	opacity: 0.6;
	cursor: default;
}

.wow-event-purchase__status {
	min-height: 0;
	margin: 10px 0 0;
	font-size: 12px;
	text-align: center;
	color: var(--wp--preset--color--grey);
}

.wow-event-purchase__status.is-success {
	color: #2f7d3c;
}

.wow-event-purchase__status.is-error {
	color: var(--wp--preset--color--accent);
}

/* .wow-nc__payments itself is already styled sitewide in style.css (same
   markup reused from the product page) — just a little extra breathing
   room above it here since it follows directly after the status line. */
.wow-event-purchase .wow-nc__payments {
	margin-top: 12px;
}

@media (max-width: 700px) {
	.wow-event-purchase__label:not(:first-child) {
		margin-top: 16px;
	}

	.wow-event-purchase__price-row {
		margin: 16px 0 14px;
	}
}