/* ==========================================================================
   components.css — reusable building blocks
   Buttons, photo frames, text block, details list, photo gallery and
   lightbox, 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-blue-deep);
  border-radius: 999px;
  background: var(--color-blue-deep);
  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-blue-deep);
  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);
}

/* ---------- 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); }


/* ---------- 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); }

/* ---------- 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-blue-deep);
}

.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-blue-deep);
  text-underline-offset: 3px;
}

/* ---------- 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); }

/* ---------- 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, 22, 32, 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, 41, 54, 0.5);
  color: var(--color-white);
  font-size: 1.4rem;
  cursor: pointer;
  transition: background 0.3s;
}

.lightbox__button:hover { background: var(--color-blue-deep); }
.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; }
}

/* ======================= Charles & Shoma components ======================= */

/* ---------- White outline button, for dark photos and blue bands ---------- */
.button--light {
  background: transparent;
  color: var(--color-white);
  border-color: rgba(255, 255, 255, 0.9);
}

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

/* ---------- 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.15;
  letter-spacing: 0;
  color: var(--color-navy);
}

/* ---------- Snowflakes: soft blue decorations drawn in code (colour is %23B3C8DB = the blue token) ---------- */
.snow { position: relative; overflow: hidden; }

.snowflake {
  position: absolute;
  width: clamp(3rem, 8vw, 6rem);
  aspect-ratio: 1;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cg fill='none' stroke='%23B3C8DB' stroke-width='3' stroke-linecap='round'%3E%3Cg id='a'%3E%3Cpath d='M50 8v84'/%3E%3Cpath d='M50 22l-9-9M50 22l9-9M50 78l-9 9M50 78l9 9M50 36l-14-10M50 36l14-10M50 64l-14 10M50 64l14 10'/%3E%3C/g%3E%3Cuse href='%23a' transform='rotate(60 50 50)'/%3E%3Cuse href='%23a' transform='rotate(120 50 50)'/%3E%3C/g%3E%3C/svg%3E") center / contain no-repeat;
  opacity: 0.8;
  pointer-events: none;
  animation: snow-turn 40s linear infinite;
}

.snowflake--a { top: 8%;  right: 6%; }
.snowflake--b { bottom: 6%; left: 3%; width: clamp(2rem, 5vw, 4rem); animation-direction: reverse; }
.snowflake--c { top: 10%; left: 46%; width: clamp(2.5rem, 6vw, 4.5rem); }

@keyframes snow-turn {
  to { transform: rotate(360deg); }
}

/* ---------- Opening: full-width photo with their names ---------- */
.hero-sky {
  position: relative;
  display: grid;
  place-items: center;
  min-height: min(88vh, 760px);
  overflow: hidden;
  color: var(--color-white);
  text-align: center;
}

.hero-sky__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 55%;
}

.hero-sky::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(40, 41, 54, 0.35);
}

.hero-sky__content { position: relative; z-index: 1; padding: var(--space-6) var(--gutter); }

.hero-sky__names {
  margin-bottom: var(--space-2);
  font-size: var(--text-hero);
  font-weight: 300;
  letter-spacing: 0.01em;
}

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

/* ---------- Photo shapes ---------- */
.photo--tall { aspect-ratio: 3 / 4; max-width: 26rem; margin-inline: auto; }
.photo--wide { aspect-ratio: 4 / 3; }

/* ---------- Invitation ---------- */
.invite__text { max-width: 36ch; font-size: var(--text-lg); color: var(--color-ink-soft); }

/* ---------- Photo strip: five photos in a row (opens in the lightbox) ---------- */
.photo-strip {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: var(--space-2);
}

.photo-strip__item {
  display: block;
  overflow: hidden;
  aspect-ratio: 2 / 3;
  cursor: zoom-in;
}

.photo-strip__item img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.8s var(--ease-out); }
.photo-strip__item:hover img,
.photo-strip__item:focus-visible img { transform: scale(1.06); }

@media (max-width: 699px) {
  .photo-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .photo-strip li:first-child { grid-column: span 2; }
  .photo-strip li:first-child .photo-strip__item { aspect-ratio: 3 / 2; }
}

.strip-cta { margin-top: var(--space-5); text-align: center; }

/* ---------- "We'd be honoured if you came" over a photo ---------- */
.honoured {
  position: relative;
  display: grid;
  place-items: center;
  min-height: clamp(22rem, 45vw, 34rem);
  padding: var(--space-6) var(--gutter);
  overflow: hidden;
  color: var(--color-white);
  text-align: center;
}

.honoured__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 62%; }
.honoured::after { content: ""; position: absolute; inset: 0; background: rgba(40, 41, 54, 0.4); }
.honoured__content { position: relative; z-index: 1; }

.honoured__title {
  max-width: 14ch;
  margin: 0 auto var(--space-4);
  font-size: var(--text-2xl);
  font-weight: 400;
  line-height: 1.1;
}

/* ---------- Countdown band over the dancing photo (driven by js/main.js; reused from the earlier sites) ---------- */
.countdown {
  padding-block: var(--section-pad);
  color: var(--color-white);
  text-align: center;
  background:
    linear-gradient(rgba(40, 41, 54, 0.55), rgba(40, 41, 54, 0.65)),
    url("../img/dance-field.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-blue-deep);
  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;
}



/* ---------- Love Story: title, polaroid photos and the story ---------- */
.story-title { text-align: center; margin-bottom: var(--space-5); }

.story {
  display: grid;
  gap: var(--space-6);
  align-items: start;
}

@media (min-width: 900px) {
  .story { grid-template-columns: 0.85fr 1.15fr; }
}

/* Two photos like polaroids: white border, a tilt and a strip of tape */
.polaroids {
  position: relative;
  width: 100%;   /* the photos are positioned absolutely, so the box needs its own width */
  max-width: 26rem;
  min-height: 30rem;
  margin-inline: auto;
}

.polaroid {
  position: absolute;
  width: 62%;
  margin: 0;
  padding: 0.6rem 0.6rem 2.4rem;
  background: var(--color-white);
  box-shadow: var(--shadow-soft);
}

.polaroid img { aspect-ratio: 4 / 5; object-fit: cover; }

.polaroid::before {
  content: "";
  position: absolute;
  top: -0.7rem;
  left: 50%;
  width: 3.5rem;
  height: 1.4rem;
  background: rgba(179, 200, 219, 0.75);   /* the blue token, as translucent tape */
  transform: translateX(-50%) rotate(-3deg);
}

.polaroid--left  { top: 0; left: 0; transform: rotate(-5deg); }
.polaroid--right { top: 34%; right: 0; transform: rotate(6deg); }

.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-blue-deep);
}

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

.honoured__title .script { display: block; font-family: var(--font-script); }

/* ---------- Events: "Registration is closed" badge ---------- */
.closed-badge {
  display: inline-block;
  margin: 0;
  padding: 0.45rem 1.1rem;
  border: 1px solid var(--color-blue-deep);
  border-radius: 999px;
  font-size: var(--text-sm);
  letter-spacing: 0.08em;
  color: var(--color-blue-deep);
}

/* ---------- Registry: their note over a photo with a wavy bottom edge ---------- */
.wave-hero {
  position: relative;
  display: grid;
  place-items: center;
  min-height: clamp(30rem, 55vw, 40rem);
  padding: var(--space-7) var(--gutter) calc(var(--space-7) + 4vw);
  color: var(--color-white);
  text-align: center;
  /* the wave: a curved bottom edge drawn with an SVG mask */
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath d='M0 0H100V88C80 80 62 98 40 92S12 86 0 94Z'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath d='M0 0H100V88C80 80 62 98 40 92S12 86 0 94Z'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
}

.wave-hero__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 30%; }
.wave-hero::after { content: ""; position: absolute; inset: 0; background: rgba(40, 41, 54, 0.55); }

.wave-hero__content {
  position: relative;
  z-index: 1;
  max-width: 40rem;
  font-size: var(--text-lg);
}

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

/* ---------- Registry: payment cards with a portrait on top ---------- */
.pay-cards {
  display: grid;
  gap: var(--space-4);
}

@media (min-width: 640px)  { .pay-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .pay-cards { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.pay-card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: var(--radius-md);
  background: var(--color-blue-light);
  box-shadow: var(--shadow-soft);
}

.pay-card__photo { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; object-position: center 25%; }

.pay-card__body { padding: var(--space-4); }
.pay-card__body p { margin-bottom: var(--space-3); color: var(--color-ink-soft); }

.pay-card__name {
  margin-bottom: var(--space-2);
  font-size: var(--text-lg);
  font-weight: 500;
  color: var(--color-blue-deep);
}

.pay-card__details { display: grid; gap: var(--space-2); margin: 0; }
.pay-card__details dt { font-size: var(--text-sm); color: var(--color-ink-soft); }
.pay-card__details dd { margin: 0; letter-spacing: 0.02em; }

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

.masked { letter-spacing: 0.12em; }

/* ---------- 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;
}