/* ==========================================================================
   ALDAR FARMA — layout.css
   Kontenery, sekcje, siatki. Bez kolorów komponentów.
   ========================================================================== */

/* --------------------------------------------------------------------------
   KONTENERY
   -------------------------------------------------------------------------- */
/* Kolumna treści: wyśrodkowana, maksymalnie 1240 px.
   Hero jest wyjątkiem — jako panel idzie przez całą szerokość ekranu. */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.container--wide {
  max-width: var(--container-wide);
}

.container--narrow {
  max-width: 860px;
}

/* --------------------------------------------------------------------------
   SEKCJE
   -------------------------------------------------------------------------- */
.section {
  padding-block: var(--section-y);
  position: relative;
}

.section--tight {
  padding-block: var(--section-y-tight);
}

.section--alt {
  background-color: var(--bg-alt);
}

/* Sekcja odwrócona renderuje się jako PANEL, nie jako pas na pełną szerokość.
   Zamiast dokładać znacznik w każdym miejscu użycia, przejmuje tę rolę
   kontener sekcji: dostaje tło, zaokrąglenie i wewnętrzny odstęp.
   Dzięki temu cały serwis mówi jednym językiem bez przepisywania HTML-a. */
.section--inverse {
  background-color: transparent;
  color: var(--text-inverse);
  padding-block: var(--section-y);
}

/* Ciemny panel ma tę samą szerokość co hero: przez cały ekran, minus wspólny
   margines. Sekcje na jasnym tle zostają w kolumnie 1240 px.

   width:auto, nie 100% — .container ma szerokość 100%, więc razem z marginesami
   bocznymi wychodziłby poza ekran i strona dostawałaby poziomy pasek. */
.section--inverse > .container {
  width: auto;
  max-width: none;
  margin-inline: var(--panel-inset);
  padding: var(--panel-pad) var(--panel-pad-x);
  background-color: var(--green-950);
  border-radius: var(--radius-panel);
  overflow: hidden;
  isolation: isolate;
  /* Samo overflow:hidden potrafi przestać przycinać do zaokrąglonego rogu,
     gdy w środku jest potomek z transform/will-change — a [data-reveal]
     ma dokładnie to (animacja wejścia). Przeglądarka wtedy promuje takiego
     potomka do własnej warstwy kompozycji i „gubi" zaokrąglone przycinanie
     rodzica, przez co poświata z ::before wygląda, jakby wyciekała poza
     panel. contain:paint to twarda gwarancja malowania wyłącznie wewnątrz
     własnych granic elementu — dokładnie po to istnieje. */
  contain: paint;
}

/* Poświata, nie płaska plama. Dwie miękkie, przenikające się plamy koloru
   marki w rogach — ten sam trik, którego Linear/Stripe używają na ciemnych
   sekcjach, żeby jednolity kolor nie czytał się jako martwy prostokąt.
   Bardzo niska nieprzezroczystość (4–6%): ma być wyczuwalna, nie widoczna
   wprost jak osobny kształt. */
.section--inverse > .container::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  /* border-radius:inherit jest tu obroną drugiej linii, nie ozdobą.
     Środek gradientu leży BLISKO rogu (10%/8%), a przy jasnej plamie
     dokładnie w rogu panelu sam overflow:hidden nie wystarczał — róg
     jest przycinany po łuku, a gradient „widział" prostokątny box,
     więc najjaśniejszy punkt ucinał się ostrą, prostą krawędzią tuż przy
     zaokrągleniu i czytał się jako poświata wyciekająca poza panel.
     Odsunięcie środka od 0%/0% w głąb (10%/8%) chowa ten problem u źródła,
     a border-radius:inherit gwarantuje, że nawet skrajny przypadek
     nie przetnie się z zaokrągleniem panelu. */
  border-radius: inherit;
  background-image:
    radial-gradient(ellipse 55% 45% at 10% 8%,
      color-mix(in srgb, var(--green-500) 16%, transparent), transparent 68%),
    radial-gradient(ellipse 45% 40% at 92% 92%,
      color-mix(in srgb, var(--green-400) 10%, transparent), transparent 68%);
}

.section--inverse > .container > * {
  position: relative;
  z-index: 1;
}

/* Wariant kolorystyczny: ten sam panel (geometria, typografia, karty,
   poświata), inna baza. Sekcja marek własnych dostaje chłodny prawie-czarny
   zamiast zieleni — reszta strony jest zielonymi panelami na przemian
   z jasnym tłem, więc jeden odmienny odcień w środku łamie monotonię,
   nie wychodząc poza rodzinę ciemnych, premium teł.

   Baza jest o cień jaśniejsza niż surowe #0d1313 (patrz --ink-900 w
   variables.css) — czysta czerń pod poświatą wygląda na dziurę w stronie,
   ten odcień zostawia wrażenie głębi zamiast pustki. */
.section--inverse.section--ink > .container {
  background-color: var(--ink-900);
}

.section--inverse.section--ink > .container::before {
  background-image:
    radial-gradient(ellipse 60% 50% at 10% 8%,
      color-mix(in srgb, var(--green-500) 20%, transparent), transparent 70%),
    radial-gradient(ellipse 50% 45% at 92% 92%,
      color-mix(in srgb, var(--wheat-500) 8%, transparent), transparent 68%);
}

.section--inverse h1,
.section--inverse h2,
.section--inverse h3,
.section--inverse h4 {
  color: var(--text-inverse);
}

/* Białe karty wewnątrz ciemnego panelu zachowują własną kolorystykę */
.section--inverse .feature:not(.feature--bare),
.section--inverse .offer-card,
.section--inverse .contact-card,
.section--inverse .brand-card {
  color: var(--text);
}

.section--inverse .feature:not(.feature--bare) h3,
.section--inverse .offer-card h3,
.section--inverse .contact-card h3,
.section--inverse .brand-card h3 {
  color: var(--text);
}

/* --------------------------------------------------------------------------
   NAGŁÓWEK SEKCJI
   -------------------------------------------------------------------------- */
.section-head {
  max-width: 42rem;
  margin-bottom: clamp(var(--space-10), 5vw, var(--space-16));
}

.section-head--center {
  margin-inline: auto;
  text-align: center;
}

.section-head--center p {
  margin-inline: auto;
}

.section-head__title {
  margin-top: var(--space-4);
}

.section-head__lead {
  margin-top: var(--space-5);
  font-size: var(--text-lg);
  line-height: var(--leading-snug);
  color: var(--text-muted);
}

.section--inverse .section-head__lead,
.panel--dark .section-head__lead {
  color: var(--text-on-dark-muted);
}

/* Wyróżnienie w nagłówku sekcji — druga linia w kolorze akcji */
.section-head__title em {
  font-style: normal;
  color: var(--highlight-ink);
}

.section--inverse .section-head__title em,
.panel--dark .section-head__title em {
  color: var(--accent);
}

/* Nagłówek sekcji z akcją po prawej (desktop) */
.section-head--split {
  max-width: none;
  display: grid;
  gap: var(--space-6);
  align-items: end;
}

@media (min-width: 48em) {
  .section-head--split {
    grid-template-columns: minmax(0, 1fr) auto;
  }
  .section-head--split > :last-child {
    justify-self: end;
  }
}

/* Nagłówek „duży tytuł / lead obok" — ta sama zasada co przy .intro
   (kontrast skali robi robotę), użyta tam, gdzie nie ma widżetu sterowania
   po prawej, tylko sam tekst. */
.section-head--wide {
  max-width: none;
}

@media (min-width: 56em) {
  .section-head--wide {
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    gap: clamp(var(--space-10), 6vw, var(--space-16));
    align-items: end;
  }
}

/* --------------------------------------------------------------------------
   SIATKI
   -------------------------------------------------------------------------- */
.grid {
  display: grid;
  gap: var(--space-6);
}

/* Auto-fit: kolumny same się układają, bez media queries.
   minmax(0, 1fr) zamiast 1fr — zapobiega rozpychaniu przez długie słowa. */
.grid--cards {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
  gap: clamp(var(--space-4), 2vw, var(--space-6));
}

.grid--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr)); }
.grid--3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); }
.grid--4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr)); }

/* --------------------------------------------------------------------------
   BENTO — siatka kategorii na stronie głównej
   Mobile: jedna kolumna. Desktop: pierwsza karta zajmuje 2×2.
   -------------------------------------------------------------------------- */
.bento {
  display: grid;
  gap: clamp(var(--space-4), 1.6vw, var(--space-6));
  grid-template-columns: 1fr;
}

@media (min-width: 40em) {
  .bento {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 64em) {
  .bento {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-auto-rows: minmax(15rem, auto);
  }
  .bento > :first-child {
    grid-column: span 2;
    grid-row: span 2;
  }
}

/* --------------------------------------------------------------------------
   SPLIT — obraz obok treści
   -------------------------------------------------------------------------- */
.split {
  display: grid;
  gap: clamp(var(--space-8), 5vw, var(--space-16));
  align-items: center;
}

/* Kolumny o różnej wysokości (formularz obok danych kontaktowych) muszą
   zaczynać się od tej samej linii. Domyślne wyśrodkowanie przesuwało niższą
   kolumnę w dół i między nagłówkiem a formularzem robiła się pusta dziura. */
.split--top {
  align-items: start;
}

@media (min-width: 56em) {
  .split {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .split--media-right > .split__media { order: 2; }
  .split--wide-text { grid-template-columns: 1.15fr 1fr; }
}

.split__media {
  position: relative;
  isolation: isolate;
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--border);
  box-shadow: var(--shadow-xl);
}

/* Napis na zdjęciu (np. lokalizacja) — dostępny tylko tam, gdzie zdjęcie
   ma na sobie realną, sprawdzalną informację do pokazania; bez tego
   modyfikatora .split__media zostaje czystym zdjęciem w ramce. */
.split__media--tagged::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(
    to top,
    rgba(15, 33, 3, 0.6) 0%,
    rgba(15, 33, 3, 0.22) 30%,
    transparent 55%
  );
  pointer-events: none;
}

.split__tag {
  position: absolute;
  z-index: 2;
  inset-block-end: var(--space-5);
  inset-inline-start: var(--space-5);
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 0.55rem 0.95rem;
  border-radius: var(--radius-full);
  background-color: rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(8px) saturate(160%);
  -webkit-backdrop-filter: blur(8px) saturate(160%);
  border: 1px solid rgba(255, 255, 255, 0.3);
  color: var(--white);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-tight);
}

.split__tag svg {
  width: 1rem;
  height: 1rem;
  color: var(--accent-bright);
}

/* --------------------------------------------------------------------------
   WPROWADZENIE — duży nagłówek obok bloku argumentacji

   Nagłówek celowo zostaje wąski i mocno złamany, a tekst wyjaśniający siedzi
   obok, mniejszy. Ten kontrast skali robi całą robotę: oko trafia najpierw
   w hasło, dopiero potem w uzasadnienie.
   -------------------------------------------------------------------------- */
.intro {
  display: grid;
  gap: clamp(var(--space-10), 6vw, var(--space-16));
  align-items: start;
}

@media (min-width: 56em) {
  .intro {
    grid-template-columns: 0.92fr 1fr;
    gap: clamp(var(--space-10), 6vw, var(--space-20));
    align-items: center;
  }
}

.intro__title {
  margin-block-start: var(--space-5);
  font-size: clamp(2rem, 1.5rem + 2.4vw, 3.25rem);
  font-weight: var(--weight-extra);
  line-height: 1.06;
  letter-spacing: var(--tracking-tighter);
  text-wrap: balance;
}

.intro__title em {
  font-style: normal;
  color: var(--highlight-ink);
}

.intro__aside {
  display: block;
}

.intro__lead {
  margin-block-start: var(--space-6);
  font-size: var(--text-lg);
  font-weight: var(--weight-medium);
  line-height: var(--leading-snug);
  color: var(--text);
}

.intro__text {
  margin-block-start: var(--space-5);
  color: var(--text-muted);
}

/* ---- Portret właściciela + latające kafelki ----
   Zdjęcie stoi w osobnej kolumnie, wyśrodkowanej względem bloku tekstu —
   to naturalnie balansuje wysokości obu kolumn (poprzednio nagłówek
   i zdjęcie siedziały nad tekstem, który był od nich krótszy, więc pod
   spodem zostawała pustka). Rozmyta plama w barwach marki za zdjęciem
   plus wąska „oddechowa" obwódka w kolorze tła budują głębię bez
   dokładania kolejnego elementu graficznego. Kafle — z imieniem i
   z realną liczbą lat na rynku — niczego nie zmyślają: „Darek" to imię,
   którym klienci podpisują się w prawdziwych opiniach Google widocznych
   niżej na tej samej stronie, a „17 lat" to ta sama liczba co w pasku
   statystyk. */
.intro__media {
  display: flex;
  justify-content: center;
}

@media (min-width: 56em) {
  .intro__media {
    justify-content: flex-start;
  }
}

.intro__photo {
  position: relative;
  isolation: isolate;
  width: min(100%, 24rem);
}

.intro__photo::before {
  content: "";
  position: absolute;
  /* -5%, nie -12%/-16%: przy szerokości zdjęcia = pełna szerokość kolumny
     na mobile (brak marginesu do .intro__photo) każdy bleed większy niż
     dostępny --gutter (min 20px, patrz variables.css) realnie wychodzi
     poza viewport. html ma overflow-x:hidden (patrz base.css), ale to
     nie chowa problemu — Chromium wtedy i tak liczy szerokość elementów
     position:fixed (nagłówek, menu mobilne) względem tej poszerzonej,
     nieprzyciętej zawartości, więc menu/hamburger realnie wjeżdżały
     daleko w prawo poza ekran na telefonie. 5% na tym zdjęciu to ok. 17px
     bleed — mieści się w gutterze przy każdej szerokości ekranu. */
  inset: -5%;
  z-index: -1;
  background:
    radial-gradient(circle at 20% 18%, color-mix(in srgb, var(--accent) 60%, transparent), transparent 62%),
    radial-gradient(circle at 84% 86%, color-mix(in srgb, var(--accent-light) 55%, transparent), transparent 64%);
  filter: blur(40px);
  opacity: 0.5;
}

.intro__photo img {
  display: block;
  width: 100%;
  border-radius: var(--radius-lg);
  box-shadow: 0 0 0 6px var(--bg), var(--shadow-xl);
}

.intro__tile {
  position: absolute;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  background-color: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(10px) saturate(160%);
  -webkit-backdrop-filter: blur(10px) saturate(160%);
  border: 1px solid rgba(255, 255, 255, 0.6);
  box-shadow: var(--shadow-lg);
  transition: transform var(--dur-base) var(--ease-out);
}

.intro__photo:hover .intro__tile {
  transform: translateY(-2px);
}

.intro__tile--person {
  inset-inline-end: clamp(-1.5rem, -5vw, -0.75rem);
  inset-block-end: -1.1rem;
  max-width: 14rem;
}

.intro__tile-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 50%;
  background-color: var(--green-100);
  color: var(--accent-ink);
}

.intro__tile-icon svg {
  width: 1.15rem;
  height: 1.15rem;
}

.intro__tile-text {
  display: block;
}

.intro__tile-name {
  font-family: var(--font-display);
  font-weight: var(--weight-extra);
  letter-spacing: var(--tracking-tight);
  color: var(--text);
}

.intro__tile-role {
  font-size: var(--text-xs);
  color: var(--text-muted);
}

.intro__tile--stat {
  flex-direction: column;
  align-items: flex-start;
  gap: 0;
  inset-inline-start: clamp(-1.5rem, -5vw, -0.75rem);
  inset-block-start: clamp(1.5rem, 4vw, 2.5rem);
  background: linear-gradient(135deg, var(--green-50), var(--green-100));
  border-color: color-mix(in srgb, var(--cta) 45%, transparent);
  transform: rotate(-3deg);
}

.intro__photo:hover .intro__tile--stat {
  transform: rotate(-3deg) translateY(-2px);
}

.intro__tile-value {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: var(--weight-extra);
  line-height: 1;
  color: var(--highlight-ink);
}

.intro__tile-label {
  margin-block-start: 2px;
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  color: var(--text-muted);
}

/* Na wąskich ekranach kolumna jest ciasna — kafle dostają skromniejszy
   offset, żeby nie wjeżdżały poza kontener. */
@media (max-width: 27em) {
  .intro__tile--person {
    inset-inline-end: -0.5rem;
    max-width: 11.5rem;
  }
  .intro__tile--stat {
    inset-inline-start: -0.5rem;
  }
}

/* --------------------------------------------------------------------------
   STOS — pionowy rytm bez marginesów na dzieciach
   -------------------------------------------------------------------------- */
.stack {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  align-items: flex-start;
}

.stack--lg { gap: var(--space-6); }
.stack--sm { gap: var(--space-2); }

.cluster {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  align-items: center;
}

.cluster--lg { gap: var(--space-6); }

/* --------------------------------------------------------------------------
   PROPORCJE OBRAZÓW
   -------------------------------------------------------------------------- */
.ratio-16-9 { aspect-ratio: 16 / 9; }
.ratio-4-3  { aspect-ratio: 4 / 3; }
.ratio-3-2  { aspect-ratio: 3 / 2; }
.ratio-1-1  { aspect-ratio: 1 / 1; }

.ratio-16-9 > img,
.ratio-4-3 > img,
.ratio-3-2 > img,
.ratio-1-1 > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* --------------------------------------------------------------------------
   GŁÓWNA TREŚĆ
   -------------------------------------------------------------------------- */
.main {
  /* Nagłówek jest fixed — treść podstron musi zaczynać się poniżej.
     Strona główna nadpisuje to klasą .main--hero (hero wchodzi pod nagłówek). */
  padding-top: var(--header-h, 5rem);
}

.main--hero {
  padding-top: 0;
}