/* ============================================
   Meadow — ekran RSVP
   Kotwice z makiety 310:292 (1920×4251) i 303:625 (393×1552).
   ============================================ */

/* === Pas wstępny ========================================= */
.rsvp-head {
  padding-block: 196px 0; /* 196 — góra koperty */
  text-align: center;
  background: var(--c-band);
}

.rsvp-head__envelope {
  display: block;
  width: 607px;
  max-width: 90%;
  margin-inline: auto;
}

.rsvp-head__envelope img {
  display: block;
  width: 100%;
  height: auto;
}

.rsvp-head__title {
  margin-top: 42px; /* 623 − dół koperty */
  font-size: var(--fs-script);
  line-height: 1.15;
}

.rsvp-head__intro {
  width: min(100%, 974px);
  margin-top: 49px; /* 741 − dół nagłówka */
  padding-bottom: 323px; /* 1077 − dół prośby */
  font-size: var(--fs-body);
  line-height: 1.6;
}

/* === Zdjęcie i formularz =================================
   Makieta: zdjęcie 643×965 od x=200, karta 894×965 od x=826.
   Odstęp między nimi 183 px, całość 1520 px szerokości. */
.rsvp-body {
  display: grid;
  grid-template-columns: 643px 894px;
  gap: 183px;
  align-items: start;
  justify-content: center;
  background: var(--c-band);
}

.rsvp-body__photo {
  display: block;
}

.rsvp-body__photo img {
  display: block;
  width: 100%;
  height: 965px;
  object-fit: cover;
}

.rsvp-form {
  display: grid;
  gap: 24px;
  min-height: 965px;
  padding: 70px 66px 0; /* 1147 − 1077 ; 893 − 826 */
  background: var(--c-paper);
}

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

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

/* Odstępy pól wprost z makiety: 121, 145, 208, 377, 522. */
.rsvp-form .field + .field {
  margin-top: 0;
}

.rsvp-form__actions {
  display: grid;
  justify-items: center;
  margin-top: 36px; /* 1913 − (1147 + 730) */
}

/* Przycisk siedzi w karcie, pod polami. */
.rsvp-form .pill {
  width: 100%;
}

/* === Stopka ==============================================
   Zaczyna się dokładnie tam, gdzie kończy się jasny pas. */
.rsvp-body + .site-footer {
  margin-top: 254px; /* 2296 − (1077 + 965) */
  padding-block: 536px 819px; /* 2831,8 − 2296 ; 4251 − dół podpisu */
}

/* ============================================
   Telefon — makieta 303:625 (393×1552)
   ============================================ */
@media (max-width: 767px) {
  .rsvp-head {
    padding-top: 43px; /* góra koperty */
  }

  .rsvp-head__envelope {
    width: 49.4%; /* 194 / 393 */
  }

  .rsvp-head__title {
    margin-top: 19px; /* 181 − (43 + 119) */
    font-size: var(--fs-script);
  }

  .rsvp-head__intro {
    width: var(--prose-w);
    margin-top: 18px; /* 237 − (181 + 38) */
    padding-bottom: 80px; /* 366 − dół prośby */
    font-size: var(--fs-small);
  }

  /* Na telefonie zdjęcie znika — makieta pokazuje sam formularz. */
  .rsvp-body {
    display: block;
  }

  .rsvp-body__photo {
    display: none;
  }

  /* Makieta daje karcie 366 px wysokości na cztery pola. Przycisk,
     którego makieta nie pokazuje, mieści się w zapasie pod nimi. */
  .rsvp-form {
    gap: 12px;
    width: min(100%, 311px);
    min-height: 366px;
    margin-inline: auto;
    padding: 24px 22px 24px;
  }

  .rsvp-form .field { gap: 5px; }
  .rsvp-form .field__label { font-size: var(--fs-tiny); }
  .rsvp-form .field__input,
  .rsvp-form .option-pill { height: 34px; }
  .rsvp-form .option-list { gap: 8px; }
  .rsvp-form__actions { margin-top: 14px; }

  /* Makieta 303:625: stopka 789..1552 = 763 px, motto 1014, imiona 1215. */
  .rsvp-body + .site-footer {
    margin-top: 32px; /* 789 − dół karty formularza */
    padding-block: 225px 257px;
  }
}