/* ============================================
   Ekran 2 — RSVP (Figma 54:708, 1920×4663)
   ============================================ */

/* === Nagłówek ============================================== */
.rsvp-head {
  position: relative;
  z-index: 2;
  padding-top: 164px;
  color: var(--text-on-cream);
  text-align: center;
}

.rsvp-head__intro {
  max-width: 1152px;
  margin-top: 56px;
}

.rsvp-head__date {
  margin-top: 45px;
  font-size: var(--fs-heading);
  line-height: var(--lh-body);
}

/* === Formularz =============================================
   Ten sam łukowy panel co karta „details” na stronie głównej.
   Odstępy ujednolicone: makieta miała je niespójne (12–87 px),
   bo ramki tekstowe w Figmie mają sztywne wysokości.
   ========================================================== */
.rsvp-form {
  position: relative;
  z-index: 2;
  margin-top: 157px;
  padding-top: 318px;
  padding-bottom: 17px; /* reszta zapasu przypada na zarezerwowane miejsce komunikatu */
  /* Makieta układa cały formularz w jednym rytmie 36 px; tylko pole
     tekstowe odsuwa się od swojej etykiety o 42 px. */
  --sp-field-label: 42px;
  --sp-field-gap: 36px;
  --sp-field-group: 36px;
}

.rsvp-form fieldset {
  padding: 0;
  border: 0;
}

.rsvp-form legend {
  display: block;
  width: 100%;
  padding: 0;
}

/* Przycisk wpisuje się w ten sam rytm co pola: pełna szerokość kolumny
   1030 px z makiety i odstęp 36 px od pola nad nim. */
.rsvp-form__actions {
  width: var(--text-w);
  margin-top: var(--sp-field-group);
  margin-inline: auto;
}

.rsvp-form .btn {
  width: 100%;
  min-width: 0;
}

/* Domyślny hover odsłania tło, przez co przycisk upodabnia się do pustego
   pola tuż nad nim. W formularzu przybiera więc postać pigułki wyboru —
   to jedyne wypełnienie, jakie makieta przewiduje na bordowej karcie. */
.rsvp-form .btn:hover {
  color: var(--text-on-burgundy);
  background: var(--c-burgundy-soft);
  border-color: var(--c-burgundy-soft);
}

/* === Ogon strony ===========================================
   Zdjęcie, bordowy blob, płyta stopki, licznik i stopka leżą
   na sobie dokładnie tak, jak w makiecie — stąd jeden kontener
   z warstwami. Wysokość bierze się z Figmy: 4663 − 1903.
   ========================================================== */
.rsvp-tail {
  position: relative;
  z-index: 1;
  height: 2760px;
  margin-top: -313px; /* 1903 − 2216 */
}

.photo-band--rsvp {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  width: var(--canvas-w);
  height: 2257px;
  margin-left: 0;
}

.blob--rsvp {
  top: 938px; /* 2841 − 1903 */
  left: -492.3px;
  z-index: 2;
  width: 3189.1px;
  height: 3228.1px;
  --blob-color: var(--c-burgundy);
  --blob-w: 2402.12px;
  --blob-h: 2295.63px;
  --blob-rot: -120deg;
}

.blob--rsvp::before {
  -webkit-mask-image: url('../../img/decor/blob-burgundy-rsvp.svg');
  mask-image: url('../../img/decor/blob-burgundy-rsvp.svg');
}

/* Domyka bordowe tło do dolnej krawędzi strony. */
.rsvp-tail__plate {
  position: absolute;
  top: 2518px; /* 4420.7 − 1903 */
  bottom: 0;   /* domyka tło do dolnej krawędzi, bez sztywnej wysokości */
  left: 0;
  z-index: 2;
  width: var(--canvas-w);
  background: var(--c-burgundy);
}

/* === Licznik =============================================== */
.countdown-section {
  position: absolute;
  top: 1230px; /* 3133 − 1903 */
  left: 0;
  z-index: 3;
  width: var(--canvas-w);
  color: var(--text-on-burgundy);
}

.countdown-section .countdown {
  margin-top: 87px;
  /* Odstęp 1:1 z makiety: 4 × 205 + 3 × 37 = 931 px. */
  --countdown-gap: 37px;
}

/* === Stopka ================================================ */
.rsvp-tail .site-footer {
  position: absolute;
  top: 2135px; /* 4038 − 1903 */
  left: 0;
  z-index: 3;
  width: var(--canvas-w);

  /* Na tym ekranie podpis pary stoi odrobinę niżej niż na stronie głównej. */
  --sp-footer-names: 20px;
}

/* ============================================
   Mobile — Figma 54:814 „Storna po klikniecu click” (393×1441)
   Kotwice przepisane z makiety.
   ============================================ */
@media (max-width: 767px) {
  .rsvp-head {
    padding-top: 46px;
  }

  .rsvp-head__intro {
    max-width: var(--prose-w);
    margin-top: 38px;
  }

  .rsvp-head__date {
    margin-top: 10px;
    font-size: 20px; /* makieta daje tu inny stopień niż nagłówkom sekcji */
  }

  .rsvp-form {
    /* Kolumna pól jest węższa niż karta „details” na stronie głównej. */
    --text-w: 244px;
    --sp-field-label: 12px;
    --sp-field-gap: 8px;
    --sp-option-label: 12px;
    --sp-field-group: 21px;

    margin-top: 41px;
    padding-top: 91px;
    padding-bottom: 41px;
  }

  .rsvp-form .field__label {
    font-size: 16px;
  }

  .rsvp-tail {
    height: 725px;       /* 1441 − 716 */
    margin-top: -182px;  /* karta sięga niżej niż w makiecie o wysokość przycisku */
  }

  .photo-band--rsvp {
    height: 487px;
  }

  .blob--rsvp {
    top: 257px;   /* 973 − 716 */
    left: -103px;
    width: 657.1px;
    height: 665px;
    --blob-w: 494.8px;
    --blob-h: 473px;
  }

  .rsvp-tail__plate {
    top: 583px; /* 1299 − 716 */
  }

  .countdown-section {
    top: 263px; /* 979 − 716 */
  }

  /* Makieta daje temu nagłówkowi 32 px, a nie 48 px jak „Dress Code”. */
  .countdown-section .script-title {
    font-size: 32px;
  }

  .countdown-section .countdown {
    margin-top: 19px;
    /* 4 × 66 + 3 × 16 = 312 px — jak w makiecie 54:814. */
    --countdown-gap: 16px;
  }

  .rsvp-tail .site-footer {
    top: 512px; /* 1228 − 716 */
    --sp-footer-names: 10px;
  }
}