/* ==========================================================================
   Strony statyczne: „O nas” i „Gwarancja i serwis” — 1:1 z Figmy.
   Ładowany tylko na tych stronach (inc/pages.php), po main.css — korzysta
   z tokenów :root i klas współdzielonych (.crumbs, .section-title, .story,
   .btn-line, .btn-sand, .mc-btn, .entry__content) zdefiniowanych tam.
   Breakpointy zgodne z main.css: 1279 / 1023 / 767.
   ========================================================================== */

/* ---------- O nas: hero ---------- */
/* Figma #19047: obraz hero @13,88 — od razu pod nagłówkiem (bez dodatkowych 13 px u góry).
   Wysokość jak slider na stronie głównej (uwaga klienta; w Figmie 876 px): dół na ~88 % wysokości ekranu, --hero-top liczy main.js.
   min-height zamiast height — przy niskim oknie tekst rozpycha baner, zamiast się ucinać. */
.about-hero { position: relative; display: flex; flex-direction: column; min-height: max(420px, calc(88svh - var(--hero-top, 142px))); margin: 0 var(--inset) 0; overflow: hidden; }
.about-hero__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 0; /* głowy są przy górnej krawędzi zdjęcia — na szerokich ekranach tniemy od dołu */ }
.about-hero__scrim { position: absolute; inset: 0; background: rgb(0 0 0 / 0.34); }
/* Figma #19107: okruszki @121,115 (tekst biały #fff, „/” też) — 13 px od krawędzi hero + 108 px */
.about-hero__crumbs { position: relative; z-index: 1; padding: 13px var(--gutter) 0 calc(var(--gutter) - var(--inset) + 1px); }
.about-hero__crumbs .crumbs { padding: 0; }
.about-hero__crumbs .crumbs a, .about-hero__crumbs .crumbs li { color: var(--c-white); }
.about-hero__crumbs .crumbs li + li::before { color: var(--c-white); }
/* Figma #19050: etykieta @331 (243 px od góry hero 876 px) — blok tekstu leży ok. 13 px powyżej środka banera. Okruszki (47 px)
   są w przepływie, więc środek wolnego miejsca wypada 23,5 px za nisko; dolny padding większy o 73 px niż górny podnosi blok
   o 36,5 px (97 px przy ekranie 1080 px; przy niższym oknie mniej, żeby tekst nie rozpychał banera ponad wysokość slidera).
   Górne 24 px to najmniejszy odstęp od okruszków.
   Tytuł 848 px (2 linie) 24 px pod etykietą, lead 48 px pod tytułem. Pole musi mieć 848 + padding boczny, inaczej tytuł zawija się w 3 linie. */
.about-hero__content { position: relative; z-index: 1; max-width: calc(848px + 2 * (var(--gutter) - var(--inset))); margin-block: auto; padding: 24px calc(var(--gutter) - var(--inset)) clamp(24px, 9svh, 97px); color: var(--c-white); }
.about-hero__kicker { font-weight: 500; font-size: 14px; line-height: 18px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--c-gold); }
.about-hero__title { margin-top: 24px; max-width: 848px; font-family: var(--f-display); font-weight: 300; font-size: clamp(34px, 3.75vw, 72px); line-height: 1.36; }
.about-hero__lead { margin-top: 48px; max-width: 613px; font-family: var(--f-sofia); font-size: 16px; line-height: 1.62; }

/* ---------- O nas: „Nasza historia” (reużywa .story z main.css) ---------- */
/* Figma: kolaż zaczyna się 74 px pod hero (1038 − 964). Odstęp robi padding .story
   (nie margines, żeby nie dublować z domyślnym paddingiem sekcji 120 px). */
.about-story { margin-top: 0; padding-top: clamp(40px, 3.85vw, 74px); }
/* Figma #19031/#19029: kolaż @34 (nie 24), kolumna tekstu kończy się na 1800 (nie 1790); tekst zaczyna się 264 px pod górą kolażu (nie wyśrodkowany). */
@media (min-width: 1024px) {
	.about-story { padding-left: clamp(8px, 1.77vw, 34px); padding-right: clamp(20px, 6.25vw, 120px); }
	.about-story .story__text { align-self: start; margin-top: clamp(0px, 13.75vw, 264px); }
}

/* ---------- O nas: „Dlaczego kolekcjonerzy…” ---------- */
/* Figma #18988: kremowy pas #fffcf5 na całą szerokość (1920×690), tytuł 100 px od góry,
   lista 624 px od x=1176 (rząd 48 + odstęp 34 = pitch 82), 96 px do dołu pasa. */
.about-why {
	display: grid;
	grid-template-columns: minmax(0, 624px) minmax(0, 624px);
	justify-content: space-between;
	gap: clamp(24px, 4.06vw, 78px);
	align-items: start;
	margin-top: clamp(56px, 10.9vw, 209px);
	padding: clamp(56px, 5.2vw, 100px) var(--gutter) clamp(56px, 5vw, 96px);
	background: var(--c-cream);
}
/* Tytuł Light 300 (Figma #19010); `.section-title` z main.css ma 400. */
.about-why__title { max-width: 624px; font-weight: 300; }
/* Figma #19011: tekst 34 px stoi 24 px nad linią #eee (linia 58 px pod górą tekstu), pitch 82; pierwszy tekst 10 px nad górą grupy (2424 vs 2434). */
.about-why__list { display: flex; flex-direction: column; gap: 48px; margin-top: clamp(0px, 1.35vw, 26px); padding-bottom: 24px; }
.about-why__list li {
	position: relative;
	min-height: 0;
	padding: 0;
	font-size: 18px;
	line-height: 34px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}
.about-why__list li::after { content: ""; position: absolute; left: 0; right: 0; top: 58px; height: 1px; background: var(--c-bar); }

/* ---------- O nas: pas zaufania (zdjęcie + karty) ---------- */
/* Figma #18989: zdjęcie 1920×1250 tuż pod kremowym pasem, gradient płaski 0,63,
   pod spodem pas 582 px `#000` 50% z rozmyciem tła; tytuł i kafle przy dole (100 px).
   Rozmycie pasa to rozmyta kopia zdjęcia przycięta do pasa (.about-trust__blur), a nie backdrop-filter:
   wygląd ten sam, ale przeglądarka rozmywa raz, a nie w każdej klatce przewijania (telefony gubiły klatki). */
.about-trust { --trust-band: clamp(300px, 30.3vw, 582px); position: relative; margin-top: 0; overflow: hidden; background: #1a1a1a; } /* ciemne tło zastępcze, dopóki leniwe zdjęcie się nie załaduje (bez niego widać szary pusty blok) */
.about-trust__img { display: block; width: 100%; height: clamp(420px, 65.1vw, 1250px); object-fit: cover; }
.about-trust__blur { position: absolute; inset: 0; clip-path: inset(calc(100% - var(--trust-band)) 0 0 0); pointer-events: none; }
/* Kopia większa o 40 px z każdej strony — rozmycie nie blednie przy krawędziach sekcji. */
.about-trust__blur img { position: absolute; left: -40px; top: -40px; width: calc(100% + 80px); height: calc(100% + 80px); max-width: none; object-fit: cover; filter: blur(24px); }
.about-trust__scrim { position: absolute; inset: 0; background: rgb(0 0 0 / 0.63); }
.about-trust__inner { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: flex-end; gap: clamp(32px, 3.75vw, 72px); padding: 0 var(--gutter) clamp(40px, 5.2vw, 100px); }
.about-trust__inner::before { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: var(--trust-band); background: rgb(0 0 0 / 0.5); pointer-events: none; }
.about-trust__inner > * { position: relative; }
.about-trust__title { max-width: 608px; font-family: var(--f-display); font-weight: 300; font-size: clamp(24px, 1.98vw, 38px); line-height: 1.37; color: var(--c-white); }
.about-trust__cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.about-trust__cards li { min-height: 206px; padding: clamp(20px, 1.98vw, 38px) clamp(16px, 1.77vw, 34px) 34px; background: #000; }
.about-trust__cards h3 { font-family: var(--f-display); font-weight: 300; font-size: clamp(22px, 1.46vw, 28px); line-height: 1.357; color: var(--c-white); }
.about-trust__cards p { margin-top: clamp(16px, 1.67vw, 32px); font-family: var(--f-sofia); font-weight: 300; font-size: 14px; line-height: 17px; max-width: 304px; color: var(--c-white); } /* Figma #19001: biały, pole 304 px */

/* ---------- O nas: powrót do „Naszej historii” + CTA ---------- */
/* Figma #19042: blok wyśrodkowany — etykieta x=900, tytuł 534 px @693, akapit 759 px @580,
   przycisk 318×63 @801; 203 px pod zdjęciem zaufania. */
.about-recap { max-width: calc(759px + 2 * var(--gutter)); margin: clamp(56px, 10.57vw, 203px) auto 0; padding: 0 var(--gutter) 203px; text-align: center; }
.about-recap__kicker { font-weight: 500; font-size: 14px; line-height: 18px; letter-spacing: 0.05em; text-transform: uppercase; color: var(--c-gold); }
.about-recap__title { max-width: 534px; margin: 18px auto 0; font-family: var(--f-display); font-weight: 300; font-size: clamp(24px, 1.98vw, 38px); line-height: 1.37; }
.about-recap__text { margin-top: 32px; font-family: var(--f-sofia); font-size: 18px; line-height: 1.9; }
.about-recap__btn { display: inline-flex; margin-top: 48px; width: auto; min-width: 318px; padding: 0 32px; justify-content: center; }

/* „Gwarancja i serwis” używa układu stron prawnych (`.legal*` w content.css) — dawne reguły `.help__*` usunięte. */

@media (max-width: 1279px) {
	.about-trust__cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 1279px) {
	/* 2 rzędy kafli (2 × 206 px) + tytuł muszą się zmieścić w zdjęciu. */
	.about-trust__img { min-height: 800px; }
}

@media (max-width: 1023px) {
	.about-why { grid-template-columns: minmax(0, 1fr); }
	.about-why__list { margin-top: 0; }
}

@media (max-width: 767px) {
	/* Zgodnie z ramką Figmy 593:28350 (mobile „O nas”): zdjęcie tylko w górnej
	   części karty (364px), reszta to pełne tło #111110 z tekstem pod spodem —
	   nie zdjęcie na całą wysokość z zaciemnieniem jak na desktopie. */
	/* Figma #28447: panel dotyka paska nagłówka (y=70), bez okruszków na zdjęciu */
	.about-hero { display: block; min-height: 0; margin: 0 var(--inset) 0; background: #111110; }
	/* Zdjęcie 378×364 (Figma #28449); kadr przesunięty w prawo, żeby obie twarze zostały w kadrze. */
	.about-hero__img { position: static; height: auto; aspect-ratio: 378 / 364; object-position: 85% 0; }
	.about-hero__scrim { display: none; }
	.about-hero__crumbs { display: none; }
	/* Figma #28450: tekst @x=20 (12 px od panelu), 20 px pod zdjęciem; tytuł 305 px (3 linie), lead 351 px DM Sans 14/19 */
	.about-hero__content { position: static; max-width: none; padding: 20px 15px 21px 12px; }
	.about-hero__title { margin-top: 14px; max-width: 305px; font-size: 28px; line-height: 1.36; }
	.about-hero__lead { margin-top: 28px; max-width: 351px; font-family: var(--f-sans); font-size: 14px; line-height: 19px; }
	/* Figma #28454: kolaż 412 px (@−26…386), 48 px pod panelem hero */
	.about-story { margin-top: 48px; padding-top: 0; }
	.about-story .story__collage { width: calc(100% + 59px); }
	/* Figma #28468: kremowy pas 394×549 także na mobile; tytuł 32 px od góry, wiersze 52 px co 70 (tekst 34 + linia 18 pod nim). */
	.about-why { margin-top: 56px; padding: 32px 20px 31px; gap: 24px; }
	.about-why__list { gap: 36px; margin-top: -6px; padding-bottom: 18px; }
	.about-why__list li { min-height: 0; padding: 0; font-size: 14px; line-height: 34px; }
	.about-why__list li::after { top: 51px; }
	/* Figma #28485–#28487: sekcja 976 px (zdjęcie + gradient + pas 50 % z rozmyciem 620 px), karty 380 px @7, 110 px wysokości */
	.about-trust__img { height: 976px; min-height: 0; }
	.about-trust__inner { padding: 0 20px 31px; gap: 18px; }
	.about-trust { --trust-band: 620px; }
	.about-trust__inner::before { display: block; }
	.about-trust__title { line-height: 1.375; }
	.about-trust__cards { grid-template-columns: minmax(0, 1fr); gap: 10px; margin-inline: -13px; }
	.about-trust__cards li { min-height: 110px; padding: 20px 14px; }
	.about-trust__cards h3 { font-size: 16px; line-height: 22px; }
	.about-trust__cards p { margin-top: 14px; min-height: 34px; }
	/* Figma #28506: 68 px pod sekcją zaufania; etykieta→tytuł 36, tytuł→akapit 23, akapit→przycisk 38; przycisk 353×63 */
	.about-recap { margin-top: 68px; padding: 0 20px 68px; }
	.about-recap__title { margin-top: 18px; line-height: 1.375; }
	.about-recap__text { margin-top: 23px; }
	.about-recap .about-recap__btn { margin-top: 38px; min-width: 0; width: 100%; height: 63px; }
	.about-recap__text { font-family: var(--f-sans); font-size: 18px; line-height: 23px; }
}

@media (prefers-reduced-motion: reduce) {
	.about-trust__cards li { backdrop-filter: none; }
}