/* ---------- A5. Chú rể & cô dâu: nền ảnh cặp đôi làm tối, 2 khung vòm, cột giữa là hai họ ---------- */
.couple {
  position: relative; isolation: isolate; overflow: hidden;
  padding: 5rem 16px 5.5rem;
  background: var(--dark); color: var(--on-dark);
  text-align: center;
}
/* 1 ảnh phủ kín (không lặp lại như trang mẫu khi xem trên màn hình rộng) */
.couple__bg, .couple__bg img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; }
.couple__bg img { object-fit: cover; object-position: 50% 35%; filter: grayscale(.25); }
.couple__bg::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgb(var(--dark-rgb) / .82), rgb(var(--dark-rgb) / .7) 45%, rgb(var(--dark-rgb) / .86));
}
.couple__inner { max-width: 1080px; margin: 0 auto; }
/* Logo "THE / Wedding" trên đầu mục (như mẫu): chữ in hoa nhỏ + chữ viết tay */
.couple__logo { display: grid; justify-items: center; margin: 0 0 1.25rem; font: 400 var(--fs-script-lg)/1.1 var(--script); color: var(--on-dark); }
.couple__logo span { font: 500 var(--fs-xs)/1 var(--sans); letter-spacing: var(--ls-label); padding-left: var(--ls-label); text-transform: uppercase; color: var(--champagne); }
/* Tên hai người luôn nằm 1 dòng: màn hẹp thì chữ co theo bề ngang, không để dấu "&" lửng lơ cuối dòng */
.couple__title { margin: 0 0 3rem; font: 400 min(var(--fs-script-xl), 8.4vw)/1.2 var(--script); white-space: nowrap; }

.couple__grid { display: grid; gap: 2.5rem; justify-items: center; }
.person { width: min(100%, 340px); }
/* Khối chữ là container để tên co theo bề rộng thẻ (cqi). Không đặt container lên .person:
   container làm mất subgrid mà bố cục máy tính bên dưới đang cần. */
.person__text { container-type: inline-size; }
/* Khung vòm: viền mờ bao ngoài, ảnh bo tròn phía trên */
.person__frame {
  margin: 0; padding: 12px;
  background: rgba(255, 255, 255, .12);
  border: 1px solid rgba(230, 211, 187, .25);
  border-radius: 999px 999px 18px 18px;
}
.person__crop { display: block; overflow: hidden; border-radius: 999px 999px 10px 10px; }
.person__frame img {
  display: block; width: 100%; height: auto; aspect-ratio: 3 / 4;
  object-fit: cover; object-position: 50% 20%;
}
/* Tên luôn 1 dòng: tên dài ("Hồ Thị Thúy Ngân") thì chữ tự nhỏ lại theo bề rộng thẻ thay vì rớt dòng */
.person__name { margin: 1.25rem 0 0; font: 400 min(var(--fs-script-md), 11cqi)/1.2 var(--script); white-space: nowrap; }
/* Vài câu giới thiệu dưới tên, như trang mẫu */
.person__bio { max-width: 18rem; margin: .35rem auto 0; line-height: 1.6; color: rgba(247, 244, 239, .9); text-wrap: balance; }

/* Thông tin hai họ — kiểu gốc; các rule .couple … ngay bên dưới chỉnh lại cho cột giữa nền tối */
.families {
  display: grid; grid-template-columns: 1fr 1fr; gap: 1rem;
  max-width: 640px; margin: -1.5rem auto 2.5rem;
}
.family { padding: 0 .5rem; }
.family + .family { border-left: 1px solid var(--line); }
.family__side {
  margin: 0 0 .5rem;
  font-size: var(--fs-xs); letter-spacing: var(--ls-label); text-transform: uppercase;
  color: var(--accent); font-weight: 500;
}
.family__name { margin: 0; font: 500 var(--fs-h4)/1.5 var(--serif); }
.family__address { margin: .35rem 0 0; font-size: var(--fs-sm); color: var(--muted); }

/* Cột giữa đối xứng qua biểu tượng hai chiếc nhẫn:
   "Nhà trai" · Bố/Mẹ · [hai chiếc nhẫn] · Bố/Mẹ · "Nhà gái" */
.couple__center { display: grid; justify-items: center; gap: 1.25rem; }
.couple .families { display: grid; grid-template-columns: 1fr; justify-items: center; gap: .9rem; margin: 0; max-width: none; }
.couple .family { display: flex; flex-direction: column; padding: 0; border: 0; }
.couple .family__side { margin: 0 0 .35rem; font: 400 var(--fs-script-md)/1.2 var(--script); letter-spacing: 0; text-transform: none; color: var(--on-dark); }
/* Nhà gái: nhãn chuyển xuống dưới tên bố mẹ */
.couple__art ~ .family .family__side { order: 1; margin: .35rem 0 0; }
.couple .family__name { font: italic 500 var(--fs-md)/1.6 var(--sans); color: var(--on-dark); white-space: nowrap; }
.couple .family__address { color: rgba(247, 244, 239, .7); }
/* Hai chiếc nhẫn (biểu tượng vẽ nét) giữa Nhà trai và Nhà gái */
.couple__art { display: grid; place-items: center; color: var(--champagne); }
.couple__art svg { width: 64px; height: 64px; stroke-width: 1; }

/* Máy tính: [ chú rể | hai họ | cô dâu ] */
@media (min-width: 900px) {
  .couple { padding: 6.5rem 24px 7rem; }
  /* 2 hàng: hàng 1 là ảnh, hàng 2 là tên + lời giới thiệu. Thẻ người dùng chung 2 hàng đó (subgrid),
     nên cột hai họ nằm ở hàng 1 sẽ căn giữa theo đúng chiều cao KHUNG ẢNH, không tính phần chữ bên dưới. */
  .couple__grid { grid-template-columns: 1fr minmax(200px, 240px) 1fr; grid-template-rows: auto auto; align-items: start; gap: 0 2rem; }
  .person { display: grid; grid-row: 1 / span 2; grid-template-rows: subgrid; }
  .couple__center { grid-area: 1 / 2; align-self: center; }
  .person { grid-column: 1; }
  .couple__center ~ .person { grid-column: 3; }
}

/* ---------- A9. Thư ngỏ ---------- */
.letter__text { max-width: 34rem; margin: 0 auto; font: italic var(--fs-lead)/1.75 var(--serif); text-wrap: pretty; }
.letter__sign { margin: 1.5rem 0 0; font: var(--fs-script-md)/1.2 var(--script); color: var(--accent); }


/* Thư ngỏ → Lưu bút: hai mục cùng nền nên thu khoảng trống lại, họa tiết V&N làm điểm nhấn ngăn mục (như các mục khác) */
#letter { padding-bottom: 3.5rem; }
#wishes { padding-top: 3.5rem; }