/* =====================================================================
   SECTION 8 — THE WEDDING (countdown, venue, event cards)
   ===================================================================== */
.wedding-meta {
  display: flex;
  justify-content: center;
  gap: 50px;
  flex-wrap: wrap;
  margin: 36px 0 46px;
}
.wedding-meta > div { display: flex; flex-direction: column; gap: 6px; }
.meta-label { font-size: 0.72rem; letter-spacing: 2px; text-transform: uppercase; color: var(--gold-light); }
.meta-value { font-family: var(--font-serif); font-size: 1.2rem; color: var(--ivory); }

.countdown { display: flex; justify-content: center; gap: 18px; flex-wrap: wrap; margin-bottom: 50px; }
.countdown-box {
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(217,180,117,0.3);
  border-radius: 12px;
  padding: 20px 22px;
  min-width: 88px;
  text-align: center;
  transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease), border-color 0.4s var(--ease);
}
.countdown-box:hover {
  transform: translateY(-4px);
  border-color: rgba(217,180,117,0.6);
  box-shadow: 0 14px 34px rgba(189,143,78,0.22);
}
.cd-num { display: block; font-family: var(--font-serif); font-size: 2rem; color: var(--gold-light); }
.cd-label { display: block; font-size: 0.7rem; letter-spacing: 1.5px; text-transform: uppercase; color: var(--champagne); margin-top: 4px; }

.venue-media { max-width: 560px; margin: 0 auto 20px; border-radius: 12px; overflow: hidden; box-shadow: var(--shadow-deep); }
.venue-photo, .venue-fallback { width: 100%; aspect-ratio: 16/9; object-fit: cover; }

.event-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-top: 60px;
  text-align: left;
}
.event-card {
  position: relative;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(217,180,117,0.25);
  border-radius: 14px;
  padding: 30px 22px 26px;
  overflow: hidden;
  transition: transform 0.4s var(--ease), background 0.4s var(--ease), box-shadow 0.4s var(--ease);
}
.event-card::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--gold-light), var(--gold));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.5s var(--ease);
}
.event-card:hover {
  transform: translateY(-6px);
  background: rgba(255,255,255,0.09);
  box-shadow: 0 18px 40px rgba(0,0,0,0.28);
}
.event-card:hover::before { transform: scaleX(1); }
.event-icon {
  width: 52px;
  height: 52px;
  padding: 12px;
  color: var(--gold-light);
  background: rgba(217,180,117,0.12);
  border: 1px solid rgba(217,180,117,0.3);
  border-radius: 50%;
  margin-bottom: 16px;
  transition: background 0.4s var(--ease), transform 0.4s var(--ease);
}
.event-card:hover .event-icon { background: rgba(217,180,117,0.22); transform: scale(1.06); }
.event-icon svg { width: 100%; height: 100%; }
.event-name { font-family: var(--font-serif); font-size: 1.2rem; color: var(--ivory); margin-bottom: 8px; }
.event-detail { font-size: 0.85rem; color: var(--champagne); margin-top: 2px; }

@media (max-width: 720px) {
  .wedding-meta { gap: 26px; }
  .countdown-box { min-width: 70px; padding: 14px 12px; }
  .cd-num { font-size: 1.5rem; }
  .event-cards { grid-template-columns: 1fr; }
}