/* =========================================================================
   ICF Karting — v8 (Oscar-grade pass)
   - Bottom-nav: 3 buttons, no hamburger
   - Real Google Maps satellite embed
   - Cinema photo color grading
   - Section diagonal dividers
   - Branded loader + page intro
   - Custom cursor (pointer-fine devices)
   - Sezonowy banner mobile fix
   - Live-now mobile stacked
   - Hero rhythm refinement
   - Better CTA hover states
   ========================================================================= */

/* ===========================================================
   BRANDED LOADER — first paint moment
   =========================================================== */
.brand-loader {
	position: fixed;
	inset: 0;
	background: var(--c-bg-deep);
	z-index: 9999;
	display: flex;
	align-items: center;
	justify-content: center;
	pointer-events: none;
	animation: loaderOut 1.2s var(--ease-fluid) .35s forwards;
}
.brand-loader__logo {
	width: clamp(140px, 18vw, 240px);
	opacity: 0;
	transform: scale(0.92);
	animation: loaderLogo 1.4s var(--ease-fluid) forwards;
	filter: drop-shadow(0 0 30px rgba(255,45,32,0.4));
}
.brand-loader__bar {
	position: absolute;
	bottom: 22%;
	left: 50%;
	transform: translateX(-50%);
	width: 160px;
	height: 2px;
	background: rgba(255,255,255,.06);
	overflow: hidden;
	border-radius: 2px;
}
.brand-loader__bar::before {
	content: '';
	position: absolute; inset: 0;
	width: 100%;
	background: linear-gradient(90deg, transparent, var(--c-accent), transparent);
	animation: loaderBar 1.2s var(--ease-soft) infinite;
}
@keyframes loaderLogo {
	0%   { opacity: 0; transform: scale(0.92); }
	30%  { opacity: 1; transform: scale(1); }
	100% { opacity: 1; transform: scale(1); }
}
@keyframes loaderBar {
	from { transform: translateX(-100%); }
	to   { transform: translateX(100%); }
}
@keyframes loaderOut {
	to { opacity: 0; visibility: hidden; transform: scale(1.05); }
}
@media (prefers-reduced-motion: reduce) {
	.brand-loader { display: none; }
}

/* Page enter delayed by loader */
body { animation: pageEnter 1s var(--ease-fluid) .8s both !important; }

/* ===========================================================
   CUSTOM CURSOR — premium on hover devices only
   =========================================================== */
@media (hover: hover) and (pointer: fine) {
	.cursor-dot {
		position: fixed;
		top: 0; left: 0;
		width: 8px; height: 8px;
		background: var(--c-accent);
		border-radius: 50%;
		pointer-events: none;
		z-index: 9998;
		mix-blend-mode: exclusion;
		transition: width .25s var(--ease-spring), height .25s var(--ease-spring), opacity .2s;
		transform: translate(-50%, -50%);
		opacity: 0;
		will-change: transform;
	}
	.cursor-dot.is-active { opacity: 1; }
	.cursor-dot.is-hover { width: 40px; height: 40px; background: rgba(255,45,32,0.4); mix-blend-mode: normal; }

	/* Don't show on input/text fields */
	body:has(input:focus, textarea:focus) .cursor-dot { opacity: 0; }
}

/* ===========================================================
   BOTTOM NAV — 3 buttons, no hamburger (cleaner)
   =========================================================== */
@media (max-width: 720px) {
	.bottom-nav {
		grid-template-columns: 1fr 1.4fr 1fr !important;
		padding: 10px 8px calc(10px + env(safe-area-inset-bottom)) 8px !important;
		gap: 6px !important;
	}
	.bottom-nav__item {
		min-height: 60px !important;
		font-size: 0.7rem !important;
		font-weight: 600 !important;
		gap: 4px !important;
	}
	.bottom-nav__item--cta {
		font-size: 0.85rem !important;
		font-weight: 700 !important;
		letter-spacing: -0.01em;
	}
	.bottom-nav__icon { width: 24px !important; height: 24px !important; }
	/* Hide menu (4th) — header hamburger covers this */
	.bottom-nav__item--menu { display: none !important; }
}

/* ===========================================================
   SEZONOWY banner — mobile fix (jedna linia + button kompakt)
   =========================================================== */
.season-strip {
	flex-wrap: nowrap !important;
	overflow-x: auto;
	white-space: nowrap;
	font-size: 0.85rem !important;
	padding: 12px 18px !important;
	-webkit-overflow-scrolling: touch;
}
.season-strip::-webkit-scrollbar { display: none; }
.season-strip > * { flex-shrink: 0; }
.season-strip a { white-space: nowrap; }
@media (max-width: 540px) {
	.season-strip { font-size: 0.75rem !important; padding: 10px 14px !important; gap: 10px !important; }
	.season-strip__icon { width: 20px !important; height: 20px !important; font-size: 0.8rem !important; }
}

/* ===========================================================
   LIVE-NOW widget — mobile better readability
   =========================================================== */
.live-now {
	top: 88px !important; /* uniform pod headerem */
}
@media (max-width: 720px) {
	.live-now {
		top: 60px !important; /* mobile preview-banner is hidden, only banner remains */
		padding: 8px 14px !important;
		gap: 8px !important;
		font-size: 0.78rem !important;
	}
	.live-now__group { padding: 3px 9px !important; font-size: 0.72rem !important; }
	.live-now__group strong { font-size: 0.78rem; }
	.live-now a { font-size: 0.75rem; }
}

/* ===========================================================
   PHOTO COLOR GRADING — cinema look
   =========================================================== */
.hero-mega__media img,
.hero-mega__media video,
.bento-cell__media img,
.bento-cell__media video,
.persona__media img,
.voucher-hero__media img,
.split__media img,
.gallery-mag__item img,
.fleet-card__media img {
	filter: contrast(1.06) saturate(0.94) brightness(0.96);
}

/* IG posts — subtle Instagram-style filter */
.ig-post img { filter: contrast(1.02) saturate(1.05); }

/* ===========================================================
   SECTION DIVIDERS — diagonal cuts between sections
   =========================================================== */
.section--bg-deeper, .section--bg-flat {
	position: relative;
}
.divider-cut {
	position: relative;
	height: 1px;
	margin: 0;
	background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,.08) 50%, transparent 100%);
}

/* ===========================================================
   MAP — refined dark theme + fade edges
   =========================================================== */
.map-section {
	min-height: 600px !important;
}
.map-section__embed iframe {
	filter: invert(0.9) hue-rotate(180deg) saturate(0.5) brightness(0.95) contrast(0.92) !important;
	min-height: 600px;
}
.map-card {
	min-height: 600px !important;
}

/* ===========================================================
   HERO — better rhythm + slight floating
   =========================================================== */
.hero-mega__inner {
	padding-bottom: clamp(80px, 10vh, 140px);
}
.hero-mega__title {
	margin-bottom: 24px !important;
}
.hero-mega__features {
	margin-top: 36px !important;
	padding-top: 32px !important;
}

/* CTA primary — refined glow */
.btn-pill--primary {
	background: linear-gradient(135deg, var(--c-accent) 0%, #ff5640 100%) !important;
	border: 1px solid rgba(255,255,255,.1);
}
.btn-pill--primary:hover {
	background: linear-gradient(135deg, #ff5640 0%, var(--c-accent) 100%) !important;
	border-color: rgba(255,255,255,.2);
}

/* ===========================================================
   TYPOGRAPHY refinement — tighter Space Grotesk
   =========================================================== */
.hero-mega__title em {
	background: linear-gradient(180deg, #ff5640 0%, var(--c-accent) 100%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
}

/* ===========================================================
   CARD hover refinement — subtle red border glow
   =========================================================== */
.bento-cell:hover, .persona:hover, .pass:hover, .lemans-card:hover,
.testimonial-v2:hover, .compare__col:hover, .card-xl:hover {
	border-color: rgba(255, 45, 32, 0.35) !important;
	box-shadow: 0 24px 60px -20px rgba(0,0,0,0.5), 0 0 0 1px rgba(255,45,32,0.1);
}

/* ===========================================================
   IG follow button — bardziej prominent
   =========================================================== */
.ig-feed__follow {
	font-size: 0.95rem !important;
	padding: 14px 24px !important;
	box-shadow: 0 10px 30px -8px rgba(220,39,67,.5);
}
.ig-feed__follow:hover {
	transform: translateY(-2px) !important;
	box-shadow: 0 18px 50px -10px rgba(220,39,67,.7) !important;
}

/* ===========================================================
   FOOTER refinement
   =========================================================== */
.site-footer { padding-top: clamp(72px, 9vw, 120px) !important; }
.site-footer__col h3 {
	font-family: var(--font-display);
	font-size: 0.88rem;
	letter-spacing: 0.04em;
	color: rgba(255,255,255,.95);
}

/* Footer logo z poświatą */
.site-footer__logo img {
	filter: drop-shadow(0 0 20px rgba(255,45,32,0.25));
}

/* ===========================================================
   PAGE-HERO subpages — better size
   =========================================================== */
.page-hero { padding: clamp(80px, 12vw, 160px) 0 clamp(60px, 8vw, 100px) !important; }

/* ===========================================================
   Trust band — tightened
   =========================================================== */
.trust-band {
	padding: clamp(28px, 4vw, 44px) clamp(20px, 3vw, 36px) !important;
	background: linear-gradient(180deg, rgba(255,255,255,.03) 0%, rgba(255,255,255,.005) 100%) !important;
	border-radius: 32px !important;
}
.trust-item { gap: 12px !important; }
.trust-item__icon { width: 44px !important; height: 44px !important; }
.trust-item__num { font-size: clamp(1.4rem, 2.2vw, 1.85rem) !important; }
.trust-item__label { font-size: 0.82rem !important; }

/* ===========================================================
   Subtle scroll behavior
   =========================================================== */
html {
	scroll-padding-top: 120px; /* Sticky header + live-now */
}

/* ===========================================================
   Bento — show video tile better
   =========================================================== */
.bento-cell--video .bento-cell__media::after {
	background: linear-gradient(180deg,
		transparent 0%, transparent 60%,
		rgba(0,0,0,.4) 80%,
		rgba(6,6,8,.85) 100%) !important;
}

/* ===========================================================
   Card-XL refinement
   =========================================================== */
.card-xl {
	background: var(--card-bg) !important;
	border: var(--card-border) !important;
	border-radius: var(--radius-card) !important;
}
.card-xl:hover {
	border-color: rgba(255,45,32,0.3) !important;
}

/* ===========================================================
   Section eyebrow — uniform tighter
   =========================================================== */
.section-eyebrow {
	background: rgba(255,45,32,.1);
	padding: 6px 14px !important;
	border-radius: 999px !important;
	border: 1px solid rgba(255,45,32,.25) !important;
	color: var(--c-accent-2) !important;
	font-size: 0.72rem !important;
}

/* ===========================================================
   Reveal animation — bardziej cinematic
   =========================================================== */
.reveal {
	transform: translateY(60px) !important;
}
.reveal.is-visible {
	transform: translateY(0) !important;
}

/* ===========================================================
   FAQ premium — better animation
   =========================================================== */
.faq-premium details summary { cursor: pointer; }
.faq-premium details[open] {
	background: linear-gradient(180deg, rgba(255,45,32,0.08) 0%, rgba(255,255,255,.01) 100%) !important;
	box-shadow: 0 20px 50px -20px rgba(255,45,32,0.15);
}

/* ===========================================================
   Newsletter input/btn refinement
   =========================================================== */
.newsletter__btn {
	background: linear-gradient(135deg, var(--c-accent) 0%, #ff5640 100%) !important;
	box-shadow: 0 10px 30px -8px var(--c-accent);
}
.newsletter__btn:hover {
	box-shadow: 0 14px 40px -10px var(--c-accent) !important;
}

/* ===========================================================
   Hero CTA scroll arrow — refined
   =========================================================== */
.hero-mega__scroll {
	font-family: var(--font-display);
	font-weight: 600;
	font-size: 0.7rem;
	letter-spacing: 0.16em;
}