/* ============================================================
   MOTYW: amalfi-lemon  (Cytrynowe Amalfi)
   6-ekranowe zaproszenie — majolika, cytryny, hortensje,
   okiennice otwierające się na morze.
   Grafiki: assets/themes/amalfi-lemon/
   Jedyny motyw z 6 ekranami: RSVP i zakończenie dzielą planszę,
   dlatego #rgOutro jest wsunięte do #rgRsvp (parts.outroInline).
   Struktura sekcji wspólna z motywami 1–2 (klasy .rg-*).
   ============================================================ */

body[data-theme="amalfi-lemon"] {
  /* --- Paleta (pipetą z plansz) --- */
  --rg-ink:      #002266;   /* nagłówki, imiona */
  --rg-body:     #00215B;   /* tekst opisowy */
  --rg-accent:   #003FA3;   /* przyciski */
  --rg-line:     #6078C0;   /* wstążki, linie */
  --rg-pale:     #C0D8F0;   /* jasny błękit */
  --rg-lemon:    #F0D848;   /* cytryna */
  --rg-cream:    #FBF9F0;   /* papier */
  --rg-card:     #FFFFFF;
  --rg-muted:    #6E7BA8;

  /* --- Fonty (darmowe zamienniki) ---
     New Icon Script → Pinyon Script   (kaligrafia z zawijasami)
     The Seasons     → Bodoni Moda     (wysoki kontrast, cienkie szeryfy)
     NOW             → Poppins         (geometryczny grotesk)
     LibraSerifModern→ Cormorant Garamond
     Wszystkie mają pełny zestaw polskich znaków. */
  --rg-script:   'Pinyon Script', cursive;
  --rg-display:  'Bodoni Moda', serif;
  --rg-ui:       'Poppins', sans-serif;
  --rg-text:     'Poppins', sans-serif;
  --rg-serif:    'Cormorant Garamond', serif;

  background: #FFFFFF;
  color: var(--rg-body);
  font-family: var(--rg-text);
}

body[data-theme="amalfi-lemon"] #rgScreens { background: var(--rg-cream); }

/* Wszystkie plansze są jasne — miękkie przenikanie na stykach sekcji */
body[data-theme="amalfi-lemon"] .rg-screen .rg-bg {
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 6%, #000 94%, transparent 100%);
          mask-image: linear-gradient(180deg, transparent 0%, #000 6%, #000 94%, transparent 100%);
}
/* …poza ekranem 2 i 6, gdzie rama i łuk muszą dochodzić do krawędzi */
body[data-theme="amalfi-lemon"] .rg-date .rg-bg,
body[data-theme="amalfi-lemon"] .rg-rsvp .rg-bg {
  -webkit-mask-image: none;
          mask-image: none;
}

/* ============================================================
   TYPOGRAFIA WSPÓLNA
   ============================================================ */

body[data-theme="amalfi-lemon"] .rg-h {
  font-family: var(--rg-display);
  font-weight: 400;
  color: var(--rg-ink);
  letter-spacing: .01em;
  font-size: clamp(30px, 6.6vw, 58px);
}

body[data-theme="amalfi-lemon"] .rg-p {
  font-family: var(--rg-text);
  font-weight: 300;
  color: var(--rg-body);
  line-height: 1.85;
  font-size: clamp(14px, 3.2vw, 17px);
}

body[data-theme="amalfi-lemon"] .rg-names {
  font-family: var(--rg-script);
  color: var(--rg-ink);
  line-height: .96;
}
body[data-theme="amalfi-lemon"] .rg-names .amp {
  font-family: var(--rg-display);
  font-size: .30em;
  color: var(--rg-accent);
}

body[data-theme="amalfi-lemon"] .rg-sub {
  font-family: var(--rg-ui);
  font-weight: 300;
  color: var(--rg-body);
  letter-spacing: .16em;
  text-transform: uppercase;
  font-size: clamp(10px, 2.3vw, 12px);
}

body[data-theme="amalfi-lemon"] .rg-btn {
  font-family: var(--rg-ui);
  font-weight: 500;
  letter-spacing: .18em;
  text-transform: uppercase;
  font-size: clamp(10px, 2.4vw, 12px);
  background: var(--rg-accent);
  color: #fff;
  border-radius: 2px;
  padding: 15px 34px;
  border: none;
}
body[data-theme="amalfi-lemon"] .rg-btn:hover { background: #002B7A; }

body[data-theme="amalfi-lemon"] .rg-card {
  background: transparent;
  box-shadow: none;
  border: none;
}

/* ============================================================
   EKRAN 2 — IMIONA I DATA
   Tekst siedzi w prześwicie okna (x 20–79%, y 16–79% płótna),
   bo tylko tam tło jest jasne i gładkie. Poza tym prześwitem
   idzie rama z cytryn i hortensji.
   ============================================================ */

body[data-theme="amalfi-lemon"] .rg-date .rg-inner {
  width: min(56vw, calc(var(--rg-w, 760px) * 0.60));
  margin: 0 auto;
  padding-top: calc(min(100vw, 760px) * 5 / 3 * 0.150);
  text-align: center;
}

body[data-theme="amalfi-lemon"] .rg-date .rg-names {
  font-size: clamp(38px, 10.5vw, 96px);
}
body[data-theme="amalfi-lemon"] .rg-date .rg-sub {
  margin-top: clamp(16px, 3.4vw, 28px);
  line-height: 2;
}

body[data-theme="amalfi-lemon"] .rg-date .rg-count {
  margin-top: clamp(22px, 5vw, 40px);
  display: flex;
  justify-content: center;
  gap: clamp(14px, 3.4vw, 30px);
}
body[data-theme="amalfi-lemon"] .rg-date .rg-count .num {
  font-family: var(--rg-display);
  color: var(--rg-ink);
  font-size: clamp(20px, 4.6vw, 34px);
}
body[data-theme="amalfi-lemon"] .rg-date .rg-count .lbl {
  font-family: var(--rg-ui);
  font-weight: 300;
  color: var(--rg-muted);
  letter-spacing: .14em;
  text-transform: uppercase;
  font-size: clamp(8px, 1.9vw, 10px);
}

/* ============================================================
   EKRAN 3 — HARMONOGRAM (serpentyna)
   Plansza nie ma tła: przystanki idą na przemian lewo/prawo,
   a między nimi wije się wstążka z projektu. Układ jest liczony,
   nie wpisany na sztywno, więc działa przy dowolnej liczbie punktów.
   ============================================================ */

body[data-theme="amalfi-lemon"] .rg-schedule {
  background: var(--rg-cream);
  padding: clamp(54px, 11vw, 100px) 0 clamp(70px, 14vw, 130px);
}
body[data-theme="amalfi-lemon"] .rg-schedule .rg-inner { text-align: center; }

/* Pionowa oś i perełki z motywów 1–2 tu nie występują */
body[data-theme="amalfi-lemon"] .rg-timeline::before,
body[data-theme="amalfi-lemon"] .rg-item .pearl { display: none; }

body[data-theme="amalfi-lemon"] .rg-timeline[data-layout="serpentine"] {
  width: 100%;
  margin-top: clamp(28px, 6vw, 56px);
  display: block;
}

body[data-theme="amalfi-lemon"] .rg-timeline[data-layout="serpentine"] .rg-item {
  position: relative;
  display: grid;
  align-items: center;
  gap: clamp(12px, 3vw, 26px);
  padding: 0;
  margin: 0 0 clamp(4px, 1.2vw, 12px);
  grid-template-columns: minmax(0, 42%) minmax(0, 1fr);
}
body[data-theme="amalfi-lemon"] .rg-item[data-side="r"] {
  grid-template-columns: minmax(0, 1fr) minmax(0, 42%);
}
body[data-theme="amalfi-lemon"] .rg-item[data-side="r"] .ico { order: 2; }
body[data-theme="amalfi-lemon"] .rg-item[data-side="r"] .txt { order: 1; text-align: right; }
body[data-theme="amalfi-lemon"] .rg-item[data-side="l"] .txt { text-align: left; }

body[data-theme="amalfi-lemon"] .rg-timeline[data-layout="serpentine"] .ico {
  width: 100%;
  height: auto;
  max-width: clamp(120px, 32vw, 240px);
  justify-self: center;
  /* Ilustracje oddychają — właściwości indywidualne, nie `transform` */
  animation: am-float 14s ease-in-out infinite;
}
body[data-theme="amalfi-lemon"] .rg-item:nth-child(2) .ico { animation-delay: -2.8s; }
body[data-theme="amalfi-lemon"] .rg-item:nth-child(3) .ico { animation-delay: -5.6s; }
body[data-theme="amalfi-lemon"] .rg-item:nth-child(4) .ico { animation-delay: -8.4s; }
body[data-theme="amalfi-lemon"] .rg-item:nth-child(5) .ico { animation-delay: -11.2s; }

body[data-theme="amalfi-lemon"] .rg-item .time {
  font-family: var(--rg-display);
  color: var(--rg-ink);
  font-size: clamp(17px, 4vw, 28px);
  line-height: 1.25;
}
body[data-theme="amalfi-lemon"] .rg-item .desc {
  font-family: var(--rg-ui);
  font-weight: 300;
  color: var(--rg-body);
  font-size: clamp(12px, 2.9vw, 15px);
  line-height: 1.75;
  margin-top: 6px;
}

/* Wstążka przechodzi POD tekstem i ikonami.
   Sama wstążka ma z-index 0, ale to nie wystarczało: element pozycjonowany
   maluje się nad treścią nieustawioną w kontekście układania, nawet przy
   z-index 0. Tekst był statyczny, więc niebieska rzeka szła po godzinach
   i nazwach punktów programu. Wystarczy nadać treści własną pozycję. */
body[data-theme="amalfi-lemon"] .rg-item .txt,
body[data-theme="amalfi-lemon"] .rg-item .ico {
  position: relative;
  z-index: 2;
}

/* Wstążka łącząca przystanki — rysuje się dopiero, gdy sekcja wejdzie
   w kadr. Maska przesuwa się od góry, więc wygląda jak pociągnięcie pędzlem. */
body[data-theme="amalfi-lemon"] .rg-item .ribbon {
  position: absolute;
  z-index: 0;
  pointer-events: none;
  width: 62%;
  height: auto;
  bottom: -34%;
  opacity: .95;
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 var(--am-draw, 0%), transparent calc(var(--am-draw, 0%) + 14%));
          mask-image: linear-gradient(180deg, #000 0%, #000 var(--am-draw, 0%), transparent calc(var(--am-draw, 0%) + 14%));
  transition: --am-draw 1.4s ease;
}
body[data-theme="amalfi-lemon"] .rg-item .rb-l { left: 34%; }
body[data-theme="amalfi-lemon"] .rg-item .rb-r { right: 34%; scale: -1 1; }
/* Bez wsparcia @property maska nie animuje — wtedy wstążka po prostu jest */
body[data-theme="amalfi-lemon"] .rg-item.in .ribbon { --am-draw: 100%; }

@property --am-draw {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 0%;
}

@keyframes am-float {
  0%, 100% { translate: 0 0;      rotate: 0deg;     }
  33%      { translate: 0 -1.1%;  rotate: 0.35deg;  }
  66%      { translate: 0 0.7%;   rotate: -0.25deg; }
}

/* ============================================================
   EKRAN 4 — HISTORIA PARY (pocztówka)
   Dwa zdjęcia lekko przekrzywione, jak wsunięte pod narożniki
   albumu. Tło ma majolikowe pasy po bokach — treść musi się
   zmieścić między nimi (x 18–82% płótna).
   ============================================================ */

body[data-theme="amalfi-lemon"] .rg-story { background: var(--rg-cream); }

body[data-theme="amalfi-lemon"] .rg-heart,
body[data-theme="amalfi-lemon"] .rg-collage { display: none; }

/* Nakładka = płótno 900×1500 nad tłem, pod tekstem. Dzięki temu
   procenty z macierzy SVG trafiają dokładnie tam, gdzie w projekcie. */
/* Kontener zdjęć MUSI mieć rozmiar płótna. Był `position: absolute` bez
   żadnego inset ani wymiarów, więc zwijał się do zera — a jego dzieci
   (.ov) mają pozycje w procentach TEGO kontenera, czyli procent z zera.
   Zdjęcia pary i ramki renderowały się o zerowej wielkości i po prostu
   ich nie było widać. */
/* Kontener trzyma współrzędne PŁÓTNA (inset: 0). Poprzednio startował
   na 26 % wysokości, a pozycje zdjęć z mapy (25,5 % i 45,3 %) były do tego
   doliczane — pierwsze zdjęcie lądowało więc dopiero na 51 % i między
   tekstem a zdjęciami powstawała pusta przestrzeń na pół ekranu.
   Blok tekstu kończy się ok. 20 %, pierwsze zdjęcie zaczyna na 25,5 %. */
body[data-theme="amalfi-lemon"] .rg-postcard {
  inset: 0;
  width: auto;
  height: auto;
}

body[data-theme="amalfi-lemon"] .rg-postcard,
body[data-theme="amalfi-lemon"] .rg-postcard .ov,
body[data-theme="amalfi-lemon"] .rg-loc-cards .ov {
  position: absolute;
  display: block;
  scale: var(--rg-fx, 1) 1;             /* odbicie w poziomie wg projektu */
  animation: am-float 15s ease-in-out infinite;
  animation-delay: calc(var(--ov-i) * -3.1s);
}
/* Zdjęcia pary — jedyne klikalne, bo można je podmienić */
/* Kontener pocztówki ma pointer-events: none (nakładka dekoracyjna
   przechwytywała kliknięcia — patrz style.css), więc klikalność
   przywracamy TYLKO zdjęciom, które para może podmienić. */
body[data-theme="amalfi-lemon"] .rg-postcard .ph {
  object-fit: cover;
  pointer-events: auto;
  box-shadow: 0 12px 34px rgba(0, 34, 102, .16);
}

/* Tekst historii wpasowany w luki między zdjęciami (wg projektu:
   pierwszy akapit na prawo od zdjęcia 1, drugi na lewo od zdjęcia 2) */
body[data-theme="amalfi-lemon"] .rg-story .rg-inner {
  position: relative;
  width: var(--rg-w);
  min-height: calc(var(--rg-w) * 5 / 3);
  margin: 0 auto;
}
/* Nagłówek i tekst historii idą W PRZEPŁYWIE, jeden pod drugim.
   Wcześniej nagłówek był pozycjonowany absolutnie (top 14,5 %), więc
   wypadał z przepływu — a akapity, będące w przepływie, startowały od
   GÓRY sekcji, czyli powyżej niego. Stąd tekst nad słowem „Historia pary".
   Kolejność w kodzie jest prawidłowa, wystarczy jej nie łamać. */
body[data-theme="amalfi-lemon"] .rg-story .rg-h {
  position: static;
  margin: calc(var(--rg-w) * 5 / 3 * 0.075) 0 calc(var(--rg-w) * 5 / 3 * 0.022);
  text-align: center;
}
body[data-theme="amalfi-lemon"] .rg-story .rg-cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(16px, 4vw, 30px);
  width: calc(var(--rg-w) * 0.74);
  margin: 0 auto calc(var(--rg-w) * 5 / 3 * 0.030);
}
body[data-theme="amalfi-lemon"] .rg-story .rg-cols .rg-p {
  position: relative;
  z-index: 2;
  margin: 0;
  text-align: left;
  font-size: clamp(11px, 2.4vw, 14px);
  line-height: 1.75;
}
/* Pozycje absolutne akapitów (left/top) usunięte — kolumny siatki
   ustawiają je same, a stare wartości walczyły z przepływem. */

/* ============================================================
   EKRAN 5 — LOKALIZACJA I DRESS CODE
   ============================================================ */

body[data-theme="amalfi-lemon"] .rg-location { background: var(--rg-cream); }
/* LOKALIZACJA — ta sama pułapka co przy zdjęciach historii pary.
   Kontener kart nie miał ani pozycji, ani rozmiaru, więc jego dzieci (.ov)
   liczyły swoje procenty od .rg-inner, a ten miał min-height 70 % płótna.
   Efekt: całe 100 % mapy ściśnięte do 70 % — karty lądowały za wysoko
   i za płaskie. Kontener dostaje rozmiar płótna, a .rg-inner pełną wysokość.
   Mapa (ekran 5): lokalizacja 1  x 12,1–57,2 %  y 15,1–34,4 %
                   lokalizacja 2  x 47,6–91,4 %  y 19,4–38,1 % */
body[data-theme="amalfi-lemon"] .rg-loc-cards {
  position: absolute;
  inset: 0;
}
/* UWAGA — pułapka z tej sesji: reguła „.rg-location .rg-inner:first-of-type"
   NIGDY nie łapała kolumny lokalizacji. Pierwszym divem sekcji jest .rg-bg,
   więc jej .rg-inner nie jest :first-of-type. Jedynym .rg-inner, który JEST
   pierwszym dzieckiem swojego rodzica, okazał się… .rg-dress-inner — i to ON
   dostawał min-height pełnego płótna. Stąd pusty pas majoliki pod tekstem
   dress code'u. Pozycje w parts.locationOverlay są skalibrowane wizualnie
   do kolumny takiej, jaka renderuje się DZIŚ (bez min-height), więc reguły
   nie „naprawiamy" na kolumnę — po prostu ją usuwamy, a wysokość bloku
   dress code'u nadaje jego własna, jawna reguła niżej. */
/* Mapa i adres startują pod malowanymi kartami (te kończą się na 39% płótna) */
/* Odstęp 48 % był na .rg-card, żeby mapa i adres zaczynały się pod
   malowanymi kartami. Problem: nagłówek „Lokalizacja" siedzi w TYM SAMYM
   .rg-card, więc odstęp spychał go razem z mapą — tytuł lądował pod
   zdjęciami, choć w projekcie stoi nad nimi (tekst na planszy startuje
   na 11,9 %, karty na 15,1 %).
   Rozdzielam: karta zaczyna się na 11,9 % i tam siada nagłówek,
   a odstęp dla mapy przenoszę na samą mapę. */
body[data-theme="amalfi-lemon"] .rg-location .rg-card {
  padding-top: calc(var(--rg-w) * 5 / 3 * 0.104);
}
body[data-theme="amalfi-lemon"] .rg-location .rg-card .rg-h {
  margin: 0 0 calc(var(--rg-w) * 5 / 3 * 0.010);
  text-align: center;
}
body[data-theme="amalfi-lemon"] .rg-location .rg-map {
  margin-top: calc(var(--rg-w) * 5 / 3 * 0.325);
}


/* Mapa Google pod malowanymi kartami — mniejsza, bo karty niosą klimat */
body[data-theme="amalfi-lemon"] .rg-map {
  width: min(62vw, calc(var(--rg-w, 760px) * 0.62));
  aspect-ratio: 16 / 10;
  border: 6px solid #fff;
  border-radius: 2px;
  box-shadow: 0 10px 30px rgba(0, 34, 102, .12);
  margin: 0 auto;
  display: block;
}
body[data-theme="amalfi-lemon"] .rg-addr {
  font-family: var(--rg-serif);
  color: var(--rg-ink);
  font-size: clamp(15px, 3.4vw, 20px);
  margin-top: clamp(14px, 3vw, 22px);
}

body[data-theme="amalfi-lemon"] .rg-dress { background: transparent; }
/* DRESS CODE — korowód gości (dresscode.webp, parts.dressFigure).
   Wcześniej siedział w nakładce lokalizacji, a ta mapuje procenty na
   kolumnę (520 px, inna proporcja niż płótno) — ludzie lądowali na
   adresie i przycisku „Dojazd", spłaszczeni. W pliku źródłowym leżą
   w pasie dress code'u: x 27,67–72,39 %, y 78,18–91,47 % płótna,
   ODBICI w poziomie. Sekcja .rg-dress odpowiada pasowi 70,31–100 %,
   więc góra ilustracji = (78,18 − 70,31) = 7,87 % wysokości płótna
   od góry sekcji.
   UWAGA — pułapka: pozycja absolutna tu NIE działa. Ilustracja siedzi
   w .rg-dress-grid, a ta ma klasę .rg-reveal — transform odsłony robi
   z siatki układ odniesienia (containing block), więc „absolutne"
   współrzędne liczą się od siatki, nie od sekcji. Dlatego korowód idzie
   W PRZEPŁYWIE: pierwszy wiersz siatki na całą szerokość, próbki kolorów
   pod nim, a na właściwe 78,18 % składają się wysokości w jednostkach
   płótna: padding 2,19 % + nagłówek ~4,2 % + margines siatki 1,45 %. */
body[data-theme="amalfi-lemon"] .rg-dress-fig {
  grid-row: 1;
  grid-column: 1 / -1;
  justify-self: center;
  display: block;
  width: calc(var(--rg-w) * 0.44713);
  height: auto;                                /* naturalna proporcja pliku */
  max-width: none;
  margin: 0;
  /* Lustro przez `transform`, nie `scale` — am-drift rusza tylko
     translate/rotate, więc odbicie się z nim składa */
  transform: scaleX(-1);
}
/* Nagłówek „Dress code" na planszy stoi na 72,5 % płótna,
   czyli 2,19 % wysokości płótna od góry pasa.

   WYŚRODKOWANIE W RAMCE. Narozniki obejmują pas od góry sekcji do
   `7vw + --am-zapas-naroz` nad jej dołem, a treść szła od samej góry do
   `7vw + --am-zapas-tresc` nad dołem. Różnica zapasów zostawała w całości
   POD treścią — blok siedział przy górnej krawędzi ornamentów, a pod
   ostatnim wierszem zostało o kilkanaście pikseli za dużo. Połowa tej
   różnicy przenosi się więc na górę (`--am-dress-srodek`), a dolny
   padding sekcji traci dokładnie tyle samo — wysokość sekcji się nie
   zmienia, więc narożniki stoją tam gdzie stały, a treść zjeżdża na
   środek. Zmierzone na żywym renderze: przed 200,5 px środka treści przy
   216 px środka ramki, po zmianie oba na 216. */
body[data-theme="amalfi-lemon"] {
  --am-zapas-tresc: clamp(26px, 5vw, 44px);
  --am-zapas-naroz: clamp(4px, 1vw, 10px);
  --am-dress-srodek: calc((var(--am-zapas-tresc) - var(--am-zapas-naroz)) / 2);
}
body[data-theme="amalfi-lemon"] .rg-dress-inner {
  padding-top: var(--am-dress-srodek);
}
body[data-theme="amalfi-lemon"] .rg-dress-grid {
  display: grid;
  grid-template-columns: auto auto;
  justify-content: center;
  align-items: center;
  gap: clamp(10px, 2.4vw, 18px) clamp(8px, 2vw, 14px);   /* nadpisane na końcu pliku */
  width: min(78vw, calc(var(--rg-w, 760px) * 0.80));
  /* 1,45 % wysokości płótna — dopełnia pozycję korowodu do 78,18 % */
  margin-top: calc(var(--rg-w) * 5 / 3 * 0.010);
  margin-bottom: 0;
  /* Siatka jest SZERSZA niż kolumna .rg-inner (592 px > 520 px), a przy
     nadmiarze `margin: auto` klei blok do lewej krawędzi zamiast go
     wyśrodkować — korowód uciekał 36 px w prawo od osi. Symetryczne
     (ujemne) marginesy liczone z tej samej szerokości centrują go. */
  margin-inline: calc((100% - min(78vw, var(--rg-w, 760px) * 0.80)) / 2);
}
/* Ukryta kopia ilustracji nie może zajmować miejsca w rzędzie próbek —
   reguła .rg-dress-fig wyżej wymusza display:block i wygrywała ze
   stylem przeglądarki dla [hidden]. */
body[data-theme="amalfi-lemon"] .rg-dress-fig[hidden] { display: none; }
/* Próbki kolorów pod ilustracją, nie po bokach — ilustracja jest szeroka.
   UWAGA: bazowa .rg-swatches ma flex-direction: column (kolumny po bokach
   figury w motywie 1). Bez jawnego powrotu do row kropki dalej szły
   w pionie — dwie z lewej, dwie z prawej, w rozsypce. */
body[data-theme="amalfi-lemon"] .rg-swatches {
  grid-row: 2;
  /* Szeroki korowód (wiersz 1) rozpycha obie kolumny — pary kropek
     dosuwamy do środka, żeby czytały się jako jeden rząd czterech */
  justify-self: end;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: clamp(8px, 2vw, 14px);
  margin-top: 0;
}
body[data-theme="amalfi-lemon"] .rg-swatches.right { justify-self: start; align-items: center; margin-top: 0; }
/* Opis dress code'u bliżej próbek — znacznik ma margines w stylu inline,
   stąd !important */
body[data-theme="amalfi-lemon"] .rg-dress .rg-p {
  margin-top: clamp(10px, 2.4vw, 18px) !important;
}

/* ============================================================
   EKRAN 6 — RSVP + ZAKOŃCZENIE (jedna plansza)
   Tło to łuk z majoliki i cytryn. Formularz siedzi w jego wnętrzu
   (x 24–76%, y 12–72% płótna), zakończenie pod łukiem.
   ============================================================ */

body[data-theme="amalfi-lemon"] .rg-rsvp {
  background: #FFFFFF;
  padding-bottom: clamp(40px, 9vw, 80px);
}
body[data-theme="amalfi-lemon"] .rg-rsvp .rg-inner {
  width: min(52vw, calc(var(--rg-w, 760px) * 0.52));
  margin: 0 auto;
  padding-top: calc(min(100vw, 760px) * 5 / 3 * 0.115);
}
body[data-theme="amalfi-lemon"] .rg-rsvp .rg-h { text-align: center; }
body[data-theme="amalfi-lemon"] .rg-q {
  font-family: var(--rg-ui);
  font-weight: 400;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--rg-body);
  font-size: clamp(10px, 2.3vw, 12px);
  text-align: center;
  margin-top: clamp(8px, 2vw, 14px);
}
body[data-theme="amalfi-lemon"] .rg-radios { justify-content: center; }
body[data-theme="amalfi-lemon"] .rg-radio { font-family: var(--rg-ui); font-weight: 300; }
body[data-theme="amalfi-lemon"] .rg-radio .dot { border-color: var(--rg-accent); }
body[data-theme="amalfi-lemon"] .rg-sep {
  border: none;
  border-top: 1px solid rgba(0, 63, 163, .18);
}
body[data-theme="amalfi-lemon"] .rg-msg-label {
  font-family: var(--rg-ui);
  font-weight: 400;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--rg-muted);
  font-size: clamp(9px, 2.1vw, 11px);
}
body[data-theme="amalfi-lemon"] .rg-textarea {
  font-family: var(--rg-ui);
  font-weight: 300;
  background: #fff;
  border: 1px solid rgba(0, 63, 163, .22);
  border-radius: 2px;
  color: var(--rg-body);
}
body[data-theme="amalfi-lemon"] .rg-note {
  font-family: var(--rg-ui);
  font-weight: 300;
  color: var(--rg-muted);
  text-align: center;
}

/* Misa z cytrynami — leży POD formularzem, więc rosnący formularz
   nigdy jej nie przecina (ten sam wzorzec co łabędzie / klamra). */
body[data-theme="amalfi-lemon"] .rg-swans {
  position: relative;
  display: block;
  width: calc(var(--rg-w, 760px) * 0.18522);   /* 18.522% płótna — wg projektu (po korekcie marginesu) */
  height: auto;
  margin: clamp(22px, 5vw, 44px) auto 0;
  animation: am-float 15s ease-in-out infinite;
}

/* --- Zakończenie wsunięte w tę samą sekcję --- */
body[data-screens="6"] .rg-outro-inline {
  position: relative;
  min-height: 0;
  padding: clamp(34px, 7vw, 66px) 0 clamp(10px, 2vw, 20px);
  background: transparent;
}
body[data-screens="6"] .rg-outro-inline .rg-bg { display: none; }
body[data-theme="amalfi-lemon"] .rg-outro-inline .rg-inner {
  width: min(62vw, calc(var(--rg-w, 760px) * 0.62));
  margin: 0 auto;
  text-align: center;
}
body[data-theme="amalfi-lemon"] .rg-monogram {
  font-family: var(--rg-script);
  color: var(--rg-accent);
  font-size: clamp(46px, 11vw, 92px);
  line-height: 1;
}

/* ============================================================
   EKRAN 1 — OKIENNICE
   Napis CTA w kolorze wapiennej ściany, żeby czytał się
   na ciemnym błękicie skrzydeł.
   ============================================================ */

body[data-theme="amalfi-lemon"] .shutter-cta,
.shutter-reveal .shutter-cta { color: #FBF6E6; }

@media (prefers-reduced-motion: reduce) {
  body[data-theme="amalfi-lemon"] .rg-timeline .ico,
  body[data-theme="amalfi-lemon"] .rg-loc-cards .lc,
  body[data-theme="amalfi-lemon"] .rg-dress-fig,
  body[data-theme="amalfi-lemon"] .rg-swans { animation: none !important; }
}

/* Wąskie ekrany — serpentyna prostuje się w kolumnę */
@media (max-width: 560px) {
  body[data-theme="amalfi-lemon"] .rg-postcard,
  body[data-theme="amalfi-lemon"] .rg-story .rg-cols,
  body[data-theme="amalfi-lemon"] .rg-loc-cards,
  body[data-theme="amalfi-lemon"] .rg-map,
  body[data-theme="amalfi-lemon"] .rg-dress-grid {
    width: min(86vw, 520px);
    margin-inline: calc((100% - min(86vw, 520px)) / 2);   /* jak wyżej — ta sama szerokość */
  }
  body[data-theme="amalfi-lemon"] .rg-date .rg-inner,
  body[data-theme="amalfi-lemon"] .rg-rsvp .rg-inner,
  body[data-theme="amalfi-lemon"] .rg-outro-inline .rg-inner { width: min(72vw, 440px); }
  body[data-theme="amalfi-lemon"] .rg-timeline[data-layout="serpentine"] .ico { max-width: 46vw; }
  /* Na telefonie imiona i zdanie zaproszenia zawijają się na więcej linii,
     więc data i licznik są już nisko — pełny odstęp wypchnąłby je na
     parapet okna. */
  body[data-theme="amalfi-lemon"] .rg-dateline { margin-top: calc(var(--rg-w) * 5 / 3 * 0.035); }
}

/* ============================================================
   POPRAWKI PO AUDYCIE WOBEC PLIKU ŹRÓDŁOWEGO
   ============================================================ */

/* Linia z datą i miejscem — w projekcie pod tekstem zaproszenia (y ≈ 64%).
   Data i licznik siedziały tuż pod zdaniem zaproszenia (46 % i 52 %
   płótna), przez co cała treść zbijała się w górnej połowie okna,
   a pod licznikiem zostawał pusty prześwit do samego parapetu.
   Odstęp liczony w jednostkach płótna spycha OBA bloki niżej, bliżej
   pozycji z planszy, i zostawia górze oddech. */
body[data-theme="amalfi-lemon"] .rg-dateline {
  font-family: var(--rg-serif);
  color: var(--rg-ink);
  font-size: clamp(15px, 3.4vw, 21px);
  letter-spacing: .04em;
  margin-top: calc(var(--rg-w) * 5 / 3 * 0.075);
}

/* Odliczanie przeniesione na górę harmonogramu — tak jak w projekcie */
body[data-theme="amalfi-lemon"] .rg-schedule .rg-count {
  margin: 0 auto clamp(26px, 6vw, 52px);
}
body[data-theme="amalfi-lemon"] .rg-schedule .rg-count .num {
  font-family: var(--rg-display);
  font-size: clamp(24px, 5.4vw, 42px);
}

/* ============================================================
   CHARAKTER RUCHU — każdy element rusza się wg tego, CZYM jest
   Wcześniej wszystko szło jednym `am-float`, przez co całość
   kołysała się jednostajnie. Teraz: ilustracje oddychają,
   malowane karty kołyszą się jak obrazki na ścianie, misa
   z cytrynami tylko lekko rośnie i maleje.
   Zasada bez zmian — wyłącznie translate/rotate/scale.
   ============================================================ */

@keyframes am-sway {          /* wiszące karty — dominuje obrót */
  0%, 100% { rotate: -0.55deg; translate: 0 0;      }
  50%      { rotate:  0.55deg; translate: 0 -0.5%;  }
}
@keyframes am-breathe {       /* misa, wzór — sam oddech skali */
  0%, 100% { scale: 1;      }
  50%      { scale: 1.022;  }
}
@keyframes am-drift {         /* dresscode — powolny dryf w bok */
  0%, 100% { translate: -0.5% 0;  rotate:  0.15deg; }
  50%      { translate:  0.5% -0.6%; rotate: -0.15deg; }
}

/* Malowane karty miejsca — kołyszą się, zamiast unosić */
body[data-theme="amalfi-lemon"] .rg-loc-cards .ov[src$="lokalizacja_1.webp"],
body[data-theme="amalfi-lemon"] .rg-loc-cards .ov[data-warstwa$="lokalizacja_1.webp"],
body[data-theme="amalfi-lemon"] .rg-loc-cards .ov[src$="lokalizacja_2.webp"],
body[data-theme="amalfi-lemon"] .rg-loc-cards .ov[data-warstwa$="lokalizacja_2.webp"] {
  animation: am-sway 17s ease-in-out infinite;
  transform-origin: 50% 8%;         /* zawieszone u góry, jak obrazek */
}
body[data-theme="amalfi-lemon"] .rg-loc-cards .ov[src$="lokalizacja_2.webp"],
body[data-theme="amalfi-lemon"] .rg-loc-cards .ov[data-warstwa$="lokalizacja_2.webp"] { animation-delay: -6.4s; }

/* Ornament rozdzielający — tylko oddech, żeby nie odciągał wzroku */
body[data-theme="amalfi-lemon"] .rg-loc-cards .ov[src$="wzor.webp"] {
  animation: am-breathe 12s ease-in-out infinite;
}
/* Goście w dresscodzie — dryfują w bok, jakby szli
   (ilustracja mieszka teraz w sekcji dress code'u jako .rg-dress-fig) */
body[data-theme="amalfi-lemon"] .rg-dress-fig {
  animation: am-drift 20s ease-in-out infinite;
}
/* Misa z cytrynami — oddech zamiast unoszenia */
body[data-theme="amalfi-lemon"] .rg-swans {
  animation: am-breathe 13s ease-in-out infinite;
}
/* Zdjęcia pary w pocztówce — lekkie kołysanie, każde w innej fazie */
body[data-theme="amalfi-lemon"] .rg-postcard .ov[src$="zdjecie_2.webp"],
body[data-theme="amalfi-lemon"] .rg-postcard .ov[data-warstwa$="zdjecie_2.webp"] { animation-delay: -7.5s; }

@media (prefers-reduced-motion: reduce) {
  body[data-theme="amalfi-lemon"] .rg-loc-cards .ov,
  body[data-theme="amalfi-lemon"] .rg-swans { animation: none !important; }
}

/* ============================================================
   UZUPEŁNIENIA WG ZBIORCZEGO SVG (audyt — docs/AUDYT-MOTYW-3.md)
   Pięć elementów w pliku grafika to KSZTAŁTY WEKTOROWE, nie obrazki,
   więc ekstraktor warstw ich nie widział i nigdy nie trafiły do motywu.
   Wszystkie pozycje poniżej pochodzą wprost z tego pliku.
   ============================================================ */

/* 1. Ekran 3 — jasnożółty pas u góry harmonogramu.
      W SVG: rect x -0,3–100,3 %  y 0,5–16,9 %  fill #FFF6C7.
      Bez niego nagłówek „Harmonogram" leżał na samym kremie tła
      i sekcja startowała bez wyraźnego wejścia. */
body[data-theme="amalfi-lemon"] .rg-schedule::before {
  content: "";
  position: absolute;
  left: 0; right: 0;
  top: 0;
  height: calc(var(--rg-w) * 5 / 3 * 0.169);
  background: #FFF6C7;
  z-index: 0;
  pointer-events: none;
}
body[data-theme="amalfi-lemon"] .rg-schedule .rg-inner { position: relative; z-index: 1; }

/* 2. Ekran 5 — przycisk „Dojazd".
      W SVG: rect x 39,9–60,3 % (szer. 20,4 %)  y 50,7–54,2 %  fill #002570. */
body[data-theme="amalfi-lemon"] .rg-location .rg-btn {
  background: #002570;
  /* Prostokąt z planszy: x 39,9–60,3 % (szer. 20,4 %), y 50,7–54,2 %
     (wys. 3,5 % płótna). Wcześniej wysokość brała się z pionowego
     paddingu i wychodziła 64 px zamiast 44 — przycisk był za wysoki
     i za wąski, przez co wyglądał jak przypadkowy klocek.
     Flex zamiast text-align: etykieta jest wyśrodkowana w OBU osiach,
     niezależnie od długości tłumaczenia. */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: calc(var(--rg-w) * 0.204);
  min-width: max-content;
  /* 3,5 % płótna to na telefonie ledwie 23 px — za mało na palec.
     Podłoga 44 px (minimum dotykowe); na desktopie i tak wygrywa
     wartość z planszy. */
  height: max(44px, calc(var(--rg-w) * 5 / 3 * 0.035));
  padding: 0 clamp(16px, 3.4vw, 30px);
  margin: calc(var(--rg-w) * 5 / 3 * 0.020) auto 0;
  /* Rozstrzelenie dokłada odstęp PO ostatniej literze — bez tego napis
     wygląda na przesunięty w lewo o pół litery. */
  text-indent: .18em;
}
/* Zniknięcie hoveru bazowego (opacity .7 dla <a>) na rzecz zmiany tła —
   przycisk ma reagować jak przycisk, nie jak blaknący odnośnik */
body[data-theme="amalfi-lemon"] .rg-location .rg-btn:hover {
  background: #003FA3;
  opacity: 1;
}

/* 3. Ekran 6 — pole wiadomości.
      W SVG: rect x 33,4–66,9 % (szer. 33,5 %)  y 43,9–49,2 %  fill #F2F0E4. */
body[data-theme="amalfi-lemon"] .rg-textarea {
  width: calc(var(--rg-w) * 0.335);
  height: calc(var(--rg-w) * 5 / 3 * 0.053);
  background: #F2F0E4;
  border: none;
  display: block;
  margin: 0 auto;
}

/* 4. Ekran 6 — przycisk „Wyślij RSVP".
      W SVG: rect x 38,6–61,7 % (szer. 23,1 %)  y 52,1–56,1 %  fill #003FA3. */
body[data-theme="amalfi-lemon"] .rg-rsvp .rg-btn {
  background: #003FA3;
  /* Ten sam sposób co przy „Dojeździe": wysokość z planszy (4 % płótna)
     zamiast pionowego paddingu, wyśrodkowanie flexem w obu osiach
     i podłoga 44 px — na telefonie wychodziło 32 px, za mało na palec,
     a to główna akcja całego zaproszenia. */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: calc(var(--rg-w) * 0.231);
  min-width: max-content;
  height: max(44px, calc(var(--rg-w) * 5 / 3 * 0.040));
  padding: 0 clamp(18px, 3.6vw, 32px);
  margin: calc(var(--rg-w) * 5 / 3 * 0.029) auto 0;
  text-indent: .18em;
}

/* 5. Ekran 6 — kropka przy zaznaczonej odpowiedzi.
      W SVG: circle x 43,0–45,1 % (średnica 2,1 %)  y 30,1–31,3 %  fill #001866. */
body[data-theme="amalfi-lemon"] .rg-radio input:checked + .dot::after {
  background: #001866;
  width: calc(var(--rg-w) * 0.021);
  height: calc(var(--rg-w) * 0.021);
}


/* ── DRESS CODE: cztery narożniki z planszy ──────────────────────────
   Historia: pierwsze podejście wstawiło ramka.webp ×4 przez screenLayers,
   czyli do .rg-bg — a tło ma wysokość CAŁEJ sekcji (rośnie z treścią),
   więc pozycje w % płótna rozjechały się po pustym prostokącie.
   Drugą pułapką była przypadkowa wysokość pełnego płótna na
   .rg-dress-inner (patrz komentarz przy .rg-loc-cards) — to ona robiła
   ten pusty prostokąt. Wpisy w rejestrze zostają (dokumentują planszę,
   audyt je liczy) z flagą live:false; na żywej stronie narożniki są
   elementami SEKCJI .rg-dress i kotwiczą się do jej rogów.

   Wg mapy (docs/AUDYT-MOTYW-3.md):
     x 1,45–25,20 % i 75,77–99,49 %,  y 70,31–82,35 % i 86,08–98,13 %.
   Sekcja odpowiada pasowi y 70,31–100 % płótna = 29,69 % wysokości —
   to jest „wysokość płótna" tej sekcji (minimum; dłuższy opis dress
   code'u ją powiększy, a narożniki dalej obejmują całość, bo górna para
   trzyma się góry, dolna dołu). Dolne ornamenty kończą się na planszy
   1,87 % płótna nad dolną krawędzią pasa — stąd ich `bottom`.
   Poziome pozycje wzorem z pułapki nr 3 audytu:
     left = calc(50% - var(--rg-w) * (0,5 - lewa_z_mapy)),
   bo sekcja jest szeroka na całą stronę, nie na kolumnę. */
body[data-theme="amalfi-lemon"] .rg-dress {
  min-height: calc(var(--rg-w) * 5 / 3 * 0.2969);
  /* Baza (motyw 1) daje sekcji margin-top do 80 px — tu robił pustą
     przestrzeń między lokalizacją a blokiem dress code'u („od góry
     jest przestrzeń"). Zostaje symboliczny odstęp. */
  margin-top: clamp(2px, 0.6vw, 8px);
  /* Sekcje wstęgi nachodzą na siebie o 7vw i tło ekranu 6 (łuk, bez maski)
     przykrywa dół tej sekcji. Dolny padding daje treści zapas o wielkość
     zakładki — bez niego opis dress code'u i dolne narożniki wpadały
     pod łuk („od dołu przycina"). */
  /* Zapas pomniejszony o `--am-dress-srodek`, który poszedł na górę —
     suma bez zmian, więc wysokość sekcji i pozycja narożników też. */
  padding-bottom: calc(7vw + var(--am-zapas-tresc) - var(--am-dress-srodek));
}
body[data-theme="amalfi-lemon"] .rg-dress-corner {
  position: absolute;
  z-index: 0;                     /* pod treścią — .rg-dress-inner ma z-index 2 */
  pointer-events: none;
  width: calc(var(--rg-w) * 0.23715);
  height: auto;
  /* Zasada ruchu jak przy wzor.webp: ornament tylko oddycha,
     każdy róg w innej fazie (--ov-i nadaje znacznik w zaproszenie.html) */
  animation: am-breathe 14s ease-in-out infinite;
  animation-delay: calc(var(--ov-i, 0) * -3.5s);
}
/* Grafika jest narysowana pod LEWY GÓRNY róg (pułapka nr 4 audytu) —
   pozostałe rogi to lustra. Odbicie idzie przez `transform`, nie przez
   właściwość `scale`: am-breathe animuje właśnie `scale` i w trakcie
   oddechu nadpisałby lustro. `transform` składa się z animowanym
   `scale` zamiast z nim konkurować. */
body[data-theme="amalfi-lemon"] .dc0 { top: 0;    left: calc(50% - var(--rg-w) * 0.48547); }
body[data-theme="amalfi-lemon"] .dc1 { top: 0;    left: calc(50% + var(--rg-w) * 0.25772); transform: scaleX(-1); }
/* Dolna para kotwiczy się nad strefą zakładki (7vw), nie na samej
   krawędzi sekcji — krawędź zawsze ląduje pod łukiem ekranu 6 */
body[data-theme="amalfi-lemon"] .dc2 { bottom: calc(7vw + var(--am-zapas-naroz)); left: calc(50% - var(--rg-w) * 0.48547); transform: scaleY(-1); }
body[data-theme="amalfi-lemon"] .dc3 { bottom: calc(7vw + var(--am-zapas-naroz)); left: calc(50% + var(--rg-w) * 0.25772); transform: scale(-1, -1); }

@media (prefers-reduced-motion: reduce) {
  body[data-theme="amalfi-lemon"] .rg-dress-corner { animation: none !important; }
}


/* ── ZAKOŃCZENIE (kilka słów od pary) — wyżej i w jednym akapicie ────
   Bazowy odstęp zakończenia (do 66 px) spychał blok na sam dół strony,
   pod pływający przycisk RSVP. A tekst pary był rozcięty na dwie kolumny
   W PÓŁ ZDANIA — podział słów na rgOutroA/B jest projektowany pod motyw 1;
   tutaj akapity sklejamy z powrotem w jeden środkowany tekst. */
body[data-theme="amalfi-lemon"] .rg-outro-inline {
  padding: clamp(12px, 2.6vw, 24px) 0 clamp(10px, 2vw, 20px);
}
body[data-theme="amalfi-lemon"] .rg-swans {
  margin-top: clamp(14px, 3vw, 26px);
}
body[data-theme="amalfi-lemon"] .rg-outro-inline .rg-cols {
  display: block;
  text-align: center;
}
body[data-theme="amalfi-lemon"] .rg-outro-inline .rg-cols .rg-p {
  display: inline;
}


/* ── STOPKA — bez czerni ─────────────────────────────────────────────
   Wspólna stopka strony ma tło var(--ink) wpisane INLINE (prawie czarne)
   — po dojechaniu na sam dół jasna majolika kończyła się czarnym paskiem.
   W tym motywie stopka przechodzi na atramentowy granat palety
   (--rg-ink), napis w kremie planszy, link w cytrynie. !important,
   bo konkuruje ze stylem inline. */
body[data-theme="amalfi-lemon"] footer {
  background: #002266 !important;
  color: #FBF6E6 !important;
}
body[data-theme="amalfi-lemon"] footer a {
  color: #F0D848 !important;
}


/* ── BIAŁY PANEL DRESS CODE'U — własny, nie z planszy ────────────────
   Dlaczego: plansza ma biały panel wklejony w majolikę, ale jego górna
   krawędź jest ŁUKIEM — po bokach zaczyna się wyżej, na środku niżej.
   Do tego panel leży na sztywnym procencie planszy, a blok dress code'u
   stoi w przepływie (jego pozycja zależy od wysokości mapy, adresu
   i przycisku). Te dwie rzeczy rozjeżdżały się przy każdej innej
   szerokości okna: raz nad ornamentami zostawał pusty biały pas,
   raz nagłówek lądował na kaflach nad łukiem.
   Rozwiązanie: blok niesie SWOJE tło — zaczyna się dokładnie tam, gdzie
   zaczyna się treść, więc pusty biały pas nie ma prawa powstać.
   Szerokość = kolumna planszy (poza nią zostaje krem strony),
   góra wygaszona miękko, jak maski pozostałych sekcji tego motywu.
   Biel planszy zostaje pod spodem — biel na bieli, łuk znika. */
body[data-theme="amalfi-lemon"] .rg-dress::before {
  content: "";
  position: absolute;
  left: 50%;
  translate: -50% 0;
  /* Startuje NAD blokiem: nagłówek stoi w pierwszej linii bloku, więc
     tło zaczynające się na jego krawędzi wchodziłoby dopiero pod
     literami — „DRESS CODE" zostawał na kaflach. Wyciągnięcie w górę
     o wysokość wygaszenia daje napisowi czystą biel pod spodem. */
  /* PO PRZEBUDOWIE EKRANU 5: `.rg-dress` jest wysokie na CAŁE płótno
     (leży na nim także lokalizacja), więc biały panel nie może już
     startować od jego góry — przykrywałby majolikę i obie fotografie.
     Zaczyna się tam, gdzie na planszy zaczynają się narożniki ramki
     (71,48 % kadru), minus wysokość wygaszenia. */
  top: calc(71.48% - clamp(26px, 5vw, 48px));
  /* Sięga pod dolną krawędź płótna, bo opis dress code'u mości się
     w zapasie sekcji — inaczej ostatni wiersz spadałby na krem strony. */
  bottom: calc(-3% - 7vw);
  width: var(--rg-w);
  background: #FFFFFF;
  /* .rg-dress ma z-index 1 i tworzy kontekst układania, więc -1 chowa
     tło pod ornamenty (0) i treść (2), ale wciąż NAD planszą sekcji. */
  z-index: -1;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 clamp(22px, 4.2vw, 40px), #000 100%);
          mask-image: linear-gradient(180deg, transparent 0, #000 clamp(22px, 4.2vw, 40px), #000 100%);
}

/* ══════════════════════════════════════════════════════════════════
   EKRAN 5 — JEDNA PLANSZA 900×1500 (przebudowa wg pliku źródłowego)
   ═════════════════════════════════════════════════════════════════
   Wcześniej lokalizacja i dress code szły W PRZEPŁYWIE, a `.rg-bg` ma
   `height: max(płótno, 100%)` — sekcja rosła do 1786 px przy płótnie
   1267 px i plansza rozciągała się razem z nią o 41 %. Majolika i obie
   fotografie były przez to spłaszczone, a cała treść rozjechała się
   względem rysunku.

   Teraz — tak jak w motywie 7 — sekcja jest przypięta do wysokości
   płótna, a wszystko siedzi na niej na współrzędnych zmierzonych
   z pliku „z tekstem full zaproszenie włoskie artystyczne.svg"
   (ekran 6 w tym pliku, kadr 900×1500, origin y = 5962,8):

       „Lokalizacja"      t  8,73 %
       zdjęcie 1          l 10,41  t 18,54  w 48,55  h 16,38 %
       zdjęcie 2          l 49,22  t 20,41  w 40,28  h 20,63 %
       ornament (wzór)    l 36,78  t 37,57  w 26,44  h 10,61 %
       adres              t 46,14 %
       przycisk DOJAZD    l 39,94  t 52,41  w 20,33  h  3,50 %
       narożniki ramki    t 71,48 i 87,21 %,  l 0,31 i 74,71 %,  25,8×13,11 %
       „Dresscode"        t 73,74 %
       ilustracja gości   l 25,19  t 78,43  w 49,62 %
       opis dress code'u  t 94,59 %

   MAPY W TYM PROJEKCIE NIE MA — lokalizację niesie para fotografii.
   To właśnie mapa rozpychała sekcję o te 41 %. */
body[data-theme="amalfi-lemon"] .rg-location {
  position: relative;
  padding: 0;
  /* Zapas 4 % na dłuższy opis dress code'u — plansza się z nim nie
     rozciąga, bo `.rg-bg` ma niżej stałą wysokość. */
  min-height: calc(var(--rg-w, 760px) * 5 / 3 * 1.03 + 7vw);
}
body[data-theme="amalfi-lemon"] .rg-location > .rg-bg {
  height: calc(var(--rg-w, 760px) * 5 / 3);
}
body[data-theme="amalfi-lemon"] .rg-location > .rg-inner {
  position: absolute;
  left: 50%;
  translate: -50% 0;
  top: 0;
  width: var(--rg-w, 760px);
  max-width: 100vw;
  height: calc(var(--rg-w, 760px) * 5 / 3);
  margin: 0;
  padding: 0;
  text-align: center;
  z-index: 3;
}
/* Karta lokalizacji nie jest żadnym kaflem — treść leży wprost na planszy. */
body[data-theme="amalfi-lemon"] .rg-location > .rg-inner > .rg-card {
  position: absolute;
  inset: 0;
  margin: 0;
  padding: 0;
  min-height: 0;
  background: none;
  border: none;
  box-shadow: none;
}
body[data-theme="amalfi-lemon"] .rg-location .rg-card > * {
  position: absolute;
  margin: 0;
}
body[data-theme="amalfi-lemon"] .rg-location .rg-h {
  left: 10%;
  width: 80%;
  top: 8.73%;
}
/* `.rg-loc-cards` jest `inset: 0` karty, więc procenty warstw
   z `parts.locationOverlay` liczą się teraz wprost od płótna. */
body[data-theme="amalfi-lemon"] .rg-location .rg-loc-cards {
  left: 0; top: 0; width: 100%; height: 100%;
}
/* —— MAPA DOJAZDU ——
   W plikach tego motywu mapy NIE MA (sprawdzone: folder „5 lokalizacja
   + dresscode" to tło, dwie fotografie, ornament, ramka i korowód —
   żadnego pliku z mapą, w odróżnieniu od różowego, fioletowego
   i biało-zielonego). Na planszy też nie ma dla niej miejsca: biała
   kartka kończy się na 60,7 %, a biały pas dress code'u zaczyna na
   70,7 % — między nimi jest 10 % kadru czystej majoliki.

   Rozwiązanie: przedłużamy białą kartkę w dół własnym prostokątem
   (biel na bieli, krawędź planszy jest prosta i płaska, więc szwu nie
   widać) i na tym przedłużeniu kładziemy mapę. Pas dress code'u
   zostaje nietknięty. */
body[data-theme="amalfi-lemon"] .rg-location .rg-card::after {
  content: "";
  position: absolute;
  left: 20.7%;                       /* x 186–713 z planszy 900 px */
  right: 20.8%;
  top: 56.3%;                        /* tuż pod przyciskiem (kończy się na 55,9 %) */
  bottom: 29.8%;                     /* do 70,2 % kadru */
  background: #FFFFFF;
  z-index: 0;                        /* pod treścią karty */
  pointer-events: none;
}
body[data-theme="amalfi-lemon"] .rg-location .rg-map {
  display: block;
  height: auto;
  aspect-ratio: 5 / 2;
  border: 6px solid #fff;
  border-radius: 2px;
  box-shadow: 0 10px 30px rgba(0, 34, 102, .12);
  background: #F3F3F7;
  z-index: 1;
}
/* Pozycje adresu, przycisku i mapy: blok „12.10 — EKRAN 5, LOKALIZACJA"
   na końcu pliku. Wcześniej stały tu na sztywnych procentach (adres
   zaczepiony dołem na 48,4 %, przycisk 52,41 %, mapa 57,4 %) i każdy
   liczył się od czegoś innego — stąd nierówne odstępy. */
body[data-theme="amalfi-lemon"] .rg-location .rg-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  white-space: nowrap;
}

/* —— DRESS CODE NA TEJ SAMEJ PLANSZY —— */
body[data-theme="amalfi-lemon"] .rg-dress {
  position: absolute;
  left: 50%;
  translate: -50% 0;
  top: 0;
  width: var(--rg-w, 760px);
  max-width: 100vw;
  height: calc(var(--rg-w, 760px) * 5 / 3);
  margin: 0;
  padding: 0;
  background: none;
  z-index: 4;
}
body[data-theme="amalfi-lemon"] .rg-dress > .rg-inner {
  position: absolute;
  inset: 0;
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0;
  translate: none;
  text-align: center;
}
body[data-theme="amalfi-lemon"] .rg-dress > .rg-inner > * {
  position: absolute;
  margin: 0;
}
body[data-theme="amalfi-lemon"] .rg-dress .rg-h {
  left: 10%;
  width: 80%;
  top: 72.5%;                        /* w pliku tekst stoi na 73,74 % */
}
/* Siatka niesie ilustrację (wiersz 1) i próbki kolorów (wiersz 2).
   Próbek w projekcie nie ma — to nasz dodatek — więc stoją pod
   korowodem, w pasie, który na planszy jest pusty. */
/* Siatka na całą szerokość płótna — wtedy procent szerokości korowodu
   liczy się od kadru, a nie od kolumny 80 %. */
body[data-theme="amalfi-lemon"] .rg-dress .rg-dress-grid {
  left: 0;
  width: 100%;
  top: 78%;                          /* korowód w pliku: t 79,85 % */
  margin: 0;
  margin-inline: 0;
}
/* Szerokość korowodu 1:1 z pliku (l 27,62–72,33 % kadru). */
body[data-theme="amalfi-lemon"] .rg-dress .rg-dress-fig {
  width: 44.713%;                    /* l 27,62–72,33 % kadru */
  height: auto;
}
/* Opis siada pod próbkami. W pliku stoi na 94,59 %, ale projekt nie ma
   próbek kolorów — to nasz dodatek — więc schodzi o ich wysokość. */
/* 12.10 — tekst pod WYŻSZYM z dwóch: korowodem albo kolumną kółek
   (kółka stoją teraz po bokach korowodu — patrz blok na końcu pliku).
   Było 97,5 %, a pod korowodem stał jeszcze rząd kółek: na telefonie
   tekst wchodził na kółka (−11 px), a resztą chował się pod talerzem
   z cytrynami z następnej sekcji. Korowód ma 44,713 % szerokości kadru
   i proporcje pliku 872×432. */
body[data-theme="amalfi-lemon"] .rg-dress .rg-p {
  left: 22%;
  width: 56%;
  top: calc(78%
            + max(var(--rg-w, 760px) * 0.44713 * 432 / 872,
                  2 * clamp(38px, 10vw, 58px) + clamp(12px, 3.4vw, 20px))
            + var(--rg-w, 760px) * 0.02);
  margin: 0 !important;              /* znacznik ma margines inline */
}
/* Narożniki kotwiczą się teraz do PŁÓTNA, nie do rozciągniętej sekcji. */
body[data-theme="amalfi-lemon"] .dc0,
body[data-theme="amalfi-lemon"] .dc1 { top: 71.48%; bottom: auto; }
body[data-theme="amalfi-lemon"] .dc2,
body[data-theme="amalfi-lemon"] .dc3 { top: 87.21%; bottom: auto; }
body[data-theme="amalfi-lemon"] .rg-dress-corner { width: calc(var(--rg-w, 760px) * 0.258); }
body[data-theme="amalfi-lemon"] .dc0,
body[data-theme="amalfi-lemon"] .dc2 { left: 0.31%; }
body[data-theme="amalfi-lemon"] .dc1,
body[data-theme="amalfi-lemon"] .dc3 { left: 74.71%; }

/* ── 12.10 — KÓŁKA PO BOKACH KOROWODU, JAK WE WSZYSTKICH MOTYWACH ──
   Do tej pory próbki stały w rzędzie POD korowodem („ilustracja jest
   szeroka"). Ale ten sam korowód ma motyw 10 i tam po bokach mieści
   się od 320 px w górę: 44,7 % kadru + 2 × kółko + 2 × odstęp to przy
   390 px 276 px, przy 760 px 492 px. Rząd pod spodem kosztował
   wysokość, której na tej planszy nie ma — opis lądował pod talerzem
   z cytrynami z następnej sekcji. Teraz układ i odstęp
   (`--rg-dress-odstep`) są te same co w każdym motywie z parą.
   Specyficzność `.rg-dress .rg-dress-grid` — tak jak reguła pozycji
   wyżej, żeby wygrać z blokami wcześniej w pliku i z @media. */
body[data-theme="amalfi-lemon"] .rg-dress .rg-dress-grid {
  display: grid;
  grid-template-columns: auto auto auto;
  grid-template-rows: auto;
  justify-content: center;
  align-items: center;
  column-gap: var(--rg-dress-odstep);
  row-gap: 0;
}
body[data-theme="amalfi-lemon"] .rg-dress .rg-dress-fig {
  grid-row: auto;
  grid-column: auto;
  width: calc(var(--rg-w, 760px) * 0.44713);
}
body[data-theme="amalfi-lemon"] .rg-dress .rg-swatches {
  grid-row: auto;
  justify-self: auto;
  flex-direction: column;
  gap: clamp(12px, 3.4vw, 20px);    /* jak w arkuszu motywu 1 */
}
body[data-theme="amalfi-lemon"] .rg-dress .rg-swatches.right {
  justify-self: auto;
  align-items: flex-end;
}

/* ══════════════════════════════════════════════════════════════════
   12.10 — EKRAN 5, LOKALIZACJA: ORNAMENT → ADRES → PRZYCISK → MAPA
   ══════════════════════════════════════════════════════════════════
   Co było źle (zmierzone, komputer / telefon):
     zdjęcie 2 → ornament       7 px /  4 px   ornament przyklejony do ramki
     ornament → adres          69 px /  3 px   na komputerze dziura,
                                               na telefonie zero oddechu
     mapa kończyła się 5 px nad pasem dress code'u i wchodziła pod jego
     majolikę.
   Przyczyna: adres był zaczepiony DOŁEM (bottom: 48,4 %), przycisk
   i mapa stały na sztywnych procentach. Adres w jednym wierszu
   (komputer) zostawiał nad sobą pustkę, w dwóch (telefon) dobijał do
   ornamentu — każdy element liczył się od czegoś innego.

   Teraz adres, przycisk i mapa idą w PRZEPŁYWIE kolumny, zaczynając
   pod ornamentem, z odstępami w jednostkach płótna. Niezależnie od
   tego, czy adres ma jeden wiersz czy dwa, odstępy są zawsze te same,
   a całość trzyma się ornamentu zamiast rozjeżdżać po planszy.
   Nagłówek, zdjęcia i ornament zostają absolutnie — tak jak w projekcie.

   Rytm (1 jednostka = 1 % wysokości płótna):
     zdjęcie 2 (koniec 39,56) → ornament   2,0   (app.js, t 41,56)
     ornament  (koniec 45,02) → adres      1,6
     adres → przycisk                      1,3
     przycisk → mapa                       1,6                        */
body[data-theme="amalfi-lemon"] .rg-location > .rg-inner > .rg-card {
  --am-1p: calc(var(--rg-w, 760px) * 5 / 3 / 100);
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: calc(var(--am-1p) * (45.02 + 1.6));
  /* Kolumna kończy się na 69,3 % — 1 % nad białym pasem dress code'u
     (70,31 %). Jeśli treść się nie zmieści (wąski telefon, adres na dwa
     wiersze), ustępuje WYSOKOŚĆ mapy (flex-shrink niżej), a nie odstępy
     i nie pas dress code'u. */
  padding-bottom: calc(var(--am-1p) * (100 - 69.3));
}
/* Kolejność w HTML to mapa, adres, przycisk — w kolumnie ustawia ją `order`. */
body[data-theme="amalfi-lemon"] .rg-location .rg-card > .rg-addr {
  order: 1;
  position: relative;
  left: auto; top: auto; bottom: auto;
  /* NIE szerzej niż biała kartka (x 20,7–79,2 % kadru) — przy szerszym
     adresie wiersz wychodził na majolikę. Na telefonie adres łamie się
     więc na dwa wiersze, i to jest w porządku: kolumna go uniesie. */
  width: 56%;
  margin: 0;
  font-size: clamp(13px, calc(var(--rg-w, 760px) * 0.031), 20px);
  line-height: 1.4;
  text-wrap: balance;
}
body[data-theme="amalfi-lemon"] .rg-location .rg-card > .rg-btn {
  order: 2;
  position: relative;
  left: auto; top: auto;
  margin: calc(var(--am-1p) * 1.3) 0 0;
  width: calc(var(--rg-w, 760px) * 0.204);
  /* Na telefonie było 23 px — za mało, żeby trafić palcem. Wysokość
     z planszy (3,5 %), ale nie mniej niż 38 px. */
  height: max(38px, calc(var(--am-1p) * 3.5));
  flex: none;
}
body[data-theme="amalfi-lemon"] .rg-location .rg-card > .rg-addr { flex: none; }
body[data-theme="amalfi-lemon"] .rg-location .rg-card > .rg-map {
  order: 3;
  position: relative;
  left: auto; top: auto;
  width: 52%;
  margin: calc(var(--am-1p) * 1.6) 0 0;
  /* Wysokość 5:2 jako punkt wyjścia; gdy brakuje miejsca, mapa robi się
     niższa (szerokość zostaje), ale nie mniej niż 32 px. */
  aspect-ratio: auto;
  height: calc(var(--rg-w, 760px) * 0.52 * 2 / 5);
  flex: 0 1 auto;
  min-height: 32px;
}

/* ── 12.10 — OPIS DRESS CODE'U NA TELEFONIE ───────────────────────
   Na planszy opis to trzy wiersze drobnego pisma (przy 390 px kadru
   wyszłoby ok. 7 px — nieczytelne), więc u nas jest większy, a przez to
   dłuższy, niż pas dress code'u ma miejsca. Kończył się pod talerzem
   z cytrynami z następnej sekcji: przy 390 px widać było dwa wiersze
   z czterech. Dwie rzeczy naraz:
   – opis w kolumnie 25–75 % kadru, między dolnymi narożnikami majoliki
     (stoją na x 0,3–26,1 % i 74,7–100 %) — wcześniej na nie wchodził,
   – sekcja na telefonie jest wyższa o 9 % płótna, więc następna zaczyna
     się niżej i opis ma gdzie się skończyć. Pod białym pasem jest tło
     sekcji w tym samym kremie, więc przedłużenie nie tworzy szwu.
   Na komputerze bez zmian — tam opis mieści się w pasie. */
@media (max-width: 560px) {
  body[data-theme="amalfi-lemon"] .rg-dress .rg-p {
    left: 25%;
    width: 50%;
    font-size: 12.5px;
    line-height: 1.55;
  }
  body[data-theme="amalfi-lemon"] .rg-location {
    min-height: calc(var(--rg-w, 760px) * 5 / 3 * 1.12 + 7vw);
  }
}
/* Najwęższe telefony (320 px): opis łamie się na pięć wierszy i przy
   1,12 ostatni chował się pod talerzem — tu sekcja rośnie bardziej. */
@media (max-width: 340px) {
  body[data-theme="amalfi-lemon"] .rg-location {
    min-height: calc(var(--rg-w, 760px) * 5 / 3 * 1.17 + 7vw);
  }
}