/* ============================================================
   THE AFTERGLOW — M & P
   Asoebi reception website
   ============================================================ */

:root {
  --ink: #160407;
  --oxblood: #2a070f;
  --bordeaux: #4a0c1c;
  --bordeaux-deep: #38091a;
  --wine: #6b1230;
  --rouge: #8a1a3d;
  --magenta: #a7245c;
  --magenta-soft: #c54a7e;
  --pink: #e8a6b8;
  --pink-warm: #f0b8c5;
  --gold: #c9a96a;
  --gold-soft: #d8bc83;
  --champagne: #e8d4a8;
  --cream: #f5ecdf;
  --cream-warm: #f7e9d4;
  --ivory: #fbf6ee;

  --grad-curtain: linear-gradient(180deg, #160407 0%, #2a070f 30%, #4a0c1c 60%, #2a070f 100%);
  --grad-rouge: radial-gradient(ellipse at 50% 40%, #6b1230 0%, #2a070f 60%, #160407 100%);
  --grad-glow: radial-gradient(ellipse at 50% 50%, rgba(232, 212, 168, 0.18) 0%, rgba(232, 212, 168, 0) 60%);

  --font-display: "Cormorant Garamond", "Cormorant", Garamond, serif;
  --font-ornament: "Italiana", "Cormorant Garamond", serif;
  --font-ui: "Tenor Sans", "Optima", sans-serif;
  --font-mono: "JetBrains Mono", monospace;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  background: var(--ink);
  color: var(--cream);
  font-family: var(--font-display);
  font-weight: 300;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

body {
  min-height: 100vh;
  position: relative;
}

/* Film grain overlay site-wide */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 200;
  opacity: 0.06;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/></filter><rect width='100%' height='100%' filter='url(%23n)' opacity='0.6'/></svg>");
}

/* ---------- TYPOGRAPHY ---------- */
.display {
  font-family: var(--font-ornament);
  font-weight: 400;
  letter-spacing: -0.01em;
  line-height: 0.92;
}

.eyebrow {
  font-family: var(--font-ui);
  text-transform: uppercase;
  letter-spacing: 0.32em;
  font-size: 11px;
  color: var(--gold);
  font-weight: 400;
}

.label {
  font-family: var(--font-ui);
  text-transform: uppercase;
  letter-spacing: 0.24em;
  font-size: 10px;
  color: var(--champagne);
}

.body-text {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: 18px;
  line-height: 1.65;
  color: rgba(245, 236, 223, 0.82);
  text-wrap: pretty;
}

em, .italic { font-style: italic; color: var(--pink-warm); }

/* ---------- BUTTONS ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  padding: 16px 30px;
  font-family: var(--font-ui);
  font-size: 11px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  background: transparent;
  color: var(--cream);
  border: 1px solid var(--gold);
  cursor: pointer;
  text-decoration: none;
  position: relative;
  overflow: hidden;
  transition: color 0.6s ease, letter-spacing 0.6s ease;
}
.btn::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--gold);
  transform: translateY(101%);
  transition: transform 0.5s cubic-bezier(0.7, 0, 0.3, 1);
  z-index: -1;
}
.btn:hover { color: var(--ink); letter-spacing: 0.4em; }
.btn:hover::before { transform: translateY(0); }

.btn-solid {
  background: var(--gold);
  color: var(--ink);
  border-color: var(--gold);
}
.btn-solid::before { background: var(--cream); }
.btn-solid:hover { color: var(--ink); }

.btn .arrow {
  display: inline-block;
  transition: transform 0.5s cubic-bezier(0.7, 0, 0.3, 1);
}
.btn:hover .arrow { transform: translateX(6px); }

/* ---------- ORNAMENTS ---------- */
.divider-ornate {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  color: var(--gold);
  font-size: 14px;
}
.divider-ornate::before, .divider-ornate::after {
  content: "";
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
  flex: 1;
  max-width: 120px;
}

.glyph {
  font-family: var(--font-ornament);
  color: var(--gold);
  font-size: 22px;
  line-height: 1;
}

/* ---------- LAYOUT ---------- */
.page {
  min-height: 100vh;
  position: relative;
}

.container {
  max-width: 1320px;
  margin: 0 auto;
  padding: 0 48px;
}

@media (max-width: 800px) {
  .container { padding: 0 24px; }
}

/* ============================================================
   MOBILE / TABLET RESPONSIVE OVERRIDES
   React serializes inline styles as kebab-case, so attribute
   selectors must match e.g. `grid-template-columns: 1.1fr 1fr`.
   Numeric values get `px` appended; shorthand `0` becomes `0px`.
   ============================================================ */

/* ---- TABLET (≤1100px) ---- */
@media (max-width: 1100px) {
  /* Header chrome shrinks */
  header[style*="position: fixed"] {
    padding: 14px 24px !important;
  }
  /* Page top padding (every page uses paddingTop: 120) */
  .page[style*="padding-top: 120px"] { padding-top: 96px !important; }

  /* All inline 2-column hero/feature grids → single column */
  div[style*="grid-template-columns: 1.1fr 1fr"],
  div[style*="grid-template-columns: 1fr 1.1fr"],
  div[style*="grid-template-columns: 1fr 1.2fr"],
  div[style*="grid-template-columns: 1fr 1fr"] {
    grid-template-columns: 1fr !important;
    gap: 36px !important;
  }
}

/* ---- MOBILE (≤700px) ---- */
@media (max-width: 700px) {
  /* Home hero eyebrow ("ASOEBÍ · RECEPTION · 12 · 05 · 2026") — clear the
     fixed header chrome on mobile so it stops colliding with the m&p logo. */
  .container[style*="padding-top: 100px"] {
    padding-top: 56px !important;
  }
  .container[style*="padding-top: 100px"] > .eyebrow:first-child {
    font-size: 9px !important;
    letter-spacing: 0.28em !important;
    line-height: 1.7 !important;
    margin-bottom: 22px !important;
    padding: 0 8px !important;
    text-wrap: balance;
  }

  /* Fabric-only trigger: hide desktop copy, show mobile copy under Pricing */
  [data-fabric-trigger="desktop"] { display: none !important; }
  [data-fabric-trigger="mobile"]  { display: block !important; }

  /* Payment region: hide tabbed selector, show all 3 stacked */
  [data-payment-mode="desktop"] { display: none !important; }
  [data-payment-mode="mobile"]  { display: block !important; }

  /* GiftBlock rows: stack key/value/copy vertically inside mobile cards */
  [data-payment-mode="mobile"] [style*="grid-template-columns: 230px"] {
    grid-template-columns: 1fr !important;
    gap: 6px !important;
    padding: 16px 0 !important;
  }
  [data-payment-mode="mobile"] [style*="grid-template-columns: 230px"] > button {
    justify-self: start;
    margin-top: 6px;
  }
  /* GiftBlock title: shrink for mobile */
  [data-payment-mode="mobile"] h3.display { font-size: 30px !important; }
  [data-payment-mode="mobile"] p[style*="font-size: 19px"] { font-size: 17px !important; margin-bottom: 24px !important; }

  /* Page top padding */
  .page[style*="padding-top: 120px"] { padding-top: 84px !important; }

  /* All horizontal section padding shrinks */
  section[style*="padding: 60px 0px 40px"] { padding: 30px 0 20px !important; }
  section[style*="padding: 60px 0px 30px"] { padding: 30px 0 16px !important; }
  section[style*="padding: 80px 0px"]      { padding: 40px 0 !important; }
  section[style*="padding: 100px 0px"]     { padding: 56px 0 !important; }
  section[style*="padding: 40px 0px 80px"] { padding: 24px 0 40px !important; }

  /* Tighter container padding on phones */
  .container { padding: 0 18px !important; }

  /* Plates — squash big fixed heights */
  .plate[style*="height: 760px"],
  .plate[style*="height: 720px"],
  .plate[style*="height: 620px"] {
    height: auto !important;
    aspect-ratio: 4 / 5;
    min-height: 0 !important;
  }
  .plate[style*="height: 75vh"] {
    height: 60vh !important;
    min-height: 380px !important;
  }
  /* Vibe collage on home (height: 620) — keep 2-col but make square cells */
  div[style*="grid-template-columns: 1fr 1fr"][style*="height: 620px"] {
    grid-template-columns: 1fr 1fr !important;
    height: auto !important;
    gap: 10px !important;
  }
  div[style*="grid-template-columns: 1fr 1fr"][style*="height: 620px"] .plate {
    aspect-ratio: 1 / 1;
    height: auto !important;
  }

  /* Color swatch rows (3 cols) */
  div[style*="grid-template-columns: repeat(3, 1fr)"] {
    gap: 10px !important;
  }

  /* Roman numeral piece selector on gentlemen (44px 110px 1fr) → 2col stack */
  button[style*="grid-template-columns: 44px 110px 1fr"] {
    grid-template-columns: 36px 1fr !important;
    gap: 10px !important;
    padding: 12px 14px !important;
  }
  button[style*="grid-template-columns: 44px 110px 1fr"] > .label {
    grid-column: 2 / 3;
  }
  button[style*="grid-template-columns: 44px 110px 1fr"] > span:last-child {
    grid-column: 1 / 3;
    font-size: 15px !important;
  }

  /* RSVP relation cards (3-col emoji buttons) wrap nicely */
  div[style*="grid-template-columns: 230px 1fr auto"] {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }

  /* DISPLAY type — scale every Italiana headline hand-tagged in JSX */
  h1.display, h2.display, h3.display { line-height: 1 !important; }
  h2.display[style*="font-size: 64px"]  { font-size: 38px !important; }
  h3.display[style*="font-size: 56px"]  { font-size: 34px !important; }
  h3.display[style*="font-size: 44px"]  { font-size: 28px !important; }
  p.display[style*="font-size: 44px"]   { font-size: 26px !important; }

  /* Big stand-alone numerals (countdown, prices, dates) */
  div[style*="font-size: 80px"]  { font-size: 48px !important; }
  div[style*="font-size: 64px"]  { font-size: 40px !important; }
  div[style*="font-size: 48px"]  { font-size: 30px !important; }
  div[style*="font-size: 44px"]  { font-size: 28px !important; }
  div[style*="font-size: 40px"]  { font-size: 26px !important; }
  span[style*="font-size: 48px"] { font-size: 28px !important; }

  /* Drop-cap on Story page */
  span[style*="font-size: 110px"] {
    font-size: 64px !important;
    margin-right: 10px !important;
  }

  /* Roman-numeral buttons over the model image — slightly smaller */
  button[style*="border-radius: 50%"][style*="width: 44px"] {
    width: 36px !important;
    height: 36px !important;
    font-size: 13px !important;
  }

  /* Body text size & button targets */
  .body-text { font-size: 16px; }
  .btn { padding: 14px 22px; font-size: 10px; letter-spacing: 0.28em; min-height: 44px; }

  /* Forms — fields easier to tap */
  .field input, .field textarea, .field select { font-size: 16px; padding: 12px 0; }

  /* Reduce horizontal grid gaps that were tuned for desktop */
  div[style*="gap: 80px"]:not([class*="container"]) { gap: 32px !important; }
  div[style*="gap: 60px"]:not([class*="container"]) { gap: 28px !important; }

  /* Footer, prices row stack cleanly */
  div[style*="justify-content: space-between"][style*="flex-wrap: wrap"] { gap: 16px !important; }

  /* Side ornaments on home hero — hide so hero isn't crowded */
  [data-ornament] { display: none !important; }
}

/* ---- VERY SMALL (≤400px) ---- */
@media (max-width: 400px) {
  .container { padding: 0 14px !important; }
  h2.display[style*="font-size: 64px"] { font-size: 32px !important; }
  div[style*="font-size: 80px"]  { font-size: 40px !important; }
  div[style*="font-size: 64px"]  { font-size: 34px !important; }
}

/* ---------- VIGNETTE PLATE (cinematic dark image card) ---------- */
.plate {
  position: relative;
  overflow: hidden;
  background: var(--oxblood);
}
.plate img { width: 100%; height: 100%; object-fit: cover; display: block; }
.plate::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at center, transparent 35%, rgba(22, 4, 7, 0.55) 100%);
  pointer-events: none;
}

/* ---------- FORMS ---------- */
.field {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.field label {
  font-family: var(--font-ui);
  text-transform: uppercase;
  letter-spacing: 0.24em;
  font-size: 10px;
  color: var(--champagne);
}
.field input,
.field textarea,
.field select {
  background: transparent;
  border: none;
  border-bottom: 1px solid rgba(232, 212, 168, 0.35);
  padding: 10px 0;
  color: var(--cream);
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 300;
  outline: none;
  transition: border-color 0.4s ease;
  width: 100%;
}
.field input:focus,
.field textarea:focus,
.field select:focus {
  border-color: var(--gold);
}
.field input::placeholder,
.field textarea::placeholder {
  color: rgba(245, 236, 223, 0.35);
  font-style: italic;
}

select { appearance: none; cursor: pointer; }
select option { background: var(--bordeaux-deep); color: var(--cream); }

/* ---------- SCROLLBAR ---------- */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: var(--ink); }
::-webkit-scrollbar-thumb { background: var(--bordeaux); }
::-webkit-scrollbar-thumb:hover { background: var(--magenta); }

/* ---------- UTILITY ---------- */
.fade-up {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 1.2s ease, transform 1.2s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.fade-up.in {
  opacity: 1;
  transform: translateY(0);
}

.shimmer {
  background: linear-gradient(90deg, var(--gold) 0%, var(--champagne) 25%, var(--gold) 50%, var(--champagne) 75%, var(--gold) 100%);
  background-size: 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: shimmer 8s linear infinite;
}
@keyframes shimmer {
  to { background-position: -200% 0; }
}

.curtain-bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 80% 60% at 50% 0%, rgba(167, 36, 92, 0.25) 0%, transparent 60%),
    radial-gradient(ellipse 60% 80% at 100% 50%, rgba(74, 12, 28, 0.6) 0%, transparent 55%),
    radial-gradient(ellipse 60% 80% at 0% 50%, rgba(74, 12, 28, 0.6) 0%, transparent 55%),
    var(--ink);
}

/* Vertical curtain ridges (very subtle drapery feel) */
.curtain-ridges {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.5;
  background-image: repeating-linear-gradient(
    90deg,
    rgba(0,0,0,0) 0px,
    rgba(0,0,0,0) 22px,
    rgba(0,0,0,0.18) 23px,
    rgba(0,0,0,0) 24px,
    rgba(255, 220, 180, 0.04) 30px,
    rgba(0,0,0,0) 38px
  );
  mix-blend-mode: multiply;
}

/* Soft warm haze (afterglow) */
.afterglow {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(ellipse 50% 30% at 50% 100%, rgba(232, 166, 184, 0.25) 0%, transparent 70%);
  mix-blend-mode: screen;
}