/* =========================================================================
   ICF Karting — v23 (BENTO + PERSONA aspect-ratio fix)
   - Explicit aspect-ratio per cell type (zero "podłużnych" obrazów)
   - object-fit: cover wymuszone wszędzie
   - Scale-on-scroll wyłączony dla bento i persona
   ========================================================================= */

/* ===========================================================
   BENTO — explicit aspect ratios
   =========================================================== */
.bento {
	display: grid !important;
	grid-template-columns: repeat(3, 1fr) !important;
	grid-auto-rows: auto !important;
	gap: 16px !important;
}
@media (max-width: 880px) {
	.bento { grid-template-columns: repeat(2, 1fr) !important; }
}
@media (max-width: 540px) {
	.bento { grid-template-columns: 1fr !important; }
}

/* Reset */
.bento-cell {
	aspect-ratio: 4 / 3 !important;
	min-height: 0 !important;
	max-height: none !important;
	height: auto !important;
}

.bento-cell--feature {
	grid-column: span 2 !important;
	aspect-ratio: 16 / 9 !important;
}
.bento-cell--wide {
	grid-column: span 2 !important;
	aspect-ratio: 16 / 9 !important;
}
.bento-cell--tall {
	grid-row: span 2 !important;
	aspect-ratio: 4 / 5 !important;
}

@media (max-width: 880px) {
	.bento-cell--feature, .bento-cell--wide {
		grid-column: span 2 !important;
		aspect-ratio: 16 / 9 !important;
	}
	.bento-cell--tall {
		grid-row: span 2 !important;
		aspect-ratio: 4 / 5 !important;
	}
}
@media (max-width: 540px) {
	.bento-cell { aspect-ratio: 16 / 11 !important; }
	.bento-cell--feature, .bento-cell--wide, .bento-cell--tall {
		grid-column: span 1 !important;
		grid-row: span 1 !important;
		aspect-ratio: 16 / 11 !important;
	}
}

/* Solid cells (slot widget, leaderboard) — auto height */
.bento-cell--solid, .bento-cell--quote {
	aspect-ratio: auto !important;
	min-height: 280px !important;
}
@media (max-width: 540px) {
	.bento-cell--solid, .bento-cell--quote { min-height: 240px !important; }
}

/* ===========================================================
   FORCE object-fit cover na media wewnątrz bento
   =========================================================== */
.bento-cell__media {
	position: absolute !important;
	inset: 0 !important;
	width: 100% !important;
	height: 100% !important;
	overflow: hidden !important;
	z-index: -1;
}
.bento-cell__media img,
.bento-cell__media video {
	width: 100% !important;
	height: 100% !important;
	object-fit: cover !important;
	object-position: center center !important;
	max-width: none !important;
	max-height: none !important;
	transform: scale(1) !important;
	transition: transform .6s var(--ease-fluid) !important;
}
.bento-cell:hover .bento-cell__media img,
.bento-cell:hover .bento-cell__media video {
	transform: scale(1.04) !important;
}

/* Specific object-position dla rodzajów cells (zachowaj akcję) */
.bento-cell--feature .bento-cell__media img { object-position: center 35% !important; }
.bento-cell--video .bento-cell__media video { object-position: center center !important; }
.bento-cell--tall .bento-cell__media img { object-position: center 35% !important; }

/* ===========================================================
   PERSONA — explicit aspect ratio
   =========================================================== */
.personas {
	display: grid !important;
	grid-template-columns: repeat(2, 1fr) !important;
	gap: 20px !important;
}
@media (max-width: 720px) { .personas { grid-template-columns: 1fr !important; } }

.persona {
	aspect-ratio: 4 / 5 !important;
	min-height: 0 !important;
	max-height: none !important;
	height: auto !important;
}

.persona__media {
	position: absolute !important;
	inset: 0 !important;
	width: 100% !important;
	height: 100% !important;
	overflow: hidden !important;
	z-index: -1;
}
.persona__media img {
	width: 100% !important;
	height: 100% !important;
	object-fit: cover !important;
	object-position: center 30% !important;
	transform: scale(1) !important;
	transition: transform 1s var(--ease-fluid), filter .5s !important;
}
.persona:hover .persona__media img {
	transform: scale(1.05) !important;
}

/* Per-persona object-position (4 different images need different framings) */
.persona:nth-child(1) .persona__media img { object-position: center 45% !important; } /* lineup-cones */
.persona:nth-child(2) .persona__media img { object-position: center 40% !important; } /* hero-kart-empty */
.persona:nth-child(3) .persona__media img { object-position: center 30% !important; } /* child-driver */
.persona:nth-child(4) .persona__media img { object-position: center 30% !important; } /* kart-detail */

/* ===========================================================
   CARD-XL, FLEET — same fix
   =========================================================== */
.card-xl__media {
	aspect-ratio: 16 / 10 !important;
	overflow: hidden;
}
.card-xl__media img {
	width: 100% !important;
	height: 100% !important;
	object-fit: cover !important;
	object-position: center center !important;
	transform: scale(1) !important;
	transition: transform .6s var(--ease-fluid) !important;
}
.card-xl:hover .card-xl__media img { transform: scale(1.04) !important; }

.fleet-card__media { aspect-ratio: 4 / 3 !important; overflow: hidden; }
.fleet-card__media img {
	width: 100% !important;
	height: 100% !important;
	object-fit: cover !important;
	transform: scale(1) !important;
}

/* ===========================================================
   VOUCHER HERO media — aspect ratio
   =========================================================== */
.voucher-hero {
	display: grid !important;
	grid-template-columns: 1.25fr 1fr !important;
}
@media (max-width: 880px) { .voucher-hero { grid-template-columns: 1fr !important; } }

.voucher-hero__media {
	min-height: 360px !important;
	max-height: 600px !important;
	overflow: hidden !important;
}
.voucher-hero__media img {
	width: 100% !important;
	height: 100% !important;
	object-fit: cover !important;
	object-position: 70% 30% !important;
	transform: scale(1) !important;
}

/* ===========================================================
   IG posts — square
   =========================================================== */
.ig-post {
	aspect-ratio: 1 / 1 !important;
}
.ig-post img {
	width: 100% !important;
	height: 100% !important;
	object-fit: cover !important;
	transform: scale(1) !important;
}

/* ===========================================================
   Article / Blog cards
   =========================================================== */
.article-card__media {
	aspect-ratio: 16 / 10 !important;
	overflow: hidden;
}
.article-card__media img {
	width: 100% !important;
	height: 100% !important;
	object-fit: cover !important;
	transform: scale(1) !important;
	transition: transform .6s var(--ease-fluid) !important;
}
.article-card:hover .article-card__media img { transform: scale(1.04) !important; }

.blog-feat-side__media { aspect-ratio: 1 / 1 !important; }
.blog-feat-side__media img {
	width: 100% !important;
	height: 100% !important;
	object-fit: cover !important;
}

/* ===========================================================
   USUŃ wszystkie pozostałe scroll-grow transforms w bento/persona/cards
   =========================================================== */
.scroll-grow { transform: scale(1) !important; }
.bento-cell .scroll-grow,
.persona .scroll-grow,
.bento-cell__media,
.persona__media { transform: scale(1) !important; }
.scroll-grow img, .scroll-grow video {
	/* Zostaw subtle scale tylko na specyficznych typach (split, voucher, article) */
}

/* Zostaw zoom tylko dla split + voucher + article */
.split__media.scroll-grow img,
.voucher-hero__media.scroll-grow img,
.article-card__media.scroll-grow img,
.blog-feat-hero.scroll-grow,
.article-hero__bg.scroll-grow img {
	transform: scale(1.05) !important;
}
.split__media.scroll-grow.in-view img,
.voucher-hero__media.scroll-grow.in-view img,
.article-card__media.scroll-grow.in-view img,
.blog-feat-hero.scroll-grow.in-view,
.article-hero__bg.scroll-grow.in-view img {
	transform: scale(1) !important;
}

/* ===========================================================
   Bento body — overlay na image
   =========================================================== */
.bento-cell__body {
	padding: clamp(20px, 2.6vw, 32px) !important;
	height: 100%;
	display: flex !important;
	flex-direction: column !important;
	justify-content: flex-end !important;
	gap: 4px !important;
	position: relative;
	z-index: 1;
}

/* Slot pills + leaderboard (solid cells) — body justify-between */
.bento-cell--solid .bento-cell__body,
.bento-cell--quote .bento-cell__body { justify-content: space-between !important; }

/* ===========================================================
   PERSONA body — text overlay
   =========================================================== */
.persona {
	display: flex !important;
	flex-direction: column !important;
	justify-content: flex-end !important;
	padding: clamp(28px, 3.5vw, 48px) !important;
	color: #fff !important;
	overflow: hidden !important;
	border-radius: var(--radius-card) !important;
	border: 1px solid var(--c-glass-line) !important;
	transition: transform .5s var(--ease-apple) !important;
	isolation: isolate;
	position: relative !important;
	text-decoration: none;
}

/* ============================================================
   Emil design-eng audit — touch: brak sticky-hover (lift/scale)
   Touch wywołuje :hover na tap → element zostaje "podniesiony" po dotknięciu.
   Neutralizujemy transform-hover na kluczowych komponentach na urządzeniach bez prawdziwego hovera.
   (Emil: "Touch devices trigger hover on tap, causing false positives.")
   ============================================================ */
@media (hover: none), (pointer: coarse) {
	.btn-pill:hover,
	.bento-cell:hover,
	.persona:hover,
	.pass:hover,
	.lemans-card:hover,
	.testimonial-v2:hover,
	.compare__col:hover,
	.card-xl:hover,
	.segm-card:hover,
	.training-tile:hover,
	.voucher-card:hover,
	.feature:hover,
	.ig-post:hover,
	.gallery-mag__item:hover,
	.support-card:hover,
	.article-card:hover,
	.fleet-card:hover,
	.blog-feat-side__card:hover,
	.brand-strip__item:hover,
	.podium-card:hover {
		transform: none !important;
	}
}