/* ==========================================================================
   04 · Mempelai pria  &  05 · Mempelai wanita (satu komponen, dua varian)
   Referensi: 4.00 Calon mempelai Pria.png & 5.00 Calon mempelai Wanita.png
   (frame 412 × 917). Kedua foto memakai kotak yang sama (lebar penuh,
   tinggi 498px di 917) dengan object-fit: cover, jadi ukurannya selalu
   konsisten walau rasio file aslinya beda.
   Animasi mirror: pria terbuka dari kiri, wanita dari kanan.
   ========================================================================== */

.person {
  --person-bg: var(--color-ink);
  --person-name: var(--color-accent);
  --person-text: var(--color-on-ink);
  --person-bio: color-mix(in srgb, var(--color-on-ink) 87.5%, var(--color-ink));

  /* Tinggi pas satu layar supaya foto (flex) yang menyesuaikan, bukan section */
  height: var(--frame-h);
  display: flex;
  flex-direction: column;
  padding: 0 0 4.0625rem;
  background: var(--person-bg);
  color: var(--person-text);
}

.person--bride {
  /* Blok teks wanita lebih pendek (nama 1 baris), jadi ruang bawahnya lebih
     besar — persis desain, dan membuat tinggi foto pria & wanita SAMA. */
  padding-bottom: 6.4375rem;
  --person-bg: var(--color-paper);
  --person-name: var(--color-ink);
  --person-text: var(--color-ink);
  --person-bio: var(--color-ink);
}

/* --- Foto ----------------------------------------------------------------- */

.person__photo {
  flex: 1 1 0;
  min-height: 8rem;
  overflow: hidden;
}

/* Tinggi foto pria & wanita disamakan oleh sync-height.js (ambil yang
   terpendek), jadi tetap konsisten walau panjang teksnya beda. */
.person__photo[data-synced] {
  flex: none;
  height: var(--synced-h);
}

.person__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Titik fokus & arah zoom per foto (dicocokkan dengan crop di desain) */
.person--groom .person__photo img {
  object-position: 50% 40%;
  transform-origin: left center;
}

.person--bride .person__photo img {
  object-position: 50% 37%;
  transform-origin: right center;
}

/* --- Teks ----------------------------------------------------------------- */

.person__body {
  padding: 0 var(--gutter);
}

.person__name {
  margin-top: 2.5rem;
  font-size: clamp(2.75rem, 13vw, 3.34375rem); /* 53.5px di frame 412 */
  line-height: 1.01;
  color: var(--person-name);
}

.person--bride .person__name {
  font-size: clamp(3.5rem, 17vw, 4.375rem); /* 70px di frame 412 */
}

.person--bride .person__parents {
  margin-top: 0.35rem;
}

.person__name-strong,
.person__name-soft {
  display: block;
}

.person__name-strong {
  font-weight: 700;
}

.person__name-soft {
  font-weight: 300;
}

.person__parents {
  /* Sedikit jarak dari nama (baris nama sudah menyisakan ruang di bawah garis dasarnya) */
  margin-top: 0.4rem;
  font-size: 0.8125rem; /* 13px */
  font-weight: 700;
  line-height: 1.385;
}

.person__bio {
  margin-top: 2.09rem;
  font-size: 0.875rem; /* 14px */
  line-height: 1.43; /* 20px */
  text-align: justify;
  color: var(--person-bio);
}

/* Setiap baris (kecuali terakhir) dirata-kanan-kiri seperti di desain;
   tanpa ini, baris hasil split-lines jadi rata kiri semua. */
.person__bio .split__line:not(:last-child) {
  text-align-last: justify;
}