/* ============================================================
   Λουκάς & Βέρα — 10 Οκτωβρίου 2026
   Wedding website stylesheet
   ============================================================ */

/* ---------- Design tokens ---------- */
:root {
  /* Colours */
  --ivory:          #faf8f4;
  --ivory-deep:     #f4f0e9;
  --champagne:      #e9e1d3;
  --taupe:          #b3a894;
  --silver:         #c8c4bc;
  --line:           #ddd6c9;
  --text:           #3c3835;
  --text-soft:      #7a736a;
  --text-faint:     #9a938a;
  --white:          #ffffff;

  /* Typography */
  --font-serif:  "Cormorant Garamond", "Georgia", serif;
  --font-sans:   "Manrope", "Segoe UI", sans-serif;
  --font-script: "Great Vibes", cursive;

  /* Spacing */
  --space-xs: clamp(0.5rem, 1vw, 0.75rem);
  --space-s:  clamp(1rem, 2vw, 1.5rem);
  --space-m:  clamp(2rem, 4vw, 3rem);
  --space-l:  clamp(3.5rem, 8vw, 6.5rem);
  --space-xl: clamp(5rem, 11vw, 9rem);

  /* Effects */
  --shadow-soft:   0 10px 40px rgba(60, 56, 53, 0.08);
  --shadow-lifted: 0 18px 60px rgba(60, 56, 53, 0.14);
  --radius: 2px;
  --transition: 0.35s ease;
}

/* ---------- Reset / base ---------- */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--font-sans);
  font-weight: 300;
  color: var(--text);
  background-color: var(--ivory);
  line-height: 1.7;
  overflow-x: hidden;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

figure {
  margin: 0;
}

button {
  font: inherit;
  color: inherit;
  background: none;
  border: none;
  cursor: pointer;
}

a {
  color: inherit;
}

/* ---------- Layout helpers ---------- */
.container {
  width: min(100% - 2.5rem, 68rem);
  margin-inline: auto;
}

.container.narrow {
  max-width: 40rem;
  text-align: center;
}

/* ---------- Shared typographic elements ---------- */
.section-heading {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: clamp(1.9rem, 4.5vw, 3rem);
  letter-spacing: 0.04em;
  line-height: 1.2;
  text-align: center;
  color: var(--text);
}

.section-heading.align-start {
  text-align: left;
}

.script-heading {
  font-family: var(--font-script);
  font-weight: 400;
  font-size: clamp(2.4rem, 6vw, 4rem);
  color: var(--text);
  text-align: center;
}

.section-lede {
  max-width: 34rem;
  margin: var(--space-s) auto 0;
  text-align: center;
  color: var(--text-soft);
  font-size: clamp(0.95rem, 1.6vw, 1.05rem);
}

/* Thin decorative line fading out at both ends */
.section-ornament {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.85rem;
  margin: 0 auto var(--space-s);
  width: min(14rem, 60%);
}

.section-ornament::before,
.section-ornament::after {
  content: "";
  flex: 1;
  height: 1px;
}

.section-ornament::before {
  background: linear-gradient(to right, transparent, var(--taupe));
}

.section-ornament::after {
  background: linear-gradient(to left, transparent, var(--taupe));
}

/* ============================================================
   INVITATION LANDING PAGE (index.html)
   ============================================================ */
.invitation-page {
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  align-items: center;
  justify-content: center;
  /* Matches the grey backdrop inside invitation.webp:
     lightest at the top-right (#d9d9d9), darkest bottom-left (#9f9f9d) */
  background: linear-gradient(225deg, #dcdcdc 0%, #c2c2c1 48%, #9e9e9c 100%);
  transition: opacity 0.45s ease;
}

.invitation-page.is-leaving {
  opacity: 0;
}

.invitation-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  /* Roomy gap so the scaled-up photo never overlaps the hint text */
  gap: clamp(1.8rem, 5vh, 3rem);
  padding: clamp(0.5rem, 2vw, 1.5rem);
  animation: invitation-in 1.1s ease both;
}

@keyframes invitation-in {
  from {
    opacity: 0;
    transform: translateY(14px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

.invitation-link {
  display: block;
  outline-offset: 6px;
  transition: transform var(--transition);
}

.invitation-link:hover,
.invitation-link:focus-visible {
  transform: scale(1.015);
}

.invitation-link:focus-visible {
  outline: 1px solid #7c7c7a;
}

.invitation-image {
  /* Fit inside the viewport, then zoom in slightly: the photo has a wide
     grey margin around the tray, so the 1.1 scale enlarges the invitation
     itself while only the backdrop edge leaves the frame.
     The soft edge fade is baked into invitation.png itself (no CSS mask),
     so there is zero per-frame compositing cost. */
  max-height: min(84vh, 84svh);
  width: auto;
  max-width: 100%;
  transform: scale(1.1);
}

.invitation-hint {
  font-size: 0.72rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #6f6f6d;
  text-align: center;
}

/* ============================================================
   SECTION 1 — VIDEO HERO
   ============================================================ */
.hero {
  position: relative;
  height: 100vh;
  height: 100svh;
  overflow: hidden;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  background-color: var(--champagne); /* light fallback while the video loads */
}

.hero-video {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* Blurred ambient layer behind the main video — only used on wide
   screens where the portrait (9:16) footage is letterboxed.
   A static image: the blur is rasterized once, not per video frame. */
.hero-video-bg {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: blur(40px) brightness(0.9);
  transform: scale(1.15); /* pushes the blur's soft fringe off-screen */
  display: none;
}

/* Landscape screens (PCs, laptops, tablets held sideways): show the
   portrait video whole in the centre instead of a 6x cropped zoom,
   with the blurred copy filling the sides */
@media (min-width: 48rem) and (orientation: landscape) {
  .hero-video {
    object-fit: contain;
  }

  .hero-video-bg {
    display: block;
  }
}

/* Gentle veil so the light text stays readable over bright footage */
.hero-overlay {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: linear-gradient(
    to bottom,
    rgba(30, 27, 24, 0.12) 0%,
    rgba(30, 27, 24, 0.05) 45%,
    rgba(30, 27, 24, 0.38) 100%
  );
  pointer-events: none;
}

.hero-content {
  position: relative;
  z-index: 1;
  text-align: center;
  color: var(--white);
  padding-bottom: clamp(6rem, 16vh, 9rem);
  text-shadow: 0 1px 22px rgba(30, 27, 24, 0.35);
  animation: hero-in 1.6s ease 0.3s both;
}

@keyframes hero-in {
  from {
    opacity: 0;
    transform: translateY(16px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

.hero-eyebrow {
  font-size: 0.7rem;
  letter-spacing: 0.4em;
  text-transform: uppercase;
  opacity: 0.85;
  margin-bottom: 0.9rem;
}

.hero-title {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: clamp(1.9rem, 8vw, 4.6rem);
  letter-spacing: 0.12em;
  line-height: 1.15;
}

.hero-amp {
  font-style: italic;
  font-weight: 400;
  margin-inline: 0.1em;
}

.hero-date {
  margin-top: 1rem;
  font-size: clamp(0.75rem, 2vw, 0.95rem);
  letter-spacing: 0.42em;
  text-transform: uppercase;
  opacity: 0.9;
}

/* Sound control */
.sound-toggle {
  position: absolute;
  right: clamp(1rem, 3vw, 2rem);
  bottom: clamp(1.2rem, 4vh, 2.2rem);
  z-index: 2;
  width: 2.9rem;
  height: 2.9rem;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.55);
  color: var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(30, 27, 24, 0.28);
  transition: background var(--transition), border-color var(--transition);
}

.sound-toggle:hover,
.sound-toggle:focus-visible {
  background: rgba(30, 27, 24, 0.35);
  border-color: var(--white);
}

.sound-toggle svg {
  width: 1.2rem;
  height: 1.2rem;
}

.sound-toggle .icon-sound {
  display: none;
}

.sound-toggle[aria-pressed="true"] .icon-sound {
  display: block;
}

.sound-toggle[aria-pressed="true"] .icon-muted {
  display: none;
}

/* Short landscape screens (phones held sideways): keep the title,
   date and controls comfortably inside the hero */
@media (max-height: 30rem) {
  .hero-content {
    padding-bottom: 4.5rem;
  }

  .hero-eyebrow {
    margin-bottom: 0.4rem;
  }

  .hero-date {
    margin-top: 0.5rem;
  }
}

/* Scroll indicator */
.scroll-indicator {
  position: absolute;
  left: 50%;
  bottom: clamp(1.2rem, 4vh, 2.2rem);
  transform: translateX(-50%);
  z-index: 2;
  display: block;
  width: 2rem;
  height: 3.2rem;
}

.scroll-indicator-line {
  position: absolute;
  left: 50%;
  top: 0;
  width: 1px;
  height: 100%;
  background: rgba(255, 255, 255, 0.75);
  transform-origin: top;
  animation: scroll-hint 2.4s ease-in-out infinite;
}

@keyframes scroll-hint {
  0%   { transform: scaleY(0); opacity: 0; }
  35%  { transform: scaleY(1); opacity: 1; }
  70%  { transform: scaleY(1); opacity: 0; }
  100% { transform: scaleY(0); opacity: 0; }
}

/* ============================================================
   SECTION 2 — COUNTDOWN
   ============================================================ */
.countdown-section {
  padding: var(--space-xl) 0;
  background: var(--ivory);
  text-align: center;
}

.countdown[hidden] {
  display: none;
}

.countdown {
  display: flex;
  align-items: stretch;
  justify-content: center;
  gap: clamp(0.9rem, 4vw, 2.6rem);
  margin-top: var(--space-m);
}

.countdown-unit {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: clamp(3.4rem, 12vw, 6rem);
}

.countdown-value {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: clamp(2.4rem, 8vw, 4.4rem);
  line-height: 1.1;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}

.countdown-label {
  margin-top: 0.5rem;
  font-size: 0.62rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--text-faint);
}

.countdown-divider {
  width: 1px;
  background: var(--line);
  align-self: stretch;
  margin-block: 0.4rem;
}

.countdown-complete {
  margin-top: var(--space-m);
  font-family: var(--font-serif);
  font-style: italic;
  font-size: clamp(1.5rem, 4vw, 2.3rem);
  color: var(--text-soft);
}

/* Very narrow phones (320px and below, foldables): tighten the
   countdown so all four units stay on one line without overflow */
@media (max-width: 24rem) {
  .countdown {
    gap: 0.55rem;
  }

  .countdown-unit {
    min-width: 2.75rem;
  }

  .countdown-value {
    font-size: 2rem;
  }

  .countdown-label {
    font-size: 0.56rem;
    letter-spacing: 0.2em;
  }
}

/* ============================================================
   SECTION 3 — COUPLE IMAGE FEATURE
   ============================================================ */
.couple-feature {
  padding: var(--space-l) 0 var(--space-xl);
  background: var(--ivory);
}

/* Two full portraits, one below the other, centered —
   each fades up gently as it scrolls into view (via .reveal) */
.couple-feature-grid {
  display: grid;
  gap: var(--space-l);
  justify-items: center;
}

.couple-photo {
  width: min(100%, 32rem);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-soft);
}

.couple-photo img {
  width: 100%;
  height: auto;
}

/* ============================================================
   SECTION 4 — WEDDING DAY INTRODUCTION
   ============================================================ */
.day-intro {
  padding: var(--space-xl) 0;
  background: var(--ivory-deep);
}

.parents-note {
  margin-top: var(--space-m);
  font-family: var(--font-serif);
  font-size: clamp(1.05rem, 2vw, 1.25rem);
  color: var(--text-soft);
  line-height: 1.9;
}

.parents-label {
  display: block;
  font-family: var(--font-sans);
  font-size: 0.62rem;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--text-faint);
  margin-bottom: 0.7rem;
}

/* ============================================================
   SECTIONS 5 & 6 — GROOM'S / BRIDE'S HOUSE
   ============================================================ */
.houses {
  padding: var(--space-xl) 0;
  background: var(--ivory);
}

.houses-grid {
  position: relative;
  display: grid;
  gap: var(--space-m);
  max-width: 52rem;
  margin-inline: auto;
}

/* Thin timeline element connecting the two cards */
.houses-grid::before {
  content: "";
  position: absolute;
  left: 50%;
  top: -1.2rem;
  bottom: -1.2rem;
  width: 1px;
  background: var(--line);
  transform: translateX(-50%);
}

.house-card {
  position: relative;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-soft);
  padding: clamp(2rem, 5vw, 3rem) clamp(1.5rem, 4vw, 2.5rem);
  text-align: center;
}

.house-time-dot {
  position: absolute;
  top: -5px;
  left: 50%;
  transform: translateX(-50%);
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--ivory);
  border: 1px solid var(--taupe);
}

.house-time {
  font-family: var(--font-serif);
  font-size: clamp(1.8rem, 4vw, 2.4rem);
  color: var(--text);
  line-height: 1.2;
}

.house-title {
  margin-top: 0.4rem;
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: clamp(1.15rem, 2.5vw, 1.4rem);
  letter-spacing: 0.05em;
}

.house-location {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  margin-top: 0.9rem;
  font-size: 0.85rem;
  color: var(--text-soft);
}

.pin-icon {
  width: 0.95rem;
  height: 0.95rem;
  flex-shrink: 0;
  color: var(--taupe);
}

/* Map buttons (shared) */
.map-button {
  display: inline-block;
  margin-top: 1.5rem;
  padding: 0.75rem 1.9rem;
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--text);
  border: 1px solid var(--taupe);
  border-radius: var(--radius);
  transition: background var(--transition), color var(--transition);
}

.map-button:hover,
.map-button:focus-visible {
  background: var(--text);
  border-color: var(--text);
  color: var(--ivory);
}

@media (min-width: 48rem) {
  .houses-grid {
    grid-template-columns: 1fr 1fr;
    align-items: stretch;
  }

  /* Horizontal connecting line between the two cards on wide screens */
  .houses-grid::before {
    left: -2rem;
    right: -2rem;
    top: 50%;
    bottom: auto;
    width: auto;
    height: 1px;
    transform: translateY(-50%);
  }

  .house-time-dot {
    top: 50%;
    left: -5px;
    transform: translateY(-50%);
  }

  .house-card + .house-card .house-time-dot {
    left: auto;
    right: -5px;
  }
}

/* ============================================================
   SECTIONS 7 & 8 — CHURCH & RECEPTION VENUE
   ============================================================ */
.venue-feature {
  padding: var(--space-xl) 0;
  background: var(--ivory);
}

.venue-feature-alt {
  background: var(--ivory-deep);
}

.venue-grid {
  display: grid;
  gap: var(--space-m);
  align-items: center;
}

.venue-photo img {
  width: 100%;
  border-radius: var(--radius);
  box-shadow: var(--shadow-soft);
}

.venue-eyebrow {
  font-size: 0.66rem;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--taupe);
  margin-bottom: 0.9rem;
}

.venue-meta {
  margin-top: 0.8rem;
  font-size: 0.85rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-soft);
}

.venue-time {
  margin-top: 0.35rem;
  font-family: var(--font-serif);
  font-size: clamp(1.15rem, 2.5vw, 1.4rem);
  font-style: italic;
  color: var(--text);
}

.venue-text {
  margin-top: 1rem;
  max-width: 28rem;
  color: var(--text-soft);
  font-size: 0.95rem;
}

@media (min-width: 48rem) {
  .venue-grid {
    grid-template-columns: 1.2fr 1fr;
    gap: var(--space-l);
  }

  /* Alternate the image side for the reception section */
  .venue-grid-reverse .venue-photo {
    order: 2;
  }

  .venue-grid-reverse .venue-details {
    order: 1;
    justify-self: end;
    text-align: right;
  }

  .venue-grid-reverse .section-heading.align-start {
    text-align: right;
  }

  .venue-grid-reverse .venue-text {
    margin-left: auto;
  }
}

/* ============================================================
   SECTION 9 — GALLERY
   ============================================================ */
.gallery-section {
  padding: var(--space-xl) 0;
  background: var(--ivory);
  text-align: center;
}

/* A calm pair of tiles, side by side at every screen size */
.gallery {
  margin-top: var(--space-m);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-s);
  max-width: 56rem;
  margin-inline: auto;
}

.gallery-item {
  display: block;
  width: 100%;
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-soft);
  padding: 0;
  transition: transform var(--transition), box-shadow var(--transition);
}

.gallery-item:hover,
.gallery-item:focus-visible {
  transform: translateY(-3px);
  box-shadow: var(--shadow-lifted);
}

.gallery-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s ease;
}

.gallery-item:hover img {
  transform: scale(1.02);
}

.gallery-item {
  aspect-ratio: 3 / 4;
}

/* Staggered fade: the container itself doesn't fade — each tile
   rises softly on its own, the second a beat after the first */
.gallery.reveal {
  opacity: 1;
  transform: none;
  transition: none;
}

html:not(.no-js) .gallery.reveal:not(.is-visible) .gallery-item {
  opacity: 0;
}

.gallery.reveal.is-visible .gallery-item {
  animation: gallery-tile-in 1.2s ease backwards;
}

.gallery.reveal.is-visible .gallery-item:nth-child(2) {
  animation-delay: 0.3s;
}

@keyframes gallery-tile-in {
  from {
    opacity: 0;
    transform: translateY(18px);
  }
}

@media (min-width: 48rem) {
  .gallery {
    gap: var(--space-m);
  }
}

/* ============================================================
   SECTION 10 — FINAL MESSAGE + FOOTER
   ============================================================ */
.final-message {
  padding: var(--space-xl) 0;
  background: var(--ivory-deep);
}

.monogram {
  font-family: var(--font-serif);
  font-size: clamp(1.6rem, 4vw, 2.2rem);
  letter-spacing: 0.28em;
  color: var(--taupe);
  margin-bottom: var(--space-s);
}

.monogram-amp {
  font-style: normal;
  font-size: 0.75em;
  margin-inline: 0.15em;
}

.final-names {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: clamp(1.8rem, 5vw, 2.8rem);
  letter-spacing: 0.14em;
}

.final-date {
  margin: 0.6rem 0 var(--space-s);
  font-size: 0.8rem;
  letter-spacing: 0.5em;
  color: var(--text-soft);
}

.final-text {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: clamp(1.1rem, 2.5vw, 1.4rem);
  color: var(--text-soft);
}

.site-footer {
  padding: var(--space-m) 0;
  text-align: center;
  background: var(--ivory);
  border-top: 1px solid var(--line);
  font-size: 0.72rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--text-faint);
}

/* ============================================================
   LIGHTBOX
   ============================================================ */
.lightbox[hidden] {
  display: none;
}

.lightbox {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(1rem, 4vw, 3rem);
  background: rgba(250, 248, 244, 0.985);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.lightbox.is-open {
  opacity: 1;
}

.lightbox-figure {
  max-width: min(92vw, 60rem);
  max-height: 86vh;
  max-height: 86svh;
  display: flex;
  align-items: center;
  justify-content: center;
}

.lightbox-image {
  max-width: 100%;
  max-height: 86vh;
  max-height: 86svh;
  width: auto;
  height: auto;
  border-radius: var(--radius);
  box-shadow: var(--shadow-lifted);
}

.lightbox-close,
.lightbox-nav {
  position: absolute;
  z-index: 101;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.9rem;
  height: 2.9rem;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: var(--white);
  color: var(--text);
  box-shadow: var(--shadow-soft);
  transition: background var(--transition), color var(--transition);
}

.lightbox-close:hover,
.lightbox-nav:hover,
.lightbox-close:focus-visible,
.lightbox-nav:focus-visible {
  background: var(--text);
  color: var(--ivory);
}

.lightbox-close svg,
.lightbox-nav svg {
  width: 1.1rem;
  height: 1.1rem;
}

.lightbox-close {
  top: clamp(0.8rem, 3vw, 1.6rem);
  right: clamp(0.8rem, 3vw, 1.6rem);
}

.lightbox-prev {
  left: clamp(0.4rem, 2vw, 1.6rem);
  top: 50%;
  transform: translateY(-50%);
}

.lightbox-next {
  right: clamp(0.4rem, 2vw, 1.6rem);
  top: 50%;
  transform: translateY(-50%);
}

/* Lock background scrolling while the lightbox is open */
body.lightbox-open {
  overflow: hidden;
}

/* ============================================================
   SCROLL-REVEAL ANIMATIONS
   ============================================================ */
.reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.9s ease, transform 0.9s ease;
}

.reveal.is-visible {
  opacity: 1;
  transform: none;
}

.reveal-delay {
  transition-delay: 0.18s;
}

/* If JavaScript never runs, .reveal elements must still be visible */
.no-js .reveal {
  opacity: 1;
  transform: none;
}

/* ============================================================
   REDUCED MOTION
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  .reveal {
    opacity: 1;
    transform: none;
  }

  .scroll-indicator-line {
    animation: none;
    transform: none;
    opacity: 0.75;
  }
}