/* =========================================================================
   closing.css — §9 location, §10 PROSLAVI CTA, §11 newsletter.
   ========================================================================= */

/* =========================================================================
   §9 LOCATION
   ========================================================================= */
.location { background: var(--cream); }
.location__inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: clamp(var(--s-8), 5vw, var(--s-16));
  row-gap: var(--s-8);
  align-items: center;
}
.location__title { color: var(--teal-deep); margin: var(--s-3) 0 var(--s-8); }

.location__dl {
  display: grid;
  grid-template-columns: minmax(90px, auto) 1fr;
  gap: var(--s-3) var(--s-6);
  margin-bottom: var(--s-8);
}
.location__dl dt {
  font-size: var(--fs-small);
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--teal-deep);
}
.location__dl dd { color: var(--cocoa); }
.location__dl a { color: var(--teal-deep); text-decoration: underline; text-underline-offset: 3px; }
.location__note { opacity: .75; font-size: .92em; }

.location__actions { display: flex; flex-wrap: wrap; gap: var(--s-4); }
.location__all { color: var(--teal-deep); }

.location__secondary {
  margin-top: clamp(var(--s-8), 4vw, var(--s-12));
  padding: var(--s-5) var(--s-6);
  border-radius: var(--r-md);
  background: var(--lilac);
}
.location__secondary-title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--fs-h3);
  color: var(--teal-deep);   /* 7.4:1 on lilac */
  margin-bottom: var(--s-2);
  font-variation-settings: var(--wonk-sub);
}
.location__secondary p { color: var(--cocoa); font-size: var(--fs-small); }

/* Anything awaiting client confirmation is marked, never guessed. */
[data-pending] {
  display: inline-block;
  border-bottom: 1.5px dashed rgba(var(--cocoa-rgb), .5);
}

.location__map {
  border-radius: var(--r-lg);
  overflow: hidden;
  aspect-ratio: 1;
}
.location__map svg { width: 100%; height: 100%; }

.location__pin-pulse { transform-origin: center; animation: cb-pin 2.4s var(--ease-out) infinite; }
@keyframes cb-pin {
  0%   { transform: scale(.6); opacity: .75; }
  70%  { transform: scale(2.4); opacity: 0; }
  100% { transform: scale(2.4); opacity: 0; }
}

@media (max-width: 900px) {
  .location__inner { grid-template-columns: 1fr; }
  .location__map { order: -1; max-width: 460px; }
}

/* =========================================================================
   §10 CTA — PROSLAVI
   The arc lives in a section with overflow:hidden, so it is sized to sit
   INSIDE the container rather than being clipped to unreadable slivers —
   the mistake §4 made first time round.
   ========================================================================= */
.cta {
  position: relative;
  overflow: hidden;
  background: var(--cream);
  display: grid;
  place-items: center;
  padding-block: clamp(64px, 7vw, 132px);
}
.arc--cta {
  top: 50%;
  width: min(92vw, 720px);
  transform: translate(-50%, -50%);
}
.arc--cta text {
  font-size: 27px;
  stroke: var(--hot-pink);
  stroke-width: 1.2;
  opacity: .85;
}

.cta__stack { position: relative; z-index: 1; display: grid; place-items: center; }
.cta__media {
  width: min(58vw, 420px);
  aspect-ratio: 4 / 5;
  border-radius: var(--r-arch);
  overflow: hidden;
  background: var(--sand);
  isolation: isolate;
  -webkit-mask-image: radial-gradient(#fff, #fff);
          mask-image: radial-gradient(#fff, #fff);
}
.cta__media img { width: 100%; height: 100%; object-fit: cover; }

.cta__circle {
  position: absolute;
  right: -6%;
  bottom: -4%;
  z-index: 2;
  display: grid;
  place-items: center;
  width: clamp(96px, 13vw, 148px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--hot-pink);
  color: var(--ink);          /* 6.07:1 */
  font-family: var(--font-ui);
  font-size: var(--fs-small);
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  will-change: transform;
  transition: box-shadow var(--dur-fast) var(--ease-out);
}
.cta__circle:hover { box-shadow: 0 12px 34px rgba(255, 79, 163, .42); }

@media (max-width: 600px) {
  .arc--cta { width: min(128vw, 520px); }
  .arc--cta text { font-size: 30px; }
  .cta__media { width: 72vw; }
  .cta__circle { right: -4%; bottom: -3%; }
}

/* =========================================================================
   §11 NEWSLETTER
   ========================================================================= */
.newsletter { background: var(--cream); padding-block: clamp(32px, 3.4vw, 56px); }
.newsletter__block {
  position: relative;
  border-radius: var(--r-lg);
  background: var(--teal);
  color: var(--cream);
  padding: clamp(var(--s-10), 4vw, var(--s-16)) clamp(var(--s-5), 5vw, var(--s-20));
  text-align: center;
  overflow: hidden;
}
.newsletter__title { color: var(--cream); }  /* 4.89:1 on teal */
.newsletter__lead {
  margin: var(--s-4) auto 0;
  max-width: 46ch;
  color: var(--cream);
  opacity: .92;
}

.newsletter__form {
  margin: clamp(var(--s-8), 3vw, var(--s-10)) auto 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3);
  justify-content: center;
  max-width: 560px;
}
.newsletter__input {
  flex: 1 1 240px;
  min-width: 0;
  padding: clamp(var(--s-3), 1.2vw, var(--s-4)) var(--s-6);
  border: 2px solid transparent;
  border-radius: var(--r-pill);
  background: var(--bubblegum);
  color: var(--ink);          /* 12.9:1 on bubblegum */
  font-size: var(--fs-body);
}
.newsletter__input::placeholder { color: var(--cocoa); opacity: .8; }
.newsletter__input[aria-invalid='true'] { border-color: var(--ink); }
.newsletter__submit { flex: 0 0 auto; }

.newsletter__msg {
  margin-top: var(--s-4);
  min-height: 1.4em;
  font-size: var(--fs-small);
  font-weight: 600;
  color: var(--cream);
}
.newsletter__msg.is-error { color: var(--bubblegum); }

/* Confetti canvas for the success burst. */
.newsletter__canvas {
  position: absolute;
  inset: 0;
  pointer-events: none;
}