/* Motivul „arcadă" — preluat din decorul Portico: panou cu un colț rotunjit,
   structură hairline aurie, două panouri oglindite formând un portal. */

.arch-portal {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  pointer-events: none;
  z-index: 1;
}
.arch-portal svg {
  width: min(880px, 84vw);
  height: auto;
  color: rgba(169, 140, 90, .38);
}
.arch-portal path, .arch-portal rect, .arch-portal line {
  fill: none;
  stroke: currentColor;
  /* fără non-scaling-stroke: acela face ca stroke-dasharray să fie
     interpretat în px de ecran și rupe animația de trasare la scalare */
  stroke-width: .62;
}
.arch-portal .arch-frame { stroke: rgba(169, 140, 90, .3); }
.arch-portal .arch-arc,
.arch-portal .arch-line2,
.arch-portal .arch-line3 { stroke: rgba(169, 140, 90, .32); }

/* Trasarea arcadei la intrarea în pagină. */
.arch-draw path, .arch-draw rect, .arch-draw line {
  /* pathLength="100" pe fiecare path -> dash-ul e procentual, nu în px */
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
  animation: arch-trace 2.2s cubic-bezier(.45, 0, .2, 1) forwards;
}
.arch-draw .arch-frame { animation-delay: .15s; }
.arch-draw .arch-arc { animation-delay: .75s; }
.arch-draw .arch-line2 { animation-delay: 1.05s; }
.arch-draw .arch-line3 { animation-delay: 1.3s; }
@keyframes arch-trace { to { stroke-dashoffset: 0; } }

/* Arcada din intro: prezentă la seal și drawn, nu și la curtain. */
html[data-intro="curtain"] .intro .arch-portal { display: none; }
.intro .arch-portal svg { width: min(660px, 76vw); color: rgba(169, 140, 90, .34); }

/* Hero: portalul în spatele conținutului, încadrat în chenar. */
.hero .arch-portal svg { color: rgba(169, 140, 90, .3); }
.hero .arch-portal {
  /* începe sub navigație, ca liniile arcadei să nu treacă printre linkuri */
  inset: calc(var(--nav-h, 100px) + 8px) 38px 38px;
  padding-block: 10px;
}
.hero .arch-portal svg { max-height: 100%; }

/* Secțiuni: arcadă mică drept separator, în locul liniei simple. */
.arch-rule {
  display: block;
  width: 150px;
  height: 44px;
  margin: 28px auto 0;
  opacity: .75;
  color: var(--gold);
}
.arch-rule path { fill: none; stroke: currentColor; stroke-width: 1; }

/* Cardul de locație: chenar drept, cu arcul tangent desenat în interior —
   exact structura de pe invitație. */
.location-card {
  border-radius: 0;
  outline: 0;
  container-type: inline-size;   /* raza arcului se leagă de lățimea cardului */
}
.location-card::before {
  content: "";
  position: absolute;
  inset: 7px;
  border: 1px solid var(--hairline-soft);
  pointer-events: none;
}
.location-card::after {
  content: "";
  position: absolute;
  /* același inset ca ::before: laturile verticale se suprapun peste chenar,
     deci se vede doar arcul tăind colțurile — ca pe invitație */
  inset: 7px 7px -1px;
  border: 1px solid var(--hairline-soft);
  border-bottom: 0;
  /* Raza = 48,5% din lățimea arcului, aceeași valoare pe ambele axe -> arc
     circular. cqw se raportează la content-box, de aici compensarea. */
  --arch-w: calc(100cqw + 2 * (var(--pad-x, 55px) - 7px));
  border-radius: 48.5% 48.5% 0 0 / 34% 34% 0 0;   /* fallback */
  border-radius: calc(var(--arch-w) * .485) calc(var(--arch-w) * .485) 0 0;
  pointer-events: none;
}

/* Imagini în formă de arcadă (pentru fotografii, când le adăugați). */
.arch-photo { display: block; position: relative; }
/* decupajul stă pe imagine, ca un chenar drept să poată fi desenat în jurul ei */
.arch-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  /* 48.5% din lățime = raza de pe invitație; pe verticală, aceeași rază în px */
  border-radius: 48.5% 48.5% 0 0 / 42.4% 42.4% 0 0;
}

@media (max-width: 760px) {
  .arch-portal svg { width: 94vw; }
}

@media (prefers-reduced-motion: reduce) {
  .arch-draw path, .arch-draw rect {
    stroke-dasharray: none;
    stroke-dashoffset: 0;
    animation: none;
  }
}

/* ---------- Fotografie în arcadă ---------- */
.photo-section { padding-block: 20px 100px; }
.photo-arch { margin: 0; display: grid; justify-items: center; }
.photo-arch .arch-photo {
  width: min(430px, 76vw);
  aspect-ratio: 760 / 866;
  position: relative;
}
/* chenar drept în jurul fotografiei — dreptunghiul din care arcul e decupat */
.photo-arch .arch-photo::after {
  content: "";
  position: absolute;
  inset: -22px -22px -14px;
  border: 1px solid var(--hairline-soft);
  pointer-events: none;
}
.photo-arch figcaption {
  margin-top: 26px;
  font-family: var(--font-text);
  font-variant-caps: all-small-caps;
  font-size: 14px;
  letter-spacing: .19em;
  color: var(--muted);
}


/* Intro: cadru portret centrat (raportul invitației, 356:530). */
.intro .arch-portal svg {
  width: auto;
  height: min(100%, 860px);
  max-height: 100%;
  max-width: 100%;
  aspect-ratio: 360 / 534;
}
/* Hero: cadrul umple zona disponibilă. Arcul păstrează raza de 48,5% din
   lățime, iar laturile verticale se lungesc — viewBox-ul e recalculat în JS. */
.hero .arch-portal svg {
  width: 100%;
  height: 100%;
  max-width: min(880px, 100%);
}

/* Laptopuri (800–889px înălțime): arcul rămâne; singurul text care ar
   atinge curba e rândul de invitație, care trece pe două rânduri. */
@media (max-height: 889px) and (min-height: 800px) and (min-width: 761px) {
  .hero-content > .eyebrow { max-width: 230px; margin-inline: auto; line-height: 1.5; }
}
/* Sub 800px înălțime nu mai e loc nici așa: rămâne doar chenarul drept. */
@media (max-height: 799px) and (min-width: 761px) {
  .hero .arch-arc,
  .hero .arch-line2,
  .hero .arch-line3 { display: none; }
}

@media (max-width: 760px) {
  .intro .arch-portal svg { aspect-ratio: 424 / 534; }
  .hero .arch-portal { inset: calc(var(--nav-h, 100px) + 6px) 22px 22px; }
}