/* ============================================
   Meadow — strona główna
   Kotwice 1:1 z makiety Figma 304:106 (1920×10176).
   Każdy odstęp jest różnicą dwóch pozycji z makiety — komentarz
   przy wartości mówi, skąd się wzięła.
   ============================================ */

/* === Zdjęcie powitalne ===================================
   Kadr jest wyższy niż sekcja: zdjęcie zaczyna się 122 px nad
   krawędzią strony i zostaje przycięte. */
.hero {
  position: relative;
  height: var(--hero-h);
  overflow: hidden;
  color: #fff;
  text-align: center;
}

.hero__photo {
  position: absolute;
  top: -122px;
  right: 0;
  left: 0;
}

.hero__photo img {
  width: 100%;
  height: calc(var(--hero-h) + 122px);
  object-fit: cover;
  object-position: center 40%;
}

.hero__text {
  position: relative;
  z-index: 1;

  /* Napisy leżą na zdjęciu, które klient podmienia — jasne niebo,
     ciemne drzewa, cokolwiek. Miękki cień w kolorze przeciwnym do
     tekstu trzyma je czytelne niezależnie od kadru, a przy zwykłym
     tle jest praktycznie niewidoczny. */
  text-shadow:
    0 1px 3px rgba(0, 0, 0, 0.32),
    0 2px 18px rgba(0, 0, 0, 0.24);
}

.hero__tagline {
  padding-top: 12vh;
  font-size: var(--fs-lead);
  line-height: 1.2;
}

.hero__date {
  margin-top: 36px; /* 210 − (150 + 24) */
}

.hero__names {
  margin-top: 9vh;
  font-size: var(--fs-hero);
  line-height: 1;
}

/* === Odliczanie i ceremonia ============================== */
.opening {
  margin-top: 80px; /* 1310 − 1230 */
  text-align: center;
}

.opening__kicker {
  font-size: var(--fs-heading);
  line-height: 1;
}

.countdown {
  margin-top: 6px;
}

.opening__intro {
  margin-top: 54px; /* 1472 − (1320 + 98) */
  width: min(100%, 996px);
}

.opening__title {
  margin-top: 45px; /* 1581 − dół akapitu wstępu */
}

.opening__time {
  margin-top: 31px; /* 1652 − dół nagłówka */
  font-size: var(--fs-small);
}

.opening__address {
  margin-top: 29px; /* 1707 − dół godziny */
  font-size: var(--fs-small);
  line-height: 1.55;
}

.opening__note {
  margin-top: 27px; /* 1783 − dół adresu */
  font-size: var(--fs-small);
  line-height: 1.55;
}

/* === Galerie ============================================= */
#gal1 {
  margin-top: 107px; /* 1915 − dół noty */
}

#gal2 {
  margin-top: 86px; /* 5279 − dół kółek dress code */
}

/* === Plan dnia =========================================== */
.timeline {
  position: relative;
  margin-top: 80px; /* 3040 − 2960 */
  text-align: center;
}

/* Kwiat w tle osi czasu — z makiety: 677×672, obrót 12,98°,
   lewy górny róg na (530, 3076), czyli 36 px poniżej początku sekcji.
   Leży pod tekstem i bierze kolor pasów sekcji. */
.timeline__flower {
  position: absolute;
  top: 36px;
  left: 530px;
  z-index: 0;
  width: 677px;
  height: 672px;
  background: var(--c-band);
  transform: rotate(12.98deg);
  pointer-events: none;
  -webkit-mask: url('../../img/flower.svg') no-repeat center / contain;
  mask: url('../../img/flower.svg') no-repeat center / contain;
}

.timeline__title,
.timeline__list {
  position: relative;
  z-index: 1;
}

.timeline__title {
  font-size: 72px;
  line-height: 1.1;
}

.timeline__list {
  width: min(100%, 1101px);
  margin: 24px auto 0;
  text-align: left;
}

/* Dwie kolumny: po lewej godzina i nazwa, po prawej opis.
   W makiecie punkty stoją co 158 px. */
.timeline__step {
  display: grid;
  grid-template-columns: 306px 1fr;
  gap: 43px;
  align-items: start;
  padding-block: 20px;
  min-height: 158px;
}

.timeline__time {
  font-size: var(--fs-script);
  line-height: 1.1;
  text-align: center;
}

.timeline__name {
  grid-column: 1;
  margin-top: 8px;
  font-family: var(--font-body);
  font-size: var(--fs-small);
  font-weight: 400;
  text-align: center;
}

.timeline__text {
  grid-row: 1 / span 2;
  grid-column: 2;
  font-size: var(--fs-small);
  line-height: 1.65;
}

/* === Kalendarz z datą ====================================
   Pas wychodzi poza kolumnę treści na całą szerokość kanwy. */
.save-date {
  margin-top: 87px; /* 3928 − dół osi czasu */
  padding-block: 69px 89px; /* 3997 − 3928 ; 4756 − (4622 + 45) */
  text-align: center;
  background: var(--c-band);
}

.save-date__date {
  margin-top: 13px; /* 4044 − (3997 + 34) */
  font-size: var(--fs-heading);
}

.save-date .calendar {
  margin-top: 46px; /* 4130 − (4044 + 40) */
}

.save-date .pill {
  margin-top: 48px; /* 4622 − (4130 + 444) */
}

/* === Dress code ========================================== */
.dress-code {
  margin-top: 105px; /* 4861 − 4756 */
  text-align: center;
}

.dress-code__subtitle {
  margin-top: 40px; /* 4935 − (4861 + 34) */
  font-size: var(--fs-small);
}

.dress-code__text {
  width: min(100%, 1358px);
  margin-top: 38px; /* 4990 − (4935 + 17) */
  font-size: var(--fs-small);
  line-height: 1.65;
}

.swatches {
  margin-top: 41px; /* 5074 − (4990 + 43) */
}

/* === Dojazd, nocleg, prezenty ============================ */
.info {
  width: min(100%, 1050px);
  margin: 80px auto 0; /* 6402 − 6322 */
}

.info__block + .info__block {
  margin-top: 46px; /* krok 157 px minus wysokość bloku */
}

.info__title {
  font-size: var(--fs-body);
  text-align: center;
}

.info__text {
  margin-top: 46px; /* 6470 − (6402 + 22) */
  font-size: var(--fs-small);
  line-height: 1.65;
  text-align: center;
}

/* === Zaproszenie do RSVP =================================
   Trzy warstwy nachodzą na siebie: zdjęcie, ramka i karta.
   Poniżej 1100 px układ rozpina się w pion. */
.rsvp-teaser {
  margin-top: 42px; /* 6907 − dół bloków informacyjnych */
  padding-block: 107px 112px;
  text-align: center;
  background: var(--c-band);
}

.rsvp-teaser__collage {
  position: relative;
  width: min(100%, 1172px);
  height: 844px;
  margin-inline: auto;
}

.rsvp-teaser__photo {
  position: absolute;
  top: 0;
  left: 0;
  width: 814px;
}

/* Bez tego obraz w <picture> bierze wysokość z pliku i zostaje ściśnięty
   w poziomie — element ma szerokość rodzica, ale obraz w środku nie. */
.rsvp-teaser__photo img,
.rsvp-teaser__frame img,
.rsvp-teaser__card img {
  display: block;
  width: 100%;
  height: auto;
}

.rsvp-teaser__frame {
  position: absolute;
  top: 412px; /* 7426 − 7014 */
  left: 306px; /* 680 − 374 */
  width: 369px;
  padding: 26px 24px;
  background: var(--c-paper);
}

.rsvp-teaser__card {
  position: absolute;
  top: 352px; /* 7365.96 − 7014 */
  left: 607px; /* 981 − 374 */
  width: 565px;
  padding: 84px 40px 60px;
  text-align: center;
  background: var(--c-paper);
}

.rsvp-teaser__title {
  font-size: var(--fs-script);
}

.rsvp-teaser__by {
  margin-top: 22px; /* 7541 − (7474 + 45) */
  font-size: var(--fs-small);
}

.rsvp-teaser__date {
  margin-top: 17px; /* 7602 − (7541 + 44) */
  font-size: var(--fs-heading);
}

.rsvp-teaser__note {
  margin-top: 22px; /* 7667 − (7602 + 43) */
  font-size: var(--fs-small);
  line-height: 1.6;
}

.rsvp-teaser .pill {
  margin-top: 75px; /* 7932 − (7014 + 844) */
}

/* ============================================
   Telefon — makieta Figma 303:546 (393×4419)
   ============================================ */
@media (max-width: 767px) {
  .hero {
    height: var(--hero-h);
    color: var(--c-ink);
  }

  /* Na telefonie napisy są ciemne, więc ratuje je jasna poświata. */
  .hero__text {
    text-shadow:
      0 1px 3px rgba(255, 255, 255, 0.55),
      0 2px 16px rgba(255, 255, 255, 0.45);
  }

  .hero__photo { top: 0; }

  /* Napisy w hero są ciemne (tak jak w makiecie), więc muszą leżeć na
     jaśniejszej partii kadru. Przy wyśrodkowaniu wypadały na drzewach
     i ginęły. */
  .hero__photo img {
    height: var(--hero-h);
    object-position: center top;
  }
  .hero__tagline { padding-top: 61px; font-size: var(--fs-body); }
  .hero__date { margin-top: 12px; }
  .hero__names { margin-top: 31px; }

  .opening { margin-top: 31px; }

  /* Ujemny odstęp jest odwzorowaniem makiety desktopowej, gdzie ramki
     kickera i cyfr zachodzą na siebie. Na telefonie ich nie ma —
     bez tego napis wchodziłby na cyfry. */
  .countdown { margin-top: 8px; }
  .opening__intro,
  .opening__note,
  .dress-code__text { width: var(--prose-w); }
  /* Makieta daje temu akapitowi 113 px wysokości; przy interlinii 1,6
     wychodziło 138 i cała sekcja się rozpychała. */
  .opening__intro {
    margin-top: 0;
    line-height: 1.46;
  }

  /* Odstęp daje odliczanie od dołu — margines akapitu zwijał się
     z jego wnętrzem i nie reagował liniowo. */
  .countdown { margin-bottom: 22px; }
  .opening__title { margin-top: 19px; }
  .opening__time { margin-top: 18px; }
  .opening__address { margin-top: 18px; }
  .opening__note { margin-top: 0; }

  #gal1 { margin-top: 46px; }
  #gal2 { margin-top: 77px; }

  .timeline { margin-top: 7px; }
  .timeline__title { font-size: 26px; }
  .timeline__list { margin-top: 6px; }

  /* Na telefonie kwiat jest mniejszy i wyśrodkowany. */
  .timeline__flower {
    top: 60px;
    left: 50%;
    width: 76.3%;  /* 300 / 393 */
    aspect-ratio: 300 / 298;
    height: auto;
    transform: translateX(-50%) rotate(12.98deg);
  }

  /* Na telefonie punkty programu stoją jeden pod drugim, wyśrodkowane.
     Makieta daje im 96 px wysokości i krok 113 px. */
  .timeline__step {
    grid-template-columns: 1fr;
    gap: 6px;
    min-height: 0;
    padding-block: 0;
    text-align: center;
  }

  .timeline__step + .timeline__step { margin-top: 30px; }

  /* Tekst kroku musi zmieścić się w 96 px z makiety — przy 12 px
     i interlinii 1,65 wychodziło 114–133 px i oś czasu się rozpychała. */
  .timeline__time { font-size: 22px; }
  .timeline__name { font-size: 12px; }
  .timeline__text { font-size: 11px; line-height: 1.55; }

  .timeline__text { grid-row: auto; grid-column: 1; }

  .save-date { margin-top: 55px; padding-block: 40px 40px; }
  .save-date .calendar { margin-top: 0; }
  .save-date .pill { margin-top: 24px; }

  .dress-code { margin-top: 20px; }
  .dress-code__subtitle { margin-top: 16px; }
  .dress-code__text { margin-top: 14px; }
  .swatches { margin-top: 20px; }

  .info { width: var(--prose-w); margin-top: 32px; }
  .info__block + .info__block { margin-top: 26px; }
  .info__text { margin-top: 14px; }

  .rsvp-teaser { margin-top: 102px; padding-block: 43px 46px; }

  /* Makieta mobilna zachowuje nakładanie warstw — tylko w mniejszej
     skali. Rozpięcie w pion dodawało blisko 900 px wysokości.
     Wymiary wprost z makiety 303:546 (Group 68). */
  /* Makieta rysuje kolaż w 311 px, ale na telefonie zdjęcia wychodzą
     wtedy znaczkowe. Rozciągamy go na niemal całą szerokość. */
  .rsvp-teaser__collage {
    width: 92%;
    aspect-ratio: 311 / 236;
    height: auto;
  }

  .rsvp-teaser__photo {
    width: 65.3%;   /* 203 / 311 */
  }

  .rsvp-teaser__frame {
    top: 46.6%;   /* 110 / 236 */
    left: 12.9%;  /*  40 / 311 */
    width: 32.8%; /* 102 / 311 */
    padding: 2%;
  }

  .rsvp-teaser__card {
    top: 38.6%;   /*  91 / 236 */
    left: 41.8%;  /* 130 / 311 */
    width: 58.2%; /* 181 / 311 */
    padding: 9% 4% 5%;
  }

  .rsvp-teaser__title { font-size: var(--fs-heading); }
  .rsvp-teaser__by,
  .rsvp-teaser__note { font-size: var(--fs-tiny); }
  .rsvp-teaser__by { margin-top: 6px; }
  .rsvp-teaser__date { margin-top: 4px; font-size: var(--fs-body); }
  .rsvp-teaser__note { margin-top: 6px; }
  .rsvp-teaser .pill { margin-top: 24px; }

}