/* =========================================================================
   ICF Karting — v7 (consolidation pass / Oscar-grade)
   - Design system uniform (radius, hover, padding)
   - Hero refinement (1 primary CTA, sharper lead, hero rating always visible)
   - Live-now widget (sticky pod nav)
   - Brand strip (Zaufali nam)
   - Hide duplicate sections (story-pin, compare, pakiet startowy duplicate)
   - Marketing micro-elements (urgency, badges)
   ========================================================================= */

/* ===========================================================
   DESIGN SYSTEM normalization
   =========================================================== */
:root {
	--radius-card: 24px;
	--radius-pill: 999px;
	--radius-input: 14px;
	--card-bg: linear-gradient(180deg, rgba(255,255,255,.04) 0%, rgba(255,255,255,.01) 100%);
	--card-border: 1px solid rgba(255,255,255,.08);
	--card-border-hover: 1px solid rgba(255,255,255,.18);
	--card-padding: clamp(28px, 3vw, 40px);
}

/* Unified hover for all premium cards */
.bento-cell, .persona, .pass, .lemans-card, .testimonial-v2, .compare__col, .card-xl,
.feature, .timeline__step, .voucher-hero, .map-card__inner {
	transition: transform .25s var(--ease-fluid), border-color .25s var(--ease-soft),
	            background .25s var(--ease-soft), box-shadow .25s var(--ease-fluid);
}

/* Single hover treatment — translateY + border accent (no more tilt for bento) */
.bento-cell:hover { transform: translateY(-4px) !important; }
.persona:hover { transform: translateY(-4px) !important; }
.pass:hover, .lemans-card:hover, .testimonial-v2:hover, .compare__col:hover { transform: translateY(-4px) !important; }

/* ===========================================================
   HIDE duplicate sections (saving ~7000px page height)
   =========================================================== */
.story-pin,                       /* duplikuje "Tor i flota" */
section[data-chapter="Trzy gokarty"],
.compare,                         /* duplikuje karnety + LeMans */
section[data-chapter="Wybierz format"],
.starter-pack,                    /* duplikuje timeline */
.starter-pack + header { display: none !important; }
/* Zostawiamy timeline, karnety, lemans-grid, persony, voucher-hero, IG, gallery, FAQ */

/* ===========================================================
   HERO refinement
   =========================================================== */
.hero-mega__lead {
	font-size: clamp(1.05rem, 1.4vw, 1.3rem) !important;
	max-width: 480px;
	color: rgba(255,255,255,.88) !important;
	font-weight: 400;
}

/* Single primary CTA emphasis */
.hero-mega__ctas .btn-pill--primary {
	padding: 18px 32px !important;
	font-size: 1.05rem !important;
	box-shadow: 0 10px 50px -10px var(--c-accent), 0 0 0 0 rgba(255,45,32,.5);
	animation: heroCtaPulse 2.5s var(--ease-soft) infinite;
}
@keyframes heroCtaPulse {
	0%, 100% { box-shadow: 0 10px 50px -10px var(--c-accent), 0 0 0 0 rgba(255,45,32,.4); }
	50%      { box-shadow: 0 10px 50px -10px var(--c-accent), 0 0 0 12px rgba(255,45,32,0); }
}

/* Google rating — always visible, even on smaller desktop */
.hero-mega__rating {
	display: flex !important;
	bottom: clamp(20px, 4vh, 60px);
	right: clamp(16px, 4vw, 64px);
	padding: 16px 20px !important;
	background: rgba(15,15,18,.7);
	border: 1px solid rgba(255,255,255,.12);
}
@media (max-width: 880px) {
	.hero-mega__rating { display: none !important; }
}

/* ===========================================================
   LIVE-NOW widget — sticky pod headerem (urgency)
   =========================================================== */
.live-now {
	position: sticky;
	top: 88px; /* under preview banner + header */
	z-index: 80;
	display: flex; align-items: center; justify-content: center; gap: 14px;
	padding: 10px 20px;
	background: rgba(8, 8, 10, 0.85);
	backdrop-filter: saturate(180%) blur(20px);
	-webkit-backdrop-filter: saturate(180%) blur(20px);
	border-bottom: 1px solid rgba(255,255,255,.08);
	font-size: 0.85rem;
	color: var(--c-text);
	flex-wrap: wrap;
	transition: opacity .3s var(--ease-soft);
}
.live-now__group {
	display: inline-flex; align-items: center; gap: 8px;
	padding: 4px 14px;
	background: rgba(46,224,107,.08);
	border: 1px solid rgba(46,224,107,.25);
	border-radius: 999px;
}
.live-now__group--accent {
	background: rgba(255,45,32,.08);
	border-color: rgba(255,45,32,.25);
	color: var(--c-accent-2);
}
.live-now__dot {
	width: 8px; height: 8px;
	border-radius: 50%;
	background: var(--c-live);
	box-shadow: 0 0 8px var(--c-live);
	animation: livePulse 2s ease-in-out infinite;
	flex-shrink: 0;
}
.live-now__group--accent .live-now__dot { background: var(--c-accent); box-shadow: 0 0 8px var(--c-accent); }
.live-now strong { color: #fff; font-weight: 700; }
.live-now a {
	color: var(--c-accent-2);
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: 3px;
}

@media (max-width: 540px) {
	.live-now { font-size: 0.75rem; padding: 8px 12px; gap: 8px; flex-wrap: nowrap; overflow-x: auto; }
	.live-now::-webkit-scrollbar { display: none; }
	.live-now__group { padding: 3px 10px; white-space: nowrap; flex-shrink: 0; }
	.live-now a { white-space: nowrap; }
}

/* ===========================================================
   BRAND STRIP — "Zaufali nam"
   =========================================================== */
.brand-strip {
	padding: clamp(40px, 5vw, 72px) 0;
	background: var(--c-bg-deep);
	border-top: 1px solid rgba(255,255,255,.05);
	border-bottom: 1px solid rgba(255,255,255,.05);
	overflow: hidden;
}
.brand-strip__label {
	display: block;
	text-align: center;
	color: var(--c-text-3);
	font-size: 0.72rem;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	font-weight: 600;
	margin-bottom: 28px;
}
.brand-strip__list {
	display: flex;
	align-items: center;
	justify-content: space-around;
	gap: clamp(24px, 4vw, 60px);
	flex-wrap: wrap;
	max-width: 1240px;
	margin: 0 auto;
	padding: 0 var(--gutter);
	opacity: 0.5;
}
.brand-strip__item {
	font-family: var(--font-display);
	font-weight: 700;
	font-size: clamp(1rem, 1.6vw, 1.4rem);
	letter-spacing: -0.02em;
	color: rgba(255,255,255,.85);
	transition: opacity .3s, transform .25s var(--ease-spring);
	white-space: nowrap;
	cursor: default;
}
.brand-strip__item:hover { opacity: 1; transform: scale(1.05); }
.brand-strip__item span { color: var(--c-accent); }

/* ===========================================================
   "NAJCZĘŚCIEJ WYBIERANE" badge dla Sprintera + Karnetu 5×
   =========================================================== */
.popular-badge {
	position: absolute;
	top: -10px; right: 16px;
	background: linear-gradient(135deg, var(--c-accent) 0%, #ff6b3d 100%);
	color: #fff;
	font-size: 0.65rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	padding: 4px 10px;
	border-radius: 999px;
	z-index: 2;
	box-shadow: 0 6px 20px -4px rgba(255,45,32,0.5);
	white-space: nowrap;
}
.popular-badge::before {
	content: '🔥 ';
}

.bento-cell, .pass, .persona { position: relative; }

/* ===========================================================
   URGENCY counter — "Najbliższy wolny termin: ..."
   =========================================================== */
.urgency-line {
	display: inline-flex; align-items: center; gap: 8px;
	margin-top: 16px;
	padding: 10px 16px;
	background: rgba(255,180,0,.08);
	border: 1px solid rgba(255,180,0,.25);
	border-radius: 999px;
	font-size: 0.85rem;
	color: #ffb400;
	font-weight: 500;
}
.urgency-line::before {
	content: '⚡';
	font-size: 0.95rem;
}

/* ===========================================================
   FOOTER — 3 columns instead of 4 (cleaner)
   =========================================================== */
.site-footer__grid {
	grid-template-columns: 1.6fr 1fr 1fr !important;
}
@media (max-width: 880px) {
	.site-footer__grid { grid-template-columns: 1fr 1fr !important; }
}
@media (max-width: 540px) {
	.site-footer__grid { grid-template-columns: 1fr !important; }
}
/* Hide the 4th column "Informacje" — link items moved to col 3 */
.site-footer__col:nth-child(4) { display: none; }

/* ===========================================================
   MOBILE MENU — premium overhaul (tylko style, nie display!)
   =========================================================== */
@media (max-width: 960px) {
	/* Reset siatki — fixed full-screen, hidden via transform domyślnie */
	.site-nav {
		position: fixed !important;
		top: 60px !important; left: 0 !important; right: 0 !important; bottom: auto !important;
		max-height: calc(100vh - 60px) !important;
		height: auto !important;
		background: rgba(8, 8, 10, 0.96) !important;
		backdrop-filter: saturate(180%) blur(30px) !important;
		-webkit-backdrop-filter: saturate(180%) blur(30px) !important;
		padding: 32px var(--gutter) !important;
		gap: 24px !important;
		overflow-y: auto !important;
		transform: translateY(-110%) !important;
		visibility: hidden;
		transition: transform .35s var(--ease-fluid), visibility 0s linear .35s;
	}
	.site-nav.is-open {
		transform: translateY(0) !important;
		visibility: visible;
		transition: transform .35s var(--ease-fluid), visibility 0s linear 0s;
	}
	.site-nav.is-open .site-nav__list li a,
	.site-nav.is-open .site-nav__cta {
		font-size: 1.3rem;
		font-weight: 600;
		letter-spacing: -0.02em;
	}
	.site-nav__list li a {
		font-family: var(--font-display);
		padding: 14px 0 !important;
		border-bottom: 1px solid rgba(255,255,255,.06);
	}
	.site-nav__list li a::after {
		content: '→';
		float: right;
		color: var(--c-accent);
		opacity: 0;
		transition: opacity .25s, transform .25s;
	}
	.site-nav__list li:hover a::after { opacity: 1; transform: translateX(4px); }
	.site-nav__cta { margin-top: auto; padding-top: 20px; border-top: 1px solid rgba(255,255,255,.08); }
	.site-nav__cta .live-pill { display: inline-flex !important; }
}

/* ===========================================================
   Better focus states (a11y)
   =========================================================== */
*:focus-visible { outline-offset: 4px; }
.btn-pill:focus-visible { outline: 2px solid #fff; outline-offset: 4px; }

/* ===========================================================
   Section padding — uniform rhythm
   =========================================================== */
.section--xl { padding: clamp(72px, 9vw, 140px) 0 !important; }

/* ===========================================================
   Map filter — softer
   =========================================================== */
.map-section__embed iframe {
	filter: invert(0.88) hue-rotate(180deg) saturate(0.4) brightness(0.95) contrast(0.92) !important;
}

/* ===========================================================
   Bento — cleaner, 4 main cards instead of 7
   =========================================================== */
.bento {
	grid-template-columns: repeat(2, 1fr) !important;
}
@media (min-width: 880px) {
	.bento { grid-template-columns: repeat(3, 1fr) !important; grid-auto-rows: minmax(280px, 1fr); }
	.bento-cell--feature { grid-column: span 2 !important; grid-row: span 1 !important; }
	.bento-cell--wide    { grid-column: span 1 !important; }
	.bento-cell--tall    { grid-row: span 1 !important; }
}
@media (max-width: 720px) {
	.bento { grid-template-columns: 1fr !important; }
	.bento-cell--feature, .bento-cell--wide, .bento-cell--tall {
		grid-column: span 1 !important; grid-row: span 1 !important;
	}
}
/* Hide Demo widgets dla cleaner bento */
.bento-cell--slot, .bento-cell--quote, .bento-cell--board { display: none !important; }

/* Bento overlay znacznie lżejszy — obrazy widoczne */
.bento-cell__media::after {
	background: linear-gradient(180deg,
		transparent 0%,
		transparent 40%,
		rgba(0,0,0,.55) 75%,
		rgba(6,6,8,.92) 100%) !important;
}

/* Persona overlay też lżejszy */
.persona__media::after {
	background: linear-gradient(180deg,
		transparent 0%,
		transparent 35%,
		rgba(0,0,0,.55) 70%,
		rgba(6,6,8,.95) 100%) !important;
}

/* Voucher hero media gradient */
.voucher-hero__media::after {
	background: linear-gradient(90deg, rgba(31,7,7,.4) 0%, transparent 60%) !important;
}

/* Bento media z większą min-height żeby wyświetlać obraz w środku, nie tylko górę */
.bento-cell__media img {
	object-position: center 40% !important;
}

/* Card-XL media gradient */
.card-xl__media::after {
	background: linear-gradient(180deg, transparent 50%, rgba(6,6,8,.45) 100%) !important;
}

/* ===========================================================
   Hero CTA secondary — bardziej widoczny
   =========================================================== */
.hero-mega__ctas .btn-pill--ghost {
	border-color: rgba(255,255,255,.3) !important;
	background: rgba(255,255,255,.08) !important;
}

/* ===========================================================
   Trust-item icon glow on visible
   =========================================================== */
.trust-item:hover .trust-item__icon {
	background: rgba(255,45,32,0.15);
	border-color: rgba(255,45,32,0.4);
	transform: scale(1.05);
	transition: background-color .3s var(--ease-spring), border-color .3s var(--ease-spring), transform .3s var(--ease-spring);
}

/* ===========================================================
   Big quote — softer mark, better proportion
   =========================================================== */
.big-quote { padding: clamp(80px, 12vw, 160px) 0 !important; }
.big-quote__mark { font-size: clamp(3rem, 6vw, 5rem) !important; }

/* ===========================================================
   Voucher-hero — bardziej kompaktowy
   =========================================================== */
.voucher-hero { min-height: auto; }
.voucher-hero__media { min-height: 320px; }

/* ===========================================================
   Newsletter container w container layout (lepsza ramka)
   =========================================================== */
.newsletter__inner {
	background: rgba(255,255,255,.02);
	border: 1px solid rgba(255,255,255,.06);
	border-radius: 32px;
	padding: clamp(48px, 6vw, 80px) clamp(24px, 4vw, 64px);
	max-width: 880px;
}

/* ===========================================================
   Magazine gallery — uniform cells na mobile
   =========================================================== */
@media (max-width: 720px) {
	.gallery-mag { grid-auto-rows: 200px; }
	.gallery-mag__item--w3 { grid-column: span 2 !important; }
	.gallery-mag__item--h3 { grid-row: span 2 !important; }
	.gallery-mag__item--w2 { grid-column: span 1 !important; }
	.gallery-mag__item--h2 { grid-row: span 1 !important; }
}

/* ===========================================================
   Footer credit centered on smaller (lepsza struktura)
   =========================================================== */
@media (max-width: 540px) {
	.author-credit-inline { width: 100%; justify-content: center; }
}

/* ===========================================================
   Section eyebrow — mocniejszy contrast
   =========================================================== */
.section-eyebrow {
	background: rgba(255,45,32,.1);
	padding: 6px 14px;
	border-radius: 999px;
	border: 1px solid rgba(255,45,32,.25);
	color: var(--c-accent-2);
}

/* ===========================================================
   Marquee — krótszy + animacja smoother
   =========================================================== */
.marquee__track { animation-duration: 95s !important; will-change: transform; }
@media (max-width: 720px) { .marquee__track { animation-duration: 70s !important; } }

/* ===========================================================
   Section bg — usuń niektóre warianty (mniej szumu)
   =========================================================== */
.section--bg-deeper { background: var(--c-bg-deep) !important; }
.section--bg-flat { background: #0a0a0c !important; }

/* ===========================================================
   Better card borders w bento (consistent)
   =========================================================== */
.bento-cell { border: var(--card-border) !important; border-radius: var(--radius-card) !important; }
.bento-cell:hover { border: var(--card-border-hover) !important; }

/* ===========================================================
   Persona card padding (uniform)
   =========================================================== */
.persona { padding: var(--card-padding) !important; min-height: 420px; }

/* ===========================================================
   Le Mans karta — better typography
   =========================================================== */
.lemans-card { padding: var(--card-padding) !important; border-radius: var(--radius-card) !important; }

/* ===========================================================
   Pass karta — refinement
   =========================================================== */
.pass { padding: var(--card-padding) !important; border-radius: var(--radius-card) !important; }