/* Soria-inspired single-page theme */
/* Typography */
:root{
  --bg:#faf8f6;
  --bg-alt:#f4efe9;
  --ink:#2b2b2b;
  --muted:#6b6b6b;
  --line:#e5dfd7;
  --accent:#b28b67; /* soft caramel */
  --accent-2:#8a6e58;
  --radius:18px;
  --shadow:0 6px 26px rgba(0,0,0,.07);
  --heading-font: Inter, system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
}

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

/* Header / Nav */
.site-header{
  position:sticky; top:0; z-index:1000;
  background:#fff; border-bottom:1px solid var(--line);
  backdrop-filter:saturate(180%) blur(4px);
}
.container{width:min(1100px, 92%); margin-inline:auto}
.nav{display:flex; align-items:center; justify-content:space-between; padding:14px 0;}
.logo{
  font-family:"Playfair Display", Georgia, serif;
  font-weight:600; letter-spacing:.3px;
  text-decoration:none; color:var(--ink); font-size:1.25rem;
}
.nav-links{display:flex; gap:22px; align-items:center; list-style:none; margin:0; padding:0}
.nav-links a{color:var(--muted); text-decoration:none; font-weight:500}
.nav-links a:hover, .nav-links a.active{color:var(--ink)}
.btn{
  border-radius:999px; padding:10px 18px; border:1px solid var(--ink);
  text-decoration:none; color:var(--ink); display:inline-block; font-weight:600;
}
.btn-outline{background:transparent; border-color:#fff; color:#fff}
.nav-toggle{display:none; background:none; border:0; font-size:1.4rem}

/* Hero */
.hero{
  position:relative; height:92vh;
  background:url('images/hero.jpg') center/cover no-repeat, var(--bg-alt);
  display:grid; place-items:center; text-align:center; color:#fff;
}
.hero .overlay{position:absolute; inset:0; background:linear-gradient(180deg, rgba(0,0,0,.45), rgba(0,0,0,.35))}
.hero-inner{position:relative}
.hero-title{
  font-family:"Playfair Display", Georgia, serif;
  font-size:clamp(2.4rem, 5vw, 4rem); margin:0 0 6px;
  letter-spacing:.5px;
}
.hero-subtitle{margin:0 0 1vh; font-weight:500}
.photo-corner-button{margin:2vh}

/* Sections */
.section{padding:64px 0}
.section-alt{background:var(--bg-alt)}
.section-title{
  font-family:"Playfair Display", Georgia, serif; font-weight:600;
  font-size:clamp(1.6rem, 3.2vw, 2.2rem); margin:0 0 18px;
}
.center{text-align:center}
.muted{color:var(--muted)}

.split{display:grid; grid-template-columns:1.15fr .85fr; gap:36px; align-items:center}
.split-media img{width:100%; height:auto; border-radius:var(--radius); box-shadow:var(--shadow)}
.kv{list-style:none; padding:0; margin:0 0 14px; border-top:1px solid var(--line)}
.kv li{display:flex; justify-content:space-between; padding:10px 0; border-bottom:1px solid var(--line)}
.kv span:first-child{color:var(--muted)}

/* Timeline */
.timeline{display:grid; grid-template-columns:repeat(3,1fr); gap:26px; margin-top:10px}

.tl-item {
  cursor: pointer;
  transition: transform 0.3s ease;
  position: relative;
}
.tl-item:hover {
  transform: scale(1.03);
}



/* Cards (events) */
.cards{display:grid; grid-template-columns:repeat(3,1fr); gap:24px}
.card{background:#fff; border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow)}
.card img{width:100%; height:200px; object-fit:cover}
.card-body{padding:16px}
.card h3{margin:0 0 6px}
.link{color:var(--accent-2); text-decoration:none; border-bottom:1px solid currentColor}

/* Schedule */
.event-cards {
  display: grid;
  gap: 24px;
  margin-top: 24px;
}

/* main card */
.event-card {
  background: #fff;
  border-radius: 20px;
  padding: 22px;
  border: 1px solid rgba(20,20,20,0.06);
  box-shadow:
    0 8px 24px rgba(20,20,20,0.05),
    0 2px 6px rgba(20,20,20,0.03);
}

/* heading row */
.event-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}

.loc-chip {
  background: rgba(140, 22, 66, 0.08);
  color: #8c1642;
  padding: 6px 12px;
  border-radius: 999px;
  font-size: 0.85rem;
  border: 1px solid rgba(140, 22, 66, 0.15);
}

/* description */
.desc {
  margin: 6px 0 14px 0;
  color: rgba(27,27,27,0.85);
  font-size: 1rem;
}

/* subevents list */
.subevents {
  list-style: none;
  margin: 0;
  padding: 0;
  border: 1px dashed rgba(140,22,66,0.20);
  padding: 12px 16px;
  border-radius: 14px;
  background: #fff;
}

.subevents li {
  padding: 8px 0 8px 20px;
  position: relative;
  color: rgba(27,27,27,0.9);
  font-size: 0.98rem;
}

.subevents li + li {
  border-top: 1px solid rgba(20,20,20,0.06);
}

/* elegant bullet */
.subevents li::before {
  content: "";
  width: 6px;
  height: 6px;
  border: 1.5px solid #8c1642;
  border-radius: 50%;
  position: absolute;
  left: 4px;
  top: 14px;
}

.loc {
  color: rgba(27,27,27,0.65);
  font-style: italic;
}

/* Two-column layout for events */
.event-cards {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 28px; /* space between cards */
  margin-top: 24px;
}

/* Card styling stays the same */
.event-card {
  background: #fff;
  border-radius: 20px;
  padding: 22px;
  border: 1px solid rgba(20,20,20,0.06);
  box-shadow:
    0 8px 24px rgba(20,20,20,0.05),
    0 2px 6px rgba(20,20,20,0.03);
}

/* When an .event-card is also a card-flip, the visual chrome (background,
   border, padding, shadow) should be applied to the front/back faces so the
   entire visible card flips. The host becomes the flipping container only. */
.event-card.card-flip {
  /* remove the static visual chrome from the host */
  background: transparent;
  border: none;
  padding: 0;
  box-shadow: none;
  border-radius: 0;
  position: relative; /* needed so absolute faces align */
  overflow: hidden; /* contain shadows/overlays and prevent visual overflow */
  height: auto !important; /* override timeline fixed height on .card-flip */
}

.event-card.card-flip .card-inner {
  /* Use grid stacking so the host (.event-card.card-flip) can size
     to its content while the two faces overlap. Grid keeps layout-driven
     height (flexible) instead of requiring an explicit host height. */
  display: grid;
  width: 100%;
}

.event-card.card-flip .card-front,
.event-card.card-flip .card-back {
  /* place both faces in the same grid cell so they overlap while allowing
     their container to size based on content. Keep position:relative so
     children measure naturally. */
  grid-area: 1 / 1 / 2 / 2;
  position: relative;
  box-sizing: border-box;
  /* apply the original event-card chrome to the faces */
  background: #fff;
  border-radius: 20px;
  padding: 22px;
  border: 1px solid rgba(20,20,20,0.06);
  box-shadow:
    0 8px 24px rgba(20,20,20,0.05),
    0 2px 6px rgba(20,20,20,0.03);
  overflow: hidden;
  /* let content flow naturally instead of centering (overrides the
    generic .card-front/.card-back which use flex centering for timeline
    cards). Use higher-specificity/important flags so these layout rules
    aren't overridden by the global .card-front/.card-back later in the file. */
  display: block !important;
  align-items: initial !important;
  justify-content: initial !important;
  /* ensure these faces don't get forced to absolute/fullsize by the
    global rules declared later in the stylesheet */
  position: static !important;
  width: auto !important;
  height: auto !important;
}

.event-card.card-flip .card-back {
  /* center the textual back content both vertically and horizontally */
  display: flex !important;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  transform: rotateY(180deg);
  background: #fff;
  text-align: center;
  padding: 22px; /* ensure consistent padding when display was overridden */
}

.event-card.card-flip .card-back .back-content {
  /* readable typography on the back face */
  width: 100%;
  max-width: 56ch; /* limit line length for readability */
  color: var(--ink);
  line-height: 1.5;
  font-size: 0.98rem;
}
.event-card.card-flip .card-back .back-content p {
  margin: 0 0 0.75rem 0;
}
.event-card.card-flip .card-back .back-content p:last-child {
  margin-bottom: 0;
}

/* Style the second paragraph (the accompaniment line) to be slightly muted
   and italic to visually separate it from the main description. */
.event-card.card-flip .card-back .back-content p:last-child {
  font-style: italic;
  color: var(--muted);
  font-size: 0.95rem;
}

/* Prevent very long words/URLs from overflowing */
.event-card.card-flip .card-front,
.event-card.card-flip .card-back {
  word-break: break-word;
  overflow-wrap: anywhere;
}

/* Mobile fallback: 1 column */
@media (max-width: 760px) {
  .event-cards {
    grid-template-columns: 1fr;
  }
}

.time {
  display: inline-block;
  min-width: 64px;
  font-weight: 600;
  color: rgba(27, 27, 27, 0.85);   /* Soria dark charcoal */
  margin-right: 6px;
  font-size: 0.95rem;
}


/* Story  */
.card-flip {
  perspective: 1000px;
  cursor: pointer;
  margin-bottom: 2rem;
  width: 100%;
  max-width: 400px;   /* controls width of card for standalone timeline cards */
  height: 320px;      /* fixed height so content is visible */
  margin-left: auto;
  margin-right: auto;
}

.card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  transition: transform 0.8s;
  transform-style: preserve-3d;
}

.card-flip.flipped .card-inner {
  transform: rotateY(180deg);
}

.card-front,
.card-back {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
  border-radius: 12px;
  overflow: hidden;
  background: #fff;
  padding: 1rem;
  box-shadow: 0 4px 10px rgba(0,0,0,0.1);
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.card-front h3 {
  margin-top: 0;
}

.card-back {
  transform: rotateY(180deg);
  background: #f8f8f8;
  display: flex;
  align-items: center;
  justify-content: center;
}


.card-back img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* makes the image cover the whole card */
  border-radius: 8px;
  display: block;
}

/* When using card-flip inside the Schedule grid, remove the narrow max-width
   and make the flip card fit the grid cell. Keep a fixed height so front/back
   line up correctly. */
.event-cards .card-flip {
  max-width: none;
  margin: 0;
}

.event-cards .card-flip .card-front,
.event-cards .card-flip .card-back {
  border-radius: 14px; /* match .event-card visual */
  padding: 18px;
}

/* Final overrides for event-grid flip cards: ensure flexible height and
   consistent vertical alignment. Placed at the end to beat earlier
   global .card-front/.card-back rules. */
.event-card.card-flip .card-inner {
  /* Let the front define the height (flow layout). Back overlays the
     front via absolute positioning so it does not affect layout. */
  position: relative !important;
  display: block !important;
  width: 100%;
  height: auto !important;
}

.event-card.card-flip .card-front {
  /* front participates in layout and defines the host height */
  position: relative !important;
  display: block !important;
  padding: 22px !important;
}

/* subtle hint on front face for touch users */
/* hint is shown once above the cards (see .schedule-hint) */

/* hover grow for schedule cards to match timeline cards */
.event-card.card-flip {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  transform-origin: center;
}
.event-card.card-flip:hover {
  transform: scale(1.03);
  z-index: 5;
}

.event-card.card-flip .card-back {
  /* overlay back exactly over the front (same padding/box) */
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  align-items: center !important;
  text-align: center !important;
  padding: 22px !important;
}

/* Ensure the card-front/back fill the parent event card cell */
.event-cards .card-flip .card-front img,
.event-cards .card-flip .card-back img {
  border-radius: 12px;
}


/* Gallery */
.gallery{display:grid; grid-template-columns:repeat(3,1fr); gap:10px}
.gallery img{width:100%; height:210px; object-fit:cover; border-radius:12px}


/* Footer */
.site-footer{border-top:1px solid var(--line); background:#fff; padding:22px 0; text-align:center}

/* Responsive */
@media (max-width: 980px){
  .split{grid-template-columns:1fr; gap:20px}
  .timeline{grid-template-columns:1fr 1fr}
  .cards{grid-template-columns:1fr 1fr}
  .gallery{grid-template-columns:1fr 1fr}
  .rsvp-wrap{grid-template-columns:1fr}
}
@media (max-width: 640px){
  .nav-links{display:none; position:absolute; right:4%; top:58px; background:#fff; border:1px solid var(--line);
    border-radius:12px; padding:12px; flex-direction:column; gap:12px; box-shadow:var(--shadow)}
  .nav-toggle{display:block}
  .timeline{grid-template-columns:1fr}
  .cards{grid-template-columns:1fr}
  .gallery{grid-template-columns:1fr}
}

/* Carousel gallery */
.carousel {
  position: relative;
  overflow: hidden;
}

.carousel-track {
  display: flex;
  transition: transform 0.4s ease;
}

.carousel-track img {
  min-width: 100%;
  object-fit: contain;
  height: 500px;
  border-radius: var(--radius);
}

.carousel-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(255, 255, 255, 0.8);
  border: none;
  font-size: 2rem;
  padding: 0.2em 0.6em;
  cursor: pointer;
  z-index: 2;
  border-radius: 50%;
  box-shadow: var(--shadow);
}

.carousel-btn.prev {
  left: 10px;
}

.carousel-btn.next {
  right: 10px;
}

@media (max-width: 640px) {
  .carousel-track img {
    height: 300px;
  }
}

.countdown-timer {
  display: flex;
  justify-content: center;
  gap: 2rem;
  margin-top: 1rem;
  margin-bottom: 2rem;
}

.countdown-timer div {
  text-align: center;
  background: var(#fff, #f6f4f2);
  padding: 1rem;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

.countdown-timer span {
  display: block;
  font-size: 2rem;
  font-weight: bold;
  font-family: var(--heading-font);
}

.countdown-timer small {
  font-size: 0.9rem;
  color: var(--ink);
}

@media (max-width: 640px) {
  .countdown-timer {
    gap: 1rem;
  }
  .countdown-timer span {
    font-size: 1.5rem;
  }
}

.qrCode {
    display: flex;
    justify-content: center;
    align-items: center;
  }
  
.centeredImage {
  /* prefer half the container but never exceed 420px so the QR stays large on desktop
     while still scaling down on smaller viewports */
  width: min(50%, 420px);
  max-width: 420px;
  height: auto; /* maintain aspect ratio */
  display: block;
  margin: 0 auto;
}

/* Ensure wrapped QR image keeps its intended size when placed inside an anchor */
.qrCode a{display:inline-block}
.qrCode a .centeredImage{display:block; width: min(50%, 420px); max-width:420px; height:auto}