/* ============================================================
   Landing page — "Vineyard Journey"
   ============================================================ */

/* ---------- HERO ---------- */
.hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  overflow: hidden;
  color: #fff;
}
.hero__bg {
  position: absolute; inset: -8% 0 0 0;
  background: url('../img/hero.jpg') center 30% / cover no-repeat;
  will-change: transform;
  animation: kenBurns 24s ease-in-out infinite;
  z-index: 0;
}
@keyframes kenBurns {
  0%   { transform: scale(1) translate(0,0); }
  50%  { transform: scale(1.12) translate(-1.5%, -1%); }
  100% { transform: scale(1) translate(0,0); }
}
.hero__scrim {
  position: absolute; inset: 0; z-index: 1;
  background:
    linear-gradient(180deg, rgba(44,38,34,.42) 0%, rgba(44,38,34,.15) 35%, rgba(44,38,34,.55) 100%);
}
.hero__content { position: relative; z-index: 3; padding: 0 24px; max-width: 900px; }
.hero .eyebrow { color: #f3e4c8; margin-bottom: 22px; display:block; }
.hero__names {
  font-size: clamp(3rem, 11vw, 8rem);
  font-weight: 600;
  letter-spacing: 0.01em;
  text-shadow: 0 4px 30px rgba(0,0,0,.35);
  line-height: 0.98;
}
.hero__amp { display: block; font-size: .5em; font-style: italic; color: var(--gold); margin: 6px 0; font-weight: 500; }
.hero__meta {
  margin-top: 26px;
  font-family: var(--sans); font-weight: 300;
  letter-spacing: .28em; text-transform: uppercase;
  font-size: clamp(.75rem, 1.6vw, .95rem);
}
.hero__meta span { margin: 0 4px; color: var(--gold); }
.hero__cta { margin-top: 40px; display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; }

.hero__scroll {
  position: absolute; bottom: 30px; left: 50%; transform: translateX(-50%);
  z-index: 3; color: #fff; font-size: .7rem; letter-spacing: .25em; text-transform: uppercase;
  display: flex; flex-direction: column; align-items: center; gap: 10px; opacity: .85;
}
.hero__scroll .mouse {
  width: 24px; height: 38px; border: 1.5px solid rgba(255,255,255,.7); border-radius: 14px;
  position: relative;
}
.hero__scroll .mouse::after {
  content:''; position:absolute; top:7px; left:50%; width:3px; height:7px; background:#fff;
  border-radius:2px; transform: translateX(-50%); animation: wheel 1.6s infinite;
}
@keyframes wheel { 0%{opacity:1; top:7px;} 70%{opacity:0; top:18px;} 100%{opacity:0;} }

/* falling petals */
.petals { position:absolute; inset:0; z-index:2; pointer-events:none; overflow:hidden; }
.petal {
  position:absolute; top:-8%; width:14px; height:14px;
  background: radial-gradient(circle at 30% 30%, #ffd27a, var(--marigold));
  border-radius: 80% 0 80% 0;
  opacity:.0; animation: fall linear infinite;
}
@keyframes fall {
  0%   { transform: translateY(-10vh) rotate(0deg);   opacity:0; }
  10%  { opacity:.9; }
  100% { transform: translateY(112vh) rotate(540deg); opacity:0; }
}

/* ---------- SECTION SHELL ---------- */
.section { padding: clamp(70px, 10vw, 130px) 0; }
.section-head { text-align: center; max-width: 680px; margin: 0 auto clamp(40px,6vw,70px); }
.section-head .eyebrow { display:block; margin-bottom: 14px; }
.section-head h2 { font-size: clamp(2.2rem, 5vw, 3.6rem); color: var(--maroon); }
.section-head p { color: var(--muted); margin-top: 16px; font-size: 1.08rem; }

/* ---------- STORY / INTRO ---------- */
.story { background: var(--cream); }
.story__grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: clamp(30px,5vw,70px); align-items: center; }
.story__text h2 { font-size: clamp(2rem,4.4vw,3.2rem); color: var(--maroon); margin-bottom: 22px; }
.story__text p { color: var(--ink); margin-bottom: 16px; font-size: 1.06rem; }
.story__img {
  position: relative; border-radius: var(--radius); overflow: hidden;
  box-shadow: var(--shadow-md); aspect-ratio: 4/5;
}
.story__img img { width:100%; height:100%; object-fit: cover; }
.story__img::after {
  content:''; position:absolute; inset:12px; border:1px solid rgba(255,255,255,.5); border-radius: 10px; pointer-events:none;
}

/* ---------- COUNTDOWN ---------- */
.countdown {
  position: relative; color:#fff; text-align:center;
  background: linear-gradient(rgba(44,38,34,.62), rgba(107,31,61,.72)), url('../img/section-bg.jpg') center/cover fixed no-repeat;
}
.countdown h2 { font-size: clamp(2rem,5vw,3.4rem); margin-bottom: 8px; }
.countdown .sub { opacity:.9; letter-spacing:.06em; margin-bottom: 44px; }
.count-grid { display:flex; gap: clamp(14px,4vw,44px); justify-content:center; flex-wrap:wrap; }
.count-cell { min-width: 92px; }
.count-num {
  font-family: var(--serif); font-weight:600; font-size: clamp(2.6rem,8vw,5rem);
  line-height:1; color: var(--gold);
  display:block; text-shadow: 0 4px 24px rgba(0,0,0,.3);
}
.count-label { text-transform: uppercase; letter-spacing:.22em; font-size:.72rem; opacity:.85; margin-top: 10px; }

/* ---------- TIMELINE ---------- */
.timeline { background: linear-gradient(180deg, var(--cream) 0%, var(--cream-2) 100%); }
.tl {
  position: relative; max-width: 900px; margin: 0 auto; padding: 10px 0;
}
.tl::before {
  content:''; position:absolute; left: 50%; top:0; bottom:0; width:2px;
  background: linear-gradient(var(--gold), rgba(198,161,91,.2)); transform: translateX(-50%);
}
.tl-item { position: relative; width: 50%; padding: 22px 44px; }
.tl-item:nth-child(odd)  { left: 0; text-align: right; }
.tl-item:nth-child(even) { left: 50%; text-align: left; }
.tl-dot {
  position:absolute; top: 30px; width: 18px; height:18px; border-radius:50%;
  background: var(--gold); border: 3px solid var(--cream); box-shadow: 0 0 0 3px rgba(198,161,91,.35);
}
.tl-item:nth-child(odd)  .tl-dot { right: -9px; }
.tl-item:nth-child(even) .tl-dot { left: -9px; }
.tl-card {
  background:#fff; border-radius: var(--radius); padding: 26px 28px; box-shadow: var(--shadow-sm);
  border: 1px solid rgba(198,161,91,.18); transition: transform .35s, box-shadow .35s;
}
.tl-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-md); }
.tl-date { font-family: var(--sans); font-weight:600; letter-spacing:.12em; text-transform:uppercase; font-size:.74rem; color: var(--gold-deep); }
.tl-card h3 { font-size: 1.55rem; color: var(--maroon); margin: 8px 0 6px; }
.tl-meta { color: var(--muted); font-size: .92rem; }
.tl-meta strong { color: var(--vine-deep); font-weight:500; }
.tl-badge {
  display:inline-block; margin-top:12px; font-size:.7rem; letter-spacing:.1em; text-transform:uppercase;
  padding: 5px 12px; border-radius:100px; font-weight:500;
}
.tl-badge.rsvp { background: rgba(198,161,91,.15); color: var(--gold-deep); }
.tl-badge.info { background: rgba(122,132,80,.15); color: var(--vine-deep); }

/* ---------- EVENTS / RSVP CARDS ---------- */
.rsvp-cta { background: var(--cream); }
.event-cards { display:grid; grid-template-columns: repeat(2,1fr); gap: 30px; }
.event-card {
  position: relative; border-radius: var(--radius); overflow: hidden; min-height: 420px;
  display:flex; align-items:flex-end; color:#fff; box-shadow: var(--shadow-md);
  transition: transform .4s cubic-bezier(.16,1,.3,1);
}
.event-card:hover { transform: translateY(-8px); }
.event-card__bg { position:absolute; inset:0; background-size:cover; background-position:center; transition: transform .8s; z-index:0; }
.event-card:hover .event-card__bg { transform: scale(1.06); }
.event-card::after { content:''; position:absolute; inset:0; z-index:1; background: linear-gradient(180deg, rgba(44,38,34,0) 30%, rgba(44,38,34,.82) 100%); }
.event-card__body { position: relative; z-index:2; padding: 32px; width:100%; }
.event-card__body .date { letter-spacing:.2em; text-transform:uppercase; font-size:.76rem; color: #f3e4c8; }
.event-card__body h3 { font-size: 2rem; margin: 6px 0 8px; }
.event-card__body p { opacity:.9; font-size:.95rem; margin-bottom: 18px; }
.event-card .btn { padding: 11px 26px; font-size:.88rem; }

/* ---------- GALLERY ---------- */
.gallery { background: var(--cream-2); }
.gallery-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 200px; gap: 14px;
}
.gallery-grid figure { overflow:hidden; border-radius: 12px; box-shadow: var(--shadow-sm); }
.gallery-grid img { width:100%; height:100%; object-fit: cover; transition: transform .6s; }
.gallery-grid figure:hover img { transform: scale(1.08); }
.g-tall { grid-row: span 2; }
.g-wide { grid-column: span 2; }

/* ---------- DETAILS strip ---------- */
.details { background: var(--white); }
.detail-grid { display:grid; grid-template-columns: repeat(3,1fr); gap: 30px; text-align:center; }
.detail-grid .item { padding: 20px; }
.detail-grid .icon { font-size: 1.8rem; color: var(--gold); margin-bottom: 10px; }
.detail-grid h4 { font-family: var(--serif); font-size: 1.4rem; color: var(--maroon); margin-bottom: 6px; }
.detail-grid p { color: var(--muted); font-size:.95rem; }

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
  .story__grid { grid-template-columns: 1fr; }
  .story__img { order: -1; max-width: 480px; margin: 0 auto; }
  .event-cards { grid-template-columns: 1fr; }
  .detail-grid { grid-template-columns: 1fr; gap: 10px; }
  .gallery-grid { grid-template-columns: repeat(2,1fr); grid-auto-rows: 160px; }
}
@media (max-width: 760px) {
  .tl::before { left: 20px; }
  .tl-item, .tl-item:nth-child(even) { width: 100%; left: 0; text-align: left; padding: 16px 0 16px 52px; }
  .tl-item .tl-dot, .tl-item:nth-child(odd) .tl-dot, .tl-item:nth-child(even) .tl-dot { left: 12px; right:auto; }
}