/* ==========================================================================
   EBT Pod Dachem — style motywu
   Wartości przeniesione z mockupu ebt-pod-dachem/index.html
   (tokeny + style komponentów + style inline zamienione na klasy).
   ========================================================================== */

/* ---------- Tokeny ---------- */
:root, [data-theme="light"] {
	--navy-900: #013e78;
	--blue-700: #03529d;
	--blue-500: #0a6bc9;
	--pink-600: #e00079;
	--pink-700: #b30061;
	--pink-400: #ff66b3;
	--ink: #000000;
	--ink-900: #121212;
	--ink-soft: #292727;
	--text-muted: #5c6670;
	--on-blue: #ffffff;
	--on-blue-muted: #d6e4f5;
	--surface: #ffffff;
	--surface-muted: #f5f5f5;
	--line: #d9d9d9;
	--grey-500: #979797;
	--shadow-tile: 0 2px 8px rgba(1, 30, 60, 0.18);

	--space-1: 4px;
	--space-2: 8px;
	--space-btn-y: 12px;
	--space-btn-x: 18px;
	--space-3: 16px;
	--space-4: 24px;
	--space-5: 32px;
	--space-6: 48px;
	--space-7: 64px;
	--radius-0: 0;
	--radius-md: 14px;
	--font-sans: Inter, system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
}

/* ---------- Typografia (skala z mockupu) ---------- */
.display { font-family: var(--font-sans); font-size: 72px; line-height: 1.0; font-weight: 700; letter-spacing: -0.02em; }
.counter { font-family: var(--font-sans); font-size: 96px; line-height: 1.0; font-weight: 500; }
.h1 { font-family: var(--font-sans); font-size: 56px; line-height: 1.05; font-weight: 700; letter-spacing: -0.01em; }
.h2 { font-family: var(--font-sans); font-size: 40px; line-height: 1.1; font-weight: 700; }
.h3 { font-family: var(--font-sans); font-size: 28px; line-height: 1.2; font-weight: 700; }
.eyebrow { font-family: var(--font-sans); font-size: 20px; line-height: 1.2; font-weight: 400; letter-spacing: 0.02em; }
.body-lg { font-family: var(--font-sans); font-size: 20px; line-height: 1.4; font-weight: 400; }
.body { font-family: var(--font-sans); font-size: 16px; line-height: 1.5; font-weight: 400; }
.label { font-family: var(--font-sans); font-size: 16px; line-height: 1.0; font-weight: 500; letter-spacing: 0.02em; }
.button { font-family: var(--font-sans); font-size: 16px; line-height: 1.0; font-weight: 400; }
.button-lg { font-family: var(--font-sans); font-size: 25px; line-height: 1.0; font-weight: 400; }
.web-h1 { font-family: var(--font-sans); font-size: 36px; line-height: 1.1; font-weight: 700; }
.web-h2 { font-family: var(--font-sans); font-size: 32px; line-height: 1.15; font-weight: 700; }

/* ---------- Baza ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
	margin: 0;
	background: #ffffff;
	font-family: var(--font-sans);
	color: #000000;
	-webkit-font-smoothing: antialiased;
}
a { color: #b30061; }
a:hover { color: #000000; }
img { max-width: 100%; }
[hidden] { display: none !important; }

/* ---------- Komponenty z mockupu ---------- */
.ebt-ground {
	background: linear-gradient(135deg, var(--navy-900) 0%, var(--blue-700) 55%, var(--blue-500) 100%);
	color: var(--on-blue);
}

.ebt-btn {
	display: inline-flex;
	align-items: center;
	gap: var(--space-1);
	font: 400 16px/1 var(--font-sans);
	padding: var(--space-btn-y) var(--space-btn-x);
	border-radius: var(--radius-0);
	border: 0;
	cursor: pointer;
	text-decoration: none;
	background: var(--pink-600);
	color: var(--on-blue);
}
.ebt-btn:hover { background: var(--pink-700); color: var(--on-blue); }
.ebt-btn--black { background: var(--ink); color: var(--on-blue); }
.ebt-btn--black:hover { background: var(--ink-900); }
.ebt-btn--large { font-size: clamp(20px, 5vw, 25px); padding: 20px 40px; }
.ebt-btn--primary { background: var(--blue-700); color: var(--on-blue); }
.ebt-btn--primary:hover { background: var(--navy-900); }
.ebt-btn--inverse { background: var(--surface); color: var(--blue-700); }
.ebt-btn--inverse:hover { background: var(--surface-muted); }
.ebt-btn--outline { background: transparent; color: var(--on-blue); box-shadow: inset 0 0 0 2px var(--on-blue); }
.ebt-btn:focus-visible { outline: 3px solid var(--ink); outline-offset: 2px; }

.ebt-label {
	display: inline-block;
	background: var(--ink);
	color: var(--on-blue);
	font: 500 16px/1 var(--font-sans);
	letter-spacing: 0.02em;
	text-transform: uppercase;
	padding: var(--space-3) var(--space-3);
	border-radius: var(--radius-0);
}
.ebt-label--accent { background: var(--pink-400); color: var(--ink); }

.ebt-counter { display: inline-flex; gap: var(--space-2); }
.ebt-counter__tile {
	background: var(--surface);
	color: var(--ink-soft);
	font: 500 96px/1 var(--font-sans);
	width: 1.3em;
	padding: 0.12em 0;
	text-align: center;
	border-radius: var(--radius-md);
	box-shadow: var(--shadow-tile);
}
.ebt-counter--sm .ebt-counter__tile { font-size: 48px; border-radius: 8px; }

.ebt-distance {
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: var(--radius-0);
	padding: var(--space-4);
	color: var(--ink);
}
.ebt-distance__name { font: 700 28px/1.2 var(--font-sans); color: var(--ink); margin: 0 0 var(--space-3); }
.ebt-distance__legs { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-3); margin: 0 0 var(--space-4); }
.ebt-distance__leg dt { font: 500 13px/1.2 var(--font-sans); color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.02em; }
.ebt-distance__leg dd { margin: var(--space-1) 0 0; font: 700 20px/1.2 var(--font-sans); color: var(--ink-soft); }

/* ---------- Layout ogólny ---------- */
.ebt-container { max-width: 1280px; margin: 0 auto; }
.ebt-h2 { margin: 0; font-size: 32px; line-height: 1.15; font-weight: 700; }

/* ---------- Nagłówek ---------- */
.ebt-header { background: var(--surface); border-bottom: 1px solid var(--line); }
.ebt-header__inner {
	padding: 12px 24px;
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
}
.ebt-header__logo { display: block; width: 64px; height: 64px; }
.ebt-header__logo img { width: 64px; height: 64px; display: block; }
.ebt-header__nav { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 24px; font-size: 15px; }
.ebt-nav__links { display: flex; flex-wrap: wrap; gap: 8px 24px; }
.ebt-nav__link { color: var(--ink); text-decoration: none; }

@media (max-width: 640px) {
	.ebt-nav__links { display: none !important; }
}

/* ---------- Hero ---------- */
.ebt-hero {
	background: var(--pink-600);
	color: var(--on-blue);
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 460px), 1fr));
	align-items: stretch;
}
.ebt-hero__content {
	min-width: 0;
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 24px;
	padding: clamp(40px, 8vw, 64px) clamp(20px, 5vw, 48px);
}
.ebt-hero__logo { width: 180px; height: auto; display: block; }
.ebt-hero__title {
	margin: 0;
	font-size: clamp(40px, 11vw, 64px);
	line-height: 1.0;
	font-weight: 800;
	letter-spacing: -0.02em;
}
.ebt-hero__lede { margin: 0; font-size: 20px; line-height: 1.45; max-width: 560px; }
.ebt-hero__actions { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; }
.ebt-hero__secondary { color: var(--on-blue); font-size: 16px; }
.ebt-hero__meta { display: flex; flex-direction: column; gap: 12px; margin-top: 8px; }

.ebt-banner { font-size: 16px; font-weight: 500; }
.ebt-banner--solid {
	display: inline-block;
	background: var(--ink);
	color: var(--on-blue);
	padding: 12px 16px;
	font-size: 18px;
	font-weight: 700;
}
.ebt-banner--solid .ebt-banner { font: inherit; padding: 0; }

.ebt-countdown { display: flex; flex-wrap: wrap; gap: 8px; }
.ebt-countdown__unit { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.ebt-countdown__value {
	background: var(--surface);
	color: var(--ink-soft);
	font-size: clamp(32px, 9vw, 44px);
	font-weight: 500;
	line-height: 1;
	width: clamp(64px, 19vw, 88px);
	padding: 14px 0;
	text-align: center;
	border-radius: var(--radius-md);
	box-shadow: var(--shadow-tile);
	font-variant-numeric: tabular-nums;
}
.ebt-countdown__label { font-size: 13px; font-weight: 500; }

.ebt-hero__media { min-width: 0; min-height: clamp(380px, 60vw, 560px); position: relative; }
.ebt-hero__media img {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 58% 35%;
}

/* ---------- Sekcje ---------- */
.ebt-section { background: var(--surface); }
.ebt-section--muted { background: var(--surface-muted); }
.ebt-section--dark { background: var(--ink-900); color: var(--on-blue); }
.ebt-section--cta { background: var(--ink); color: var(--on-blue); }

.ebt-section__inner { padding: 80px 24px; display: flex; flex-direction: column; gap: 40px; }
.ebt-section__inner--tight { gap: 32px; }
.ebt-section__head { display: flex; flex-direction: column; gap: 12px; max-width: 720px; }
.ebt-lede { margin: 0; font-size: 17px; line-height: 1.55; color: var(--text-muted); }
.ebt-section--dark .ebt-lede { color: var(--line); }

/* ---------- Dystans / etapy ---------- */
.ebt-stages { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 24px; }
.ebt-stage { border: 1px solid var(--line); display: flex; flex-direction: column; }
.ebt-stage__img { display: block; width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.ebt-stage__body { padding: 32px; display: flex; flex-direction: column; gap: 12px; }
.ebt-stage__step { font-size: 14px; font-weight: 500; color: var(--pink-700); }
.ebt-stage__distance { font-size: 44px; font-weight: 800; line-height: 1; letter-spacing: -0.02em; }
.ebt-stage__name { font-size: 20px; font-weight: 700; }
.ebt-stage__text { margin: 0; font-size: 16px; line-height: 1.55; color: var(--text-muted); }

/* ---------- Terminy ---------- */
.ebt-dates__wrap { padding: 80px 24px; display: flex; flex-wrap: wrap; gap: 48px; }
.ebt-dates__col { flex: 1 1 360px; min-width: 0; display: flex; flex-direction: column; gap: 16px; }
.ebt-dates__highlight { background: var(--ink); color: var(--on-blue); padding: 24px; display: flex; flex-direction: column; gap: 8px; }
.ebt-dates__highlight-label { font-size: 14px; font-weight: 500; color: var(--pink-400); }
.ebt-dates__highlight-text { font-size: 18px; line-height: 1.45; }
.ebt-dates__list {
	flex: 1 1 480px;
	min-width: 0;
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 1px;
	background: var(--line);
	border: 1px solid var(--line);
}
.ebt-dates__item {
	background: var(--surface);
	padding: 20px 24px;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 8px;
	align-items: baseline;
}
.ebt-dates__date { font-size: 22px; font-weight: 700; }
.ebt-dates__meta { font-size: 15px; color: var(--text-muted); }

/* ---------- Opłaty ---------- */
.ebt-plans { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: 24px; }
.ebt-plan { border: 1px solid var(--line); padding: 32px; display: flex; flex-direction: column; gap: 16px; }
.ebt-plan--dark { background: var(--ink); color: var(--on-blue); border: 0; }
.ebt-plan--dark .ebt-plan__text { color: var(--on-blue); }
.ebt-plan .ebt-btn { align-self: flex-start; }
.ebt-plan__head { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.ebt-plan__title { font-size: 20px; font-weight: 700; }
.ebt-plan__badge { background: var(--pink-400); color: var(--ink); font-size: 13px; font-weight: 700; padding: 6px 10px; }
.ebt-plan__price { font-size: 48px; font-weight: 800; line-height: 1; letter-spacing: -0.02em; }
.ebt-plan__text { margin: 0; font-size: 16px; line-height: 1.55; color: var(--text-muted); }

.ebt-features {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
	gap: 24px;
	border-top: 1px solid var(--line);
	padding-top: 32px;
}
.ebt-feature { display: flex; flex-direction: column; gap: 8px; }
.ebt-feature__title { font-size: 18px; font-weight: 700; }
.ebt-feature__text { margin: 0; font-size: 16px; line-height: 1.55; color: var(--text-muted); }

/* ---------- Praktycznie ---------- */
.ebt-practical__wrap { padding: 80px 24px; display: flex; flex-wrap: wrap; gap: 48px; align-items: flex-start; }
.ebt-practical__col { flex: 1 1 520px; min-width: 0; display: flex; flex-direction: column; gap: 24px; }
.ebt-tips {
	margin: 0;
	padding: 0;
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: 1px;
	background: var(--line);
	border: 1px solid var(--line);
}
.ebt-tips__item { background: var(--surface); padding: 20px 24px; display: flex; flex-direction: column; gap: 4px; }
.ebt-tips__title { font-size: 17px; font-weight: 700; }
.ebt-tips__text { font-size: 15px; line-height: 1.5; color: var(--text-muted); }
.ebt-practical__aside { flex: 1 1 360px; min-width: 0; display: flex; flex-direction: column; gap: 16px; }
.ebt-practical__img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.ebt-practical__note { font-size: 15px; line-height: 1.5; color: var(--text-muted); }

/* ---------- Atmosfera / galeria ---------- */
.ebt-gallery { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 8px; }
.ebt-gallery__img { display: block; width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }

/* ---------- Zapisy / CTA ---------- */
.ebt-signup__wrap {
	padding: 80px 24px;
	display: flex;
	flex-wrap: wrap;
	gap: 32px;
	align-items: center;
	justify-content: space-between;
}
.ebt-signup__content { flex: 1 1 520px; min-width: 0; display: flex; flex-direction: column; gap: 12px; }
.ebt-signup__title {
	margin: 0;
	font-size: clamp(28px, 7vw, 40px);
	line-height: 1.1;
	font-weight: 800;
	letter-spacing: -0.01em;
}
.ebt-signup__text { margin: 0; font-size: 18px; line-height: 1.5; color: var(--line); }

/* ---------- Stopka ---------- */
.ebt-footer { background: var(--ink-900); color: var(--on-blue); }
.ebt-footer__inner { padding: 40px 24px; display: flex; flex-wrap: wrap; gap: 24px; align-items: center; justify-content: space-between; }
.ebt-footer__brand { display: flex; gap: 16px; align-items: center; }
.ebt-footer__brand img { width: 140px; height: auto; display: block; }
.ebt-footer__org { font-size: 14px; line-height: 1.5; }
.ebt-footer__link { color: var(--on-blue); font-size: 14px; }

/* ---------- Animacje wejścia (data-reveal) ---------- */
/* Stan ukryty aktywny tylko, gdy reveal.js doda klasę .ebt-animations —
   bez JS treść jest widoczna od razu. */
.ebt-animations [data-reveal] {
	opacity: 0;
	transform: translateY(18px);
	transition:
		opacity 0.55s ease var(--ebt-d, 0ms),
		transform 0.55s ease var(--ebt-d, 0ms);
}
.ebt-animations [data-reveal].is-visible {
	opacity: 1;
	transform: none;
}

@media (prefers-reduced-motion: reduce) {
	.ebt-animations [data-reveal] {
		opacity: 1;
		transform: none;
		transition: none;
	}
}