/* ==========================================================================
   Sections — owner: agent-b
   Dress Code · Transportation · Where to Stay · Wedding Gift · RSVP
   Mobile-first at 430px. Shared type/components come from base.css.
   ========================================================================== */

/* ============================ DRESS CODE ============================ */
.dress{
  padding-top: calc(var(--sec-y) + 6px);
  padding-bottom: calc(var(--sec-y) + 10px);
  text-align:center;
}
.dress .pearl{ top: 132px; height: 452px; }
.dress-stage{
  display:grid;
  position:relative;
  z-index:auto; /* let the white-keyed frame multiply against the section paper */
}
.dress-frame,
.dress-copy{ grid-area:1 / 1; }
.dress-frame{ width:100%; align-self:start; }
.dress-copy{
  position:relative;
  z-index:2;
  display:flex;
  flex-direction:column;
  align-items:center;
  padding:45% 12% 4%;
}
.dress-title,
.trans-title,
.stay-title,
.gift-title{ font-size:clamp(32px, 9.2vw, 41px); }
.dress-formal{
  font-family:var(--ff-display);
  font-weight:300;
  font-size:20px;
  line-height:1.3;
  letter-spacing:.03em;
  color:var(--ink);
  margin:9px 0 0;
}
.dress-couple{ width:86px; margin:26px auto 0; }
.dress-text{
  max-width:292px;
  margin:32px auto 0;
  font-size:15.5px;
  line-height:1.78;
}

/* =========================== TRANSPORTATION ========================= */
.trans{
  padding:0;
  text-align:center;
}
.trans-band,
.gift-band,
.rsvp-band{
  display:block;
  width:100%;
  height:auto;
}
.trans-inner{ padding:104px var(--pad) 30px; }
.trans-coach{ width:208px; margin:0 auto; }
.trans-title{ margin-top:30px; }
.trans-copy{
  margin-top:30px;
  display:flex;
  flex-direction:column;
  align-items:center;
}
.trans-copy .p{ max-width:292px; }
.trans-copy .p + .p{ margin-top:14px; }
.trans-cta{ margin:26px 0 0; text-align:center; }
.trans-btn{ min-width:252px; }

/* =========================== WHERE TO STAY ========================== */
.stay{
  padding-inline:22px;
  padding-bottom:50px;
  text-align:center;
}
.stay-arch{ width:132px; margin:0 auto; }
.stay-title{ margin-top:32px; }
.stay-intro{
  margin:18px auto 0;
  max-width:352px;
}
.stay-cards{
  margin-top:12px;
  display:flex;
  flex-direction:column;
  gap:34px;
}
.stay-card{
  position:relative;
  padding-top:42px;
  text-align:center;
}
.stay-ornament{
  position:absolute;
  top:0;
  left:50%;
  transform:translateX(-50%);
  width:220px;
  height:auto;
  z-index:3;
  pointer-events:none;
}
.stay-name{
  font-family:var(--ff-display);
  font-weight:300;
  font-size:clamp(21px, 5.6vw, 24.5px);
  line-height:1.2;
  letter-spacing:.015em;
  color:var(--ink);
  margin:2px 0 0;
}
.stay-meta{
  margin:12px auto 0;
  max-width:300px;
  font-family:var(--ff-display);
  font-size:11.5px;
  line-height:1.96;
  color:var(--ink-soft);
}
.stay-meta__label{
  text-transform:uppercase;
  letter-spacing:.2em;
  font-weight:500;
}
.stay-meta__value{ letter-spacing:.05em; }
.stay-text{
  margin:24px auto 0;
  max-width:310px;
  font-family:var(--ff-body);
  font-size:14px;
  line-height:1.7;
  color:var(--ink-soft);
}
.stay-cta{ margin:26px 0 0; }
.stay-btn{ min-width:252px; }

/* ============================ WEDDING GIFT ========================== */
.gift{
  padding:48px 0 0;
  text-align:center;
}
.gift-head{ padding-inline:var(--pad); }
.gift-panel{
  position:relative;
  overflow:hidden;
  margin-top:26px;
  padding:96px var(--pad) 78px;
}
.gift-texture{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:50% 42%;
  pointer-events:none;
  /* opacity + edge mask are owned by fixes.css (loaded after sections) */
}
.gift-copy{
  position:relative;
  z-index:2;
  max-width:330px;
  margin:0 auto;
}
.gift-presence{
  font-family:var(--ff-display);
  font-weight:300;
  font-size:clamp(26px, 7.4vw, 34px);
  line-height:1.3;
  letter-spacing:.01em;
  color:var(--ink);
  margin:0;
}
.gift-text{
  margin:20px auto 0;
  max-width:300px;
  font-size:15px;
}
.gift-iban{
  margin:20px 0 0;
  font-family:var(--ff-display);
  font-size:10.5px;
  line-height:1.6;
  letter-spacing:.12em;
  color:var(--ink-soft);
}
.gift-band{ margin-top:0; }

/* ================================ RSVP ============================== */
.rsvp{
  padding:var(--sec-y) 0 0;
  text-align:center;
}
.rsvp-inner{ padding-inline:var(--pad); }
.rsvp-heart{ width:144px; margin:0 auto; }
.rsvp-title{
  margin-top:74px;
  font-size:clamp(30px, 8vw, 36px);
  letter-spacing:.1em;
}
.rsvp-intro{
  margin:28px auto 0;
  max-width:356px;
}
.rsvp-form{
  margin-top:46px;
  text-align:left;
}
.rsvp-form .field{ margin-bottom:30px; }
.rsvp-group{
  border:0;
  padding:0;
  margin:0 0 30px;
  min-width:0;
}
.rsvp-group legend{ padding:0; }
.rsvp-group .radio{ margin-top:2px; }
.rsvp-stepper{
  display:flex;
  align-items:center;
  justify-content:space-between;
  width:224px;
  max-width:100%;
  margin-top:10px;
}
.rsvp-step{
  flex:0 0 auto;
  width:36px;
  height:36px;
  display:grid;
  place-items:center;
  padding:0;
  border:1px solid var(--cream-line);
  border-radius:50%;
  background:transparent;
  color:var(--cream);
  font-family:var(--ff-display);
  font-size:17px;
  line-height:1;
  cursor:pointer;
  transition:border-color .3s var(--e-soft), opacity .3s var(--e-soft);
}
.rsvp-step:disabled{ opacity:.4; cursor:default; }
.rsvp-step:not(:disabled):hover{ border-color:var(--cream); }
.rsvp-step:focus-visible{ outline:1px solid var(--cream); outline-offset:2px; }
.rsvp-step-value{
  font-family:var(--ff-body);
  font-size:15px;
  line-height:1.4;
  color:var(--cream-dim);
}
.rsvp-actions{ margin:10px 0 0; text-align:center; }
.rsvp-submit{ min-width:204px; }
.rsvp-band{ margin-top:44px; }

/* ============================== desktop ============================= */
@media (min-width: 900px){
  .dress .pearl{ top:150px; height:500px; }
  .gift-panel{ padding-top:104px; padding-bottom:84px; }
}

/* focus visibility for section buttons */
.trans-btn:focus-visible,
.stay-btn:focus-visible,
.rsvp-submit:focus-visible{
  outline:1px solid currentColor;
  outline-offset:3px;
}