/* ===================== RESET & BASE ===================== */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

:root {
  --paper-light: #ffffff;
  --paper-cream: #ffffff;
  --paper-dark: #ecd9b0;
  --ink: #732318;
  --ink-soft: #9a2e2e;
  --gold: #b08d57;
  --gold-dark: #8a6d3b;
  --shadow: rgba(74, 55, 40, 0.35);

  /* zrnasta tekstura hartije (SVG šum), preslikana sa fotografije stare koverte */
  --paper-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.45 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");

  /* linije preloma koverte (X šara ka pečatu), preslikane sa fotografije */
  --envelope-creases: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 300'%3E%3Cg stroke-linecap='round'%3E%3Cline x1='2' y1='2' x2='200' y2='150' stroke='rgba(255,255,255,0.22)' stroke-width='2'/%3E%3Cline x1='0' y1='0' x2='198' y2='148' stroke='rgba(60,42,24,0.45)' stroke-width='3'/%3E%3Cline x1='398' y1='2' x2='200' y2='150' stroke='rgba(255,255,255,0.18)' stroke-width='2'/%3E%3Cline x1='400' y1='0' x2='202' y2='148' stroke='rgba(60,42,24,0.45)' stroke-width='3'/%3E%3Cline x1='2' y1='298' x2='200' y2='150' stroke='rgba(255,255,255,0.18)' stroke-width='2'/%3E%3Cline x1='0' y1='300' x2='198' y2='152' stroke='rgba(60,42,24,0.4)' stroke-width='3'/%3E%3Cline x1='398' y1='298' x2='200' y2='150' stroke='rgba(255,255,255,0.18)' stroke-width='2'/%3E%3Cline x1='400' y1='300' x2='202' y2='152' stroke='rgba(60,42,24,0.4)' stroke-width='3'/%3E%3C/g%3E%3C/svg%3E");
}

html, body {
  height: 100%;
}

body {
  font-family: "Cormorant Garamond", serif;
  color: var(--ink);
  background: var(--paper-cream);
  line-height: 1.65;
  overflow-x: hidden;
}

/* ===================== NASLOVNA KOVERTA ===================== */
.envelope-scene {
  position: fixed;
  inset: 0;
  z-index: 100;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    radial-gradient(ellipse at 50% 30%, rgba(255, 255, 255, 0.55), transparent 60%),
    linear-gradient(160deg, var(--paper-light), var(--paper-cream) 55%, var(--paper-dark));
  transition: opacity 0.8s ease, visibility 0.8s ease;
}

.envelope-scene.fade-out {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.envelope-wrap {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  perspective: 1800px;
}

.cover-kicker {
  font-size: 0.95rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

.envelope {
  position: relative;
  width: min(90vw, 460px);
  aspect-ratio: 4 / 3;
  cursor: pointer;
  transform: rotate(-1.5deg);
  transform-style: preserve-3d;
  filter: drop-shadow(0 30px 35px rgba(50, 32, 12, 0.45));
}

.envelope-body {
  position: absolute;
  inset: 0;
  background-color: #b9ab84;
  background-image:
    var(--paper-grain),
    var(--envelope-creases),
    radial-gradient(circle at 4% 6%, rgba(56, 40, 22, 0.55), transparent 26%),
    radial-gradient(circle at 96% 10%, rgba(56, 40, 22, 0.45), transparent 30%),
    radial-gradient(circle at 8% 94%, rgba(56, 40, 22, 0.5), transparent 34%),
    radial-gradient(circle at 94% 92%, rgba(56, 40, 22, 0.4), transparent 32%),
    radial-gradient(circle at 50% 50%, rgba(255, 250, 235, 0.2), transparent 55%),
    linear-gradient(135deg, #d6c9a1, #bfae82 55%, #a3916a);
  background-blend-mode: overlay, normal, normal, normal, normal, normal, normal, normal;
  background-size: 220px 220px, 100% 100%, cover, cover, cover, cover, cover, cover;
  clip-path: polygon(
    1.5% 4%, 12% 1%, 22% 2.5%, 35% 0.5%, 48% 2%, 62% 0%, 75% 2.2%, 88% 0.8%, 99% 5%,
    100% 14%, 98.6% 24%, 100% 36%, 98.9% 46%, 100% 58%, 98.7% 68%, 100% 80%, 98.5% 90%, 100% 97%,
    88% 99.3%, 74% 98%, 60% 100%, 46% 98.4%, 32% 100%, 18% 98.7%, 6% 100%, 0% 88%,
    1.3% 76%, 0% 64%, 1.5% 52%, 0% 40%, 1.1% 28%, 0% 16%
  );
  box-shadow: inset 0 0 55px rgba(56, 40, 22, 0.35);
}

.envelope-flap {
  position: absolute;
  inset: 0;
  clip-path: polygon(0.5% 4%, 50% 50%, 99.5% 4%, 88% 0.8%, 75% 2.2%, 62% 0%, 48% 2%, 35% 0.5%, 22% 2.5%, 12% 1%);
  background-image:
    var(--paper-grain),
    radial-gradient(circle at 15% 15%, rgba(56, 40, 22, 0.35), transparent 32%),
    radial-gradient(circle at 85% 10%, rgba(56, 40, 22, 0.3), transparent 30%),
    linear-gradient(165deg, #e0d2a9, #c3b184 70%);
  background-blend-mode: overlay, normal, normal, normal;
  background-size: 220px 220px, cover, cover, cover;
  transform-origin: 50% 4%;
  transform: rotateX(0deg);
  transition: transform 0.9s cubic-bezier(0.6, 0.05, 0.25, 1);
  filter: drop-shadow(0 3px 3px rgba(56, 40, 22, 0.4));
}

.envelope.is-open .envelope-flap {
  transform: rotateX(-160deg);
}

.envelope-photo {
  position: absolute;
  inset: 0;
  z-index: 4;
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
  filter: drop-shadow(0 20px 25px rgba(50, 32, 12, 0.4));
  transition: transform 0.9s cubic-bezier(0.6, 0.05, 0.25, 1), opacity 0.7s ease;
}

.envelope.is-open .envelope-photo {
  transform: scale(0.88) rotate(4deg);
  opacity: 0;
}

/* isečena po ivicama koverte da se sakrije šahovska pozadina zapečena u slici */
.envelope.has-photo .envelope-photo {
  clip-path: polygon(63% 7%, 91% 47%, 29% 93%, 14% 42%);
}

/* kad prava fotografija uspešno učita, ugasi CSS crtež ispod nje da se ne preklapaju */
.envelope.has-photo {
  aspect-ratio: 1 / 1;
}

.envelope.has-photo .envelope-body,
.envelope.has-photo .envelope-flap,
.envelope.has-photo .seal {
  opacity: 0;
}

.seal {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 108px;
  height: 108px;
  transform: translate(-50%, -50%);
  border-radius: 42% 58% 63% 37% / 45% 40% 60% 55%;
  background-image: var(--paper-grain),
    radial-gradient(circle at 32% 26%, #9c4a3a, #6e1414 55%, #3a0a0a 100%);
  background-blend-mode: soft-light, normal;
  background-size: 140px 140px, cover;
  box-shadow:
    0 6px 12px rgba(0, 0, 0, 0.45),
    inset 0 2px 4px rgba(255, 255, 255, 0.18),
    inset 0 -10px 14px rgba(0, 0, 0, 0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 3;
  cursor: pointer;
  transition: transform 0.5s ease, opacity 0.4s ease;
  animation: pulse-seal 2.6s ease-in-out infinite;
}

.seal::before,
.seal::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  background: inherit;
}

.seal::before {
  width: 16px;
  height: 18px;
  bottom: -7px;
  left: 26%;
}

.seal::after {
  width: 11px;
  height: 13px;
  bottom: -4px;
  right: 22%;
}

.envelope.is-open .seal {
  transform: translate(-50%, -50%) scale(0.4) rotate(20deg);
  opacity: 0;
  pointer-events: none;
}

.seal-emblem {
  font-family: "Cinzel", serif;
  font-size: 0.95rem;
  letter-spacing: 0.05em;
  color: #edccA3;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.15), 0 -1px 1px rgba(0, 0, 0, 0.4);
}

@keyframes pulse-seal {
  0%, 100% { box-shadow: 0 6px 12px rgba(0,0,0,0.45), inset 0 2px 4px rgba(255,255,255,0.2), inset 0 -8px 12px rgba(0,0,0,0.35), 0 0 0 0 rgba(124, 31, 31, 0.5); }
  50% { box-shadow: 0 6px 12px rgba(0,0,0,0.45), inset 0 2px 4px rgba(255,255,255,0.2), inset 0 -8px 12px rgba(0,0,0,0.35), 0 0 0 12px rgba(124, 31, 31, 0); }
}

.cover-names {
  font-family: "Pinyon Script", cursive;
  font-size: clamp(2.4rem, 7vw, 3.6rem);
  color: var(--gold);
  background: linear-gradient(135deg, #d4af6a, #b08d57 45%, #e6c98a 70%, #9a7a45);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  line-height: 1.2;
}

.hint {
  font-size: 0.85rem;
  letter-spacing: 0.1em;
  color: var(--ink-soft);
  text-transform: uppercase;
  opacity: 0.85;
  transition: opacity 0.5s ease;
}

.hint.is-hidden {
  opacity: 0;
}

/* ===================== INVITATION PAGE ===================== */
.invitation-page {
  position: relative;
  min-height: 100vh;
  width: 100%;
  background-color: var(--paper-cream);
  background-image: var(--paper-grain);
  background-blend-mode: overlay;
  background-size: 260px 260px;
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 1s ease, transform 1s ease;
}

.invitation-page.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* ===================== HERO FOTOGRAFIJA (full-width) ===================== */
.hero-photo {
  position: relative;
  width: 100%;
  min-height: 75vh;
  overflow: hidden;
  background: linear-gradient(to right, #ffffff 0%, #f3e6c8 40%, #d9b873 100%);
}

.hero-placeholder {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  color: var(--ink-soft);
}

/* desktop: slika sa desne strane, stapa se sa gradijentom sleva */
.hero-real {
  position: absolute;
  top: 0;
  right: 0;
  display: block;
  width: auto;
  max-width: 68%;
  height: 100%;
  object-fit: contain;
  object-position: right center;
  filter: grayscale(1) contrast(1.08) brightness(1.03);
  -webkit-mask-image:
    linear-gradient(to right, rgba(0,0,0,0.3) 0%, rgba(0,0,0,0.7) 10%, #000 22%, #000 94%, rgba(0,0,0,0.8) 100%),
    linear-gradient(to bottom, rgba(0,0,0,0.6) 0%, #000 8%, #000 90%, rgba(0,0,0,0.7) 100%);
  mask-image:
    linear-gradient(to right, rgba(0,0,0,0) 0%, rgba(0,0,0,0.4) 10%, #000 22%, #000 94%, rgba(0,0,0,0.8) 100%),
    linear-gradient(to bottom, rgba(0,0,0,0.6) 0%, #000 8%, #000 90%, rgba(0,0,0,0.7) 100%);
  -webkit-mask-composite: source-in;
  mask-composite: intersect;
}

/* kad prava slika postoji, ugasi isprekidani placeholder */
.hero-photo:has(.hero-real) .hero-placeholder {
  display: none;
}

.hero-fade {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(
    to bottom,
    rgba(255, 255, 255, 0) 70%,
    var(--paper-cream) 100%
  );
}

.hero-overlay {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 42%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 0 4vw;
  text-align: center;
  gap: 8px;
}

.hero-kicker {
  font-size: 1.2rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

.hero-names {
  font-family: "Pinyon Script", cursive;
  font-size: clamp(3.6rem, 11vw, 6.8rem);
  color: var(--gold);
  background: linear-gradient(135deg, #d4af6a, #b08d57 45%, #e6c98a 70%, #9a7a45);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  line-height: 1.2;
  filter: drop-shadow(0 2px 10px rgba(255, 255, 255, 0.8));
  /* malo niže od sredine / vrha fotografije */
  transform: translateY(clamp(20px, 5vh, 60px));
}

.hero-names .amp {
  font-family: "Cormorant Garamond", serif;
  font-style: italic;
  font-size: 0.6em;
  margin: 0 8px;
}

.content {
  max-width: 640px;
  margin: 0 auto;
  padding: clamp(20px, 6vw, 50px) clamp(20px, 6vw, 40px) clamp(50px, 10vh, 100px);
  text-align: center;
}

.ornament {
  color: var(--gold);
  font-size: 1.1rem;
  letter-spacing: 0.3em;
  margin-bottom: 10px;
}

.star {
  display: inline-block;
  animation: float-star 3s ease-in-out infinite;
}

.ornament .star:last-child {
  animation-delay: 1.5s;
}

.divider i {
  display: inline-block;
  animation: float-star 3s ease-in-out infinite;
}

@keyframes float-star {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-10px);
  }
}

/* ===================== ZVEZDICE KOJE LEBDE PREKO CELE STRANICE ===================== */
.floating-stars {
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 6;
}

.star-particle {
  position: absolute;
  bottom: -40px;
  color: var(--gold);
  opacity: 0;
  font-size: 1.6rem;
  animation: float-up 15s infinite ease-in-out;
}

.star-particle:nth-child(1) { left: 10%; animation-delay: 0s; font-size: 1.2rem; }
.star-particle:nth-child(2) { left: 30%; animation-delay: 2s; font-size: 1.8rem; }
.star-particle:nth-child(3) { left: 50%; animation-delay: 4s; font-size: 1.3rem; }
.star-particle:nth-child(4) { left: 70%; animation-delay: 1s; font-size: 1.6rem; }
.star-particle:nth-child(5) { left: 90%; animation-delay: 3s; font-size: 1.1rem; }
.star-particle:nth-child(6) { left: 20%; animation-delay: 6s; font-size: 1.4rem; }

@keyframes float-up {
  0% {
    transform: translateY(0) translateX(0);
    opacity: 0;
  }
  10% {
    opacity: 0.45;
  }
  50% {
    transform: translateY(-50vh) translateX(15px);
  }
  90% {
    opacity: 0.35;
  }
  100% {
    transform: translateY(-105vh) translateX(-15px);
    opacity: 0;
  }
}

.kicker {
  font-size: 1.15rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-bottom: 8px;
}

.lead {
  max-width: 46ch;
  margin: 0 auto 34px;
  font-size: clamp(1.15rem, 2.2vw, 1.4rem);
  color: var(--ink-soft);
  font-style: italic;
  line-height: 1.8;
}

.divider {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin: 56px auto;
  max-width: 320px;
  color: var(--gold);
}

.divider span {
  height: 1px;
  flex: 1;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
}

.details-block,
.schedule,
.location,
.countdown-block,
.rsvp {
  padding: 10px 0;
}

/* ===================== KALENDAR ===================== */
.calendar-card {
  position: relative;
  max-width: 360px;
  margin: 0 auto;
  padding-bottom: 22px;
  background: var(--paper-light);
  border: 1px solid var(--gold);
  border-radius: 14px;
  box-shadow: 0 10px 28px rgba(115, 35, 24, 0.12);
  overflow: visible;
}

.calendar-rings {
  position: absolute;
  top: -10px;
  left: 0;
  right: 0;
  display: flex;
  justify-content: space-between;
  padding: 0 70px;
}

.calendar-rings span {
  width: 10px;
  height: 22px;
  border-radius: 6px;
  background: linear-gradient(90deg, var(--gold-dark), var(--gold), var(--gold-dark));
}

.calendar-head {
  padding: 22px 16px 14px;
  background: var(--ink);
  color: var(--paper-light);
  border-radius: 13px 13px 0 0;
}

.calendar-month {
  font-family: "Pinyon Script", cursive;
  font-size: 2.6rem;
  line-height: 1.1;
}

.calendar-year {
  font-family: "Cinzel", serif;
  font-size: 1rem;
  letter-spacing: 0.3em;
  color: #f3e6c8;
}

.calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
  padding: 16px 16px 6px;
  font-size: 1.15rem;
  color: var(--ink-soft);
}

.calendar-grid span {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1;
}

.calendar-grid .calendar-dow {
  aspect-ratio: auto;
  padding-bottom: 6px;
  font-family: "Cinzel", serif;
  font-size: 0.72rem;
  color: var(--gold-dark);
}

/* dan venčanja: broj na zlatnom srcu */
.calendar-grid .calendar-day-wedding {
  position: relative;
  z-index: 0;
  font-weight: 600;
  color: var(--paper-light);
}

.calendar-day-wedding::before {
  content: "♥";
  position: absolute;
  inset: 0;
  z-index: -1;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2.6em;
  line-height: 1;
  color: var(--ink);
}

.calendar-caption {
  font-family: "Cinzel", serif;
  font-size: 0.95rem;
  letter-spacing: 0.08em;
  color: var(--ink);
}

/* zlatni okvir oko sekcija: talasasta linija sa ukrasnim uglovima (SVG border-image);
   unutrašnjost talasa je obojena, a "fill" boji i sredinu sekcije */
.details-block,
.schedule,
.location,
.countdown-block,
.rsvp {
  max-width: 720px;
  margin-left: auto;
  margin-right: auto;
  padding: 26px clamp(12px, 4vw, 36px) 30px;
  border: 28px solid transparent;
  border-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'%3E%3Cg id='c'%3E%3Cpath d='M40 20C28 20 20 28 20 40L40 40ZM40 20C47 15 53 15 60 20C67 25 73 25 80 20L80 40L40 40ZM40 40H80V80H40Z' fill='%23f8f0e1'/%3E%3Cg fill='none' stroke='%23b08d57' stroke-width='1.4' stroke-linecap='round'%3E%3Cpath d='M40 20C28 20 20 28 20 40'/%3E%3Cpath d='M36 9C20 9 9 20 9 36' stroke-width='0.8'/%3E%3Cpath d='M40 20C47 15 53 15 60 20C67 25 73 25 80 20'/%3E%3C/g%3E%3Ccircle cx='15' cy='15' r='2.2' fill='%23b08d57'/%3E%3C/g%3E%3Cuse href='%23c' transform='rotate(90 60 60)'/%3E%3Cuse href='%23c' transform='rotate(180 60 60)'/%3E%3Cuse href='%23c' transform='rotate(270 60 60)'/%3E%3C/svg%3E") 40 fill round;
}

@media (max-width: 480px) {
  .details-block,
  .schedule,
  .location,
  .countdown-block,
  .rsvp {
    border-width: 20px;
  }
}

.details {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: clamp(20px, 5vw, 60px);
  margin: 10px 0 20px;
}

.detail {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.detail-icon {
  font-size: 1.3rem;
  margin-bottom: 6px;
}

.detail-label {
  font-size: 1rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold-dark);
  margin-bottom: 8px;
}

.detail-value {
  font-size: 1.6rem;
  font-weight: 600;
  line-height: 1.4;
  color: var(--ink);
}

.countdown {
  display: flex;
  justify-content: center;
  gap: clamp(24px, 6vw, 56px);
  margin: 0 0 10px;
}

.countdown-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 60px;
}

.countdown-number {
  font-family: "Cinzel", serif;
  font-size: clamp(1.8rem, 5vw, 2.6rem);
  color: var(--gold-dark);
  font-weight: 600;
}

.countdown-label {
  font-size: 0.85rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-top: 2px;
}

.photo-icon {
  font-size: 2.4rem;
}


/* ===================== NASLOVI SEKCIJA ===================== */
.section-title {
  font-family: "Cinzel", serif;
  font-size: clamp(1.6rem, 3.6vw, 2.1rem);
  color: var(--ink);
  margin-bottom: 28px;
}

/* ===================== RASPORED DANA ===================== */
.schedule-list {
  list-style: none;
  max-width: 420px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 18px;
  font-size: 1.35rem;
}

.schedule-list li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  border-bottom: 1px dashed rgba(139, 109, 59, 0.3);
  padding-bottom: 10px;
}

.schedule-when {
  display: flex;
  align-items: center;
  gap: 14px;
}

.schedule-icon {
  font-size: 1.2rem;
}

.schedule-time {
  font-family: "Cinzel", serif;
  color: var(--gold-dark);
  font-weight: 600;
}

.schedule-event {
  color: var(--ink-soft);
}

/* ===================== LOKACIJA ===================== */
.location {
  margin-top: 10px;
}

.location-text {
  color: var(--ink-soft);
  font-size: 1.35rem;
  line-height: 1.7;
  margin-bottom: 18px;
}

.location-link {
  display: inline-block;
  padding: 8px 22px;
  font-size: 1.05rem;
  letter-spacing: 0.05em;
  color: var(--ink);
  border: 1px solid var(--ink);
  border-radius: 30px;
  text-decoration: none;
  transition: background 0.25s ease, color 0.25s ease;
}

.location-link:hover {
  background: var(--ink);
  color: var(--paper-light);
}

/* ===================== POTVRDA DOLASKA ===================== */
.rsvp-text {
  color: var(--ink-soft);
  font-size: 1.35rem;
  line-height: 1.7;
  margin-bottom: 22px;
}

.rsvp-contacts {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 16px;
}

.rsvp-contact {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 160px;
  padding: 12px 24px;
  color: var(--ink);
  border: 1px solid var(--ink);
  border-radius: 30px;
  text-decoration: none;
  transition: background 0.25s ease, color 0.25s ease;
}

.rsvp-contact:hover {
  background: var(--ink);
  color: var(--paper-light);
}

.rsvp-name {
  font-family: "Cinzel", serif;
  font-size: 1.05rem;
  letter-spacing: 0.05em;
}

.rsvp-phone {
  font-size: 1.2rem;
}

.signature {
  margin-top: 20px;
  font-family: "Italiano", cursive;
  font-size: 1.6rem;
  color: var(--ink-soft);
}

/* ===================== RESPONSIVE ===================== */
@media (max-width: 768px) {
  .hero-photo {
    min-height: 0;
    background: #f3e6c8;
  }

  /* mobilni: slika odmah na vrhu, preko cele širine */
  .hero-real {
    position: relative;
    width: 100%;
    max-width: 100%;
    height: auto;
    -webkit-mask-image: none;
    mask-image: none;
  }

  .hero-fade {
    background: linear-gradient(
      to bottom,
      rgba(255, 255, 255, 0.55) 0%,
      rgba(255, 255, 255, 0.1) 22%,
      rgba(255, 255, 255, 0) 55%,
      var(--paper-cream) 100%
    );
  }

  .hero-overlay {
    width: 100%;
    justify-content: flex-start;
    padding: clamp(36px, 8vh, 80px) 16px 0;
  }
}

@media (max-width: 480px) {
  .details {
    gap: 20px;
  }
}