/**
 * Premium Landing – dark theme, gold accents.
 * Loaded only when page template "Landing Premium Ramki" is used.
 * Pure HTML + CSS; no page builder dependency.
 */

@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@400;600;700&display=swap");

/* Pattern na marginesach tylko dla premium landing page. */
body.premium-landing-page {
	background:
		radial-gradient(circle at 50% 14%, rgba(214, 167, 94, 0.24) 0%, rgba(214, 167, 94, 0.10) 16%, rgba(0,0,0,0) 38%),
		linear-gradient(90deg, #2b170a 0%, #17100d 12%, #080809 28%, #080809 72%, #17100d 88%, #2b170a 100%);
	background-attachment: fixed;
	position: relative;
}

@media (max-width: 768px) {
	body.premium-landing-page {
		background-attachment: scroll;
	}
}

body.premium-landing-page::before {
	content: "";
	position: fixed;
	inset: 0;
	background:
		radial-gradient(circle at center, rgba(0,0,0,0) 52%, rgba(0,0,0,0.22) 100%);
	pointer-events: none;
	z-index: 0;
}

/* ── Scope ── */
body.premium-landing-page .premium-landing {
	box-sizing: border-box;
	position: relative;
	z-index: 1;
	max-width: 1240px;
	margin: 0 auto;
	background: #050506;
	/* miękka krawędź oddzielająca content od marginesów ze wzorem */
	box-shadow:
		-30px 0 60px rgba(0, 0, 0, 0.85),
		30px 0 60px rgba(0, 0, 0, 0.85);
}

body.premium-landing-page .premium-landing *,
body.premium-landing-page .premium-landing *::before,
body.premium-landing-page .premium-landing *::after {
	box-sizing: inherit;
}

/* ── Variables ── */
.premium-landing {
	--premium-bg: #0d0d0d;
	--premium-bg-alt: #111114;
	--premium-gold: #c9aa6a;
	--premium-gold-light: #e6d2a3;
	--premium-gold-dim: rgba(201, 170, 106, 0.4);
	--premium-text: #f0e8d8;
	--premium-text-muted: rgba(240, 232, 216, 0.65);
	--premium-card-border: rgba(201, 170, 106, 0.14);
	--premium-max: 1200px;
	--premium-padding: 1.5rem;
	font-family: "Montserrat", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
}

/* ── Base ── */
html,
body {
	background: #050506;
}

.premium-landing {
	background: transparent;
	color: var(--premium-text);
	padding: 0 0 0;
}

.premium-landing__container {
	max-width: var(--premium-max);
	margin: 0 auto;
	padding: 0 var(--premium-padding);
}

/* ── Shared text utilities ── */
.premium-landing__text--light {
	color: #e8e8e8;
}

.premium-landing__text--gold {
	color: var(--premium-gold);
}

/* ── Section title (shared) ── */
.premium-landing__section-title {
	font-size: clamp(1.25rem, 3vw, 1.75rem);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--premium-gold);
	text-align: center;
	margin: 0 0 2rem;
}

/* ── Odkryj — czysty napis zamiast obrazka ── */
.premium-landing__odkryj {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 1.5rem;
	padding: 3rem 2rem 2.5rem;
	text-align: center;
}
.premium-landing__odkryj::before,
.premium-landing__odkryj::after {
	content: '';
	flex: 1;
	max-width: 180px;
	height: 1px;
	background: linear-gradient(to right, transparent, rgba(201,168,76,.5));
}
.premium-landing__odkryj::after {
	background: linear-gradient(to left, transparent, rgba(201,168,76,.5));
}
.premium-landing__odkryj-text {
	font-family: 'Playfair Display', Georgia, serif;
	font-size: clamp(1.1rem, 3.5vw, 2rem);
	font-weight: 700;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--premium-gold);
	white-space: normal;
	word-break: break-word;
}
@media (max-width: 600px) {
	.premium-landing__odkryj-text {
		font-size: clamp(0.95rem, 5vw, 1.3rem);
		letter-spacing: 0.08em;
	}
}

/* ==========================================================================
   1. HERO
   ========================================================================== */
.premium-landing .hero {
	width: 100%;
	max-height: 812px;
	background: #050506;
	display: flex;
	justify-content: center;
	align-items: center;
	overflow: hidden;
	position: relative;
}

.premium-landing .hero img {
	width: 100%;
	height: auto;
	display: block;
}

/* Soft vignette edges */
.premium-landing .hero::before {
	content: "";
	position: absolute;
	inset: 0;
	background:
		linear-gradient(to bottom, transparent 85%, #050506 100%),
		linear-gradient(to right, rgba(5, 5, 6, 0.5), transparent 25%, transparent 75%, rgba(5, 5, 6, 0.5));
	pointer-events: none;
	z-index: 1;
}

/* ==========================================================================
   2. COLLECTIONS – cards with frame-like depth shadow (no 3D rotation)
   ========================================================================== */
.premium-landing__collections {
	padding: 0 0 4rem;
	background:
		linear-gradient(180deg, #050506 0%, var(--premium-bg-alt) 72px),
		var(--premium-bg-alt);
}

/* Baner „Odkryj…” — bez przerwy pod hero (sekcja bez padding-top) */
.premium-landing__collections-banner-img {
	display: block;
	width: 100%;
	max-width: min(100%, 1080px);
	height: auto;
	margin: 0 auto;
}

.premium-landing__collections-banner-img + .premium-landing__cards {
	margin-top: 2.5rem;
}

.premium-landing__cards {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 2rem;
}

/* Card */
.premium-landing__card {
	display: flex;
	flex-direction: column;
	align-items: center;
	background: linear-gradient(170deg, #14161e 0%, #0b0d13 100%);
	border: 1px solid var(--premium-card-border);
	border-radius: 4px;
	overflow: hidden;
	position: relative;
	transition: transform 0.35s ease, box-shadow 0.35s ease, border-color 0.35s ease;

	/* Frame-like depth shadow */
	box-shadow:
		0 4px 16px rgba(0, 0, 0, 0.5),
		0 12px 40px rgba(0, 0, 0, 0.3),
		inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.premium-landing__card:hover {
	transform: translateY(-6px);
	border-color: rgba(201, 170, 106, 0.35);
	box-shadow:
		0 8px 24px rgba(0, 0, 0, 0.6),
		0 24px 64px rgba(0, 0, 0, 0.35),
		0 0 0 1px rgba(201, 170, 106, 0.2),
		inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

/* No pseudo-element decorations (removed 3D side/floor effects) */
.premium-landing__card::before,
.premium-landing__card::after {
	content: none;
}

/* Image wrap */
.premium-landing__card-image-wrap {
	width: 100%;
	aspect-ratio: 3 / 4;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	background: #080a0e;
	border-bottom: 1px solid rgba(201, 170, 106, 0.1);
	position: relative;
	padding: 24px;
}

/* Inner vignette on image area */
.premium-landing__card-image-wrap::after {
	content: '';
	position: absolute;
	inset: 0;
	box-shadow: inset 0 0 50px rgba(0, 0, 0, 0.6);
	pointer-events: none;
}

/* Image */
.premium-landing__card-image {
	max-width: 100%;
	max-height: 100%;
	width: auto;
	height: auto;
	object-fit: contain;
	display: block;
	transition: transform 0.4s ease;
	/* Subtle frame-like shadow on the product image itself */
	filter: drop-shadow(0 8px 24px rgba(0, 0, 0, 0.7));
}

.premium-landing__card:hover .premium-landing__card-image {
	transform: scale(1.03);
}

/* Card text */
.premium-landing__card-title {
	font-size: clamp(1.1rem, 2.2vw, 1.4rem);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--premium-gold);
	text-align: center;
	margin: 1.25rem 1.5rem 0.5rem;
}

.premium-landing__card-desc {
	font-size: 0.92rem;
	line-height: 1.6;
	color: var(--premium-text-muted);
	text-align: center;
	margin: 0 1.5rem 1.25rem;
	flex: 1;
}

/* CTA button */
.premium-landing__btn {
	display: inline-block;
	margin: auto 1.5rem 1.5rem;
	padding: 0.75rem 1.5rem;
	font-size: 0.78rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	text-align: center;
	color: #0b0d13;
	background: linear-gradient(135deg, #d4b96e 0%, #c9aa6a 60%, #b8965a 100%);
	border: none;
	border-radius: 999px;
	text-decoration: none;
	transition: background 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
	box-shadow: 0 4px 16px rgba(201, 170, 106, 0.25);
}

.premium-landing__btn:hover {
	background: linear-gradient(135deg, #e6d2a3 0%, #d4b96e 100%);
	transform: translateY(-2px);
	box-shadow: 0 8px 24px rgba(201, 170, 106, 0.35);
	color: #0b0d13;
}

/* ==========================================================================
   3. PROCESS
   ========================================================================== */
.premium-landing__process {
	padding: 3.75rem 0;
	border-top: 1px solid rgba(201, 170, 106, 0.08);
	background: linear-gradient(180deg, #0c0e14 0%, #080a10 100%);
}

.premium-landing__process-title {
	white-space: nowrap;
	font-size: clamp(1.25rem, 3vw, 1.75rem);
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: 0.03em;
	text-transform: none;
	text-align: center;
	margin: 0 0 1.25rem;
}

.premium-landing__process-panel {
	background: transparent;
	border: 0;
	border-radius: 0;
	padding: 0;
}

.premium-landing__process-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	gap: 2.25rem;
	position: relative;
	align-items: start;
}

.premium-landing__process-item {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	min-height: 172px;
	padding-top: 21px;
}

/* Connecting line */
.premium-landing__process-list::before {
	content: "";
	position: absolute;
	left: 8%;
	right: 8%;
	top: 119px;
	height: 1px;
	background: rgba(201, 170, 106, 0.18);
}

/* Step dot – top i linia odnoszą się do tego samego punktu 119px */
.premium-landing__process-item::before {
	content: "";
	position: absolute;
	top: 119px;
	left: 50%;
	width: 14px;
	height: 14px;
	border-radius: 50%;
	background: var(--premium-gold);
	transform: translate(-50%, -50%);   /* środek kropki = 119px, tyle co linia */
	z-index: 1;
	box-shadow: 0 0 8px rgba(201, 170, 106, 0.5);
}

.premium-landing__process-item::after {
	content: none;
}

.premium-landing__process-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 80px;
	height: 80px;
	margin-bottom: 12px;
	position: relative;
	z-index: 1;
}

.premium-landing__process-icon img {
	width: 80px;
	height: 80px;
	object-fit: contain;
	display: block;
}

.premium-landing__process-label {
	margin: 0;
	min-height: calc(1.35em * 2);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 16px;
	font-weight: 500;
	line-height: 1.35;
	color: rgba(255, 255, 255, 0.9);
	padding-top: 24px;
	max-width: 20ch;
	margin-inline: auto;
	overflow: hidden;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
}

.premium-landing__process-label::before {
	content: none;
}

@media (max-width: 1199px) {
	body.premium-landing-page {
		background-attachment: scroll;
		background-size: 600px 600px;
	}

	.premium-landing__process-list {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		row-gap: 2rem;
	}

	.premium-landing__process-item::before,
	.premium-landing__process-list::before {
		display: none;
	}
}

/* ==========================================================================
   4. ZALETY
   ========================================================================== */
.premium-landing__zalety.section-premium-background {
	position: relative;
	overflow: hidden;
	padding: 4rem 0;
	background-color: #0a0a0c;
	background-image:
		linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)),
		url("../images/landing-premium/texture_tla.webp"),
		url("../images/landing-premium/texture_tla.jpg"),
		radial-gradient(circle at 50% 35%, rgba(45, 35, 25, 0.7) 0%, rgba(10, 10, 12, 0) 68%);
	background-repeat: no-repeat, repeat, repeat, no-repeat;
	background-position: center;
	background-size: auto, auto, auto, cover;
}

.premium-landing__zalety.section-premium-background::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	background-color: rgba(0, 0, 0, 0.4);
}

.premium-landing__zalety-inner {
	position: relative;
	z-index: 1;
	max-width: 1100px;
}

.premium-landing__zalety-heading {
	font-size: clamp(1.25rem, 3vw, 1.75rem);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	text-align: center;
	margin: 0 0 2.5rem;
	color: #e8e8e8;
}

/* Siatka 2×2: pion tylko z pseudo; poziom między wierszami = border na górnej parze (bez top:50% na całym bloku — nie może „wylecieć” na nagłówek) */
.premium-landing__zalety-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0;
	position: relative;
}

.premium-landing__zalety-grid::before {
	content: "";
	position: absolute;
	left: 50%;
	top: 0;
	bottom: 0;
	width: 1px;
	background: rgba(201, 170, 106, 0.16);
	transform: translateX(-0.5px);
	pointer-events: none;
	z-index: 0;
}

.premium-landing__zalety-item {
	display: grid;
	grid-template-columns: 72px 1fr;
	column-gap: 1rem;
	row-gap: 0.25rem;
	align-items: start;
	padding: 2rem 2.5rem;
	position: relative;
	z-index: 1;
}

.premium-landing__zalety-item:nth-child(-n + 2) {
	border-bottom: 1px solid rgba(201, 170, 106, 0.16);
}

.premium-landing__zalety-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	grid-row: 1 / span 2;
}

.premium-landing__zalety-icon svg {
	width: 72px;
	height: 72px;
	filter: drop-shadow(0 0 8px rgba(201, 170, 106, 0.25));
}

.premium-landing__zalety-icon img {
	width: 72px;
	height: 72px;
	display: block;
	object-fit: contain;
	image-rendering: -webkit-optimize-contrast;
	image-rendering: crisp-edges;
	filter: none;
}

.premium-landing__zalety-title {
	font-size: 1rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	margin: 0;
	grid-column: 2;
	color: #e8e8e8;
}

.premium-landing__zalety-desc {
	font-size: 0.9rem;
	line-height: 1.6;
	color: rgba(240, 232, 216, 0.55);
	margin: 0;
	grid-column: 2;
}

/* ==========================================================================
   5. CTA
   ========================================================================== */
.premium-landing__cta {
	padding: 3rem 0;
	background: radial-gradient(ellipse 80% 60% at 50% 100%, rgba(201, 170, 106, 0.06) 0%, transparent 65%), #050506;
}

.premium-landing__cta-title {
	font-size: clamp(1.25rem, 3vw, 1.75rem);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	text-align: center;
	margin: 0;
}

.premium-landing__cta-link {
	color: var(--premium-gold);
	text-decoration: none;
	transition: color 0.2s;
}

.premium-landing__cta-link:hover {
	color: var(--premium-gold-light);
}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width: 767px) {
	.premium-landing__cards {
		grid-template-columns: 1fr;
		max-width: 400px;
		margin: 0 auto;
	}

	.premium-landing__card-title {
		font-size: 1.15rem;
	}

	.premium-landing__collections {
		padding: 0 0 3rem;
	}

	.premium-landing__process,
	.premium-landing__zalety {
		padding: 3rem 0;
	}

	.premium-landing__process-title {
		font-size: clamp(1.125rem, 5.2vw, 1.5rem);
		white-space: normal;
		margin-bottom: 1.25rem;
	}

	.premium-landing__process-list {
		grid-template-columns: 1fr;
		gap: 1.6rem;
	}

	.premium-landing__process-item {
		min-height: auto;
		padding-top: 0;
	}

	.premium-landing__process-icon {
		width: 54px;
		height: 54px;
		margin-bottom: 14px;
	}

	.premium-landing__process-icon img {
		width: 54px;
		height: 54px;
	}

	.premium-landing__process-label {
		font-size: 14px;
		min-height: auto;
		padding-top: 0;
		max-width: 24ch;
		display: block;
		-webkit-line-clamp: unset;
	}

	.premium-landing__process {
		padding: 2rem 0;
	}

	/* Jedna kolumna: bez pionu; poziome linie tylko z borderów kart */
	.premium-landing__zalety-grid::before {
		display: none;
	}

	.premium-landing__zalety-grid {
		grid-template-columns: 1fr;
	}

	.premium-landing__zalety-item {
		grid-template-columns: 56px 1fr;
		column-gap: 0.875rem;
		row-gap: 0.2rem;
		padding: 1.35rem 1rem;
	}

	/* Nadpisz regułę desktop: w 1 kolumnie linia pod każdą kartą oprócz ostatniej */
	.premium-landing__zalety-item:nth-child(-n + 2) {
		border-bottom: none;
	}

	.premium-landing__zalety-item:not(:last-child) {
		border-bottom: 1px solid rgba(201, 170, 106, 0.2);
	}

	.premium-landing__zalety-icon svg,
	.premium-landing__zalety-icon img {
		width: 56px;
		height: 56px;
	}
}



/* =====================================================
   6. LANDING FOOTER
   ===================================================== */
.premium-landing-footer {
	background: #050506;
	border-top: 1px solid rgba(201, 170, 106, 0.12);
	padding: 1.5rem var(--premium-padding);
	text-align: center;
	position: relative;
	z-index: 1;
}

/* Jak powstaje ramka / landing: stopka w szablonie strony musi być nad body::before i nad typowymi wrapperami (#content). */
body.premium-landing-page footer.premium-landing-footer {
	position: relative;
	z-index: 5;
	isolation: isolate;
}

.premium-landing-footer__nav ul {
	list-style: none;
	margin: 0 0 0.75rem;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.25rem 1.5rem;
}

.premium-landing-footer__nav a {
	font-size: 0.8rem;
	font-weight: 500;
	color: rgba(240, 232, 216, 0.55);
	text-decoration: none;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	transition: color 0.2s;
}

.premium-landing-footer__nav a:hover {
	color: var(--premium-gold);
}

.premium-landing-footer__copy {
	margin: 0;
	font-size: 0.75rem;
	color: rgba(240, 232, 216, 0.3);
}
/* MVP FIX 1 — menu na landing page */
body.premium-landing-page .site-header,
body.premium-landing-page header,
body.premium-landing-page .elementor-location-header {
	background: rgba(5, 5, 6, 0.92);
	border-bottom: 1px solid rgba(201, 170, 106, 0.10);
}

body.premium-landing-page .site-header a,
body.premium-landing-page header a,
body.premium-landing-page .elementor-location-header a,
body.premium-landing-page .menu a,
body.premium-landing-page .elementor-nav-menu a,
body.premium-landing-page .elementor-item {
	color: #c9aa6a !important;
}

body.premium-landing-page .site-header a:hover,
body.premium-landing-page header a:hover,
body.premium-landing-page .elementor-location-header a:hover,
body.premium-landing-page .menu a:hover,
body.premium-landing-page .elementor-nav-menu a:hover,
body.premium-landing-page .elementor-item:hover,
body.premium-landing-page .current-menu-item > a,
body.premium-landing-page .current_page_item > a {
	color: #f0e8d8 !important;
}

body.premium-landing-page .site-header .menu,
body.premium-landing-page header .menu,
body.premium-landing-page .elementor-nav-menu--main {
	gap: 1.25rem;
}
/* MVP VIDEO — pod sekcją procesu */
.premium-landing__video {
	padding: 0 0 4rem;
	background: linear-gradient(180deg, #080a10 0%, #0a0a0c 100%);
}

.premium-landing__video-inner {
	max-width: 980px;
	margin: 0 auto;
	text-align: center;
}

.premium-landing__video-title {
	margin-bottom: 0.75rem;
}

.premium-landing__video-desc {
	margin: 0 auto 1.5rem;
	max-width: 760px;
	font-size: 0.95rem;
	line-height: 1.7;
	color: rgba(240, 232, 216, 0.68);
}

.premium-landing__video-frame {
	position: relative;
	overflow: hidden;
	border-radius: 14px;
	border: 1px solid rgba(201, 170, 106, 0.18);
	background: #050506;
	box-shadow:
		0 12px 40px rgba(0, 0, 0, 0.45),
		0 0 0 1px rgba(201, 170, 106, 0.08) inset;
}

.premium-landing__video-frame::before {
	content: "";
	position: absolute;
	inset: 0;
	background:
		linear-gradient(180deg, rgba(5,5,6,0.18) 0%, rgba(5,5,6,0.08) 25%, rgba(5,5,6,0.32) 100%),
		linear-gradient(90deg, rgba(5,5,6,0.26) 0%, rgba(5,5,6,0.05) 18%, rgba(5,5,6,0.05) 82%, rgba(5,5,6,0.26) 100%);
	pointer-events: none;
	z-index: 1;
}

.premium-landing__video-el {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 9;
	object-fit: cover;
	background: #000;
}

@media (max-width: 767px) {
	.premium-landing__video {
		padding: 0 0 3rem;
	}

	.premium-landing__video-desc {
		font-size: 0.9rem;
		margin-bottom: 1.25rem;
	}

	.premium-landing__collections-banner-img {
		filter: brightness(0.72) saturate(0.9);
		margin-bottom: 1.75rem;
	}
}