/* ==========================================================================
   Fonts (self-hosted; see .claude/docs/architecture.md for why)
   Only 2 fonts in use: Big Shoulders Display (everything, for now) and Akony
   (reserved for specific elements TBD — not applied anywhere yet). Barlow
   Condensed and Archivo were removed per that decision.
   ========================================================================== */

@font-face {
	font-family: 'Big Shoulders Display';
	font-style: normal;
	font-weight: 400 900;
	font-display: swap;
	src: url('../fonts/big-shoulders-display/big-shoulders-display-latin-ext.woff2') format('woff2');
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
	font-family: 'Big Shoulders Display';
	font-style: normal;
	font-weight: 400 900;
	font-display: swap;
	src: url('../fonts/big-shoulders-display/big-shoulders-display-latin.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Weight 100 ships as a separate static file (not part of the 400-900 file
   above) — needed for the date/venue line's font-weight: 100. */
@font-face {
	font-family: 'Big Shoulders Display';
	font-style: normal;
	font-weight: 100;
	font-display: swap;
	src: url('../fonts/big-shoulders-display/big-shoulders-display-100-latin-ext.woff2') format('woff2');
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
	font-family: 'Big Shoulders Display';
	font-style: normal;
	font-weight: 100;
	font-display: swap;
	src: url('../fonts/big-shoulders-display/big-shoulders-display-100-latin.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Akony — free display font by Vladimir Klenov (Behance/Gumroad), obtained
   via cufonfonts.com's web-font packaging. Single static weight (no italic,
   no unicode-range split needed — file already covers Latin + Latin Ext). */
@font-face {
	font-family: 'Akony';
	font-style: normal;
	/* Single static file, only one real weight — declared as a range so any
	   selector requesting a bolder weight still resolves to this face instead
	   of silently falling back to Impact/sans-serif. */
	font-weight: 400 900;
	font-display: swap;
	src: url('../fonts/akony/akony.woff') format('woff');
}

/* ==========================================================================
   Tokens
   ========================================================================== */

:root {
	--bop-bg: #08080a;
	--bop-white: #ffffff;
	--bop-gold: #ffd185;
	--bop-gray: #d9d9d9;
	--bop-gray-75: rgba(217, 217, 217, .75);
	--bop-gray-70: rgba(217, 217, 217, .7);
	--bop-gray-50: rgba(217, 217, 217, .5);
	--bop-gray-45: rgba(217, 217, 217, .45);
	--bop-gray-30: rgba(217, 217, 217, .3);
	--bop-hairline: rgba(255, 255, 255, .08);

	--bop-font-display: 'Big Shoulders Display', Impact, sans-serif;
	--bop-font-akony: 'Akony', Impact, sans-serif;

	/* Only 2 fonts site-wide for now (Big Shoulders Display + Akony) — these
	   two aliases exist so callers can keep saying "condensed"/"body" text
	   without every selector needing to change if a 3rd font comes back later. */
	--bop-font-condensed: var(--bop-font-display);
	--bop-font-body: var(--bop-font-display);
}

/* ==========================================================================
   Base
   ========================================================================== */

.bop-landing,
.bop-landing * {
	box-sizing: border-box;
}

.bop-landing {
	margin: 0;
	background: var(--bop-bg);
}

.bop-landing a {
	text-decoration: none;
}

/* ==========================================================================
   Page container + background
   Mobile-first: unqualified rules below are the ≤1023px (mobile) values from
   the spec; the 1024px and 1280px media queries layer on the laptop/desktop
   values. The spec's only structural (not just sizing) change is the cards
   row/column switch at the laptop breakpoint.
   ========================================================================== */

.bop-page {
	display: flex;
	flex-direction: column;
	box-sizing: border-box;
	padding: 56px 28px 28px;
	background:
		radial-gradient(70% 26% at 84% 4%, rgba(255, 209, 133, .20), rgba(255, 209, 133, 0) 70%),
		radial-gradient(80% 24% at 6% 22%, rgba(36, 44, 72, .55), rgba(36, 44, 72, 0) 72%),
		radial-gradient(80% 22% at 70% 62%, rgba(253, 203, 119, .10), rgba(253, 203, 119, 0) 70%),
		radial-gradient(90% 30% at 20% 88%, rgba(22, 26, 42, .65), rgba(22, 26, 42, 0) 75%),
		var(--bop-bg);
}

@media (min-width: 1024px) {
	.bop-page {
		padding: 64px 64px 36px;
		background:
			radial-gradient(46% 38% at 82% 6%, rgba(255, 209, 133, .19), rgba(255, 209, 133, 0) 70%),
			radial-gradient(48% 38% at 8% 26%, rgba(36, 44, 72, .55), rgba(36, 44, 72, 0) 72%),
			radial-gradient(52% 40% at 66% 92%, rgba(253, 203, 119, .10), rgba(253, 203, 119, 0) 70%),
			radial-gradient(66% 54% at 24% 74%, rgba(22, 26, 42, .65), rgba(22, 26, 42, 0) 75%),
			var(--bop-bg);
	}
}

@media (min-width: 1280px) {
	.bop-page {
		padding: 80px 96px 44px;
		background:
			radial-gradient(58% 42% at 80% 6%, rgba(255, 209, 133, .19), rgba(255, 209, 133, 0) 70%),
			radial-gradient(46% 38% at 10% 26%, rgba(36, 44, 72, .55), rgba(36, 44, 72, 0) 72%),
			radial-gradient(52% 40% at 66% 92%, rgba(253, 203, 119, .10), rgba(253, 203, 119, 0) 70%),
			radial-gradient(64% 54% at 26% 74%, rgba(22, 26, 42, .65), rgba(22, 26, 42, 0) 75%),
			var(--bop-bg);
	}
}

/* ==========================================================================
   Header (wordmark + date + CTA line)
   ========================================================================== */

.bop-header {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: 14px;
}

@media (min-width: 1024px) {
	.bop-header { gap: 16px; }
}

@media (min-width: 1280px) {
	.bop-header { gap: 18px; }
}

.bop-wordmark {
	margin: 0;
	font-family: var(--bop-font-display);
	font-weight: 900;
	font-size: 104px;
	line-height: .82;
	color: var(--bop-white);
	text-shadow: 0 0 60px rgba(255, 209, 133, .28);
}

@media (min-width: 1024px) {
	.bop-wordmark {
		font-size: 144px;
		text-shadow: 0 0 80px rgba(255, 209, 133, .26);
	}
}

@media (min-width: 1280px) {
	.bop-wordmark {
		font-size: 184px;
		letter-spacing: -.01em;
		text-shadow: 0 0 90px rgba(255, 209, 133, .28);
	}
}

/* Real logo artwork, when uploaded via ACF, replaces .bop-wordmark above.
   Sized to roughly the same optical height as the text it replaces, with the
   same gold glow as a drop-shadow (text-shadow doesn't apply to images). */
.bop-logo-wrap {
	margin: 0;
	line-height: 0;
}

.bop-logo {
	display: block;
	width: auto;
	height: 40px;
	filter: drop-shadow(0 0 60px rgba(255, 209, 133, .28));
}

@media (min-width: 1024px) {
	.bop-logo {
		height: 80px;
		filter: drop-shadow(0 0 80px rgba(255, 209, 133, .26));
	}
}

@media (min-width: 1280px) {
	.bop-logo {
		height: 96px;
		filter: drop-shadow(0 0 90px rgba(255, 209, 133, .28));
	}
}

.bop-date {
	margin: 0;
	font-family: var(--bop-font-condensed);
	font-weight: 400;
	font-size: 16px;
	line-height: 1.5;
	letter-spacing: .2em;
	text-transform: uppercase;
	color: var(--bop-gray-75);
}

.bop-date__venue {
	display: block;
}

.bop-date__sep {
	display: none;
}

@media (min-width: 1024px) {
	.bop-date {
		font-size: 24px;
		line-height: normal;
	}
	.bop-date__venue { display: inline; }
	.bop-date__sep { display: inline; }
}

@media (min-width: 1280px) {
	.bop-date { font-size: 28px; }
}

.bop-cta {
	margin: 6px 0 -8px;
	font-family: var(--bop-font-condensed);
	font-weight: 400;
	font-size: 20px;
	letter-spacing: .5em;
	text-transform: uppercase;
	color: var(--bop-white);
}

@media (min-width: 1024px) {
	.bop-cta { margin-top: 8px; font-size: 36px; margin-bottom: -10px; }
}

@media (min-width: 1280px) {
	.bop-cta { margin-top: 10px; font-size: 42px; margin-bottom: -12px; }
}

.bop-hype {
	margin: 0;
	font-family: var(--bop-font-akony);
	font-weight: 400;
	line-height: .85;
	letter-spacing: -.01em;
	text-transform: uppercase;
	text-align: center;
	font-size: 32px;
	color: var(--bop-gold);
	filter: drop-shadow(0 4px 6px rgba(0, 0, 0, .5));
}

.bop-hype__number {
	-webkit-text-stroke: 2px var(--bop-gold);
}
/* "NASTKA" only: hollow letters — transparent fill, gold border. Margin
   pushes it away from "11", which otherwise butts right up against it. */
.bop-hype__outline {
	margin-left: .12em;
	color: transparent;
	-webkit-text-stroke: 2px var(--bop-gold);
}

@media (min-width: 1024px) {
	.bop-hype { font-size: 48px; }
}

@media (min-width: 1280px) {
	.bop-hype { font-size: 72px; }
}

/* ==========================================================================
   Cards
   ========================================================================== */

.bop-cards {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 24px;
	margin-top: 56px;
}

@media (min-width: 1024px) {
	.bop-cards {
		flex-direction: row;
		justify-content: center;
		align-items: stretch;
		gap: 32px;
		margin-top: 76px;
	}
}

@media (min-width: 1280px) {
	.bop-cards { gap: 48px; margin-top: 96px; }
}

.bop-card {
	display: flex;
	align-items: flex-end;
	justify-content: center;
	position: relative;
	overflow: hidden;
	width: 300px;
	height: 240px;
	padding: 0 24px 38px;
	border-radius: 24px;
	color: var(--bop-gray);
	cursor: pointer;
	box-shadow:
		inset 0 -170px 130px -50px rgba(0, 0, 0, .97),
		inset 0 0 90px 20px rgba(0, 0, 0, .55),
		inset 0 0 0 1px var(--bop-hairline);
	transition: color .25s ease;
}

/* Darkening overlay, kept as its own static layer (per the design's "photo-only
   zoom without scaling the gradient" intent) — sits above the photo, below the label. */
.bop-card::before {
	content: '';
	position: absolute;
	inset: 0;
	z-index: 1;
	background: linear-gradient(rgba(0, 0, 0, .10), rgba(0, 0, 0, .68));
	pointer-events: none;
}

/* The photo itself: a separate absolutely-positioned layer, always sized with
   `cover` (never a raw percentage — a percentage-only background-size scales
   width and lets height default to "auto"/aspect-preserving, which left a gap
   at the top of the card for any photo whose aspect ratio didn't happen to
   match the mockup's `dude.png`). Zooming via `transform` on this element
   instead keeps it gapless at every scale and animates smoothly, instead of
   snapping between two different sizing algorithms (`cover` vs. a percentage). */
.bop-card__photo {
	position: absolute;
	inset: 0;
	z-index: 0;
	background-image: var(--bop-card-img-mobile);
	background-position: center;
	background-size: cover;
	background-repeat: no-repeat;
	transition: transform .55s ease;
}

@media (min-width: 1024px) {
	.bop-card__photo { background-image: var(--bop-card-img-desktop); }
}

.bop-card:hover .bop-card__photo,
.bop-card:focus-visible .bop-card__photo {
	transform: scale(1.12);
}

.bop-card:hover,
.bop-card:focus-visible {
	color: var(--bop-gold);
}

.bop-card:focus-visible {
	outline: 2px solid var(--bop-white);
	outline-offset: 4px;
}

@media (min-width: 1024px) {
	.bop-card {
		width: 300px;
		height: 560px;
		padding: 0 26px 44px;
		border-radius: 26px;
		box-shadow:
			inset 0 -180px 140px -50px rgba(0, 0, 0, .97),
			inset 0 0 90px 20px rgba(0, 0, 0, .55),
			inset 0 0 0 1px var(--bop-hairline);
	}
	.bop-card:hover .bop-card__photo,
	.bop-card:focus-visible .bop-card__photo { transform: scale(1.14); }
}

@media (min-width: 1280px) {
	.bop-card {
		width: 360px;
		height: 600px;
		padding: 0 32px 48px;
		border-radius: 28px;
		box-shadow:
			inset 0 -190px 150px -50px rgba(0, 0, 0, .97),
			inset 0 0 90px 20px rgba(0, 0, 0, .55),
			inset 0 0 0 1px var(--bop-hairline);
	}
}

.bop-card__label {
	position: relative;
	z-index: 2;
	font-family: var(--bop-font-display);
	font-weight: 800;
	font-size: 32px;
	line-height: .96;
	letter-spacing: .03em;
	text-align: center;
	text-transform: uppercase;
	color: currentColor;
}

@media (min-width: 1024px) {
	.bop-card__label { font-size: 34px; }
}

@media (min-width: 1280px) {
	.bop-card__label { font-size: 40px; }
}

/* ==========================================================================
   Social / links row
   ========================================================================== */

.bop-social {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 18px;
	margin-top: 48px;
}

/* Mobile: the 4 icons form their own 2-column grid (not one long vertical
   stack) — the Regulamin pill stays a separate row below, via the flex
   column above. Matches the sponsor grid's 2-column pattern for consistency. */
.bop-social__icons {
	display: grid;
	grid-template-columns: 1fr 1fr;
	justify-items: center;
	gap: 16px;
}

@media (min-width: 1024px) {
	.bop-social {
		flex-direction: row;
		justify-content: center;
		gap: 18px;
		margin-top: 60px;
	}
	.bop-social__icons {
		display: flex;
		gap: 18px;
	}
}

@media (min-width: 1280px) {
	.bop-social { gap: 20px; margin-top: 72px; }
	.bop-social__icons { gap: 20px; }
}

.bop-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 64px;
	height: 64px;
	border-radius: 50%;
	border: 1px solid var(--bop-gray-45);
	background: transparent;
	color: var(--bop-gray-70);
	font-size: 22px;
	transition: border-color .2s ease, color .2s ease;
}

.bop-icon:hover,
.bop-icon:focus-visible {
	border-color: var(--bop-white);
	color: var(--bop-white);
}

.bop-icon:focus-visible {
	outline: 2px solid var(--bop-white);
	outline-offset: 2px;
}

.bop-pill {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 64px;
	padding: 0 40px;
	border-radius: 999px;
	border: 1px solid var(--bop-gray-45);
	background: transparent;
	font-family: var(--bop-font-condensed);
	font-weight: 600;
	font-size: 18px;
	letter-spacing: .22em;
	text-transform: uppercase;
	color: var(--bop-gray-70);
	transition: border-color .2s ease, color .2s ease;
}

.bop-pill:hover,
.bop-pill:focus-visible {
	border-color: var(--bop-white);
	color: var(--bop-white);
}

.bop-pill:focus-visible {
	outline: 2px solid var(--bop-white);
	outline-offset: 2px;
}

@media (min-width: 1024px) {
	.bop-pill { padding: 0 32px; font-size: 18px; }
}

@media (min-width: 1280px) {
	.bop-pill { padding: 0 34px; font-size: 19px; }
}

/* ==========================================================================
   Footer
   ========================================================================== */

.bop-footer {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 6px;
	margin-top: auto;
	padding-top: 56px;
}

@media (min-width: 1024px) {
	.bop-footer { padding-top: 80px; }
}

@media (min-width: 1280px) {
	.bop-footer { padding-top: 96px; }
}

.bop-footer__copy {
	font-family: var(--bop-font-body);
	font-size: 12px;
	letter-spacing: .1em;
	color: var(--bop-gray-45);
}

@media (min-width: 1024px) {
	.bop-footer__copy { font-size: 13px; }
}

/* ==========================================================================
   Reduced motion
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
	.bop-card {
		transition: color .25s ease;
	}
	.bop-card:hover,
	.bop-card:focus-visible {
		transform: none;
	}
	.bop-card__photo {
		transition: none;
	}
	.bop-card:hover .bop-card__photo,
	.bop-card:focus-visible .bop-card__photo {
		transform: none;
	}
}

/* ==========================================================================
   Regulamin (rules/terms) page — template-regulamin.php
   ========================================================================== */

.bop-legal {
	box-sizing: border-box;
	max-width: 800px;
	margin: 0 auto;
	padding: 56px 28px 80px;
	background: var(--bop-bg);
	font-family: var(--bop-font-body);
	color: var(--bop-gray);
}

.bop-legal__back {
	display: inline-block;
	margin-bottom: 32px;
	font-family: var(--bop-font-condensed);
	font-weight: 600;
	font-size: 15px;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--bop-gray-70);
	transition: color .2s ease;
}

.bop-legal__back:hover,
.bop-legal__back:focus-visible {
	color: var(--bop-white);
}

.bop-legal__title {
	margin: 0 0 32px;
	font-family: var(--bop-font-display);
	font-weight: 800;
	font-size: 40px;
	line-height: 1.05;
	color: var(--bop-white);
}

.bop-legal__body {
	font-size: 16px;
	line-height: 1.7;
}

.bop-legal__body p,
.bop-legal__body ol,
.bop-legal__body ul {
	margin: 0 0 20px;
}

.bop-legal__body strong {
	display: inline-block;
	margin-top: 8px;
	color: var(--bop-white);
}

.bop-legal__body li {
	margin-bottom: 12px;
}

.bop-legal__body a {
	color: var(--bop-gold);
	text-decoration: underline;
}

@media (min-width: 1024px) {
	.bop-legal { padding: 80px 64px 96px; }
	.bop-legal__title { font-size: 48px; }
}

/* ==========================================================================
   Toast (email-copy confirmation)
   ========================================================================== */

.bop-toast {
	position: fixed;
	left: 50%;
	bottom: 28px;
	z-index: 100;
	max-width: calc(100vw - 40px);
	padding: 14px 24px;
	border-radius: 12px;
	border: 1px solid var(--bop-gray-45);
	background: #17171a;
	box-shadow: 0 12px 32px rgba(0, 0, 0, .45);
	font-family: var(--bop-font-body);
	font-size: 14px;
	color: var(--bop-white);
	text-align: center;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	pointer-events: none;
	opacity: 0;
	transform: translate(-50%, 10px);
	transition: opacity .25s ease, transform .25s ease;
}

.bop-toast.is-visible {
	opacity: 1;
	transform: translate(-50%, 0);
}

@media (min-width: 1024px) {
	.bop-toast { bottom: 40px; font-size: 15px; }
}

@media (prefers-reduced-motion: reduce) {
	.bop-toast {
		transition: opacity .25s ease;
		transform: translate(-50%, 0);
	}
}