/* ============================================================
   VENECIA RECEPTION HALL — DESIGN SYSTEM
   Concept: a luxury event invitation, brought to the web.
   Gold is spent ONLY on: invitation frames, eyebrows, money CTAs.
   ============================================================ */

:root {
  /* palette */
  --ink: #12100e;
  --teal-deep: #0b3a36;   /* velvet teal — hero + form panels */
  --teal: #12857a;        /* brand teal — links, buttons */
  --teal-soft: #e5f4f1;   /* washed teal — card tints */
  --gold: #c6a24e;        /* champagne gold — the luxury accent */
  --gold-soft: #e9d9ae;
  --blush: #f6e3ec;       /* quince blush — soft touches only */
  --ivory: #faf7f1;       /* page background — warmer than white */
  --white: #ffffff;
  --grey: #6f6b64;

  /* type */
  --font-display: 'Cormorant Garamond', Georgia, serif;
  --font-body: 'Jost', 'Segoe UI', sans-serif;
  --font-script: 'Great Vibes', cursive;

  --radius: 14px;
  --shadow: 0 10px 30px rgba(18, 16, 14, .08);
  --frame: 1px solid rgba(198, 162, 78, .55); /* the gold hairline */
}

* { margin: 0; padding: 0; box-sizing: border-box; }
/* 112.5% = 18px base instead of the browser's 16px default —
   every rem-based size on the site scales up proportionally */
html { scroll-behavior: smooth; font-size: 112.5%; }
body {
  font-family: var(--font-body);
  font-weight: 300;
  color: var(--ink);
  background: var(--ivory);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: var(--teal); text-decoration: none; }

/* ---------- type scale ---------- */
h1, h2, h3 { font-family: var(--font-display); font-weight: 500; line-height: 1.15; }
h1 { font-size: clamp(2.4rem, 6vw, 4.2rem); }
h2 { font-size: clamp(1.9rem, 4.5vw, 3rem); }
h3 { font-size: 1.35rem; }

/* the letterspaced gold eyebrow — every section opens with one */
.eyebrow {
  display: flex; align-items: center; justify-content: center; gap: .75rem;
  font-size: .72rem; letter-spacing: .32em; text-transform: uppercase;
  color: var(--gold); font-weight: 400; margin-bottom: 1rem;
}
.eyebrow::before, .eyebrow::after { content: '✦'; font-size: .6rem; }
.eyebrow.left { justify-content: flex-start; }

.script { font-family: var(--font-script); font-weight: 400; }

/* ---------- layout ---------- */
.wrap { width: min(1120px, 92%); margin-inline: auto; }
section { padding: clamp(3.5rem, 8vw, 6.5rem) 0; }
.center { text-align: center; }
.section-intro { max-width: 560px; margin: 0 auto 2.75rem; color: var(--grey); }

/* ---------- buttons ---------- */
.btn {
  display: inline-block; padding: .95rem 2.4rem; border-radius: 999px;
  font-family: var(--font-body); font-size: .82rem; letter-spacing: .18em;
  text-transform: uppercase; font-weight: 400; cursor: pointer;
  transition: all .3s ease; border: 1px solid transparent;
}
.btn-gold { background: var(--gold); color: var(--ink); }
.btn-gold:hover { background: var(--gold-soft); transform: translateY(-2px); }
.btn-teal { background: var(--teal); color: var(--white); }
.btn-teal:hover { background: var(--teal-deep); transform: translateY(-2px); }
.btn-ghost { border-color: var(--gold); color: var(--gold); background: transparent; }
.btn-ghost:hover { background: var(--gold); color: var(--ink); }
.btn-ghost-dark { border-color: var(--teal); color: var(--teal); background: transparent; }
.btn-ghost-dark:hover { background: var(--teal); color: var(--white); }

/* ---------- nav ---------- */
.nav {
  position: sticky; top: 0; z-index: 50;
  background: rgba(250, 247, 241, .92); backdrop-filter: blur(12px);
  border-bottom: var(--frame);
}
.nav-inner {
  display: flex; align-items: center; justify-content: space-between;
  padding: .8rem 0;
}
.logo { font-family: var(--font-script); font-size: 2.5rem; color: var(--teal-deep); line-height: 1; }
.logo span { display: block; font-family: var(--font-body); font-size: .62rem; letter-spacing: .42em; text-transform: uppercase; color: var(--gold); margin-top: -2px; }
.nav-links { display: flex; gap: 2rem; list-style: none; align-items: center; }
.nav-links a { color: var(--ink); font-size: .85rem; letter-spacing: .12em; text-transform: uppercase; }
.nav-links a:hover, .nav-links a.active { color: var(--teal); }
.nav-cta { display: flex; align-items: center; gap: 1rem; }
.lang-toggle {
  background: none; border: 1px solid var(--gold); color: var(--gold);
  border-radius: 999px; padding: .35rem .9rem; font-size: .72rem;
  letter-spacing: .15em; cursor: pointer; font-family: var(--font-body);
}
.lang-toggle:hover { background: var(--gold); color: var(--ink); }
.nav .btn { padding: .6rem 1.5rem; font-size: .72rem; }

/* mobile nav */
.burger { display: none; background: none; border: none; cursor: pointer; }
.burger span { display: block; width: 24px; height: 2px; background: var(--teal-deep); margin: 5px 0; transition: .3s; }

@media (max-width: 880px) {
  .nav-links {
    position: fixed; inset: 61px 0 auto 0; background: var(--ivory);
    flex-direction: column; padding: 2rem; gap: 1.4rem;
    border-bottom: var(--frame); transform: translateY(-130%);
    transition: transform .35s ease;
  }
  .nav-links.open { transform: translateY(0); }
  .burger { display: block; }
  .nav .btn-desktop { display: none; }
}

/* ---------- hero (the invitation) ---------- */
.hero {
  position: relative;
  overflow: hidden;
  background: url('images/hero.jpg') center/cover no-repeat, var(--teal-deep);
  color: var(--white);
  padding: clamp(1rem, 3vw, 2rem);
}
.hero-video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  z-index: 0;
}
/* the softening blur stays desktop-only: CSS filters on <video> make many
   phone GPUs render the video black or frozen, while desktops play fine */
@media (min-width: 880px) {
  .hero-video {
    filter: blur(1px);
    transform: scale(1.02); /* hides the blurred edge the blur filter creates */
  }
}
/* reduced-motion users get the still poster image instead of the video */
@media (prefers-reduced-motion: reduce) {
  .hero-video { display: none; }
}
.hero-overlay {
  position: absolute; inset: 0;
  background: rgba(0, 0, 0, .58);
  z-index: 1;
}
.hero-frame {
  border: var(--frame); border-radius: var(--radius);
  padding: clamp(3.5rem, 10vw, 7.5rem) 1.5rem;
  background: rgba(0, 0, 0, .58);
  text-align: center; position: relative;
  z-index: 2;
}
/* shift the invitation card off-center to the left on screens wide enough to spare the room */
@media (min-width: 880px) {
  .hero-frame { width: fit-content; max-width: 640px; margin: 0 auto 0 6%; }
}
/* invitation corner marks */
.hero-frame::before, .hero-frame::after {
  content: '✦'; color: var(--gold); position: absolute; font-size: .8rem;
}
.hero-frame::before { top: 14px; left: 18px; }
.hero-frame::after { bottom: 14px; right: 18px; }

.hero .eyebrow { color: var(--gold-soft); text-shadow: 0 2px 14px rgba(0,0,0,.6); }
.hero h1 { max-width: 15ch; margin: 0 auto .5rem; text-shadow: 0 2px 18px rgba(0,0,0,.65); }
.hero h1 em { font-style: italic; color: var(--gold-soft); }
.hero-sub { color: rgba(255,255,255,.75); max-width: 46ch; margin: 0 auto 2.2rem; font-size: 1.02rem; text-shadow: 0 2px 14px rgba(0,0,0,.6); }
.hero .script-accent { font-family: var(--font-script); font-size: clamp(1.6rem, 3.5vw, 2.4rem); color: var(--gold-soft); display: block; margin-bottom: .4rem; text-shadow: 0 2px 14px rgba(0,0,0,.6); }

/* ---------- trust bar ---------- */
.trust { background: var(--ink); color: var(--white); padding: 1.4rem 0; }
.trust-grid { display: flex; justify-content: space-around; gap: 1rem; text-align: center; flex-wrap: wrap; }
.trust-grid strong { display: block; font-family: var(--font-display); font-size: 1.7rem; color: var(--gold); font-weight: 500; }
.trust-grid small { font-size: .72rem; letter-spacing: .2em; text-transform: uppercase; color: rgba(255,255,255,.65); }

/* ---------- event cards ---------- */
.grid { display: grid; gap: 1.1rem; }
.grid-3 { grid-template-columns: repeat(3, 1fr); margin-top: 2.2rem; }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 880px) { .grid-3 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 540px) { .grid-3, .grid-2 { grid-template-columns: 1fr; } }

.event-card {
  position: relative; border-radius: var(--radius); overflow: hidden;
  aspect-ratio: 4/3; display: flex; align-items: flex-end;
  background: var(--teal-soft); box-shadow: var(--shadow);
  transition: transform .35s ease;
}
.event-card:hover { transform: translateY(-6px); }
.event-card .ph { position: absolute; inset: 0; }
.event-card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; }
.event-card:hover img { transform: scale(1.06); }
.event-card .label {
  position: relative; width: 100%; padding: 1.6rem 1.2rem 1rem;
  background: linear-gradient(to top, rgba(0,0,0,.68), rgba(0,0,0,.22) 60%, transparent);
  color: var(--white); font-family: var(--font-display); font-size: 1.45rem;
}
.event-card .label small { display: block; font-family: var(--font-body); font-size: .72rem; letter-spacing: .2em; text-transform: uppercase; color: var(--gold-soft); }
.event-card .card-sub {
  display: block; font-family: var(--font-body); font-style: normal;
  font-size: .82rem; font-weight: 300; color: rgba(255,255,255,.88);
  margin-top: .1rem;
}

/* photo placeholders — swap for real images later */
.ph {
  background: linear-gradient(135deg, var(--teal-soft), var(--blush));
  display: flex; align-items: center; justify-content: center;
  color: var(--teal-deep); font-size: .72rem; letter-spacing: .15em;
  text-transform: uppercase;
}

/* ---------- gallery ---------- */
.gallery-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: .9rem; }
.gallery-grid .g-item { position: relative; border-radius: var(--radius); overflow: hidden; aspect-ratio: 1; cursor: pointer; box-shadow: var(--shadow); display: block; }
.gallery-grid .g-item img, .gallery-grid .g-item .ph { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 880px) { .gallery-grid { grid-template-columns: repeat(2, 1fr); } }

/* homepage preview tiles: slow zoom + gold caption that rises on hover */
.gallery-grid.preview .g-item img { transition: transform .6s ease; }
.gallery-grid.preview .g-item::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(11,58,54,.72), rgba(11,58,54,.05) 55%, transparent);
  opacity: .85; transition: opacity .4s ease;
}
.gallery-grid.preview .g-item:hover img { transform: scale(1.08); }
.gallery-grid.preview .g-item:hover::after { opacity: 1; }
.gallery-grid.preview .g-cap {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
  padding: 1.1rem 1rem; text-align: center;
  font-family: var(--font-display); font-size: 1.25rem; color: var(--white);
  letter-spacing: .02em; text-shadow: 0 2px 12px rgba(0,0,0,.5);
  transform: translateY(.4rem); transition: transform .4s ease;
}
.gallery-grid.preview .g-item:hover .g-cap { transform: translateY(0); }
.gallery-grid.preview .g-cap::before {
  content: '✦'; display: block; color: var(--gold-soft); font-size: .7rem; margin-bottom: .3rem;
}

.filters { display: flex; gap: .6rem; justify-content: center; flex-wrap: wrap; margin-bottom: 2rem; }
.filter-btn {
  background: none; border: 1px solid var(--teal); color: var(--teal);
  border-radius: 999px; padding: .5rem 1.3rem; font-size: .75rem;
  letter-spacing: .12em; text-transform: uppercase; cursor: pointer;
  font-family: var(--font-body); transition: .25s;
}
.filter-btn.active, .filter-btn:hover { background: var(--teal); color: var(--white); }

/* lightbox */
.lightbox {
  position: fixed; inset: 0; background: rgba(11, 58, 54, .94); z-index: 100;
  display: none; align-items: center; justify-content: center; padding: 2rem;
}
.lightbox.open { display: flex; }
.lightbox img { max-height: 85vh; max-width: 92vw; border-radius: var(--radius); border: var(--frame); }
.lightbox-close { position: absolute; top: 1.2rem; right: 1.6rem; background: none; border: none; color: var(--gold); font-size: 2rem; cursor: pointer; }

/* ---------- packages ---------- */
/* packages band: a champagne tint (deeper than the ivory page) with gold
   hairlines, so the white package cards lift off the background instead of
   blending into it the way they did on pure white */
.pkg-section {
  background:
    radial-gradient(ellipse 70% 60% at 50% 0%, rgba(198, 162, 78, .13), transparent 70%),
    linear-gradient(180deg, #f4efe4, #efe9dc);
  border-top: var(--frame);
  border-bottom: var(--frame);
}

.pkg-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.3rem; align-items: stretch;}
@media (max-width: 880px) { .pkg-grid { grid-template-columns: 1fr; max-width: 460px; margin-inline: auto; } }

.pkg-card {
  /* a whisper of warmth top-to-bottom instead of flat white — subtle enough
     to still read as a clean card, but no longer a plain white box */
  background: linear-gradient(170deg, #ffffff 0%, #fbf6ec 100%);
  border-radius: var(--radius); padding: 2.2rem 1.8rem;
  box-shadow: var(--shadow); position: relative; display: flex; flex-direction: column;
  border: 1px solid rgba(198, 162, 78, .18);
  border-top: 3px solid var(--teal-soft);
}
.pkg-card.popular { border-top-color: var(--gold); }
.pkg-badge {
  position: absolute; top: -12px; left: 50%; transform: translateX(-50%);
  background: var(--gold); color: var(--ink); font-size: .62rem;
  letter-spacing: .2em; text-transform: uppercase; padding: .3rem 1rem; border-radius: 999px;
}
.pkg-card h3 { font-size: 1.6rem; margin-bottom: .2rem; }
.pkg-price { font-family: var(--font-display); font-size: 1.15rem; color: var(--teal); margin-bottom: 1rem; }
.pkg-price strong { font-size: 1.9rem; font-weight: 500; }
.pkg-desc { color: var(--grey); font-size: .92rem; margin-bottom: 1.2rem; }
.pkg-list { list-style: none; margin-bottom: 1.6rem; flex: 1; }
.pkg-list li { padding: .45rem 0; border-bottom: 1px dashed rgba(198,162,78,.3); font-size: .92rem; }
.pkg-list li::before { content: '✦'; color: var(--gold); margin-right: .6rem; font-size: .7rem; }
.pkg-note { text-align: center; color: var(--grey); font-size: .88rem; max-width: 62ch; margin: 2.2rem auto 0; font-style: italic; }

/* ---------- FAQ ---------- */
.faq { max-width: 720px; margin-inline: auto; }
.faq details { background: var(--white); border-radius: var(--radius); padding: 1.1rem 1.4rem; margin-bottom: .8rem; box-shadow: var(--shadow); }
.faq summary { cursor: pointer; font-family: var(--font-display); font-size: 1.12rem; font-weight: 500; list-style: none; display: flex; justify-content: space-between; align-items: center; }
.faq summary::after { content: '+'; color: var(--gold); font-size: 1.4rem; }
.faq details[open] summary::after { content: '–'; }
.faq details p { padding-top: .7rem; color: var(--grey); font-size: .93rem; }

/* ---------- why / feature rows ---------- */
.why-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; text-align: center; }
@media (max-width: 880px) { .why-grid { grid-template-columns: 1fr; max-width: 420px; margin-inline: auto; } }
.why-item .icon {
  width: 58px; height: 58px; margin: 0 auto 1rem; border-radius: 50%;
  border: var(--frame); display: flex; align-items: center; justify-content: center;
  color: var(--gold); font-size: 1.3rem;
}
.why-item p { color: var(--grey); font-size: .92rem; }

/* ---------- testimonials ---------- */
.quote-section { background: var(--blush); }
.quote-card {
  background: var(--white); border-radius: var(--radius); padding: 1.8rem;
  box-shadow: var(--shadow); border-top: 3px solid var(--gold);
}
.stars { color: var(--gold); letter-spacing: .2em; margin-bottom: .7rem; }
.quote-card p { font-family: var(--font-display); font-size: 1.08rem; font-style: italic; margin-bottom: .8rem; }
.quote-card cite { color: var(--grey); font-size: .82rem; font-style: normal; letter-spacing: .08em; }

/* ---------- inquiry form (the conversion panel) ---------- */
.inquiry { background: var(--teal-deep); color: var(--white); padding: clamp(1rem, 3vw, 2rem); }
.inquiry-frame { border: var(--frame); border-radius: var(--radius); padding: clamp(3rem, 7vw, 5rem) 1.5rem; }
.inquiry .eyebrow { color: var(--gold-soft); }
.inquiry h2 { text-align: center; }
.inquiry .sub { text-align: center; color: rgba(255,255,255,.72); margin-bottom: 2.2rem; }
.inquiry .script-accent { font-family: var(--font-script); color: var(--gold-soft); font-size: 1.9rem; display: block; text-align: center; }

.form-card {
  background: var(--white); border-radius: var(--radius); padding: 2rem;
  max-width: 640px; margin-inline: auto; color: var(--ink); box-shadow: var(--shadow);
}
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
@media (max-width: 560px) { .form-row { grid-template-columns: 1fr; } }
.field { margin-bottom: 1rem; }
.field label { display: block; font-size: .72rem; letter-spacing: .18em; text-transform: uppercase; color: var(--grey); margin-bottom: .35rem; }
.field input, .field select, .field textarea {
  width: 100%; padding: .8rem .95rem; border: 1px solid #ddd6c8;
  border-radius: 8px; font-family: var(--font-body); font-size: .95rem;
  background: var(--ivory); color: var(--ink);
}
.field input:focus, .field select:focus, .field textarea:focus {
  outline: 2px solid var(--teal); border-color: transparent;
}
.form-card .btn { width: 100%; }
.form-msg { text-align: center; margin-top: .9rem; font-size: .9rem; }
.form-msg.error { color: #b3261e; }
.hp { position: absolute; left: -9999px; } /* honeypot anti-spam */

/* ---------- CTA band ---------- */
.cta-band { background: var(--teal); color: var(--white); text-align: center; padding: 3rem 0; }
.cta-band h2 { margin-bottom: 1.4rem; }

/* ---------- about / halls ---------- */
.hall-row { display: grid; grid-template-columns: 1fr 1fr; gap: 2.5rem; align-items: center; margin-bottom: 3rem; }
.hall-row:nth-child(even) .hall-photo { order: 2; }
@media (max-width: 820px) { .hall-row { grid-template-columns: 1fr; } .hall-row:nth-child(even) .hall-photo { order: 0; } }
.hall-photo { border-radius: var(--radius); overflow: hidden; aspect-ratio: 4/3; box-shadow: var(--shadow); border: var(--frame); }
.hall-photo .ph { width: 100%; height: 100%; }
.hall-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hall-copy h3 { font-size: 1.9rem; margin-bottom: .5rem; }
.hall-copy .cap { color: var(--gold); font-size: .75rem; letter-spacing: .25em; text-transform: uppercase; margin-bottom: .8rem; display: block; }
.hall-copy p { color: var(--grey); }

/* ---------- footer ---------- */
footer { background: var(--ink); color: rgba(255,255,255,.72); padding: 3.5rem 0 2rem; }
.footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 2.5rem; margin-bottom: 2.5rem; }
@media (max-width: 780px) { .footer-grid { grid-template-columns: 1fr; text-align: center; } }
footer .logo { color: var(--white); }
footer h4 { font-family: var(--font-body); font-size: .75rem; letter-spacing: .25em; text-transform: uppercase; color: var(--gold); margin-bottom: 1rem; }
footer ul { list-style: none; }
footer li { margin-bottom: .55rem; font-size: .92rem; }
footer a { color: rgba(255,255,255,.72); }
footer a:hover { color: var(--gold); }
.footer-bottom { border-top: 1px solid rgba(198,162,78,.25); padding-top: 1.4rem; text-align: center; font-size: .78rem; color: rgba(255,255,255,.4); }
.socials { display: flex; gap: 1rem; margin-top: 1rem; }
@media (max-width: 780px) { .socials { justify-content: center; } }
.socials a {
  width: 38px; height: 38px; border: 1px solid var(--gold); border-radius: 50%;
  display: flex; align-items: center; justify-content: center; color: var(--gold); font-size: .85rem;
}
.socials a:hover { background: var(--gold); color: var(--ink); }

/* ---------- page hero (interior pages) ---------- */
/* Subpage headers: each page points at its own photo (dark overlay for text).
   Until a photo file exists in images/, the teal underneath shows — so these
   upgrade automatically the moment the files are dropped in, no code edits. */
.page-hero {
  background: var(--teal-deep) center/cover no-repeat;
  color: var(--white); text-align: center;
  padding: clamp(3.5rem, 9vw, 7rem) 0;
}
.page-hero.hero-gallery  { background-image: linear-gradient(rgba(8,32,30,.55), rgba(8,32,30,.72)), url('images/page-gallery.webp'); }
.page-hero.hero-packages { background-image: linear-gradient(rgba(8,32,30,.55), rgba(8,32,30,.72)), url('images/page-packages.webp'); }
.page-hero.hero-about    { background-image: linear-gradient(rgba(8,32,30,.55), rgba(8,32,30,.72)), url('images/page-about.webp'); }
.page-hero.hero-contact  { background-image: linear-gradient(rgba(8,32,30,.55), rgba(8,32,30,.72)), url('images/page-contact.webp'); }
.page-hero h1 { text-shadow: 0 2px 18px rgba(0,0,0,.5); }
.page-hero .eyebrow { color: var(--gold-soft); }

/* ---------- scroll reveal ---------- */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity .7s ease, transform .7s ease; }
.reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
  .btn, .event-card { transition: none; }
}

/* ---------- 404 / gracias ---------- */
.simple-page { min-height: 55vh; display: flex; align-items: center; text-align: center; }
.simple-page .script-accent { font-family: var(--font-script); font-size: 2.4rem; color: var(--gold); display: block; margin-bottom: .5rem; }