/* ==========================================================================
   components.css — reusable building blocks
   Buttons, photo frames, text block, details list, reveal animations.
   (Shared foundations copied from the earlier wedding sites, then restyled
   through tokens.css. Components for this couple are added below.)
   Naming: .block, .block__part, .block--variant  (the "BEM" convention)
   ========================================================================== */

/* ---------- Button ---------- */
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: 48px;
  padding: 0.8rem 2.2rem;
  border: 1px solid var(--color-plum);
  border-radius: 999px;
  background: var(--color-plum);
  color: var(--color-white);
  font-family: var(--font-display);
  font-size: 0.85rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.35s var(--ease-out), color 0.35s var(--ease-out), transform 0.35s var(--ease-out);
}

.button:hover {
  background: transparent;
  color: var(--color-plum);
  transform: translateY(-2px);
}

.button--outline {
  background: transparent;
  color: var(--color-ink);
  border-color: var(--color-ink);
}

.button--outline:hover {
  background: var(--color-ink);
  color: var(--color-white);
}

.button-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}

.button-row--center { justify-content: center; }

/* ---------- Photo frames ---------- */
.photo {
  overflow: hidden;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-soft);
}

.photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.2s var(--ease-out);
}

.photo:hover img { transform: scale(1.04); }

.photo--arch { border-radius: var(--radius-arch); }

/* ---------- Text block ---------- */
/* :where() keeps this rule weak, so components inside a .prose block can set their own colour */
:where(.prose) p { color: var(--color-ink-soft); }
.prose .button-row { margin-top: var(--space-4); }

/* ---------- Details list (label + value pairs, e.g. event when/where) ---------- */
.details {
  display: grid;
  gap: var(--space-4);
  margin: 0 0 var(--space-5);
}

.details__row {
  display: grid;
  gap: var(--space-1);
  padding-bottom: var(--space-4);
  border-bottom: 1px solid var(--color-line);
}

.details dt {
  font-family: var(--font-display);
  font-size: var(--text-sm);
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--color-plum);
}

.details dd {
  margin: 0;
  font-size: var(--text-lg);
  color: var(--color-ink);
}

.details__note {
  display: block;
  font-size: var(--text-base);
  color: var(--color-ink-soft);
}

.details__link {
  display: inline-block;
  margin-top: var(--space-2);
  font-size: var(--text-base);
  color: var(--color-plum);
  text-underline-offset: 3px;
}

/* ---------- Rose accent for small touches (the "&" between their names) ---------- */
.rose { color: var(--color-rose); }

/* ---------- White outline button, for use over dark photos ---------- */
.button--light {
  background: transparent;
  color: var(--color-white);
  border-color: rgba(255, 255, 255, 0.85);
}

.button--light:hover {
  background: var(--color-white);
  color: var(--color-plum);
}

/* ---------- Faint leaf pattern behind a section (like the original's leaf sprigs) ---------- */
/* Colour is the mauve token #8F8898, written into the drawing as %238F8898 */
.leaves {
  background-color: var(--color-paper);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180' viewBox='0 0 180 180'%3E%3Cg fill='none' stroke='%238F8898' stroke-width='1.2' opacity='0.35'%3E%3Cpath d='M30 150 C60 110 80 80 120 40'/%3E%3Cpath d='M55 118 c-12 -4 -20 -14 -22 -26 c12 2 21 12 22 26z'/%3E%3Cpath d='M70 98 c12 -2 22 4 28 14 c-12 2 -23 -4 -28 -14z'/%3E%3Cpath d='M86 78 c-10 -6 -14 -18 -12 -30 c10 6 15 17 12 30z'/%3E%3Cpath d='M102 60 c12 0 21 8 25 19 c-12 0 -22 -7 -25 -19z'/%3E%3C/g%3E%3C/svg%3E");
  background-size: 180px 180px;
}

/* ---------- Script heading, e.g. "You're Invited" ---------- */
.script-heading {
  margin-bottom: var(--space-4);
  font-family: var(--font-script);
  font-size: var(--text-2xl);
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: 0;
  color: var(--color-plum);
}

.script-heading--center { text-align: center; margin-bottom: var(--space-5); }

/* ---------- Opening: date, names, welcome and two portraits ---------- */
.opening { text-align: center; }

.opening__date {
  margin-bottom: var(--space-2);
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-style: italic;
  color: var(--color-ink-soft);
}

.opening__names {
  margin-bottom: var(--space-4);
  font-size: var(--text-hero);
  font-style: italic;
  font-weight: 400;
  line-height: 1.05;
  letter-spacing: 0;
  color: var(--color-plum);
}

.opening__welcome {
  max-width: 38ch;
  margin: 0 auto var(--space-5);
  font-size: var(--text-lg);
  font-style: italic;
  color: var(--color-ink-soft);
}

.opening__portraits {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-3);
  max-width: 860px;
  margin-top: var(--space-6);
}

.opening__portraits .photo { aspect-ratio: 4 / 5; }

/* ---------- Photo band with torn-paper top and bottom edges ---------- */
.torn-band {
  position: relative;
  display: grid;
  place-items: center;
  min-height: clamp(26rem, 55vw, 40rem);
  padding: var(--space-7) var(--gutter);
  color: var(--color-white);
  text-align: center;
  clip-path: polygon(0% 3.0%, 4% 1.6%, 8% 1.0%, 12% 2.9%, 16% 0.7%, 20% 2.4%, 24% 1.8%, 28% 0.6%, 32% 2.3%, 36% 0.5%, 40% 2.0%, 44% 0.7%, 48% 0.7%, 52% 2.0%, 56% 3.5%, 60% 0.9%, 64% 1.2%, 68% 2.8%, 72% 4.0%, 76% 2.6%, 80% 1.9%, 84% 4.1%, 88% 0.6%, 92% 3.7%, 96% 1.5%, 100% 2.0%, 100% 97.5%, 96% 96.3%, 92% 96.2%, 88% 97.0%, 84% 98.9%, 80% 96.5%, 76% 98.0%, 72% 98.2%, 68% 97.2%, 64% 97.9%, 60% 96.0%, 56% 96.0%, 52% 96.6%, 48% 98.4%, 44% 97.4%, 40% 97.0%, 36% 98.0%, 32% 97.5%, 28% 96.9%, 24% 98.8%, 20% 98.5%, 16% 96.7%, 12% 98.0%, 8% 97.8%, 4% 99.1%, 0% 97.0%);   /* the jagged outline (generated, so every edge is irregular) */
}

.torn-band__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 40%;
}

.torn-band::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(rgba(40, 26, 57, 0.25), rgba(40, 26, 57, 0.6));
}

.torn-band__content {
  position: relative;
  z-index: 1;
  max-width: 34rem;
}

.torn-band__script {
  margin-bottom: var(--space-3);
  font-family: var(--font-script);
  font-size: var(--text-2xl);
  line-height: 1.1;
}

.torn-band__text { margin-bottom: var(--space-5); font-size: var(--text-lg); }

/* ---------- You're Invited photo ---------- */
.invite-photo {
  max-width: 24rem;
  aspect-ratio: 3 / 4;
  margin-inline: auto;
}

/* ---------- Event details ---------- */
.event-details { text-align: center; }
.event-details .details { text-align: left; }
.event-details__gift { margin: var(--space-4) 0 0; font-style: italic; }
.event-details__gift a { color: var(--color-rose-deep); text-underline-offset: 3px; }

/* ---------- Accommodation: plum text cards ---------- */
.stay-cards {
  display: grid;
  gap: var(--space-4);
}

@media (min-width: 760px) {
  .stay-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.stay-card {
  display: flex;
  flex-direction: column;
  min-height: 12rem;
  padding: var(--space-5) var(--space-4);
  border-radius: var(--radius-md);
  background: var(--color-plum);
  color: var(--color-white);
  box-shadow: var(--shadow-soft);
  transition: transform 0.4s var(--ease-out);
}

.stay-card:hover { transform: translateY(-4px); }

.stay-card p { margin-bottom: var(--space-4); opacity: 0.85; }

.stay-card__name {
  margin-bottom: var(--space-2);
  font-size: var(--text-lg);
  font-weight: 400;
}

.stay-card__link {
  margin-top: auto;
  font-family: var(--font-display);
  font-size: 0.8rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--color-rose);
}

.stay-card__link:hover { text-decoration: underline; text-underline-offset: 4px; }

.stay-note {
  max-width: 44rem;
  margin: var(--space-5) auto 0;
  padding: var(--space-4) var(--space-5);
  border-radius: var(--radius-md);
  background: var(--color-plum);
  color: var(--color-white);
  font-family: var(--font-display);
  font-style: italic;
  text-align: center;
}

.stay-note a { color: var(--color-white); text-underline-offset: 3px; }

/* ---------- Countdown band over the chairs photo (driven by js/main.js; reused from the Yasmin & Mpaala site) ---------- */
.countdown {
  padding-block: var(--section-pad);
  color: var(--color-white);
  text-align: center;
  background:
    linear-gradient(rgba(40, 26, 57, 0.55), rgba(40, 26, 57, 0.65)),
    url("../img/chairs.jpg") center / cover;
}

.countdown__title {
  margin-bottom: var(--space-5);
  font-size: var(--text-xl);
}

.countdown__units {
  display: flex;
  justify-content: center;
  gap: clamp(0.5rem, 2vw, var(--space-3));
}

.countdown__units li {
  display: grid;
  gap: var(--space-1);
  font-family: var(--font-display);
  font-size: 0.75rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

.countdown__units span {
  display: grid;
  place-items: center;
  width: clamp(3.75rem, 18vw, 6.5rem);
  aspect-ratio: 1.3;
  border-radius: var(--radius-sm);
  background: var(--color-white);
  color: var(--color-plum);
  font-size: var(--text-xl);
  letter-spacing: 0;
  font-variant-numeric: tabular-nums;
}

.countdown__done { margin: 0; font-size: var(--text-lg); }

.countdown__script {
  display: block;
  margin-bottom: var(--space-2);
  font-family: var(--font-script);
  font-size: var(--text-2xl);
  line-height: 1.1;
}

.countdown .button-row { margin-top: var(--space-5); }

/* ---------- Love Story: opening banner ---------- */
.story-banner {
  position: relative;
  display: grid;
  place-items: end start;
  min-height: clamp(20rem, 42vw, 32rem);
  padding: var(--space-6) var(--gutter);
  color: var(--color-white);
}

.story-banner__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 40%;
}

.story-banner::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(transparent 30%, rgba(40, 26, 57, 0.7));
}

.story-banner__content {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
}

.story-banner__script {
  margin: 0;
  font-family: var(--font-script);
  font-size: var(--text-xl);
}

.story-banner__title {
  margin: 0;
  font-size: var(--text-hero);
  font-style: italic;
  font-weight: 400;
}

/* ---------- Love Story: framed photo beside the story ---------- */
.story {
  display: grid;
  gap: var(--space-6);
  align-items: start;
}

@media (min-width: 900px) {
  .story { grid-template-columns: 0.8fr 1.2fr; }
  .story__frame { position: sticky; top: calc(var(--header-height) + var(--space-4)); }
}

/* A white mat and thin outline, like a framed print */
.story__frame {
  max-width: 24rem;
  margin: 0 auto;
  padding: var(--space-3);
  background: var(--color-white);
  outline: 1px solid var(--color-line);
  outline-offset: 10px;
  box-shadow: var(--shadow-soft);
}

.story__frame img { aspect-ratio: 3 / 4; object-fit: cover; }

.story__text p:first-child::first-letter {
  float: left;
  margin: 0.05em 0.1em 0 0;
  font-family: var(--font-display);
  font-size: 3.6em;
  line-height: 0.8;
  color: var(--color-plum);
}

.story__signature {
  font-family: var(--font-script);
  font-size: var(--text-xl);
}

.story__text .story__signature { color: var(--color-plum); }

/* ---------- Gallery grid ---------- */
.gallery {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-2);
}

/* On phones (2 columns) the first photo spans both, so nine photos fill the rows evenly */
@media (max-width: 759px) {
  .gallery li:first-child { grid-column: span 2; }
  .gallery li:first-child .gallery__item { aspect-ratio: 2 / 1; }
}

@media (min-width: 760px) {
  .gallery { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-3); }
}

.gallery__item {
  display: block;
  overflow: hidden;
  aspect-ratio: 1;
  border-radius: var(--radius-sm);
  cursor: zoom-in;
}

.gallery__item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.8s var(--ease-out);
}

.gallery__item:hover img,
.gallery__item:focus-visible img { transform: scale(1.06); }

/* ---------- Registry: "Hey there" ---------- */
.registry-intro { text-align: center; }

.rule {
  display: block;
  width: 4rem;
  height: 2px;
  margin: 0 auto var(--space-4);
  background: var(--color-rose);
}

.registry-intro__text {
  margin: 0;
  font-size: var(--text-lg);
  color: var(--color-ink-soft);
}

/* ---------- Registry: numbered option cards over the birdcage photo ---------- */
.pay-options {
  background:
    linear-gradient(rgba(40, 26, 57, 0.55), rgba(40, 26, 57, 0.7)),
    url("../img/birdcage-table.jpg") center / cover;
}

.pay-options .pay-options__title { color: var(--color-white); }

.option-cards {
  display: grid;
  gap: var(--space-4);
}

@media (min-width: 860px) {
  .option-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.option-card {
  padding: var(--space-5) var(--space-4);
  border-radius: var(--radius-md);
  background: rgba(255, 255, 255, 0.95);
  box-shadow: var(--shadow-soft);
}

.option-card p { color: var(--color-ink-soft); }

.option-card__number {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(3rem, 2rem + 3vw, 4.5rem);
  line-height: 1;
  color: var(--color-plum);
}

.option-card__title {
  margin: var(--space-2) 0 var(--space-3);
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--color-line);
  font-size: var(--text-lg);
  font-weight: 400;
}

.option-card__details {
  display: grid;
  gap: var(--space-2);
  margin: 0;
}

.option-card__details dt {
  font-size: var(--text-sm);
  color: var(--color-ink-soft);
}

.option-card__details dd {
  margin: 0;
  font-family: var(--font-display);
  font-size: 0.95rem;
  letter-spacing: 0.04em;
}

.option-card .option-card__note {
  font-size: var(--text-sm);
  font-style: italic;
  color: var(--color-rose-deep);
}

/* Hidden numbers in the portfolio copy */
.masked { letter-spacing: 0.12em; color: var(--color-ink-soft); }

.pay-options__privacy {
  margin: var(--space-5) 0 0;
  text-align: center;
  font-style: italic;
  color: var(--color-white);
}

/* ---------- Photo pair: a large arched photo with a small one overlapping ---------- */
.photo-pair {
  position: relative;
  padding: 0 0 12% 18%;
}

.photo-pair__main {
  aspect-ratio: 4 / 5;
  box-shadow: var(--shadow-soft);
}

.photo-pair__small {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 46%;
  aspect-ratio: 4 / 3;
  border: 6px solid var(--color-white);
  box-shadow: var(--shadow-soft);
}

/* ---------- Live-stream panel (driven by js/main.js; reused from the Yasmin & Mpaala site) ---------- */
.stream {
  display: grid;
  place-items: center;
  gap: var(--space-4);
  aspect-ratio: 16 / 9;
  padding: var(--space-5);
  border-radius: var(--radius-md);
  background:
    linear-gradient(rgba(40, 26, 57, 0.78), rgba(40, 26, 57, 0.85)),
    url("../img/chairs.jpg") center / cover;
  color: var(--color-white);
  text-align: center;
  box-shadow: var(--shadow-soft);
}

.stream__icon {
  display: grid;
  place-items: center;
  width: 4.5rem;
  height: 4.5rem;
  padding-left: 0.3rem;
  border: 2px solid rgba(255, 255, 255, 0.8);
  border-radius: 50%;
  font-size: 1.6rem;
}

.stream__message {
  display: grid;
  justify-items: center;
  gap: var(--space-3);
  max-width: 36ch;
  margin: 0;
  font-size: var(--text-lg);
}

@media (max-width: 599px) {
  .stream { aspect-ratio: auto; padding-block: var(--space-6); }
}

/* ---------- Live stream: small heading above the details ---------- */
.live-subheading {
  margin: var(--space-5) 0 var(--space-3);
  font-size: var(--text-lg);
  font-style: italic;
  font-weight: 400;
  color: var(--color-plum);
}

/* ---------- Lightbox: a photo shown large (driven by js/main.js) ---------- */
.lightbox {
  width: 100%;
  max-width: none;
  height: 100%;
  max-height: none;
  margin: 0;
  padding: var(--space-5) var(--space-7);
  border: 0;
  background: transparent;
  color: var(--color-white);
}

.lightbox::backdrop { background: rgba(20, 13, 28, 0.92); }

.lightbox[open] {
  display: grid;
  place-items: center;
}

.lightbox__figure {
  display: grid;
  justify-items: center;
  gap: var(--space-3);
  margin: 0;
}

.lightbox__img {
  max-width: 100%;
  max-height: calc(100vh - 8rem);
  border-radius: var(--radius-sm);
  object-fit: contain;
}

.lightbox__caption {
  font-size: var(--text-base);
  font-style: italic;
  opacity: 0.85;
}

.lightbox__button {
  position: fixed;
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border: 1px solid rgba(255, 255, 255, 0.6);
  border-radius: 50%;
  background: rgba(40, 26, 57, 0.5);
  color: var(--color-white);
  font-size: 1.4rem;
  cursor: pointer;
  transition: background 0.3s;
}

.lightbox__button:hover { background: var(--color-plum); }
.lightbox__button--close { top: var(--space-4); right: var(--space-4); }
.lightbox__button--prev  { left: var(--space-3); top: 50%; transform: translateY(-50%); }
.lightbox__button--next  { right: var(--space-3); top: 50%; transform: translateY(-50%); }

@media (max-width: 599px) {
  .lightbox { padding: var(--space-6) var(--space-2); }
  .lightbox__button--prev,
  .lightbox__button--next { top: auto; bottom: var(--space-4); transform: none; }
}

/* ---------- Reveal on scroll (driven by js/main.js) ---------- */
.reveal {
  opacity: 0;
  transform: translateY(32px);
  transition: opacity var(--duration) var(--ease-out), transform var(--duration) var(--ease-out);
  transition-delay: var(--delay, 0s);
}

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

/* If JavaScript is off, show everything */
.no-js .reveal {
  opacity: 1;
  transform: none;
}