/* =========================================================================
   ICF Karting — v5 (audit fixes pass)
   Wczytywany ostatni. Naprawia: typografię hero, header, overlay, spotlight,
   mobile responsive, focus styles, dodaje voucher-hero, szkoly card,
   pakiet-startowy, urgency, sezonowe.
   ========================================================================= */

/* ===========================================================
   FIX: Hero typografia — mniej agresywny clamp
   =========================================================== */
.hero-mega__title {
	font-size: clamp(2.6rem, 8vw, 7rem) !important;
	letter-spacing: -0.035em !important;
	line-height: 0.96 !important;
	max-width: 14ch;
}
.hero-mega__lead {
	font-size: clamp(1rem, 1.4vw, 1.25rem) !important;
	max-width: 540px;
}
@media (max-width: 640px) {
	.hero-mega__title { font-size: clamp(2.2rem, 11vw, 3.4rem) !important; max-width: 12ch; }
	.hero-mega__lead { font-size: 1rem !important; }
}

/* FIX: Hero overlay — lżejszy, video bardziej widoczne */
.hero-mega--video .hero-mega__overlay {
	background:
		radial-gradient(ellipse at 25% 100%, rgba(0,0,0,.85) 0%, transparent 70%),
		linear-gradient(180deg, rgba(6,6,8,.25) 0%, rgba(6,6,8,.35) 50%, rgba(6,6,8,.92) 100%) !important;
}

/* FIX: Kinetic ICF — schowaj na mobile, słabsze na tablet */
.hero-mega__kinetic-text {
	color: transparent;
	-webkit-text-stroke: 1px rgba(255,255,255,.06);
}
@media (max-width: 880px) {
	.hero-mega__kinetic { display: none; }
}

/* ===========================================================
   FIX: Header — kompaktowy, lepiej zorganizowany
   =========================================================== */
.site-nav__list { gap: 2px !important; }
.site-nav__list li a {
	padding: 8px 12px !important;
	font-size: 0.95rem;
	white-space: nowrap;
}
.site-nav__cta { gap: 10px !important; }
@media (max-width: 1180px) {
	/* Hide phone display on smaller desktop, keep CTA */
	.site-nav__phone { display: none; }
}
@media (max-width: 1080px) {
	/* Hide some menu items on tablet-ish */
	.site-nav__list { gap: 0; }
	.site-nav__list li a { padding: 8px 10px !important; font-size: 0.9rem; }
	.live-pill { display: none; }
}

/* ===========================================================
   FIX: Spotlight — subtelniejszy i tylko na duże karty
   =========================================================== */
.feature::before, .timeline__step::before, .lemans-card::before, .pass::before {
	display: none !important;
}
/* Bento, persona, compare keep spotlight ale subtelniej */
.bento-cell::before, .persona::before, .compare__col::before, .testimonial-v2::before {
	background: radial-gradient(380px circle at var(--mx, 50%) var(--my, 50%),
		rgba(255, 45, 32, 0.10) 0%,
		transparent 55%) !important;
}

/* ===========================================================
   FIX: Bento media — mniej agresywny gradient overlay
   =========================================================== */
.bento-cell__media::after {
	background: linear-gradient(180deg,
		rgba(0,0,0,.12) 0%,
		rgba(0,0,0,.4) 55%,
		rgba(6,6,8,.92) 100%) !important;
}

/* FIX: Persona media gradient — softer */
.persona__media::after {
	background: linear-gradient(180deg,
		rgba(0,0,0,.08) 0%,
		rgba(0,0,0,.55) 60%,
		rgba(6,6,8,.95) 100%) !important;
}

/* ===========================================================
   FIX: Story-pin mobile — zamień na akkordeon styl
   =========================================================== */
@media (max-width: 880px) {
	.story-pin__inner { display: block !important; }
	.story-pin__sticky { display: none !important; }
	.story-pin__steps { display: flex; flex-direction: column; gap: 24px; }
	.story-pin__step {
		min-height: auto !important;
		padding: 0 !important;
		background: linear-gradient(180deg, rgba(255,255,255,.03) 0%, rgba(255,255,255,.01) 100%);
		border: 1px solid var(--c-glass-line);
		border-radius: 24px;
		padding: 28px !important;
	}
	.story-pin__step h3 { font-size: 1.6rem; }
}

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

/* ===========================================================
   FIX: Focus visible — accessibility
   =========================================================== */
:focus-visible {
	outline: 2px solid var(--c-accent);
	outline-offset: 3px;
	border-radius: 4px;
}
.btn-pill:focus-visible, .btn:focus-visible, .segm-card:focus-visible,
.persona:focus-visible, .bento-cell:focus-visible, .card-xl:focus-visible {
	outline: 2px solid #fff;
	outline-offset: 4px;
}
a:focus-visible {
	outline: 2px solid var(--c-accent);
	outline-offset: 3px;
	border-radius: 2px;
}

/* ===========================================================
   FIX: Booking bar — nie pokazuj przy footer
   =========================================================== */
.booking-bar.is-hidden { transform: translateY(160%) !important; }

/* ===========================================================
   NEW: Pakiet startowy / "co dostajesz" — info ribbon
   =========================================================== */
.starter-pack {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 16px;
	max-width: 1100px;
	margin: 40px auto 0;
}
@media (max-width: 880px) { .starter-pack { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .starter-pack { grid-template-columns: 1fr; } }

.starter-item {
	display: flex; flex-direction: column; gap: 6px;
	padding: 24px;
	background: var(--c-glass);
	border: 1px solid var(--c-glass-line);
	border-radius: 18px;
	text-align: left;
}
.starter-item__icon {
	width: 42px; height: 42px;
	display: inline-flex; align-items: center; justify-content: center;
	border-radius: 50%;
	background: var(--c-accent-soft);
	color: var(--c-accent);
	font-size: 1.2rem;
	margin-bottom: 6px;
}
.starter-item__name { font-weight: 700; font-size: 1.05rem; color: #fff; }
.starter-item__desc { color: var(--c-text-2); font-size: 0.9rem; line-height: 1.5; }
.starter-item__price { color: var(--c-text-3); font-size: 0.85rem; font-weight: 600; margin-top: auto; padding-top: 8px; }

/* ===========================================================
   NEW: Voucher / Gift hero block — bigger emphasis
   =========================================================== */
.voucher-hero {
	display: grid;
	grid-template-columns: 1.25fr 1fr;
	gap: 0;
	border-radius: 24px;
	overflow: hidden;
	background: linear-gradient(135deg, #1f0707 0%, #0a0a0c 100%);
	border: 1px solid rgba(255,45,32,0.25);
	max-width: 1240px;
	margin: 0 auto;
}
@media (max-width: 880px) { .voucher-hero { grid-template-columns: 1fr; } }

.voucher-hero__body {
	padding: clamp(36px, 4vw, 64px);
	display: flex; flex-direction: column; justify-content: center;
}
.voucher-hero__eyebrow {
	color: var(--c-accent);
	font-size: 0.78rem; font-weight: 600;
	letter-spacing: 0.16em; text-transform: uppercase;
	margin-bottom: 16px;
}
.voucher-hero__title {
	font-size: clamp(2rem, 4vw, 3.4rem);
	font-weight: 800; letter-spacing: -0.035em; line-height: 1.05;
	margin: 0 0 16px;
}
.voucher-hero__title em { color: var(--c-accent); font-style: normal; }
.voucher-hero__lead {
	color: var(--c-text-2); font-size: 1.05rem; line-height: 1.55;
	margin: 0 0 28px; max-width: 44ch;
}
.voucher-hero__chips {
	display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 28px;
}
.voucher-hero__chips span {
	padding: 6px 12px; background: rgba(255,255,255,.06);
	border: 1px solid rgba(255,255,255,.1); border-radius: 999px;
	font-size: 0.85rem; color: var(--c-text);
}
.voucher-hero__media {
	position: relative;
	min-height: 360px;
	background: var(--c-bg-3);
}
.voucher-hero__media img {
	width: 100%; height: 100%; object-fit: cover;
}
.voucher-hero__media::after {
	content: '';
	position: absolute; inset: 0;
	background: linear-gradient(90deg, rgba(31,7,7,.6) 0%, transparent 50%);
}
@media (max-width: 880px) { .voucher-hero__media { min-height: 280px; } }

/* ===========================================================
   NEW: Szkoły i grupy zorganizowane — dla nauczycieli
   =========================================================== */
.schools-band {
	display: flex; align-items: center; gap: 24px;
	padding: clamp(28px, 3vw, 40px);
	background: linear-gradient(135deg, rgba(46,224,107,0.06) 0%, rgba(255,255,255,0.02) 100%);
	border: 1px solid rgba(46,224,107,0.2);
	border-radius: 24px;
	max-width: 1100px;
	margin: 0 auto;
}
@media (max-width: 720px) { .schools-band { flex-direction: column; align-items: flex-start; text-align: left; } }
.schools-band__icon {
	width: 64px; height: 64px;
	flex-shrink: 0;
	display: inline-flex; align-items: center; justify-content: center;
	border-radius: 16px;
	background: rgba(46,224,107,0.1);
	border: 1px solid rgba(46,224,107,0.3);
	font-size: 1.8rem;
}
.schools-band__body { flex: 1; }
.schools-band__title { font-size: 1.4rem; font-weight: 700; letter-spacing: -0.02em; margin: 0 0 6px; color: #fff; }
.schools-band__lead { color: var(--c-text-2); margin: 0 0 16px; font-size: 0.98rem; line-height: 1.55; }
.schools-band__cta { display: inline-flex; align-items: center; gap: 6px; }

/* ===========================================================
   NEW: Sezonowe baner-strip (dynamiczne)
   =========================================================== */
.season-strip {
	background: linear-gradient(135deg, var(--c-accent) 0%, #c81f12 100%);
	color: #fff;
	padding: 14px 24px;
	display: flex; align-items: center; justify-content: center; gap: 16px;
	font-weight: 600; font-size: 0.92rem;
	letter-spacing: -0.01em;
	flex-wrap: wrap;
}
.season-strip__icon {
	display: inline-flex; align-items: center; justify-content: center;
	width: 24px; height: 24px;
	background: rgba(255,255,255,.2);
	border-radius: 50%;
	font-size: 0.9rem;
}
.season-strip a {
	color: #fff;
	text-decoration: underline;
	font-weight: 700;
}

/* ===========================================================
   NEW: Demo badge dla mock'ów (slot widget, leaderboard)
   =========================================================== */
.demo-badge {
	display: inline-flex; align-items: center; gap: 4px;
	padding: 3px 8px;
	background: rgba(255,255,255,.08);
	border: 1px solid rgba(255,255,255,.15);
	border-radius: 999px;
	font-size: 0.65rem;
	color: var(--c-text-3);
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	margin-left: 8px;
	vertical-align: middle;
}

/* ===========================================================
   FIX: Letter-spacing softer na małym ekranie
   =========================================================== */
@media (max-width: 480px) {
	h1, h2, .section-title-xl, .hero-mega__title {
		letter-spacing: -0.02em !important;
	}
}

/* ===========================================================
   FIX: Bento na tablecie — single column dla feature, lepsze stackowanie
   =========================================================== */
@media (min-width: 481px) and (max-width: 880px) {
	.bento { grid-template-columns: repeat(2, 1fr); }
	.bento-cell--feature { grid-column: span 2; }
	.bento-cell--wide    { grid-column: span 2; }
	.bento-cell--tall    { grid-row: span 1; }
}
@media (max-width: 480px) {
	.bento { grid-template-columns: 1fr; }
	.bento-cell { grid-column: span 1 !important; grid-row: span 1 !important; min-height: 260px; }
}

/* ===========================================================
   FIX: Card-XL min-height fluid
   =========================================================== */
.card-xl { min-height: auto; }

/* ===========================================================
   FIX: Big quote responsywność
   =========================================================== */
.big-quote__text {
	font-size: clamp(1.3rem, 3.5vw, 2.6rem) !important;
}

/* ===========================================================
   FIX: Marquee — slower on mobile (czytelność)
   =========================================================== */
@media (max-width: 720px) {
	.marquee__track { animation-duration: 70s !important; }
	.marquee__item { font-size: 1rem !important; padding: 10px 18px !important; }
}

/* ===========================================================
   FIX: Hero CTA primary — link target fix przez data-action
   =========================================================== */
.hero-mega__ctas .btn-pill[href="#"] {
	cursor: pointer;
}

/* ===========================================================
   FIX: Stat number contrast on mobile
   =========================================================== */
@media (max-width: 480px) {
	.stat__num {
		font-size: 3rem !important;
		background: none !important;
		-webkit-text-fill-color: #fff !important;
		color: #fff !important;
	}
}

/* ===========================================================
   FIX: Footer mobile padding
   =========================================================== */
@media (max-width: 540px) {
	.site-footer__col h3 { margin-top: 8px; }
	.site-footer__bar-inner { gap: 8px; }
}

/* ===========================================================
   FIX: Hero rating glass card — lepsze pozycjonowanie
   =========================================================== */
.hero-mega__rating {
	bottom: clamp(20px, 4vh, 60px);
	top: auto !important;
	right: clamp(16px, 4vw, 64px);
	transform: none !important;
	padding: 14px 18px;
}
.hero-mega__rating-num { font-size: 2rem; }

/* ===========================================================
   FIX: Skip link visible focus
   =========================================================== */
.skip-link:focus, .skip-link:focus-visible {
	top: 16px;
	background: var(--c-accent);
	color: #fff;
	z-index: 9999;
}

/* ===========================================================
   FIX: Headers tighter on tablet
   =========================================================== */
@media (max-width: 720px) {
	.section-title-xl { font-size: clamp(1.8rem, 6vw, 2.6rem) !important; max-width: 18ch; }
	.section-eyebrow { font-size: 0.75rem; letter-spacing: 0.12em; }
}

/* ===========================================================
   FIX: Lemans card mobile
   =========================================================== */
@media (max-width: 720px) {
	.lemans-card { padding: 24px; }
	.lemans-card__time { font-size: 2.2rem; }
}

/* ===========================================================
   FIX: Compare na mobile
   =========================================================== */
@media (max-width: 880px) {
	.compare__col--accent::before { font-size: 0.65rem; padding: 3px 10px; }
}

/* ===========================================================
   FIX: Map card mobile
   =========================================================== */
@media (max-width: 720px) {
	.map-card { min-height: 600px; padding: 60px 20px; }
	.map-card__inner { padding: 24px; }
}

/* ===========================================================
   FIX: Sticky chapter nav — disable below 1280
   =========================================================== */
@media (max-width: 1279px) {
	.chapter-nav { display: none !important; }
}

/* ===========================================================
   FIX: Live pill — only show when actually open (JS will toggle .is-open)
   =========================================================== */
.live-pill { transition: opacity .3s, background .3s, border-color .3s, color .3s; }
.live-pill.is-closed {
	background: rgba(255, 91, 91, .1);
	border-color: rgba(255, 91, 91, .35);
	color: var(--c-error);
}
.live-pill.is-closed .live-pill__dot {
	background: var(--c-error);
	box-shadow: 0 0 8px var(--c-error);
}

/* ===========================================================
   FIX: Logo refinements — proper contrast
   =========================================================== */
.site-logo img {
	filter: drop-shadow(0 0 12px rgba(0,0,0,.5));
}

/* ===========================================================
   AUTHOR CREDIT — wewnątrz pasek stopki (zamiast standalone strip)
   =========================================================== */
/* Hide stary standalone credit (został w innych preview pages) */
body > .author-credit { display: none; }

/* Ulepszony footer-bar: 2 sloty (left: © + tor, right: credit) */
.site-footer__bar-inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	flex-wrap: wrap;
}
.site-footer__bar small {
	font-size: 0.78rem;
	color: var(--c-text-3);
}

/* Credit inline w footer bar */
.author-credit-inline {
	display: inline-flex; align-items: center; gap: 8px;
	font-size: 0.78rem;
	color: var(--c-text-3);
	letter-spacing: 0.02em;
	flex-wrap: wrap;
}
.author-credit-inline__label {
	text-transform: uppercase;
	font-weight: 500;
	letter-spacing: 0.06em;
	font-size: 0.7rem;
	color: var(--c-text-3);
}
.author-credit-inline__name {
	color: var(--c-text);
	font-weight: 700;
	letter-spacing: 0.04em;
	background: linear-gradient(90deg, #fff 0%, var(--c-accent) 100%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
	transition: opacity .25s var(--ease-soft);
	text-decoration: none;
}
.author-credit-inline__name:hover { opacity: 0.85; }
.author-credit-inline__role {
	color: var(--c-text-3);
	font-weight: 500;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	font-size: 0.7rem;
}
.author-credit-inline__sep { color: rgba(255,255,255,.2); }

@media (max-width: 720px) {
	.site-footer__bar-inner { flex-direction: column; text-align: center; gap: 10px; }
	.author-credit-inline { justify-content: center; }
}

/* ===========================================================
   INSTAGRAM FEED — live posts from @icfkarting
   (preview = mock; production = Smash Balloon plugin)
   =========================================================== */
.ig-feed {
	max-width: 1240px; margin: 0 auto;
	padding: 0 var(--gutter);
}
.ig-feed__head {
	display: flex; align-items: center; justify-content: space-between;
	gap: 24px; flex-wrap: wrap;
	margin-bottom: 32px;
	padding-bottom: 24px;
	border-bottom: 1px solid rgba(255,255,255,.08);
}
.ig-feed__handle {
	display: flex; align-items: center; gap: 16px;
}
.ig-feed__avatar {
	width: 64px; height: 64px;
	border-radius: 50%;
	background: linear-gradient(135deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);
	padding: 3px;
	flex-shrink: 0;
}
.ig-feed__avatar-inner {
	width: 100%; height: 100%;
	background: #0a0a0c;
	border-radius: 50%;
	padding: 3px;
	display: flex; align-items: center; justify-content: center;
}
.ig-feed__avatar-inner img {
	width: 100%; height: 100%;
	object-fit: cover;
	border-radius: 50%;
}
.ig-feed__name {
	display: flex; flex-direction: column; gap: 2px;
}
.ig-feed__name-handle {
	font-weight: 700; font-size: 1.1rem;
	color: #fff; letter-spacing: -0.01em;
}
.ig-feed__name-stats {
	font-size: 0.85rem;
	color: var(--c-text-3);
}
.ig-feed__follow {
	display: inline-flex; align-items: center; gap: 8px;
	padding: 12px 20px;
	background: linear-gradient(135deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);
	color: #fff;
	border-radius: 999px;
	font-weight: 600; font-size: 0.9rem;
	transition: transform .25s var(--ease-apple), box-shadow .25s;
	letter-spacing: -0.01em;
}
.ig-feed__follow:hover {
	transform: translateY(-2px);
	box-shadow: 0 14px 40px -10px rgba(220,39,67,0.6);
	color: #fff;
}
.ig-feed__follow svg, .ig-feed__follow .ig-icon {
	width: 18px; height: 18px;
	display: inline-block;
}

.ig-feed__grid {
	display: grid;
	grid-template-columns: repeat(6, 1fr);
	gap: 6px;
}
@media (max-width: 1100px) { .ig-feed__grid { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 720px)  { .ig-feed__grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 420px)  { .ig-feed__grid { grid-template-columns: repeat(2, 1fr); } }

.ig-post {
	position: relative;
	display: block;
	aspect-ratio: 1;
	overflow: hidden;
	background: var(--c-bg-3);
	border-radius: 4px;
}
.ig-post img, .ig-post video {
	width: 100%; height: 100%;
	object-fit: cover;
	transition: transform .8s var(--ease-apple), filter .3s;
}
.ig-post:hover img, .ig-post:hover video { transform: scale(1.05); filter: brightness(.7); }
.ig-post__type {
	position: absolute; top: 8px; right: 8px;
	background: rgba(0,0,0,.4); backdrop-filter: blur(8px);
	padding: 4px 6px; border-radius: 4px;
	font-size: 0.7rem;
	color: #fff;
	z-index: 1;
}
.ig-post__overlay {
	position: absolute; inset: 0;
	display: flex; align-items: center; justify-content: center;
	gap: 16px;
	background: rgba(0,0,0,.6);
	color: #fff;
	font-weight: 700;
	font-size: 0.9rem;
	opacity: 0;
	transition: opacity .25s var(--ease-soft);
	z-index: 1;
}
.ig-post:hover .ig-post__overlay { opacity: 1; }
.ig-post__overlay span {
	display: inline-flex; align-items: center; gap: 4px;
}

/* Live indicator strip */
.ig-feed__live {
	display: inline-flex; align-items: center; gap: 6px;
	padding: 4px 10px;
	background: rgba(46,224,107,.1);
	border: 1px solid rgba(46,224,107,.3);
	border-radius: 999px;
	font-size: 0.7rem;
	color: var(--c-live);
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	margin-left: 8px;
}
.ig-feed__live::before {
	content: '';
	width: 6px; height: 6px;
	border-radius: 50%;
	background: var(--c-live);
	box-shadow: 0 0 6px var(--c-live);
	animation: livePulse 2s ease-in-out infinite;
}