/* ============================================
   Premiere — strona główna
   Kotwice: monitor Figma 417:4766 (1920×8767),
            telefon Figma 417:1671 (393×4412).
   ============================================ */

/* === Zdjęcie powitalne (Figma y 0–1080) ====================== */
.hero {
  position: relative;
  height: var(--hero-band-h);
  padding: 34px var(--hero-inset) 0;
  background: var(--c-ink);
}

.hero__photo {
  height: var(--hero-photo-h);
  overflow: hidden;
  border-radius: 6px;
}

.hero__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 42%;
}

/* Napisy leżą na zdjęciu — w makiecie zaczynają się 63 px poniżej
   jego górnej krawędzi. */
.hero__text {
  position: absolute;
  top: 97px;
  left: 0;
  right: 0;
  color: var(--text-on-dark);
  text-align: center;
}

.hero__names {
  font-size: var(--fs-names);
  line-height: 1;
  text-shadow: 0 2px 24px rgba(20, 6, 9, .35);
}

.hero__tagline {
  margin-top: 34px;
  font-size: var(--fs-lead);
  letter-spacing: .04em;
}

.hero__date { margin-top: 32px; }

/* === Powitanie (Figma y 1080–1467) =========================== */
.welcome {
  /* Makieta daje pasowi 387 px (Figma y 1080–1467), ale odstęp ma być
     równy z góry i z dołu — inaczej akapit wygląda, jakby zsuwał się
     na koronkę pod spodem. Pas rośnie o te 26 px i tyle.
     Treść stoi w środku pasa: przy samym `min-height` nadmiar wysokości
     dokładał się do dołu i nad tytułem zostawało 79 px, a pod akapitem
     130 px. `align-content: center` dzieli nadmiar po równo, a padding
     pilnuje, żeby odstęp nigdy nie zszedł poniżej 64 px. */
  display: grid;
  align-content: center;
  min-height: 387px;
  padding: 64px 24px;
  color: var(--text-on-paper);
  text-align: center;
  background: var(--c-paper);
}

.welcome__title {
  font-size: var(--fs-display);
  line-height: .88;
}

.welcome__text {
  margin-top: 64px;
  font-size: var(--fs-lead);
  line-height: 1.5;
}

/* === Plan dnia (Figma y 1467–2184) =========================== */
.acts {
  position: relative;
  min-height: var(--acts-band-h);
  padding-top: var(--lace-crown-h);
  color: var(--text-on-dark);
  background: var(--c-ink);
}

/* Koronkowa korona zwisa z górnej krawędzi pasa. Rysowana maską, nie
   obrazkiem — dzięki temu bierze kolor z palety zamiast mieć wtopiony
   krem, i przez oczka koronki widać tło w barwie wariantu. */
.acts__lace {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: var(--lace-crown-h);
  /* Rysunek w pliku jest odwrócony względem makiety — obrót o 180°
     stawia go grzbietem do krawędzi pasa, a ząbkami w dół. */
  transform: rotate(180deg);
  background: var(--c-paper);
  -webkit-mask: var(--lace-crown) top center / 100% 100% no-repeat;
  mask: var(--lace-crown) top center / 100% 100% no-repeat;
}

/* Na monitorze plan idzie bez nagłówka, dokładnie jak w makiecie. */
.acts__title { display: none; }

.acts__list {
  position: relative;
  display: grid;
  grid-template-columns: repeat(var(--acts-count, 4), minmax(0, 1fr));
  width: var(--wide-w);
  margin: 92px auto 0;
  min-height: 252px;
}

/* Linia biegnie od środka pierwszej kolumny do środka ostatniej. */
.acts__list::before {
  content: '';
  position: absolute;
  top: 50%;
  left: calc(50% / var(--acts-count, 4));
  right: calc(50% / var(--acts-count, 4));
  height: 1px;
  background: var(--c-line);
}

.acts__item {
  position: relative;
  display: grid;
  grid-template-rows: 1fr 0 1fr;
  justify-items: center;
  padding: 0 12px;
  text-align: center;
}

/* Płatek na przecięciu linii i kolumny. */
.acts__item::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 36px;
  height: 49px;
  /* Płatek w pliku stoi czubkiem do góry, w makiecie czubkiem w dół. */
  transform: translate(-50%, -50%) rotate(180deg);
  background: var(--c-line);
  -webkit-mask: var(--petal) center / contain no-repeat;
  mask: var(--petal) center / contain no-repeat;
}

.acts__time {
  font-size: 26px;
  letter-spacing: .04em;
}

.acts__act {
  display: block;
  font-size: 20px;
  letter-spacing: .02em;
}

.acts__label {
  display: block;
  margin-top: 6px;
  color: var(--c-soft);
  font-size: var(--fs-small);
}

/* Naprzemiennie: raz godzina nad linią, raz nazwa. */
.acts__item--time-first .acts__time { grid-row: 1; align-self: end; padding-bottom: 34px; }
.acts__item--time-first .acts__name { grid-row: 3; align-self: start; padding-top: 34px; }
.acts__item--name-first .acts__name { grid-row: 1; align-self: end; padding-bottom: 34px; }
.acts__item--name-first .acts__time { grid-row: 3; align-self: start; padding-top: 34px; }

/* === Ceremonia (Figma y 2158–3228) =========================== */
.ceremony {
  /* W makiecie aksamit zachodzi 26 px na pas z planem dnia
     (pas kończy się na 2184, aksamit zaczyna na 2158). */
  margin-top: -26px;
  position: relative;
  display: grid;
  place-items: center;
  min-height: var(--ceremony-h);
  padding: 64px 24px;
}

.ceremony__bg {
  position: absolute;
  inset: 0;
  height: 100%;
}

.ceremony__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Koronkowa ramka: obrazek tła rozciąga się na całą kartę, a treść
   siedzi w jego jasnym środku. Wcięcia dobrane do rysunku ramki. */
.ceremony__frame {
  position: relative;
  width: min(1191px, 100%);
  aspect-ratio: 1191 / 942;
  display: grid;
  place-items: center;
  background: var(--c-paper);
  -webkit-mask: var(--lace-frame) center / 100% 100% no-repeat;
  mask: var(--lace-frame) center / 100% 100% no-repeat;
}

.ceremony__inner {
  /* Jasne pole w koronkowej ramce zajmuje 73,47 % jej szerokości
     (zmierzone na zrzucie: 876 px z 1191). Odstęp 15 % liczy się od tego
     pola, nie od kadru ramki — stąd 73,47 % × 0,7. */
  width: 51.4%;
  color: var(--text-on-paper);
  text-align: center;
}

.ceremony__title {
  font-size: var(--fs-script);
  line-height: 1;
}

.ceremony__time { margin-top: 36px; font-size: var(--fs-lead); }
.ceremony__venue { margin-top: 24px; font-size: var(--fs-lead); }
.ceremony__address { margin-top: 24px; font-size: var(--fs-lead); }

.ceremony__note {
  max-width: 46ch;
  margin: 30px auto 0;
  font-size: var(--fs-body);
  line-height: 1.45;
}

/* === Dress code (Figma y 3228–3935) ========================== */
.dresscode {
  /* Pas kremowy w makiecie ma 707 px (Figma y 3228–3935). */
  min-height: 707px;
  padding: 64px 24px 128px;
  color: var(--text-on-paper);
  text-align: center;
  background: var(--c-paper);
}

.dresscode__title {
  font-size: var(--fs-script);
  line-height: 1;
}

.dresscode__text {
  /* Dwa razy po 20 % węższy niż pas treści: dłuższe wiersze rozjeżdżały
     się przy tym stopniu pisma i akapit czytał się jak ulotka, nie jak
     zaproszenie. */
  max-width: calc(var(--wide-w) * .64);
  margin: 64px auto 0;
  font-size: var(--fs-body);
  line-height: 1.45;
}

.swatches {
  display: flex;
  justify-content: center;
  margin-top: 64px;
}

/* Kółka zachodzą na siebie tak jak w makiecie (108 px co ~84 px). */
.swatches li { width: var(--swatch-size); margin-right: calc(var(--swatch-size) * -0.22); }
.swatches li:last-child { margin-right: 0; }
.swatches img { width: 100%; height: auto; border-radius: 50%; }

.dresscode__note {
  max-width: var(--wide-w);
  margin: 64px auto 0;
  font-size: var(--fs-body);
  line-height: 1.45;
}

/* === Dojazd, nocleg, prezenty (Figma y 3935–5287) ============ */
.info {
  position: relative;
  /* Kwiaty wychodzą poza pas w bok i w dół. W bok tak ma być — kadrują
     sekcję. W dół nie: dolny tulipan wjeżdżał na kremową obwódkę
     zaproszenia pod spodem. Przycięcie do pasa załatwia oba naraz. */
  overflow: hidden;
  min-height: var(--info-band-h);
  padding: 125px 0 60px;
  color: var(--text-on-dark);
  background: var(--c-ink);
}

.info__block {
  position: relative;
  z-index: 2;
  /* Proporcje z makiety, nie piksele — żeby układ trzymał się także
     na węższym ekranie: 642/1920, 350/1920 itd. */
  width: 33.4%;
  min-width: 260px;
  text-align: center;
}

/* Rozkład wzięty wprost z makiety: „Dojazd" i „Nocleg" po lewej,
   „Prezenty" po prawej. To nie jest zwykłe naprzemienne układanie —
   bloki omijają kwiaty, które leżą w stałych miejscach. */
.info__block { margin-left: 18.2%; margin-right: auto; }
.info__block--0 { margin-top: 0; }
.info__block--1 { margin-top: 117px; }
.info__block--2 { width: 41.5%; margin-top: 212px; margin-left: auto; margin-right: 14.2%; }
.info__block--3 { margin-top: 117px; }

.info__title {
  font-size: var(--fs-script);
  line-height: 1;
}

.info__text {
  margin-top: 34px;
  font-size: var(--fs-body);
  line-height: 1.45;
}

/* Kwiaty leżą pod tekstem i wychodzą poza krawędź strony. */
.info__tulip {
  position: absolute;
  z-index: 1;
  width: 45.6%;
  pointer-events: none;
}

.info__tulip img { width: 100%; height: auto; }

.info__tulip--right { top: 92px; right: -4.5%; }
/* Lewy kwiat ma być ucięty krawędzią strony, a nie stać w niej cały,
   i nie może dojeżdżać do dolnego brzegu pasa — pod spodem zaczyna się
   kremowa obwódka zaproszenia. */
.info__tulip--left { top: 790px; left: -14%; transform: scaleX(-1); }

/* === Zaproszenie do RSVP (Figma y 5287–7225) ================= */
.invite-wrap {
  padding: 45px var(--hero-inset) 36px;
  /* Bilecik wystaje poza zdjęcie na kremowe tło — tak jest w makiecie.
     Przycina go dopiero krawędź sekcji, żeby strona nie dostała
     poziomego przewijania. */
  overflow: hidden;
  background: var(--c-paper);
}

.invite {
  position: relative;
  /* Kadr jest kontenerem zapytań, żeby napis na kopercie i tekst bilecika
     dały się podać w `cqw` — w projekcie ich stopień pisma jest ułamkiem
     szerokości zdjęcia (12 px na 356,8 px kadru), a nie stałą liczbą
     pikseli. Bez tego na dużym ekranie bilecik rósł, a tekst zostawał
     w tej samej skali co na telefonie. */
  container-type: inline-size;
  height: var(--invite-h);
  overflow: visible;
  background: var(--c-paper);
}

.invite__bg { position: absolute; inset: 0; height: 100%; }
.invite__bg img { width: 100%; height: 100%; object-fit: cover; }

/* Koperta z napisem — całość jest odnośnikiem do formularza. */
.invite__envelope {
  position: absolute;
  top: 3.5%;
  left: 10.5%;
  width: 51.5%;
  /* Napis bierze stopień pisma z szerokości koperty, nie kadru: na
     telefonie kadr ma proporcje makiety i koperta jest w nim większa niż
     na monitorze, więc jedna liczba w `cqw` kadru nie pasowała do obu. */
  container-type: inline-size;
  text-decoration: none;
}

.invite__envelope img { width: 100%; height: auto; }

.invite__cta {
  position: absolute;
  /* Miejsce z projektu, liczone względem samej koperty: napis leży nisko,
     na dolnej klapce, a nie na środku okna ze zdjęciem — tam ginął na
     ciemnej fotografii pary. Na ramce mobilnej koperta ma 184 × 203 px,
     a napis środek na 62,5 % jej szerokości i górę na 85,2 % wysokości.
     Procenty poniżej są względem pliku PNG, bo to on jest kontenerem:
     w kwadracie 736 × 736 sama koperta zajmuje 584 × 646 z odsunięciem
     (77, 42), stąd 60,1 % i 80,5 %. Napis w makiecie stoi prosto —
     jego ramka ma 122 × 25 px, czyli dokładnie wysokość jednego wiersza. */
  top: 80.5%;
  left: 60.1%;
  color: var(--c-ink);
  /* 24 px na kopercie o 184 px szerokości. Kontenerem jest plik PNG,
     w którym sam rysunek ma 584 z 736 px — stąd 24 / 231,8 = 10,35 %. */
  font-size: 10.35cqw;
  line-height: 1;
  white-space: nowrap;
  transform: translateX(-50%);
}

.invite__orchid {
  position: absolute;
  top: 36.6%;
  left: 3%;
  z-index: 3;
  width: 26%;
  pointer-events: none;
}

.invite__orchid img { width: 100%; height: auto; }

/* Bilecik stoi prosto, a pochylona jest jego treść — tak samo jak
   w makiecie (Figma 417:1669). Wcześniej było odwrotnie: obracała się
   cała kartka, więc kremowy prostokąt stał w rogu przekrzywiony.
   Rozstrzyga to pomiar na zrzucie z Figmy: prostokąt wypełnia całą
   ramkę 184 × 211 bez przezroczystych rogów, a wiersz daty opada
   w prawo o 13,3°. Ten sam kąt wychodzi z ramek opisanych na kokardce
   (34,64 × 30 obrócone o 13,8° dają 40,8 × 37,4, Figma podaje 40 × 38). */
.invite__card {
  position: absolute;
  /* Miejsce i rozmiar zostają te, co były — makieta mobilna nie przenosi
     się na monitor wprost, bo tam kadr jest dużo szerszy niż wysoki
     i kartka liczona z jego szerokości wychodziła dwa razy za duża. */
  top: 44.9%;
  left: 50.9%;
  z-index: 2;
  width: 40.8%;
  /* Boczne 5,2 % zwężają tekst do 108 px z 145,8 — w projekcie prośba łamie
     się na trzy wiersze („Please kindly / confirm your / attendance by:”),
     a przy pełnej szerokości bilecika mieściła się w dwóch. */
  padding: 7.85% 6.4% 11%;
  color: var(--c-ink);
  text-align: center;
  background: var(--c-paper);
}

/* Pochyla się każdy wiersz z osobna, wokół własnego środka — tak leżą
   w makiecie kokardka, prośba i data. */
.invite__bow,
.invite__by,
.invite__date,
.invite__note { transform: rotate(13.8deg); }

/* Kokardka trzyma 23,8 % szerokości bilecika (34,64 / 145,79 z projektu),
   a odstęp pod nią 13,5 % — jedno i drugie w procentach, bo przy stałych
   pikselach na telefonie kokardka wychodziła o połowę za mała. */
.invite__bow { width: 23.3%; aspect-ratio: 34 / 30; height: auto; margin: 0 auto 16.6%; }

/* Wiersze prośby stoją ciasno (wysokość wiersza równa stopniowi pisma),
   a data odsuwa się o tyle samo, co kokardka od prośby. */
.invite__by { font-size: 3.36cqw; line-height: 1; }
.invite__date {
  margin-top: 16.6%;
  /* Rozstrzelenie z `.date-ornate` (0,3 em) łamie datę na dwa wiersze —
     w projekcie zajmuje 87,8 px na 108 px światła bilecika. */
  font-size: 3.36cqw;
  letter-spacing: 0.02em;
  line-height: 1;
}

.invite__note {
  margin-top: 12%;
  font-size: 2.52cqw;
  line-height: 1.35;
}

/* ============================================================
   Telefon (Figma 417:1671, 393×4412)
   ============================================================ */
@media (max-width: 767px) {

  .hero { padding-top: 18px; }
  .hero__text { top: 245px; }
  .hero__tagline { margin-top: 20px; }
  .hero__date { margin-top: 13px; }

  /* Na telefonie pasek ma w makiecie (Figma 354:302) dwie pozycje po
     bokach kokardki: „Timeline" po lewej i „RSVP" po prawej, w jednym
     rzędzie. Pozostałe sekcje leżą jedna pod drugą, więc dociera się do
     nich przewijaniem. Pozycje rozpoznaje `data-link` z widoku — po
     kolejności nie da się, bo pasek powstaje z włączonych sekcji. */
  .topnav {
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 0 24px;
    height: auto;
    padding: 0 0 20px;
  }

  .topnav__bow {
    width: 32px;
    height: 28px;
    margin: 0;
  }

  .topnav__side li { display: none; }
  .topnav__side li[data-link="timeline"],
  .topnav__side li[data-link="rsvp"] { display: block; }

  .topnav__side {
    display: grid;
    gap: 10px;
    justify-content: center;
    justify-items: center;
    align-content: start;
  }

  /* Pozycje po lewej ciągną do prawej krawędzi swojej kolumny, po prawej
     do lewej — dzięki temu obie listy patrzą na siebie przez środek. */
  .topnav__side:nth-of-type(1) { justify-items: end; }
  .topnav__side:nth-of-type(2) { justify-items: start; }

  /* Na telefonie pasy są niższe — wysokości z makiety 417:1671. */
  .welcome { min-height: 341px; padding: 64px 0; }
  .welcome__title { font-size: var(--fs-display); line-height: 1; }
  .welcome__text { margin-top: 24px; }

  .acts { padding-top: var(--lace-crown-h); }
  .acts__title {
    display: block;
    margin-top: 24px;
    font-size: var(--fs-script);
    line-height: 1;
    text-align: center;
  }

  /* Oś staje pionowo: linia w środku, wpisy naprzemiennie po bokach. */
  .acts__list {
    grid-template-columns: 1fr;
    width: var(--wide-w);
    margin-top: 24px;
    min-height: 0;
    gap: 38px;
  }

  .acts__list::before {
    top: 26px;
    bottom: 26px;
    left: 50%;
    right: auto;
    width: 1px;
    height: auto;
  }

  .acts__item {
    grid-template-rows: auto;
    grid-template-columns: 1fr 1fr;
    /* Pierwszy wiersz obu kolumn ma stać równo. Przy `center` godzina
       zjeżdżała na wysokość podpisu aktu, bo nazwa zajmuje dwa wiersze,
       a godzina jeden — wyśrodkowanie liczyło się do środka obu.
       `baseline` też nie wystarczało: godzina ma 16 px, a „Act I:” 14 px,
       więc linie bazowe zrównywały się kosztem górnych krawędzi i wiersze
       wychodziły o kilka pikseli przesunięte. Od górnej krawędzi obie
       kolumny startują równo, a resztę wyrównuje wspólna wysokość wiersza. */
    align-items: start;
    padding: 0;
    column-gap: 52px;
  }

  /* Nazwa aktu jest dwuwierszowa, godzina jednowierszowa. Sam
     `align-items: baseline` na bloku łapał wtedy ostatni wiersz („The Vows”),
     więc godzina siadała o wiersz za nisko. Kolumna z flexa oddaje jako
     linię bazową pierwszy wiersz — czyli „Act I:”. */
  .acts__name { display: flex; flex-direction: column; }

  .acts__item::after { width: 20px; height: 26px; }

  .acts__item--time-first .acts__time {
    grid-row: 1; grid-column: 1; padding: 0; text-align: right;
  }
  .acts__item--time-first .acts__name {
    grid-row: 1; grid-column: 2; padding: 0; text-align: left;
  }
  .acts__item--name-first .acts__name {
    grid-row: 1; grid-column: 1; padding: 0; text-align: right;
  }
  .acts__item--name-first .acts__time {
    grid-row: 1; grid-column: 2; padding: 0; text-align: left;
  }

  /* Wspólna wysokość wiersza dla godziny i nazwy aktu — dzięki niej
     pierwszy wiersz obu kolumn leży na tej samej wysokości mimo różnych
     stopni pisma. */
  .acts__time { font-size: 16px; line-height: 22px; }
  .acts__act { font-size: 14px; line-height: 22px; }
  .acts__label { margin-top: 2px; font-size: 12px; }

  /* Na telefonie aksamit nie zachodzi na pas z planem, a koronkowe okno
     dostaje odstęp od obu krawędzi — bez niego ramka dotykała planu dnia
     u góry i pasa z dress code'em u dołu. */
  .ceremony { margin-top: 0; padding: 56px 0; }

  /* Ramka koronkowa na telefonie obejmuje cały pas z aksamitem. */
  .ceremony__frame {
    width: 100%;
    aspect-ratio: 393 / 559;
    background-size: 100% 100%;
  }

  .ceremony__inner { width: 79.6%; }
  .ceremony__title { font-size: var(--fs-script); }
  .ceremony__time { margin-top: 24px; font-size: var(--fs-small); }
  .ceremony__venue { margin-top: 24px; font-size: var(--fs-small); }
  .ceremony__address { margin-top: 24px; font-size: var(--fs-small); }
  /* Jasne pole w koronce jest węższe niż .ceremony__inner, więc ostatni
     akapit wchodził na wzór. 20 % odstępu z każdej strony trzyma go w polu. */
  .ceremony__note { margin-top: 24px; padding: 0 20%; font-size: 12px; }

  .dresscode { min-height: 399px; padding: 36px 0 30px; }
  .dresscode__text { margin-top: 24px; }
  .swatches { margin-top: 24px; }
  .dresscode__note { margin-top: 24px; }

  .info { min-height: 859px; padding: 20px 0 5px; }

  .info__block,
  .info__block--0,
  .info__block--1,
  .info__block--2,
  .info__block--3 {
    width: var(--wide-w);
    max-width: none;
    margin: 0 auto 10px;
    text-align: center;
  }

  .info__text { margin-top: 16px; }

  /* Kwiat ma wjechać między „Dojazd" a „Nocleg", tak jak w makiecie.
     W kodzie strony oba kwiaty stoją przed blokami — na monitorze to bez
     znaczenia, bo leżą na pozycji bezwzględnej, ale na telefonie wchodzą
     w tok strony i pierwszy lądował nad „Dojazdem". Kolejność ustawia
     `order`, więc kod strony zostaje wspólny dla obu szerokości. */
  .info { display: flex; flex-direction: column; }

  .info__block--0 { order: 1; }
  .info__tulip--right { order: 2; }
  .info__block--1 { order: 3; }
  .info__block--2 { order: 4; }
  .info__block--3 { order: 5; }

  .info__tulip--right {
    position: static;
    /* Wolne 20 % po lewej — kwiat wchodzi z prawej krawędzi, a nie
       rozpycha się na całą szerokość. */
    width: 80%;
    margin: 0 0 12px 20%;
    transform: none;
  }

  .info__tulip--left { display: none; }

  .invite-wrap { padding: 19px 4.6% 20px; }

  .invite {
    height: auto;
    aspect-ratio: 357 / 416;
  }

  /* Na telefonie kadr ma dokładnie proporcje makiety (356,8 × 415,7),
     więc koperta i bilecik stoją tam, gdzie w projekcie. Procenty są
     przeliczone na plik koperty: rysunek 184 × 203 px na 35, 33 leży
     w kwadracie 736 × 736 z odsunięciem 77, 42. */
  .invite__envelope { top: 4.76%; left: 3.01%; width: 64.9%; }

  .invite__orchid { top: 38%; left: 2.5%; width: 26.6%; }

  /* Bilecik z makiety ma 184 × 211 px, czyli 51,5 % szerokości kadru,
     i leży na 57,4 % — czyli wystaje 32 px poza zdjęcie, dokładnie jak
     w projekcie. Przesunięty w lewo, żeby zmieścić się w kadrze, zjadał
     napis na kopercie. */
  .invite__card { top: 41.1%; left: 57.4%; width: 51.5%; }

  .site-footer { padding: 96px 24px 88px; gap: 12px; }
  .site-footer__names { font-size: var(--fs-names); }
}