/* ==========================================================================
   GreenLine - tokeny i nadpisania (demo, siteverse.pl/demo/greenline/)
   Kierunek: "organiczna krawedz". Zielen butelkowa i las na kremie,
   piasek jako drugi plan, Playfair Display i Inter, bez kroju mono
   (token --f-mono = Inter). Baza JASNA: tokeny --tlo-jasne trzymaja
   wartosci pasma CIEMNEGO (las), w HTML pasmo ciemne to .pasmo--odwrotne.
   Komponent podpisowy: MIEKKA KRAWEDZ DOLNA FOTOGRAFII, na ktora nachodzi
   karta wolnych terminow (js/podpis.js, tryb krawedz), plus plan ogrodu
   z gory rysowany z JSON (tryb plan). Wylacznie tokeny i nadpisania;
   limit 250 linii.
   ========================================================================== */

:root {
  --tlo:    #F4F1E8;
  --tlo-2:  #ECE8DC;
  --tlo-3:  #D8D2C0;
  --tekst:   #1E3A2B;
  --tekst-2: rgba(30, 58, 43, 0.72);
  --tekst-3: #5C5C52;
  --akcent:  #2B5138;
  --akcent-tekst: #F4F1E8;
  --wlos:   rgba(30, 58, 43, 0.18);
  --wlos-2: rgba(30, 58, 43, 0.09);

  /* pasmo odwrotne = las */
  --tlo-jasne:         #1E3A2B;
  --tlo-jasne-2:       #24442F;
  --tekst-na-jasnym:   #F4F1E8;
  --tekst-2-na-jasnym: rgba(244, 241, 232, 0.72);
  --tekst-3-na-jasnym: #A6B5A3;
  --wlos-na-jasnym:    rgba(244, 241, 232, 0.18);
  --wlos-2-na-jasnym:  rgba(244, 241, 232, 0.09);

  --piasek: #D8D2C0;
  --las: #1E3A2B;
  --butelka: #2B5138;
  --lisc: #7FA36A;

  --f-display: "Playfair Display", Georgia, "Times New Roman", serif;
  --f-body:    "Inter", system-ui, "Segoe UI", sans-serif;
  --f-mono:    "Inter", system-ui, "Segoe UI", sans-serif;
  --waga-display: 500;
  --interlinia-display: 1.06;
  --tracking-display: -0.015em;
  --promien: 14px;

  --nawi-tlo: rgba(244, 241, 232, 0.84);
  --pole-tlo: rgba(255, 255, 255, 0.6);
  --tint:
    linear-gradient(180deg, rgba(30, 58, 43, 0.1) 0%, rgba(30, 58, 43, 0.05) 40%, rgba(30, 58, 43, 0.72) 100%);
}

h1 em, h2 em, h3 em { font-style: italic; color: var(--akcent); font-weight: 500; }
.nawi__marka { font-family: var(--f-display); text-transform: none; letter-spacing: 0.02em; font-size: 1.45rem; font-weight: 600; }
.nadtytul { letter-spacing: 0.2em; }
.przycisk { border-radius: 999px; }
.liczba__v { font-family: var(--f-display); color: var(--akcent); }
.tabela td b { font-family: var(--f-display); font-weight: 500; }
.karta { border-radius: var(--promien); }
.pasmo--odwrotne .karta { background: rgba(255, 255, 255, 0.04); }
/* na lesie akcent butelkowy ginie: jasna zielen dla kursywy, liczb i nadtytulow */
.pasmo--odwrotne h1 em, .pasmo--odwrotne h2 em, .pasmo--odwrotne h3 em, .pasmo--odwrotne .liczba__v, .pasmo--odwrotne .nadtytul, .pasmo--odwrotne .karta__nr, .pasmo--odwrotne .link-strzalka { color: #CFE3C2; }
.pasmo--odwrotne .nadtytul::before { background: #CFE3C2; }
.kal__tydzien--zima { opacity: 0.55; }

/* ---------- miekka krawedz: fotografia z organiczna dolna granica ----------
   Promien jest w dwoch osiach (poziomo procent szerokosci, pionowo procent
   wysokosci), wiec krzywa zostaje miekka na kazdej szerokosci ekranu. */
.krawedz { position: relative; }
.krawedz__foto { position: relative; overflow: hidden; border-radius: 0 0 46% 54% / 0 0 15% 13%; background: var(--las); }
.krawedz__foto img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: var(--foto-poz, 50% 58%); }
.krawedz__foto::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(30, 58, 43, 0.72) 0%, rgba(30, 58, 43, 0.28) 45%, rgba(30, 58, 43, 0) 70%), linear-gradient(0deg, rgba(30, 58, 43, 0.5) 0%, rgba(30, 58, 43, 0) 40%); pointer-events: none; }
/* s4: kopia byla absolutna nad zdjeciem o stalej wysokosci, wiec przy 1440x900 trzeci wiersz
   lede, a przy 1280x720 lede i przycisk schodzily pod miekka krawedz na krem (krem na kremie).
   Teraz kopia jest w przeplywie i wyznacza wysokosc sekcji, a fotografia lezy pod nia absolutnie:
   tekst zawsze stoi na zdjeciu, zapas na dole to wysokosc krzywej krawedzi. */
.krawedz--hero { display: grid; min-height: clamp(460px, 68vh, 640px); }
.krawedz--hero .krawedz__foto { position: absolute; inset: 0; height: auto; }
.krawedz--hero .krawedz__kopia { position: relative; padding-bottom: clamp(120px, 17vh, 168px); }
.krawedz__kopia { position: absolute; left: 0; right: 0; top: 0; z-index: 2; padding-top: clamp(110px, 14vw, 170px); color: var(--tlo); --tekst: #F4F1E8; --tekst-2: rgba(244, 241, 232, 0.82); --akcent-tekst: #1E3A2B; }
.krawedz__kopia .nadtytul, .krawedz__kopia h1 { color: var(--tlo); }
.krawedz__kopia h1 em { color: #CFE3C2; }
.krawedz__kopia .lede { max-width: 46ch; }
.krawedz__kopia .przycisk { background: var(--tlo); color: var(--las); }
.krawedz__kropka { position: absolute; border-radius: 50%; background: var(--las); opacity: 0.5; z-index: 3; }
.krawedz__kropka--a { width: 11px; height: 11px; left: 63%; bottom: 6px; }
.krawedz__kropka--b { width: 7px; height: 7px; left: 20%; bottom: 26px; opacity: 0.35; }

/* karta wolnych terminow: nachodzi na krawedz i wiaze obie warstwy */
.karta-terminu { position: absolute; right: clamp(16px, 6vw, 88px); bottom: -64px; z-index: 4; width: min(328px, calc(100% - 32px)); background: var(--tlo); border-radius: 22px; padding: 26px 30px; box-shadow: 0 26px 50px -18px rgba(14, 26, 18, 0.45), 0 2px 8px rgba(14, 26, 18, 0.08); transition: opacity 0.5s var(--ease), transform 0.6s var(--ease); }
.karta-terminu.jest-czeka { opacity: 0; transform: translateY(18px); }
.karta-terminu__k { font-size: 0.7rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--tekst-3); }
.karta-terminu__v { font-family: var(--f-display); font-size: var(--step-2); line-height: 1.1; margin-top: 8px; }
.karta-terminu__v b { color: var(--akcent); font-weight: 500; }
.karta-terminu__d { font-size: var(--step--1); color: var(--tekst-2); margin-top: 10px; line-height: 1.5; }
.karta-terminu__rzad { display: flex; align-items: center; gap: 10px; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--wlos-2); font-size: 0.8rem; font-weight: 500; color: var(--akcent); }
.karta-terminu__rzad svg { width: 18px; height: 18px; flex: none; }
.krawedz--z-karta { margin-bottom: 96px; }

/* ---------- plan ogrodu z gory (SVG z JSON) ---------- */
.plan { display: block; width: 100%; height: auto; background: var(--tlo-2); border-radius: var(--promien); }
.plan__dzialka { fill: #E6E1D3; stroke: var(--las); stroke-width: 0.25; }
.plan__trawnik { fill: #A9C48F; }
.plan__laka { fill: #C9D69A; }
.plan__sciolka { fill: #C7B08E; }
.plan__taras { fill: #D8D2C0; stroke: var(--las); stroke-width: 0.15; }
.plan__dom { fill: #F4F1E8; stroke: var(--las); stroke-width: 0.3; }
.plan__sciezka { fill: #E9E3D4; stroke: var(--las); stroke-width: 0.1; }
.plan__rabata { fill: #86A96E; }
.plan__warzywnik { fill: #B9C98F; stroke: var(--las); stroke-width: 0.15; stroke-dasharray: 0.6 0.4; }
.plan__woda { fill: #A9C9D6; }
.plan__drzewo { fill: #5F8A55; opacity: 0.85; }
.plan__drzewo-pien { fill: var(--las); }
.plan__tekst { font-family: var(--f-body); font-size: var(--plan-fs, 1.1px); letter-spacing: 0.08px; text-transform: uppercase; fill: var(--las); opacity: 0.75; }
.plan__skala { stroke: var(--las); stroke-width: 0.15; }
.plan--mini .plan__tekst { display: none; }

/* ---------- etapy, pakiety, widelki ---------- */
.etapy { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 2.5vw, 32px); }
.etap { background: var(--tlo-2); border-radius: var(--promien); padding: clamp(22px, 3vw, 34px); display: grid; gap: 12px; align-content: start; }
.etap__nr { font-family: var(--f-display); font-size: var(--step-3); line-height: 1; color: var(--akcent); }
.etap__tytul { font-family: var(--f-display); font-size: var(--step-1); font-weight: 500; }
.etap__czas { font-size: 0.74rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--tekst-3); }
.etap__opis { font-size: var(--step--1); color: var(--tekst-2); line-height: 1.55; }
.pakiety { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 2.5vw, 32px); align-items: start; }
.pakiet { border: 1px solid var(--wlos); border-radius: var(--promien); padding: clamp(22px, 3vw, 34px); display: grid; gap: 14px; background: rgba(255, 255, 255, 0.35); }
.pakiet--polecany { border-color: var(--akcent); background: var(--tlo-2); }
.pakiet__cena { font-family: var(--f-display); font-size: var(--step-3); line-height: 1; color: var(--akcent); }
.pakiet__cena small { font-family: var(--f-body); font-size: 0.74rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--tekst-3); }
.pakiet ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 6px; font-size: var(--step--1); color: var(--tekst-2); }
.pakiet li::before { content: "·"; color: var(--akcent); margin-right: 8px; }
.widelki { font-family: var(--f-display); font-size: var(--step-3); line-height: 1.05; color: var(--akcent); }
.widelki small { display: block; font-family: var(--f-body); font-size: 0.74rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--tekst-3); margin-top: 6px; }
.skladowe { margin: 0; padding: 0; list-style: none; display: grid; gap: 6px; }
.skladowe li { display: flex; justify-content: space-between; gap: 12px; font-size: var(--step--1); color: var(--tekst-2); }
.skladowe li b { color: var(--tekst); font-weight: 500; white-space: nowrap; }
.wyc__podsumowanie .kv__v em { display: block; font-style: normal; font-size: var(--step--1); color: var(--tekst-3); }
.sciezka-foto { border-radius: var(--promien); overflow: hidden; aspect-ratio: 4 / 3; }
.sciezka-foto img { width: 100%; height: 100%; object-fit: cover; object-position: var(--foto-poz, 50% 80%); transform: scale(1.35); transform-origin: 50% 90%; }

@media (max-width: 900px) { .etapy, .pakiety { grid-template-columns: minmax(0, 1fr); } }
/* Telefon: fotografia u gory (z miekka krawedzia), tekst POD nia na kremie.
   Sesja 3: kopia schodzila pod zdjecie, ale trzymala kolory z wersji na
   zdjeciu (krem na kremie), wiec tytul byl niewidoczny, a 96 px paddingu
   robilo pusty pas. Tekst wraca do atramentu lasu, przycisk do akcentu. */
@media (max-width: 720px) {
  .krawedz--hero { display: block; min-height: 0; }
  .krawedz--hero .krawedz__foto { position: relative; height: clamp(300px, 56vh, 440px); }
  .krawedz__kopia, .krawedz--hero .krawedz__kopia { position: relative; padding: 28px 0 40px; color: var(--tekst); --tekst: #1E3A2B; --tekst-2: rgba(30, 58, 43, 0.72); --akcent-tekst: #F4F1E8; }
  .krawedz__kopia .nadtytul, .krawedz__kopia h1 { color: var(--tekst); }
  .krawedz__kopia h1 em { color: var(--akcent); }
  .krawedz__kopia .przycisk { background: var(--akcent); color: var(--akcent-tekst); }
  .karta-terminu { position: relative; right: auto; bottom: auto; width: 100%; margin-top: 0; box-shadow: 0 12px 30px -16px rgba(14, 26, 18, 0.35), 0 1px 4px rgba(14, 26, 18, 0.08); border: 1px solid var(--wlos-2); }
  .krawedz--z-karta { margin-bottom: 0; padding-bottom: 8px; }
  .krawedz__kropka { display: none; }
}