/* =========================================================
   INVIENT — MOBILE BUILDER PREVIEW OVERRIDES
   Scoped exclusively to .blp__phone-stage (the phone-frame
   inside the builder's Stránka → Mobil mode).
   Does NOT affect the real mobile experience or any other view.
========================================================= */

/* The MobileInvitationScene uses vw-based clamp() values that calculate
   against the full desktop viewport width — huge inside our 280px phone.
   Force everything inside the phone-stage to compute against the
   phone container instead. */

/* ── ONBOARDING PULSE RING (around floating "Zobraziť náhľad" button) ── */
.blp__pulse-ring {
  position: absolute;
  inset: 0;
  border-radius: 999px;
  pointer-events: none;
  box-shadow: 0 0 0 0 rgba(127,209,196,0.55);
  animation: blpPulse 1.6s ease-out infinite;
}
@keyframes blpPulse {
  0%   { box-shadow: 0 0 0 0 rgba(127,209,196,0.55); }
  70%  { box-shadow: 0 0 0 18px rgba(127,209,196,0); }
  100% { box-shadow: 0 0 0 0 rgba(127,209,196,0); }
}
.blp__phone-stage {
  container-type: inline-size;
  container-name: phonestage;
}

/* Hero photo names kept as-is — user wants those at full size */

/* Hero block height — original is 92vw; in our 280px phone that's
   ~258px which is fine, but vw breaks because it reads desktop vw.
   Cap it to a sensible cqi value. */
.blp__phone-stage > div > div[style*="height: 92vw"] {
  height: 92cqi !important;
  max-height: 360px !important;
}

/* Eyebrow above names ("THE WEDDING OF") — also vw-scaled */
/* Eyebrow above names ("THE WEDDING OF") — also vw-scaled */
.blp__phone-stage [style*="letterSpacing: 0.22em"][style*="fontSize: 0.62rem"],
.blp__phone-stage [style*="letter-spacing: 0.22em"][style*="font-size: 0.62rem"] {
  font-size: 0.5rem !important;
  letter-spacing: 0.18em !important;
}

/* Otvoriť pozvánku CTA — shrink the new glass pill so it doesn't dominate
   the narrow phone preview (live button uses bottom: 25%, right: 16) */
.blp__phone-stage [style*="bottom: 25%"][style*="right: 16"] button {
  white-space: nowrap !important;
  min-height: 28px !important;
  padding: 0.3rem 0.6rem !important;
  font-size: 0.6rem !important;
  gap: 5px !important;
  border-radius: 999px !important;
}
.blp__phone-stage [style*="bottom: 25%"][style*="right: 16"] button svg {
  width: 9px !important;
  height: 8px !important;
}

/* Hero photo — zoom out a bit so more of the couple is visible.
   Original uses background-size: cover which fills aggressively.
   Switch to a controlled smaller scale + center positioning. */
.blp__phone-stage > div > div[style*="height: 92vw"] > div[style*="backgroundImage"] {
  background-size: 130% auto !important;
  background-position: center 30% !important;
}

/* Sticky nav inside phone — original min-height 68px is fine,
   but ensure padding fits */
.blp__phone-stage .inv-page-nav__inner,
.blp__phone-stage [data-mobile-nav-inner] {
  padding: 0 1rem !important;
  min-height: 56px !important;
}

/* Section titles below the hero — clamp vs cqi */
.blp__phone-stage .inv-page-section__title--latte,
.blp__phone-stage .inv-page-section__title--modern-elegant,
.blp__phone-stage .inv-page-section__title--modern-soft {
  font-size: clamp(1.05rem, 5.6cqi, 1.55rem) !important;
}

/* Generic fallback: any element inside phone-stage with viewport-width
   font-size will misbehave. Reset common ones. */
.blp__phone-stage [style*="vw,"] {
  /* can't override per-element inline vw without knowing exact value;
     the targeted rules above handle the critical cases */
}

/* Date / venue under names */
.blp__phone-stage [style*="fontSize: '0.7rem'"][style*="letterSpacing: 0.2em"] {
  font-size: 0.55rem !important;
}

/* Schedule item titles */
.blp__phone-stage .inv-schedule__item-title--latte,
.blp__phone-stage .inv-schedule__item-title--modern-elegant,
.blp__phone-stage .inv-schedule__item-title--modern-soft {
  font-size: clamp(0.78rem, 3.2cqi, 0.95rem) !important;
}

/* Section paragraph text */
.blp__phone-stage .inv-page-section__text {
  font-size: 0.72rem !important;
  line-height: 1.55 !important;
}

/* Miesto / Location: venue title (h3) and address paragraph */
.blp__phone-stage h3[style*="clamp(1.8rem"],
.blp__phone-stage h3[style*="2.5vw"] {
  font-size: clamp(1.1rem, 6cqi, 1.6rem) !important;
  line-height: 1.05 !important;
}
.blp__phone-stage h3[style*="clamp(1.8rem"] + p,
.blp__phone-stage h3[style*="2.5vw"] + p,
.blp__phone-stage h3[style*="clamp(1.8rem"] ~ p {
  font-size: 0.72rem !important;
  line-height: 1.55 !important;
}

/* Footer ("SAVE THE DATE / Nora & Elias / 28. august 2026 · Villa Etelka") */
.blp__phone-stage .inv-page-footer {
  padding: 0.8rem 1rem !important;
}
.blp__phone-stage .inv-page-footer__eyebrow {
  font-size: 0.45rem !important;
  letter-spacing: 0.22em !important;
}
.blp__phone-stage .inv-page-footer__inner strong {
  font-size: clamp(0.8rem, 4.5cqi, 1.1rem) !important;
  line-height: 0.7 !important;
}
.blp__phone-stage .inv-page-footer__meta {
  font-size: 0.6rem !important;
  line-height: 1.4 !important;
  bottom: 8%;
}

/* Generic "Section heading + body" (Informácie, Galéria, etc.) — keep them
   compact so they don't visually collide with neighbors */
.blp__phone-stage .inv-page-section {
  padding: 1.4rem 0 1.5rem !important;
}
.blp__phone-stage .inv-page-section__inner {
  padding: 0 1rem !important;
}

/* Shrink names text inside the dark preview card stack */
.preview-card-stack [style*="clamp(2.1rem,8.5vw"],
.preview-card-stack [style*="clamp(2.1rem, 8.5vw"] {
  font-size: 1.15rem !important;
}
.preview-card-stack [style*="clamp(2.6rem,9vw"],
.preview-card-stack [style*="clamp(2.6rem, 9vw"] {
  font-size: 1.3rem !important;
}
/* Date line on the card */
.preview-card-stack [style*="clamp(0.52rem,1.4vw"],
.preview-card-stack [style*="clamp(0.52rem, 1.4vw"] {
  font-size: 0.42rem !important;
}
/* Venue line */
.preview-card-stack [style*="clamp(0.58rem,1.6vw"],
.preview-card-stack [style*="clamp(0.58rem, 1.6vw"] {
  font-size: 0.46rem !important;
}

/* RSVP form — shrink labels, inputs, buttons inside the phone preview */
.blp__phone-stage form label {
  font-size: 0.55rem !important;
  letter-spacing: 0.12em !important;
  margin-bottom: 0.4rem !important;
}
.blp__phone-stage form input,
.blp__phone-stage form select,
.blp__phone-stage form textarea,
.blp__phone-stage form button[type="button"] {
  min-height: 36px !important;
  padding: 0.45rem 0.65rem !important;
  font-size: 0.78rem !important;
  border-radius: 7px !important;
}
.blp__phone-stage form textarea {
  min-height: 60px !important;
}
.blp__phone-stage form button[type="submit"] {
  min-height: 38px !important;
  padding: 0.55rem 1rem !important;
  font-size: 0.82rem !important;
}
.blp__phone-stage form > div {
  margin-bottom: 0.7rem !important;
}