/* Clean, symmetric layout with responsive grid */

:root{
  --bg:#ffffff;
  --ink:#2f2a28;
  --muted:#6f6262;
  --rose:#b32149;
  --rose-dark:#8e1f3b;
  --gold:#caa35f;
}

*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  line-height:1.6;
}

.bg{ position:fixed; inset:0; pointer-events:none; z-index:-1; background:#ffffff; }
.container{ max-width:1100px; margin:0 auto; padding:0 24px; padding-left:clamp(16px, 6vw, 56px); padding-right:clamp(16px, 6vw, 56px); }

.hero{ text-align:center; padding:48px 16px 12px; background-image:url('./assets/bg.jpeg'); background-repeat:no-repeat; background-position:center top; background-size:contain; min-height:680px; display:flex; flex-direction:column; justify-content:flex-start; }
.hero .icon{ width:48px; height:48px; color:var(--rose); margin:0 auto 10px; opacity:.9; }
.hero .icon svg{ width:48px; height:48px; display:block; }
.subtitle{ color:var(--muted); margin:0 auto 6px; max-width:600px; font-size:14px; }
.couple{ margin:4px 0 6px; font-family:Playfair Display, serif; font-weight:600; letter-spacing:.3px; }
.couple span{ font-family:"Great Vibes", cursive; color:var(--rose); font-size:56px; }
.couple em{ color:#d46883; font-style:italic; padding:0 8px; }
.couple{ transition: transform .25s ease; will-change: transform; }
.tag{ color:#7a5c5c; font-size:14px; margin:6px 0 0; }

.grid{ display:grid; grid-template-columns:repeat(2, minmax(260px, 1fr)); gap:18px; margin:10px 0 28px; align-items:start; }

.card{ background:#ffffff; border:1px solid rgba(202,163,95,.28); border-radius:18px; padding:26px 22px; box-shadow:0 8px 24px rgba(149,75,43,.06); position:relative; z-index:1; }
.eyebrow{ text-transform:uppercase; letter-spacing:.35em; color:#7b5a5a; font-family:Playfair Display, serif; font-size:14px; margin:0 0 6px; text-align:center; }
.date{ text-align:center; font-family:Playfair Display, serif; color:#a05858; font-size:22px; margin:0 0 2px; }
.time{ text-align:center; color:#6a4e4e; font-size:14px; margin:0 0 10px; }
.rule{ border:none; height:1px; background:linear-gradient(90deg, transparent, var(--gold), transparent); max-width:220px; margin:12px auto; }
.venue h3{ margin:.25rem 0; font-size:14px; color:#6c5555; }
.venue p{ margin:.25rem 0; }
.venue strong{ color:#3e2723; }
.note{ color:#6a4e4e; font-size:14px; margin-top:8px; }
.actions{ margin-top:10px; display:flex; justify-content:center; }
.btn{ display:inline-block; padding:9px 14px; border-radius:999px; color:#fff; text-decoration:none; background:linear-gradient(180deg, var(--rose) 0%, var(--rose-dark) 100%); box-shadow:0 4px 12px rgba(179,33,73,.22); font-weight:600; font-size:13px; }
.btn:hover{ filter:brightness(1.05); }
.btn-icon{ display:none; width:1em; height:1em; margin-right:8px; fill:#fff; vertical-align:middle; }
.btn-label-desktop{ vertical-align:middle; }
.btn-label-mobile{ display:none; vertical-align:middle; }

.footer{ text-align:center; color:#745a5a; padding:4px 16px 28px; font-size:14px; }

/* Symmetric stacking on mobile */
@media (max-width: 900px){
  .grid{ grid-template-columns:1fr; }
}

@media (max-width: 520px){
  .hero{ min-height:520px; padding-top:40px; background-image:url('./assets/bgpor.jpg'); background-position:center top; background-size:contain; background-origin:content-box; background-clip:content-box; }
  .hero .couple{ margin-top:48px; }
  .couple span{ font-size:36px; }
  .subtitle{ font-size:13px; }
  .card{ padding:22px 18px; }
  .eyebrow{ letter-spacing:.3em; }
  .date{ font-size:20px; }
  .time{ font-size:13px; }
  .venue h3{ text-align:left; }
  .grid{ margin-top:-28px; }
  /* Mobile: hide venue text and show venue name on map button with icon */
  .venue h3, .venue p:not(.actions){ display:none; }
  .btn-icon{ display:inline-block; }
  .btn-label-desktop{ display:none; }
  .btn-label-mobile{ display:inline; }
}

/* Desktop only: center names in hero, disable scroll, and card hover reveal */
@media (min-width: 901px){
  html, body{ height:auto; overflow:auto; }
  .hero{ justify-content:flex-start; min-height:720px; }
  .hero .couple{ margin-top:48px; }
  .grid{ margin-top:-80px; }
  .card{ transition: transform .4s ease, box-shadow .35s ease; will-change: transform; }
}

@media (min-width: 901px) and (hover:hover) and (pointer:fine){
  .card.lift{ transform: translateY(var(--lift, 0px)); box-shadow:0 18px 48px rgba(149,75,43,.16); }
}

/* Fonts: Inter (body), Playfair Display (titles), Great Vibes (script) */

:root{
  --bg: #ffffff;
  --ink: #3a2a2a;
  --rose: #b32149;
  --rose-soft: #d46883;
  --gold: #caa35f;
  --muted: #6c6c6c;
}

*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0;
  color:var(--ink);
  background:var(--bg);
  font-family:Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  line-height:1.6;
}

.page-bg{
  position:fixed; inset:0; z-index:-1; background:#ffffff;
}

.invite-header{
  text-align:center;
  padding:48px 20px 12px;
}

.ganesha{ color:var(--rose); width:48px; height:48px; margin:0 auto 14px; opacity:.9; }
.ganesha svg{ width:48px; height:48px; display:block; }

.subtitle{ color:var(--muted); margin:0 auto 8px; max-width:560px; font-size:14px; }

.couple{ margin:6px 0 6px; font-weight:600; letter-spacing:.5px; }
.couple .name{ font-family:"Great Vibes", cursive; font-size:54px; color:var(--rose); display:inline-block; }
.couple .amp{ font-family:Playfair Display, serif; margin:0 10px; color:var(--rose-soft); font-style:italic; }

.tagline{ color:#7a5c5c; margin-top:6px; font-size:14px; }

.details{ display:grid; grid-template-columns:1fr minmax(240px,540px) 1fr; gap:16px; align-items:start; max-width:1200px; margin:12px auto 24px; padding:0 16px; }

.card{ background:rgba(255,255,255,.75); backdrop-filter:saturate(120%) blur(2px); border:1px solid rgba(202,163,95,.25); padding:28px 22px; border-radius:18px; box-shadow:0 8px 24px rgba(149,75,43,.08);
}
.card.left{ grid-column:1; }
.card.right{ grid-column:3; }

.label{ text-transform:uppercase; letter-spacing:.35em; font-family:Playfair Display, serif; color:#7b5a5a; font-size:14px; margin:0 0 6px; text-align:center; }
.date{ text-align:center; font-family:Playfair Display, serif; font-size:22px; color:#a05858; margin:0 0 2px; }
.time{ text-align:center; margin:0 0 10px; color:#6a4e4e; font-size:14px; }

.divider{ height:1px; background:linear-gradient(90deg, transparent, var(--gold), transparent); margin:14px auto; max-width:220px; }

.venue h3{ margin:.25rem 0 .25rem; font-size:14px; color:#6c5555; }
.venue p{ margin:.25rem 0; }
.venue strong{ color:#3e2723; }
.note{ margin-top:10px; color:#6a4e4e; font-size:14px; }

.map-actions{ margin-top:10px; display:flex; gap:8px; flex-wrap:wrap; }
.button{
  display:inline-block; padding:8px 14px; border-radius:999px; text-decoration:none; color:#fff; background:linear-gradient(180deg, var(--rose) 0%, #8e1f3b 100%);
  box-shadow:0 4px 12px rgba(179,33,73,.25); font-weight:600; font-size:13px;
}
.button:hover{ filter:brightness(1.05); }
.button.ghost{ background:transparent; color:var(--rose); border:1px solid var(--rose); box-shadow:none; }

.arch{ grid-column:2; display:flex; align-items:center; justify-content:center; }
.arch svg{ width:100%; max-width:520px; opacity:.8; }

.footer{ text-align:center; color:#745a5a; padding:6px 16px 28px; font-size:14px; }

/* Garland-like top beads */
body:before, body:after{
  content:""; position:fixed; top:0; width:120px; height:100%; pointer-events:none; background-image:
    radial-gradient(circle at 10px 14px, #eaa0b0 0 6px, transparent 7px),
    repeating-linear-gradient(to bottom, rgba(202,163,95,.6) 0 12px, transparent 12px 24px);
  background-repeat:no-repeat, repeat-y; background-size:120px 120px, 2px 24px; background-position:top left, 60px top;
  opacity:.35;
}
body:after{ right:0; left:auto; background-position:top right, calc(100% - 60px) top; }

/* Responsive */
@media (max-width: 980px){
  .details{ grid-template-columns:1fr; }
  .card.left, .card.right, .arch{ grid-column:auto; }
  .arch{ order:2; margin:4px 0; }
}

@media (max-width: 520px){
  .couple .name{ font-size:44px; }
  .subtitle{ font-size:13px; }
}