/* Authentic Travel — mockup 2026-08-19 (v2: zieleń jako kolor wiodący)
   Wszystko prefiksowane .at- / --at- → bezpieczne wklejenie do WP (BlankSlate).
   Zero gradientów, zero bibliotek zewnętrznych.

   Zieleń wzięta wprost z referencji Andrzeja (bjjzqx.yourbrand.studio):
     --brand      rgb(121,166,145) = #79A691   → --at-sage
     --secondary  rgb(135,187,163) = #87BBA3   → --at-sage-light
   Złoto = „łamanie" wg Igora, mosiądz a nie żółte złoto, poniżej 5% powierzchni. */

:root {
  /* zieleń — kolor wiodący */
  --at-sage:        #79A691;   /* brand z referencji — duże płaszczyzny */
  --at-sage-light:  #87BBA3;   /* secondary z referencji — detale */
  --at-sage-wash:   #E7EFE9;   /* jasny wash — sekcje alternatywne */
  --at-forest:      #1E3A32;   /* stopka, kafelki liczb */
  --at-forest-deep: #142520;   /* tekst NA zieleni (kontrast 5.8:1) */

  /* neutralne */
  --at-paper:       #FAF9F6;
  --at-ink:         #1F2622;
  --at-ink-soft:    #55605A;
  --at-line:        #CFDDD4;   /* linie w tonie zieleni, nie szare */

  /* akcent */
  /* terakota — kolor z logo Andrzeja (#A0391B), zastąpiła zgadywany mosiądz 19.08 */
  --at-terra:       #A0391B;   /* tekst i przyciski — 6.44:1 na papierze, biel na nim 6.78:1 */
  --at-terra-lite:  #C4744F;   /* cienkie linie dekoracyjne */
  --at-terra-dark:  #7F2C13;   /* hover — 8.78:1 */

  --at-serif: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --at-sans:  "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;

  --at-wrap: 1180px;
  --at-gut: 24px;
}

*, *::before, *::after { box-sizing: border-box; }

body.at {
  margin: 0;
  background: var(--at-paper);
  color: var(--at-ink);
  font-family: var(--at-sans);
  font-size: 18px;          /* czytelność dla odbiorcy 50+ */
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}

.at img { max-width: 100%; display: block; }
.at a { color: inherit; }

.at-wrap { max-width: var(--at-wrap); margin: 0 auto; padding: 0 var(--at-gut); }

.at-eyebrow {
  font-size: 12px; letter-spacing: .22em; text-transform: uppercase;
  color: var(--at-terra); font-weight: 600; margin: 0 0 18px;
  display: flex; align-items: center; gap: 14px;
}
.at-eyebrow::before {                       /* cienka mosiężna kreska — „łamanie" zieleni */
  content: ""; width: 46px; height: 1px; background: var(--at-terra-lite); flex: none;
}

.at h1, .at h2, .at h3 { font-family: var(--at-serif); font-weight: 500; line-height: 1.15; margin: 0; }
.at h2 { font-size: clamp(32px, 4.4vw, 52px); letter-spacing: -.01em; }
.at h3 { font-size: 26px; }

.at-lead { font-size: 20px; color: var(--at-ink-soft); max-width: 62ch; }

.at-section { padding: clamp(72px, 9vw, 128px) 0; }
.at-section--wash  { background: var(--at-sage-wash); }

/* sekcja w pełnej zieleni — duży, widoczny blok koloru */
.at-section--brand { background: var(--at-sage); color: var(--at-forest-deep); }
/* bez opacity — przygaszenie zjeżdżało do 4.3:1, za mało dla odbiorcy 50+ */
.at-section--brand .at-lead { color: var(--at-forest-deep); }
.at-section--brand .at-eyebrow { color: var(--at-forest-deep); }
.at-section--brand .at-eyebrow::before { background: var(--at-forest-deep); opacity: .45; }

/* ---------- placeholder zdjęcia (znika po podmianie na prawdziwe) ---------- */
.at-ph {
  background: #C3CFC7; color: #4A554E;
  display: flex; align-items: center; justify-content: center; text-align: center;
  font-family: var(--at-sans); font-size: 12px; letter-spacing: .1em; text-transform: uppercase;
  padding: 16px; border: 1px dashed #9BAAA0;
}
.at-ph--sky { background: #A8C4D6; color: #3C5568; border-color: #7E9DB2; }

/* ---------- nawigacja ---------- */
.at-nav {
  position: fixed; inset: 0 0 auto 0; z-index: 50;
  padding: 18px 0; transition: background .3s ease, padding .3s ease, box-shadow .3s ease;
}
.at-nav__inner { display: flex; align-items: center; gap: 32px; }
/* logo: wersja w kontrze nad zdjeciem, wersja pelnokolorowa na papierze */
a.at-nav__logo { display: grid; line-height: 0; }
.at-nav__logo img {
  grid-area: 1 / 1; height: 92px; width: auto;
  transition: height .3s ease, opacity .3s ease;
}
/* nad zdjeciem logo dostaje ten sam cien co nagłówek hero — mgla u gory bywa jasna */
.at-nav__logo--onphoto { filter: drop-shadow(0 2px 18px rgba(0, 0, 0, .55)); }
.at-nav__logo--onpaper { opacity: 0; }
.at-nav__links { display: flex; align-items: center; gap: 28px; margin-left: auto; }
.at-nav__links a:not(.at-btn) {
  text-decoration: none; color: #fff; font-size: 15px; letter-spacing: .02em;
  padding-bottom: 3px; border-bottom: 1px solid transparent; transition: color .3s, border-color .3s;
}
.at-nav__links a:not(.at-btn):hover { border-bottom-color: currentColor; }

.at-btn {
  display: inline-block; text-decoration: none; font-family: var(--at-sans);
  font-size: 14px; letter-spacing: .12em; text-transform: uppercase; font-weight: 600;
  padding: 13px 26px; background: var(--at-terra); color: #fff !important;
  border: 1px solid var(--at-terra); transition: background .25s, border-color .25s;
}
.at-btn:hover { background: var(--at-terra-dark); border-color: var(--at-terra-dark); }

.at-btn--ghost { background: transparent; color: var(--at-forest) !important; border-color: var(--at-line); }
.at-btn--ghost:hover { background: transparent; border-color: var(--at-terra); color: var(--at-terra) !important; }

/* wariant na zielonym tle — mosiądz nie ma tam kontrastu, więc ciemna zieleń */
.at-btn--onbrand { background: var(--at-forest-deep); border-color: var(--at-forest-deep); }
.at-btn--onbrand:hover { background: #0C1913; border-color: #0C1913; }

/* stan po przewinięciu — dokłada go scripts.js */
.at-nav.is-solid {
  background: var(--at-paper); padding: 12px 0;
  box-shadow: 0 1px 0 var(--at-line);
}
.at-nav.is-solid .at-nav__links a:not(.at-btn) { color: var(--at-forest); }
.at-nav.is-solid .at-nav__logo img { height: 46px; }
.at-nav.is-solid .at-nav__logo--onphoto { opacity: 0; }
.at-nav.is-solid .at-nav__logo--onpaper { opacity: 1; }

/* ---------- HERO ---------- */
.at-hero { position: relative; min-height: 100svh; display: flex; align-items: flex-end; }
.at-hero__img { position: absolute; inset: 0; }
.at-hero__img .at-ph { width: 100%; height: 100%; border: 0; }
.at-hero__img picture, .at-hero__img img { width: 100%; height: 100%; display: block; }
/* 56% w poziomie = dzong zostaje w kadrze także na wąskim ekranie */
.at-hero__img img { object-fit: cover; object-position: 56% 50%; }
/* przyciemnienie w tonie zieleni, płaskie — nie gradient */
.at-hero__scrim { position: absolute; inset: 0; background: rgba(18, 34, 29, .32); }
.at-hero__inner {
  position: relative; width: 100%; color: #fff;
  padding-top: 132px;                                  /* wysokosc paska menu - inaczej H1 wjezdza pod logo */
  padding-bottom: clamp(104px, 15vw, 200px);
}
.at-hero h1 {
  font-size: clamp(44px, 7vw, 92px); color: #fff; max-width: 16ch;
  text-shadow: 0 2px 28px rgba(0, 0, 0, .45);
}
.at-hero__sub {
  font-size: clamp(18px, 2vw, 22px); color: rgba(255, 255, 255, .92);
  max-width: 46ch; margin: 22px 0 34px;
  text-shadow: 0 2px 24px rgba(0, 0, 0, .5);   /* h1 miał cień, akapit nie — stąd gryzienie się z tłem */
}
/* zielony pasek domykający hero — zieleń wchodzi od razu, nad zgięciem */
.at-hero__rule { position: absolute; left: 0; right: 0; bottom: 0; height: 6px; background: var(--at-sage); }

/* ---------- sekcja wartości ---------- */
.at-value__grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(40px, 6vw, 88px); align-items: start; }
/* korzyści: trzy równorzędne kafle na pełnej szerokości, nie wiersze w kolumnie */
.at-points {
  list-style: none; padding: 0; margin: clamp(48px, 6vw, 72px) 0 0;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px;
}
.at-points li {
  position: relative; background: var(--at-sage-wash);      /* inne niż tło sekcji — stąd widać, że to kafel */
  border: 0; border-bottom: 3px solid var(--at-terra);
  padding: 36px 30px 32px;
}
.at-points li::before {                     /* zielony znacznik przy każdym kaflu */
  content: ""; position: absolute; left: 28px; top: 0; width: 34px; height: 4px;
  background: var(--at-sage);
}
.at-points strong {
  display: block; font-family: var(--at-serif); font-size: clamp(22px, 2.2vw, 27px);
  font-weight: 500; line-height: 1.2; margin-bottom: 10px; color: var(--at-forest);
}
.at-points span { display: block; color: var(--at-ink-soft); font-size: 17px; line-height: 1.6; }

/* Wariant „wartosci" — piec krotkich hasel zamiast trzech kafli korzysci.
   Wezsza kolumna, wiec mniejszy padding i haslo jako etykieta, nie naglowek serifowy. */
.at-points--wartosci { grid-template-columns: repeat(5, 1fr); gap: 16px; }
.at-points--wartosci li { padding: 30px 22px 26px; }
.at-points--wartosci li::before { left: 22px; width: 26px; }
.at-points--wartosci strong {
  font-family: var(--at-sans); font-size: 14px; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase; color: var(--at-terra);
  margin-bottom: 12px;
}
.at-points--wartosci span { font-size: 16px; }

/* Znak na awersie karty: rytowniczy, jedna kreska, bez wypelnien.
   Ma lamac monotonie piatki prostokatow, a nie konkurowac z haslem - stad niskie krycie
   i pozycja w przeciwleglym rogu wzgledem zielonego znacznika. */
.at-wartosc__strona { position: relative; }
.at-wartosc__znak {
  position: absolute; top: 26px; right: 20px; width: 32px; height: 32px;
  fill: none; stroke: var(--at-terra); stroke-width: 1.25;
  stroke-linecap: round; stroke-linejoin: round;
  opacity: .3; transition: opacity .8s cubic-bezier(.22, .61, .24, 1);
}
.at-points--wartosci li:hover .at-wartosc__znak,
.at-points--wartosci li:focus-within .at-wartosc__znak { opacity: .62; }
@media (max-width: 1180px) { .at-points--wartosci { grid-template-columns: repeat(3, 1fr); } }

/* Wartosci jako karty. Domyslnie (mobile, a takze przy ograniczonych animacjach)
   obie strony sa po prostu widoczne jedna pod druga - tresc nigdy sie nie chowa. */
.at-wartosc__strona + .at-wartosc__strona { margin-top: 12px; }

/* Odwracanie tylko na duzym ekranie i tylko gdy uzytkownik nie prosil o mniej ruchu. */
@media (min-width: 901px) and (hover: hover) and (pointer: fine) {
  .at-points--wartosci li {
    background: none; border: 0; padding: 0;
    perspective: 1000px; height: 232px; outline: 0;
  }
  .at-points--wartosci li::before { content: none; }

  .at-points--wartosci li { transition: transform .8s cubic-bezier(.22, .61, .24, 1); }
  .at-points--wartosci li:hover,
  .at-points--wartosci li:focus-within { transform: translateY(-6px); }

  .at-wartosc {
    position: relative; width: 100%; height: 100%;
    transform-style: preserve-3d;
    transition: transform 1.15s cubic-bezier(.22, .61, .24, 1);   /* dostojnie, bez szarpniecia */
  }
  .at-points--wartosci li:hover .at-wartosc,
  .at-points--wartosci li:focus-within .at-wartosc,
  .at-points--wartosci li:focus .at-wartosc { transform: rotateY(180deg); }

  .at-wartosc__strona {
    position: absolute; inset: 0; margin: 0; overflow: hidden;
    -webkit-backface-visibility: hidden; backface-visibility: hidden;
    background: var(--at-sage-wash);
    border-bottom: 3px solid var(--at-terra);
    padding: 30px 22px; display: flex; align-items: center;
    box-shadow: 0 2px 10px rgba(30, 58, 50, .07);
    transition: box-shadow .8s cubic-bezier(.22, .61, .24, 1);
  }
  .at-wartosc__strona::before {                 /* zielony znacznik jak w pozostalych kaflach */
    content: ""; position: absolute; left: 22px; top: 0; width: 26px; height: 4px;
    background: var(--at-sage);
    transition: width .8s cubic-bezier(.22, .61, .24, 1);
  }
  .at-points--wartosci li:hover .at-wartosc__strona::before,
  .at-points--wartosci li:focus-within .at-wartosc__strona::before { width: 76px; }
  .at-points--wartosci li:hover .at-wartosc__strona,
  .at-points--wartosci li:focus-within .at-wartosc__strona { box-shadow: 0 18px 40px rgba(30, 58, 50, .18); }

  .at-wartosc__tyl { transform: rotateY(180deg); }

  /* Kreska pod haslem USUNIETA 21.08: przy symbolu w rogu i znaczniku u gory byla trzecim
     znakiem na malej karcie i zaczynala dominowac. Rola sygnalu zostaje przy znaczniku,
     ktory rozsuwa sie przy najechaniu, i przy samym symbolu (krycie .3 -> .62). */
  .at-wartosc__przod { align-items: center; }
  .at-wartosc__przod strong { margin: 0; }
  .at-wartosc__tyl { align-items: center; }
  .at-wartosc__tyl span { line-height: 1.55; }

  /* Delikatne swiatlo przesuwajace sie po awersie - rzadko, powoli, bez efekciarstwa. */
  .at-wartosc__przod::after {
    content: ""; position: absolute; top: -50%; bottom: -50%; left: 0; width: 62%;
    background: linear-gradient(100deg,
      rgba(255,255,255,0) 0%, rgba(255,255,255,.30) 50%, rgba(255,255,255,0) 100%);
    transform: translateX(-220%) rotate(8deg);
    animation: at-swiatlo 15s cubic-bezier(.42, 0, .58, 1) infinite;
    pointer-events: none;
  }
  .at-points--wartosci li:nth-child(2) .at-wartosc__przod::after { animation-delay: 2.4s; }
  .at-points--wartosci li:nth-child(3) .at-wartosc__przod::after { animation-delay: 4.8s; }
  .at-points--wartosci li:nth-child(4) .at-wartosc__przod::after { animation-delay: 7.2s; }
  .at-points--wartosci li:nth-child(5) .at-wartosc__przod::after { animation-delay: 9.6s; }
  @keyframes at-swiatlo {
    0%, 58%  { transform: translateX(-220%) rotate(8deg); opacity: 0; }
    64%      { opacity: 1; }
    84%      { opacity: 1; }
    90%, 100% { transform: translateX(260%) rotate(8deg); opacity: 0; }
  }
}

/* ---------- galeria ---------- */
.at-gallery__grid {
  display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 200px; gap: 12px; margin-top: 48px;
}

/* Galeria czterech zdjec: rzad ma stala wysokosc, a szerokosci rozkladaja sie proporcjonalnie
   do proporcji zdjec (flex-grow = aspekt). Kazde zdjecie widac w calosci - nic nie jest kadrowane.
   Wysokosci rzedow policzone z sumy proporcji, zeby oba rzedy byly podobnej wysokosci. */
.at-gallery__rzad { display: flex; gap: 12px; margin-top: 12px; }
.at-gallery__rzad:first-of-type { margin-top: 48px; }
.at-gallery__rzad--a { height: clamp(200px, 40vw, 470px); }
.at-gallery__rzad--b { height: clamp(200px, 42vw, 492px); }
.at-gallery__rzad .at-gallery__foto { margin: 0; overflow: hidden; background: var(--at-sage-wash); min-width: 0; }
.at-gallery__rzad picture, .at-gallery__rzad img { display: block; width: 100%; height: 100%; }
.at-gallery__rzad img { object-fit: cover; }
.at-gallery__grid .at-ph { width: 100%; height: 100%; }
.at-gallery__foto { margin: 0; overflow: hidden; background: var(--at-sage-wash); }
.at-gallery__foto picture, .at-gallery__foto img { display: block; width: 100%; height: 100%; }
.at-gallery__foto img { object-fit: cover; }
.at-gallery__item--wide { grid-column: span 2; }
.at-gallery__item--tall { grid-row: span 2; }

/* ---------- wyprawy ---------- */
.at-trips__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; margin-top: 56px; }
.at-trip { display: flex; flex-direction: column; background: var(--at-paper); }
.at-trip .at-ph { height: 260px; }
.at-trip__foto { margin: 0; height: 260px; overflow: hidden; background: var(--at-sage-wash); }
.at-trip__foto picture, .at-trip__foto img { display: block; width: 100%; height: 100%; }
.at-trip__foto img { object-fit: cover; }
.at-trip__body {
  padding: 26px; border: 1px solid var(--at-line); border-top: 0;
  border-bottom: 4px solid var(--at-sage);   /* zielona stopka karty */
  flex: 1; display: flex; flex-direction: column;
}
.at-trip__meta {
  font-size: 12px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--at-terra); font-weight: 600; margin-bottom: 10px;
}
.at-trip p:not(.at-trip__meta) { color: var(--at-ink-soft); font-size: 16px; margin: 12px 0 26px; flex: 1; }

/* ---------- liczby / o nas (na pełnej zieleni) ---------- */
.at-about__grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(40px, 6vw, 88px); align-items: center; }
.at-about__grid h2 { color: var(--at-forest-deep); }
.at-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
/* Trzy kafelki w siatce 2-kolumnowej: ostatni na calą szerokosc, zeby nie zostawal sierotą. */
.at-stats .at-stat:last-child { grid-column: 1 / -1; }
.at-stat { background: var(--at-paper); padding: 36px 28px; text-align: center; border-bottom: 3px solid var(--at-terra-lite); }
.at-stat b { display: block; font-family: var(--at-serif); font-size: clamp(40px, 5vw, 60px); font-weight: 500; line-height: 1; color: var(--at-forest); }
.at-stat span { display: block; margin-top: 10px; font-size: 14px; letter-spacing: .08em; text-transform: uppercase; color: var(--at-ink-soft); }

/* ---------- FAQ (natywne <details> — zero JS) ---------- */
.at-faq__list { margin-top: 48px; max-width: 860px; }
.at-faq details { border-bottom: 1px solid var(--at-line); }
.at-faq details:first-child { border-top: 1px solid var(--at-line); }
.at-faq summary {
  cursor: pointer; list-style: none; padding: 26px 48px 26px 0; position: relative;
  font-family: var(--at-serif); font-size: 23px; font-weight: 500;
}
.at-faq summary::-webkit-details-marker { display: none; }
.at-faq summary::after {
  content: "+"; position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
  font-family: var(--at-sans); font-size: 26px; font-weight: 300; color: var(--at-terra);
}
.at-faq details[open] summary { color: var(--at-forest); }
.at-faq details[open] summary::after { content: "–"; }
.at-faq__answer { padding: 0 48px 28px 0; color: var(--at-ink-soft); margin: 0; }

/* ---------- stopka ---------- */
.at-footer { background: var(--at-forest); color: #D6E3DB; padding: 84px 0 40px; border-top: 6px solid var(--at-sage); }
.at-footer a { color: #D6E3DB; text-decoration: none; }
.at-footer a:hover { color: #fff; }
.at-footer__top { display: grid; grid-template-columns: 1.2fr 1fr 1fr; gap: 48px; }
.at-footer__brand { display: block; height: 58px; width: auto; margin-bottom: 18px; }
.at-footer h4 { font-size: 12px; letter-spacing: .18em; text-transform: uppercase; color: var(--at-sage-light); margin: 0 0 16px; font-weight: 600; font-family: var(--at-sans); }
.at-footer__list { list-style: none; margin: 0; padding: 0; font-size: 16px; }
.at-footer__list li { margin-bottom: 10px; }
.at-footer__menu {
  display: flex; flex-wrap: wrap; align-items: center; gap: 28px; margin-top: 56px; padding-top: 28px;
  border-top: 1px solid rgba(255, 255, 255, .14); font-size: 15px;
}
/* Union Jack w zieleniach palety - flaga jako znak jezyka, ale bez obcego akcentu kolorystycznego. */
.at-jezyk { display: inline-flex; align-items: center; gap: 9px; }
.at-flaga { width: 22px; height: 15px; flex: none; display: block; }
/* Wspolna ramka wokol flagi i napisu - przelacznik jezyka czyta sie jako osobny element
   sterujacy, a nie jako kolejna pozycja menu. */
.at-jezyk {
  border: 1px solid rgba(255, 255, 255, .38); padding: 6px 13px 6px 10px;
  transition: border-color .3s ease, background .3s ease;
}
.at-jezyk:hover { border-color: rgba(255, 255, 255, .8); background: rgba(255, 255, 255, .06); }
.at-footer__legal { margin-top: 22px; font-size: 14px; color: var(--at-sage-light); opacity: .75; }

/* ---------- responsive ---------- */
@media (max-width: 900px) {
  .at-value__grid, .at-about__grid, .at-trips__grid, .at-footer__top, .at-points { grid-template-columns: 1fr; }
  .at-points--wartosci { grid-template-columns: 1fr; }
  .at-gallery__grid { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 170px; }
  /* Wiersz galerii PRZESTAJE byc flexem, zamiast zmieniac kierunek na kolumnowy.
     Kadry maja proporcje w atrybucie `style="flex: X 1 0"`, policzone pod uklad poziomy.
     W kolumnie `flex-basis: 0` przy wysokosci `auto` nie ma z czego rosnac, wiec kazdy
     kadr zwijal sie do ZEROWEJ wysokosci i galeria znikala na telefonie (zgloszone 21.08).
     W kontenerze blokowym wlasciwosc `flex` dzieci jest bezczynna, wiec nie trzeba
     przebijac stylu liniowego przez `!important`. */
  .at-gallery__rzad { display: block; height: auto; }
  .at-gallery__rzad--a, .at-gallery__rzad--b { height: auto; }
  .at-gallery__rzad .at-gallery__foto + .at-gallery__foto { margin-top: 12px; }
  .at-gallery__rzad picture, .at-gallery__rzad img { height: auto; }
  .at-nav__links { display: none; }   /* menu mobilne — do zrobienia przy budowie w WP */
  .at-nav__logo img { height: 64px; }
  .at-nav.is-solid .at-nav__logo img { height: 38px; }
  body.at { font-size: 17px; }
}

/* ============================================================
   PODSTRONY — blog, wpis, zapisz się
   Nagłówek jest fixed, więc podstrony bez hero potrzebują odstępu u góry.
   ============================================================ */
.at-page-top { padding-top: clamp(120px, 13vw, 170px); }

/* ===== OPOWIESC — osobna strona dla manifestu. Waska kolumna, duzo powietrza,
   a wzdluz tekstu cienka meandrujaca sciezka zamiast prostej linijki. ===== */
.at-opowiesc__glowa { max-width: 720px; }
.at-opowiesc__glowa h1 {
  font-family: var(--at-serif); font-weight: 400; line-height: 1.08;
  font-size: clamp(38px, 5.4vw, 68px); color: var(--at-forest); margin: 0;
}
.at-opowiesc__kolumna { position: relative; margin: clamp(44px, 6vw, 78px) 0 0; padding-left: 76px; }
.at-opowiesc__sciezka {
  position: absolute; left: 0; top: 6px; width: 40px; height: calc(100% - 12px);
  fill: none; stroke: var(--at-sage); stroke-width: 1.1; opacity: .5;
  vector-effect: non-scaling-stroke;              /* kreska nie grubieje przy rozciaganiu */
}
.at-opowiesc__tekst { max-width: 34rem; }
.at-opowiesc__tekst p {
  font-family: var(--at-serif); font-size: clamp(21px, 2vw, 26px); line-height: 1.62;
  color: var(--at-ink-soft); margin: 0 0 clamp(26px, 3vw, 40px);
}
.at-opowiesc__tekst em { font-style: normal; color: var(--at-forest); font-weight: 500; }
.at-opowiesc__tekst .mocne { color: var(--at-forest); font-weight: 500; }
.at-opowiesc__tekst .uderzenie {                 /* jedno slowo jako oddech */
  font-size: clamp(30px, 3.4vw, 44px); color: var(--at-forest); line-height: 1.1;
  margin-bottom: clamp(30px, 3.4vw, 46px);
}
.at-opowiesc__tekst .serce {                     /* zdanie, na ktorym stoi cala marka */
  font-size: clamp(28px, 3.6vw, 46px); line-height: 1.2; color: var(--at-terra);
  margin: clamp(34px, 4vw, 54px) 0 clamp(34px, 4vw, 54px); padding-left: 22px;
  border-left: 2px solid var(--at-terra-lite);
}
.at-opowiesc__foto { margin: clamp(48px, 6vw, 84px) 0 0; }
.at-opowiesc__foto img {
  display: block; width: 100%; height: clamp(220px, 34vw, 420px); object-fit: cover;
}
.at-opowiesc__stopa {
  margin-top: clamp(36px, 4vw, 56px); display: flex; align-items: center;
  gap: clamp(20px, 3vw, 44px); flex-wrap: wrap;
}
.at-opowiesc__stopa .at-lead {
  margin: 0; font-family: var(--at-serif); font-size: clamp(22px, 2.2vw, 30px); color: var(--at-forest);
}
@media (max-width: 700px) {
  .at-opowiesc__kolumna { padding-left: 0; }
  .at-opowiesc__sciezka { display: none; }       /* na waskim ekranie sciezka tylko przeszkadza */
}

/* Pas na stronie glownej: trzy zdania z opowiesci jako przerywnik i furtka do calosci. */
.at-przerywnik { text-align: center; }
.at-przerywnik blockquote {
  margin: 0 auto; max-width: 30ch;
  font-family: var(--at-serif); font-size: clamp(26px, 3.1vw, 40px); line-height: 1.3;
  color: var(--at-forest);
}
.at-przerywnik { padding-top: clamp(56px, 7vw, 96px); padding-bottom: clamp(56px, 7vw, 96px); }
.at-przerywnik blockquote { color: var(--at-forest-deep); }
.at-przerywnik .at-przerywnik__odnosnik {
  display: inline-block; margin-top: clamp(24px, 3vw, 38px);
  font-family: var(--at-sans); font-size: 13px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--at-forest-deep); text-decoration: none; font-weight: 600;
  border-bottom: 1px solid rgba(20, 37, 32, .35); padding-bottom: 4px;
  transition: border-color .3s ease;
}
.at-przerywnik .at-przerywnik__odnosnik:hover { border-bottom-color: var(--at-forest-deep); }

/* Strona dla urzedow: wiersze „etykieta - wartosc" i ponumerowane kroki weryfikacji.
   Swiadomie surowe i tabelaryczne - urzednik ma znalezc dane, nie podziwiac uklad. */
.at-fakty { list-style: none; padding: 0; margin: 22px 0 44px; border-top: 1px solid var(--at-line); }
.at-fakty li {
  display: grid; grid-template-columns: 1fr 1.2fr; gap: 18px;
  padding: 13px 0; border-bottom: 1px solid var(--at-line);
}
.at-fakty span { color: var(--at-ink-soft); font-size: 15px; }
.at-fakty strong { font-weight: 600; color: var(--at-forest); }
.at-kroki { margin: 22px 0 34px; padding-left: 22px; color: var(--at-ink-soft); }
.at-kroki li { margin-bottom: 12px; line-height: 1.65; }
.at-page-top h2 {
  font-family: var(--at-serif); font-weight: 500; font-size: clamp(26px, 2.6vw, 34px);
  color: var(--at-forest); margin: 46px 0 6px;
}
.at-page-top h2:first-of-type { margin-top: 8px; }
@media (max-width: 640px) { .at-fakty li { grid-template-columns: 1fr; gap: 4px; } }
.at-page-head { max-width: 62ch; }
.at-page-head h1 {
  font-family: var(--at-serif); font-weight: 400; line-height: 1.1;
  font-size: clamp(38px, 5vw, 62px); margin: 0 0 18px; color: var(--at-forest);
}
.at-page-head .at-lead { margin-top: 0; }

/* ---------- blog: lista wpisów ---------- */
.at-posts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; margin-top: 56px; }
.at-post { display: flex; flex-direction: column; background: var(--at-paper); border: 1px solid var(--at-line); }
.at-post__img { margin: 0; height: 210px; overflow: hidden; background: var(--at-sage-wash); }
.at-post__img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.at-post__body { padding: 24px 26px 28px; display: flex; flex-direction: column; flex: 1; }
.at-post__meta {
  font-size: 12px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--at-terra); margin: 0 0 10px; font-weight: 600;
}
.at-post h3 {
  font-family: var(--at-serif); font-weight: 500; font-size: 25px; line-height: 1.22;
  margin: 0 0 12px; color: var(--at-forest);
}
.at-post h3 a { color: inherit; text-decoration: none; }
.at-post h3 a:hover { color: var(--at-terra); }
.at-post p { color: var(--at-ink-soft); font-size: 16px; line-height: 1.6; margin: 0 0 20px; }
.at-post__more {
  margin-top: auto; align-self: flex-start; text-decoration: none; font-size: 14px;
  letter-spacing: .1em; text-transform: uppercase; font-weight: 600;
  color: var(--at-terra); border-bottom: 1px solid var(--at-terra-lite); padding-bottom: 3px;
}
.at-post__more:hover { color: var(--at-terra-dark); border-bottom-color: var(--at-terra-dark); }

.at-pager { display: flex; gap: 10px; justify-content: center; margin-top: 56px; }
.at-pager a, .at-pager span {
  min-width: 44px; text-align: center; padding: 11px 14px; text-decoration: none;
  border: 1px solid var(--at-line); color: var(--at-forest); font-size: 15px;
}
.at-pager .is-current { background: var(--at-forest); border-color: var(--at-forest); color: #fff; }
.at-pager a:hover { border-color: var(--at-terra); color: var(--at-terra); }

/* ---------- wpis ---------- */
.at-article { max-width: 760px; }
.at-article__meta {
  display: flex; flex-wrap: wrap; gap: 8px 20px; align-items: center;
  font-size: 14px; color: var(--at-ink-soft); margin: 0 0 34px;
  padding-bottom: 22px; border-bottom: 1px solid var(--at-line);
}
.at-article__cover { margin: 0 0 40px; }
.at-article__cover img { width: 100%; height: auto; display: block; }
.at-article__cover figcaption { font-size: 14px; color: var(--at-ink-soft); margin-top: 10px; }
.at-prose p { font-size: 19px; line-height: 1.75; margin: 0 0 24px; }
.at-prose h2 {
  font-family: var(--at-serif); font-weight: 500; font-size: 32px; line-height: 1.2;
  margin: 46px 0 16px; color: var(--at-forest);
}
.at-prose h3 { font-family: var(--at-serif); font-weight: 500; font-size: 24px; margin: 34px 0 12px; }
.at-prose ul { padding-left: 22px; margin: 0 0 24px; }
.at-prose li { margin-bottom: 10px; font-size: 18px; line-height: 1.65; }
.at-prose blockquote {
  margin: 34px 0; padding: 4px 0 4px 26px; border-left: 3px solid var(--at-sage);
  font-family: var(--at-serif); font-size: 25px; line-height: 1.4; color: var(--at-forest);
}
.at-author {
  display: flex; gap: 20px; align-items: flex-start; margin-top: 56px;
  padding: 28px 30px; background: var(--at-sage-wash); border-bottom: 3px solid var(--at-terra);
}
.at-author__foto { width: 72px; height: 72px; flex: none; border-radius: 50%; overflow: hidden; background: var(--at-line); }
.at-author__foto img { width: 100%; height: 100%; object-fit: cover; display: block; }
.at-author b { display: block; font-family: var(--at-serif); font-size: 21px; font-weight: 500; margin-bottom: 6px; }
.at-author p { margin: 0; font-size: 16px; color: var(--at-ink-soft); line-height: 1.6; }

/* ---------- zapisz się: formularz-zdanie ---------- */
.at-tracks { display: grid; grid-template-columns: 1.25fr 1fr; gap: clamp(32px, 5vw, 64px); margin-top: 56px; align-items: start; }
.at-zdanie {
  font-family: var(--at-serif); font-size: clamp(22px, 1.9vw, 27px); line-height: 1.6;
  color: var(--at-forest); margin: 0;
}
/* Kazde zdanie w osobnym wersie - ciagiem zlewalo sie w blok i pola gubily sie w tekscie. */
.at-zdanie__wers { display: block; }
.at-zdanie__wers + .at-zdanie__wers { margin-top: 20px; }
.at-zdanie .pole, .at-zdanie select {
  font: inherit; color: var(--at-terra); background: var(--at-sage-wash);
  border: 0; border-bottom: 2px solid var(--at-terra-lite); padding: 2px 10px 4px;
  min-width: 4ch; outline: 0; transition: border-color .2s ease, box-shadow .2s ease;
}
.at-zdanie .pole:hover { border-bottom-color: var(--at-terra); }
.at-zdanie .pole:focus, .at-zdanie select:focus {
  border-bottom-color: var(--at-terra);
  box-shadow: 0 0 0 3px rgba(160, 57, 27, .14);       /* widoczne skupienie takze z klawiatury */
}
.at-zdanie .pole:invalid:not(:placeholder-shown) { border-bottom-color: #B3261E; }
.at-zdanie .pole::placeholder { color: var(--at-terra-lite); }
.at-zdanie select { -webkit-appearance: none; appearance: none; cursor: pointer; }
.at-zapisz__akcja { margin-top: 36px; display: flex; align-items: center; gap: 24px; flex-wrap: wrap; }
.at-zapisz__nota { font-size: 15px; color: var(--at-ink-soft); max-width: 34ch; line-height: 1.55; }

.at-telefon { background: var(--at-forest); color: #fff; padding: 38px 34px; }
.at-telefon .at-eyebrow { color: var(--at-sage-light); }
.at-telefon .at-eyebrow::before { background: var(--at-sage-light); }
.at-telefon a {
  display: block; font-family: var(--at-serif); font-size: clamp(30px, 3.4vw, 40px);
  color: #fff; text-decoration: none; margin: 6px 0 14px; letter-spacing: .01em;
}
.at-telefon a:hover { color: var(--at-sage-light); }
.at-telefon p { margin: 0; font-size: 16px; color: rgba(255,255,255,.8); line-height: 1.6; }
.at-telefon hr { border: 0; border-top: 1px solid rgba(255,255,255,.2); margin: 26px 0; }

@media (max-width: 900px) {
  .at-posts, .at-tracks { grid-template-columns: 1fr; }
  .at-zdanie { font-size: 22px; line-height: 1.85; }
}
.at-article__tytul {
  font-family: var(--at-serif); font-weight: 400; line-height: 1.12;
  font-size: clamp(34px, 4.4vw, 52px); margin: 0 0 20px; color: var(--at-forest);
}
.at-article__cta { margin-top: 44px; }
/* Szerokosci ustawione wprost: input ma domyslne ~20 znakow, wiec bez tego pola byly
   szersze niz ich zawartosc i rozrywaly zdanie na kawalki. */
.at-zdanie .pole { max-width: 100%; }
.at-zdanie .pole--imie     { width: 16ch; }
.at-zdanie .pole--kierunek { width: 19ch; }   /* najdluzsza podpowiedz: „dzungli amazonskiej" */
.at-zdanie .pole--tel      { width: 12ch; }
.at-zdanie .pole--mail     { width: 22ch; }   /* adres nie skraca sie tak jak numer */

/* Kadr zrodla na stronie „Zapisz sie" - pas pod naglowkiem, ten sam obraz, ktory klikneli. */
/* Kadr zrodla siedzi w prawej kolumnie, nad karta z telefonem - dzieki temu formularz
   zostaje na pierwszym ekranie, a zdjecie nie rozpycha strony w pionie. */
.at-obok { display: flex; flex-direction: column; }
.at-zrodlo { margin: 0 0 18px; }
.at-zrodlo img {
  display: block; width: 100%; height: 280px;
  object-fit: cover; object-position: 50% 45%;   /* domyslnie; JS ustawia per zdjecie */
}
.at-zrodlo figcaption {
  margin-top: 10px; font-size: 12px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--at-terra); font-weight: 600;
}
.at-zrodlo figcaption:empty { display: none; }
.at-zapisz__nota { margin: 0; }


/* ---------- karuzela hero ---------- */
.at-hero__slides { position: absolute; inset: 0; }
.at-hero__slide {
  position: absolute; inset: 0; margin: 0;
  opacity: 0; transition: opacity 1.1s ease;
}
.at-hero__slide.is-active { opacity: 1; }
.at-hero__slide picture, .at-hero__slide img { width: 100%; height: 100%; display: block; }
.at-hero__slide img { object-fit: cover; object-position: 56% 50%; }

/* pasek odmierza 15 s do zmiany slajdu — płaski, w kolorze marki, bez gradientu */
.at-hero__progress {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 3;
  height: 4px; background: rgba(250, 249, 246, .22);
}
.at-hero__progress span {
  display: block; height: 100%; width: 0;
  background: var(--at-sage);
}
/* Niskie okno (np. MacBook 13" z paskiem zakladek): przy 92 px naglowka i 200 px odstepu
   blok hero bywa wyzszy niz okno i wypycha sie pod menu. Skalujemy rytm pionowy. */
@media (max-height: 820px) {
  /* Podstrony: ciasniejszy naglowek, zeby przycisk formularza miescil sie w pierwszym ekranie. */
  .at-page-top { padding-top: 116px; }
  .at-page-head h1 { font-size: clamp(32px, 4vw, 46px); margin-bottom: 14px; }
  .at-tracks { margin-top: 36px; }

  .at-hero__inner { padding-bottom: clamp(48px, 7vh, 92px); }
  .at-hero h1 { font-size: clamp(38px, 4.6vw, 62px); }
  .at-hero__sub { font-size: 17px; }
  .at-nav__logo img { height: 68px; }
  .at-nav.is-solid .at-nav__logo img { height: 38px; }
}
@media (max-height: 660px) {
  .at-hero__inner { padding-top: 108px; padding-bottom: 36px; }
  .at-hero h1 { font-size: clamp(32px, 4vw, 48px); }
}

@media (prefers-reduced-motion: reduce) {
  .at-hero__slide { transition: none; }
  .at-hero__progress { display: none; }
  .at-wartosc { transition: none; }              /* karta odwraca sie skokowo, ale DZIALA */
  /* Swiatlo przestaje plynac (to jest ruch), ale nie znika - zostaje jako nieruchomy,
     miekki refleks w rogu karty. Kto prosil o mniej ruchu, dostaje mniej ruchu,
     a nie pusta plaszczyzne. */
  .at-wartosc__przod::after {
    animation: none; opacity: .9;
    transform: translateX(28%) rotate(8deg);
  }
}

/* --- formularz „Zapisz sie": pulapka na roboty i komunikaty ---------------- */
/* Pole-pulapka musi byc niewidoczne dla czlowieka, ale NIE display:none —
   czesc botow pomija ukryte tak pola, a wtedy pulapka nic nie lapie. */
.at-hp {
  position: absolute;
  left: -9999px;
  width: 1px; height: 1px;
  overflow: hidden;
}
.at-zapisz__potwierdzenie,
.at-zapisz__blad {
  margin: 0 0 28px;
  padding: 18px 22px;
  border-left: 3px solid var(--at-sage);
  background: var(--at-sage-wash);
  font-size: 17px;
  line-height: 1.6;
}
.at-zapisz__blad {
  border-left-color: #B3261E;
  background: #FBEDEC;
}

/* --- link „przejdz do tresci" (BlankSlate, wp_body_open) ------------------- */
/* Bez tej klasy link wyswietla sie jako zwykly tekst nad naglowkiem — tak trafil
   na strone po migracji. Nie kasujemy go: dla czytnika ekranu i nawigacji
   klawiatura to realne ulatwienie. Ukrywamy wzrokowo i pokazujemy przy skupieniu. */
.at .screen-reader-text {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  clip-path: inset(50%);
  overflow: hidden;
  white-space: nowrap;
}
.at .screen-reader-text:focus {
  position: fixed;
  top: 12px; left: 12px;
  z-index: 100;
  width: auto; height: auto;
  margin: 0; padding: 12px 20px;
  clip-path: none;
  background: var(--at-paper);
  color: var(--at-forest);
  border: 1px solid var(--at-terra);
  font-family: var(--at-sans);
  font-size: 15px;
  text-decoration: none;
}

/* --- znak Facebooka w stopce ---------------------------------------------- */
/* W zieleniach palety, nie w firmowym granacie — stopka ma jeden rejestr barwny
   i obcy kolor marki rozbilby go tak samo jak flaga w oryginalnych barwach. */
.at-fb { display: inline-flex; align-items: center; gap: 9px; text-decoration: none; }
.at-fb__znak {
  width: 17px; height: 17px; flex: none; display: block;
  fill: var(--at-sage-light);
  transition: fill .25s ease;
}
.at-fb:hover .at-fb__znak { fill: #fff; }

/* --- pasek administratora nie może zasłaniać naszego menu ------------------ */
/* Pasek WP jest przyklejony na 32 px u góry (46 px poniżej 783 px szerokości),
   a nasza nawigacja też jest przyklejona do top: 0 — dla zalogowanego jedno
   wchodziło pod drugie. Hero dostaje tę samą poprawkę, bo jego rezerwa u góry
   jest liczona od krawędzi okna, nie od paska. */
body.admin-bar .at-nav { top: 32px; }
body.admin-bar .at-hero__inner { padding-top: 164px; }   /* 132 + 32 */
@media screen and (max-width: 782px) {
  body.admin-bar .at-nav { top: 46px; }
  body.admin-bar .at-hero__inner { padding-top: 178px; } /* 132 + 46 */
}