/*
 * Strona główna. Wymiary 1:1 z Figmy przez jednostkę --u (tokens.css):
 * poniżej 900px wartości z ramki TIERE_mobile_home (360px), od 900px z
 * ramki TIERE_DESKTOP_home (1728px). Sekcje zdjęciowe i wideo są na pełną
 * szerokość okna, bez .container.
 */

/* Wspólna typografia haseł: Stolzl Bold, mobile 12/18, desktop 34/43. */
.brand-intro__heading,
.brand-statement__text,
.quote-red__text,
.collection-cta__statement {
	font-size: calc(12 * var(--u));
	font-weight: var(--font-weight-bold);
	line-height: calc(18 * var(--u));
	text-transform: uppercase;
}

@media (min-width: 900px) {
	.brand-intro__heading,
	.brand-statement__text,
	.quote-red__text,
	.collection-cta__statement {
		font-size: calc(34 * var(--u));
		line-height: calc(43 * var(--u));
	}
}

/* Media: zdjęcie / wideo wypełnia kadr (Figma: FILL). */
.home-media {
	display: block;
	position: relative;
	overflow: hidden;
	background-color: var(--color-panel-gray);
}

.home-media__asset {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Hero: mobile samo wideo 360x418, desktop wideo + zdjęcie 2 x 864x1079 (4:5). */

.hero {
	position: relative;
}

.hero__grid {
	display: grid;
	grid-template-columns: 1fr;
}

.hero__cell--image {
	display: none;
}

.hero__media {
	aspect-ratio: 360 / 418;
}

/* Plakat wideo (pierwsza klatka) jako tło. Od Rundy III mobile i desktop
   mają ten sam film 4:5, więc i ten sam plakat. */
.hero__media--video {
	background: var(--color-panel-gray) url("../../img/home/hero-poster-desktop.jpg") center / cover no-repeat;
}

.hero__logo {
	position: absolute;
	top: 45.933%; /* 192 / 418 */
	left: 50%;
	width: calc(173.32 * var(--u));
	transform: translateX(-50%);
	color: var(--color-brand-red);
	pointer-events: none;
	z-index: 1;
}

.hero__logo svg,
.photo-wide__logo svg {
	width: 100%;
	height: auto;
}

@media (min-width: 900px) {
	.hero__grid {
		grid-template-columns: 1fr 1fr;
	}

	.hero__cell--image {
		display: block;
	}

	.hero__media {
		aspect-ratio: 864 / 1079;
	}

	.hero__logo {
		top: 39.759%; /* 429 / 1079 */
		width: calc(451 * var(--u));
	}
}

/* Intro + CTA */

.brand-intro__inner {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: calc(15 * var(--u));
	padding: calc(53 * var(--u)) 0 calc(52 * var(--u));
	text-align: center;
}

.brand-intro__heading {
	width: calc(302 * var(--u));
	max-width: 100%;
}

.brand-intro__heading .text-accent {
	white-space: nowrap;
}

@media (min-width: 900px) {
	.brand-intro__inner {
		gap: calc(40 * var(--u));
		padding: calc(105 * var(--u)) 0 calc(105 * var(--u));
	}

	.brand-intro__heading {
		width: calc(1089 * var(--u));
	}
}

/* Siatka kart zapachów (same karty: components/card.css) */

.influencer-grid {
	padding-bottom: calc(48 * var(--u));
}

@media (min-width: 900px) {
	.influencer-grid {
		padding-bottom: calc(78 * var(--u));
	}
}

/* Ciemny pas: mobile 215px, tekst wyśrodkowany; desktop 487px, tekst do lewej. */

.brand-statement {
	min-height: calc(215 * var(--u));
	padding: calc(64 * var(--u)) 0 0;
}

.brand-statement__text {
	width: calc(256 * var(--u));
	max-width: 100%;
	margin-inline: auto;
	text-align: center;
	color: var(--color-white);
}

.brand-statement__text .text-accent {
	color: var(--color-brand-red);
}

@media (min-width: 900px) {
	.brand-statement {
		min-height: calc(487 * var(--u));
		padding: calc(168 * var(--u)) calc(32 * var(--u)) 0;
	}

	.brand-statement__text {
		width: calc(1090 * var(--u));
		margin-inline: 0;
		text-align: left;
		color: var(--color-cream);
	}

	.brand-statement__text .text-accent {
		display: block;
	}
}

/* Zdjęcie na pełną szerokość (opcjonalnie z logo). */

.photo-wide {
	position: relative;
}

.photo-wide--model .photo-wide__media {
	aspect-ratio: 360 / 488;
}

.photo-wide--bottles .photo-wide__media {
	aspect-ratio: 360 / 490;
}

.photo-wide__logo {
	position: absolute;
	top: 44.672%; /* 218 / 488 */
	left: 50%;
	width: calc(173.32 * var(--u));
	transform: translateX(-50%);
	color: var(--color-brand-red);
	pointer-events: none;
}

@media (min-width: 900px) {
	.photo-wide--model .photo-wide__media,
	.photo-wide--bottles .photo-wide__media {
		aspect-ratio: 1728 / 994;
	}

	.photo-wide__logo {
		top: 29.678%; /* 295 / 994 */
		left: calc(151 * var(--u));
		width: calc(451 * var(--u));
		transform: none;
	}
}

/* Cytat + wideo: mobile jeden pod drugim, desktop 50/50. */

.quote-red {
	display: grid;
	grid-template-columns: 1fr;
}

.quote-red__text-col {
	padding: calc(44 * var(--u)) 0;
}

.quote-red__text {
	width: calc(264 * var(--u));
	max-width: 100%;
	margin-inline: auto;
	text-align: center;
	color: var(--color-ink);
}

.quote-red__media {
	aspect-ratio: 360 / 490;
	background: var(--color-panel-gray) url("../../img/home/quote-poster-desktop.jpg") center / cover no-repeat;
}

@media (min-width: 900px) {
	.quote-red {
		grid-template-columns: 1fr 1fr;
	}

	.quote-red__text-col {
		padding: calc(369 * var(--u)) 0 0 calc(38 * var(--u));
	}

	.quote-red__text {
		width: calc(784 * var(--u));
		margin-inline: 0;
		text-align: left;
	}

	.quote-red__media {
		aspect-ratio: 864 / 1080;
	}
}

/* Hasło końcowe + CTA + dwa zdjęcia od krawędzi do krawędzi. */

.collection-cta__intro {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: calc(12 * var(--u));
	padding: calc(44 * var(--u)) 0 calc(44 * var(--u));
	text-align: center;
}

.collection-cta__statement {
	width: calc(302 * var(--u));
	max-width: 100%;
	color: var(--color-ink);
}

.collection-cta__gallery {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: calc(2 * var(--u));
}

.collection-cta__photo {
	aspect-ratio: 179 / 245;
}

@media (min-width: 900px) {
	.collection-cta__intro {
		gap: calc(39 * var(--u));
		padding: calc(199 * var(--u)) 0 calc(107 * var(--u));
	}

	.collection-cta__statement {
		width: calc(1168 * var(--u));
	}

	/* Dwie równe połowy bez odstępu (Figma ma ramki 886 i 842 px - ustalone
	   z użytkownikiem 50/50); wysokość pasa z Figmy: 1072 przy 1728. */
	.collection-cta__gallery {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 0;
		aspect-ratio: 1728 / 1072;
	}

	.collection-cta__photo {
		aspect-ratio: auto;
	}
}