/* ---------- A1. Thiệp mời khung vòm vàng + hoa trắng (theo mẫu assets/design/invitation-template.png) ----------
   Khung là 3 lát ảnh do scripts/build-invitation-frame.py cắt ra: trên (vòm + hoa) · giữa (2 nét khung, lặp dọc)
   · dưới (hoa). Chữ là HTML thật nên tên khách vẫn đổi theo link. Mọi lề tính theo bề rộng thẻ (--w)
   vì khung co giãn theo bề rộng: lề trên 40% (dưới chùm hoa trên), dưới 48% (chừa chùm hoa dưới), hai bên 15%. */
.invitation {
  --inv-bg: #fdf9f6;       /* màu nền giấy của ảnh mẫu → mép ảnh hoà vào nền mục */
  --inv-ink: #4a2a1c;      /* nâu đậm của chữ trong mẫu */
  --inv-soft: #6e5446;     /* nâu nhạt cho câu nghiêng (tương phản ≥ 4.5:1 trên nền giấy) */
  --inv-gold: var(--gold); /* vàng ánh kim của khung */
  --inv-pill: #f8ebde;
  container-type: inline-size;
  padding: 3.5rem 0 3rem;
  background: var(--inv-bg);
}
.invitation__card {
  --w: min(100cqw, 560px);
  position: relative;
  width: var(--w); margin: 0 auto;
  padding: calc(var(--w) * .40) calc(var(--w) * .15) calc(var(--w) * .48);
  min-height: calc(var(--w) * 1.3);
  text-align: center;
  background:
    url("../assets/web/decor/invitation-top.webp") top center / 100% auto no-repeat,
    url("../assets/web/decor/invitation-bottom.webp") bottom center / 100% auto no-repeat,
    url("../assets/web/decor/invitation-mid.webp") center / 100% auto repeat-y,
    var(--inv-bg);
  color: var(--inv-ink);
  /* Mép ảnh lệch màu nền 1–3 mức → làm mờ dần 4 mép để khung hoà hẳn vào nền mục */
  -webkit-mask-image: linear-gradient(to right, transparent, #000 3%, #000 90%, transparent), linear-gradient(transparent, #000 4%, #000 96%, transparent);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(to right, transparent, #000 3%, #000 90%, transparent), linear-gradient(transparent, #000 4%, #000 96%, transparent);
  mask-composite: intersect;
}
.invitation__lead {
  margin: 0;
  font: 500 var(--fs-xs)/1.4 var(--sans); letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--inv-ink);
  padding-left: .42em; /* bù khoảng chữ cuối để chữ thật sự nằm giữa */
}
/* ── ◇ ── dưới dòng mời */
.invitation__divider {
  display: block; width: 150px; max-width: 60%; height: 12px; margin: .75rem auto .35rem;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 150 12' fill='none' stroke='%23d6a24c' stroke-width='.9'%3E%3Cpath d='M0 6h62M88 6h62'/%3E%3Cpath d='M75 1.5l4.5 4.5-4.5 4.5-4.5-4.5z'/%3E%3C/svg%3E") center / contain no-repeat;
}
/* Tên khách: chữ viết tay co theo bề rộng thẻ; tên rất dài thì xuống dòng, 2 dòng dài đều nhau */
.invitation__guest { margin: .25rem 0 .4rem; font: min(var(--fs-script-lg), calc(var(--w) * .08))/1.2 var(--script); color: var(--inv-ink); text-wrap: balance; }
.invitation__body {
  max-width: 24rem; margin: 0 auto;
  font: italic 400 var(--fs-lead)/1.5 var(--serif); color: var(--inv-soft); text-wrap: balance;
}
/* "Trọng Văn / ~ & ~ / Thúy Ngân", 2 tim hồng nhỏ hai bên như mẫu */
.invitation__names { position: relative; display: grid; justify-items: center; margin: clamp(1.5rem, 5vw, 2rem) 0 clamp(1.25rem, 4vw, 1.75rem); }
.invitation__name { font: 500 min(var(--fs-h2), calc(var(--w) * .085))/1.1 var(--serif); letter-spacing: .01em; color: var(--inv-ink); white-space: nowrap; }
.invitation__amp {
  position: relative; display: flex; align-items: center; gap: .5rem;
  margin: .2rem 0 .3rem; font: var(--fs-script-md)/1 var(--script); color: var(--inv-gold);
}
/* 2 nét vàng thon dần, hơi cong, hai bên "&" */
.invitation__amp::before, .invitation__amp::after {
  content: ""; width: clamp(48px, 16cqw, 84px); height: 10px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 84 10' fill='none'%3E%3Cpath d='M1 6C20 2 50 2 82 6' stroke='%23d6a24c' stroke-width='1.1' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat;
}
.invitation__amp::after { transform: scaleX(-1); }
.invitation__names::before, .invitation__names::after {
  content: ""; position: absolute; top: 46%; width: 11px; height: 10px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 22'%3E%3Cpath fill='%23f598a4' d='M12 21.2 10.6 20C5.4 15.3 2 12.2 2 8.4 2 5.3 4.4 3 7.4 3c1.7 0 3.4.8 4.6 2.1C13.2 3.8 14.9 3 16.6 3 19.6 3 22 5.3 22 8.4c0 3.8-3.4 6.9-8.6 11.6z'/%3E%3C/svg%3E") center / contain no-repeat;
}
.invitation__names::before { left: 2%; transform: translateY(40%); }
.invitation__names::after { right: 2%; transform: translateY(-60%); }
/* Ngày giờ: mỗi buổi lễ 1 ô — "LỄ VU QUY" · [19.12.2026] (nền bo tròn màu kem) · "09:00 · Thứ Bảy".
   Thẻ rộng: 2 ô cạnh nhau, ngăn bằng vạch vàng; thẻ hẹp: tự xếp chồng. Không có chữ nào nằm ngang
   quá vùng chữ trong khung vòm nên không tràn viền. */
.invitation__when {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 9.5rem), 1fr));
  gap: 1.25rem 0; margin: 0 auto; color: var(--inv-ink);
}
.invitation__event { display: grid; justify-items: center; gap: .55rem; padding: 0 .5rem; }
.invitation__event + .invitation__event { border-left: 1px solid var(--inv-gold); }
.invitation__event-title { font: 500 var(--fs-xs)/1.2 var(--sans); letter-spacing: .22em; padding-left: .22em; text-transform: uppercase; }
.invitation__event-meta { font: italic 400 var(--fs-serif-text)/1.2 var(--serif); font-variant-numeric: lining-nums; color: var(--inv-soft); white-space: nowrap; }
.invitation__when-date {
  padding: .45rem 1rem;
  border-radius: 999px; background: var(--inv-pill);
  font: 500 var(--fs-h4)/1 var(--serif); letter-spacing: .06em; color: var(--inv-ink);
  font-variant-numeric: lining-nums; white-space: nowrap;
}
/* Thẻ hẹp: 2 ô xếp chồng → bỏ vạch dọc, thay bằng khoảng cách */
@container (max-width: 470px) {
  .invitation__when { grid-template-columns: 1fr; }
  .invitation__event + .invitation__event { border-left: 0; }
}
/* ── ♡♡ ── hai trái tim đan vào nhau ngăn cách */
.invitation__rings {
  display: block; width: 220px; max-width: 80%; height: 30px; margin: clamp(1.5rem, 5vw, 2rem) auto .9rem;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 220 30' fill='none' stroke='%23d6a24c' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M0 16h80M140 16h80' stroke-width='.9'/%3E%3Cpath d='M12 21.2 10.6 20C5.4 15.3 2 12.2 2 8.4 2 5.3 4.4 3 7.4 3c1.7 0 3.4.8 4.6 2.1C13.2 3.8 14.9 3 16.6 3 19.6 3 22 5.3 22 8.4c0 3.8-3.4 6.9-8.6 11.6z' transform='translate(90.5 1) rotate(-8 12 12) scale(1.1)' stroke-width='1.4'/%3E%3Cpath d='M12 21.2 10.6 20C5.4 15.3 2 12.2 2 8.4 2 5.3 4.4 3 7.4 3c1.7 0 3.4.8 4.6 2.1C13.2 3.8 14.9 3 16.6 3 19.6 3 22 5.3 22 8.4c0 3.8-3.4 6.9-8.6 11.6z' transform='translate(102.5 4.5) rotate(8 12 12) scale(1.1)' stroke-width='1.4'/%3E%3C/svg%3E") center / contain no-repeat;
}
.invitation__closing { max-width: 22rem; margin: 0 auto; font: italic var(--fs-serif-text)/1.5 var(--serif); color: var(--inv-soft); text-wrap: balance; }
.invitation .families { margin: 0 auto; }

/* ---------- A3. Lịch trình trong ngày (trong thẻ lễ) ---------- */
.schedule {
  list-style: none;
  margin: 0 auto 1.75rem; padding: 1.25rem 0 0;
  max-width: 22rem; /* đủ cho "Chụp ảnh cùng cô dâu chú rể" nằm 1 dòng */
  border-top: 1px solid var(--line);
  text-align: left;
}
.schedule__item {
  position: relative;
  display: grid;
  grid-template-columns: 44px 3.5rem 1fr; /* cột giờ theo rem: to theo cỡ chữ ở màn lớn */
  align-items: center;
  gap: .5rem;
  padding: .45rem 0;
}
/* Đường dọc nối các mốc */
.schedule__item:not(:last-child)::after {
  content: ""; position: absolute; left: 21px; top: 42px; bottom: -10px;
  width: 1px; background: var(--gold);
}
.schedule .line-icon { display: grid; place-items: center; width: 44px; height: 44px; color: var(--accent); }
.schedule__time { font: 500 var(--fs-h4)/1 var(--serif); font-variant-numeric: lining-nums; color: var(--accent); }
.schedule__label { font-size: var(--fs-md); }

/* ---------- A2. Lịch tháng tối giản: hàng thứ · kẻ trên · lưới ngày · kẻ dưới ---------- */
.calendar { max-width: 46rem; margin: 3rem auto 0; }
/* Đầu lịch như tờ lịch in: "2026" thật to + "December" viết tay ngay bên dưới (không đè lên số).
   Dùng đúng bộ chữ của trang: Cormorant (tiêu đề) và Great Vibes (chữ viết tay "Quý khách", "Save the Date") */
.calendar__head { display: grid; justify-items: center; margin-bottom: clamp(2rem, 7vw, 3.5rem); }
.calendar__year {
  font: 400 clamp(5.5rem, 26vw, 10rem)/.85 var(--serif);
  font-variant-numeric: lining-nums; letter-spacing: .02em;
  color: var(--ink);
}
.calendar__month-name {
  margin-top: .1em; /* tách hẳn khỏi chân số năm */
  font: var(--fs-script-lg)/1 var(--script);
  color: var(--accent);
}
.calendar__week, .calendar__grid { display: grid; grid-template-columns: repeat(7, 1fr); }
.calendar__week { padding-bottom: clamp(.6rem, 2vw, 1rem); border-bottom: 1px solid var(--gold); }
/* Hàng thứ: chữ có chân cỡ lớn */
.calendar__weekday { font: 400 clamp(1.05rem, 4.4vw, 2.1rem)/1 var(--serif); font-variant-numeric: lining-nums; letter-spacing: .02em; color: var(--ink); }
.calendar__grid { padding: .5rem 0; border-bottom: 1px solid var(--gold); }
/* Số ngày: chữ không chân, ô cao thoáng */
.calendar__day {
  position: relative;
  display: grid; place-items: center;
  height: clamp(46px, 11vw, 80px);
  font: 400 var(--fs-md)/1 var(--sans); font-variant-numeric: lining-nums;
  color: var(--muted);
}
/* Nét vẽ có trái tim lấp các ô trống đầu tháng */
.calendar__swirl { display: grid; place-items: center; overflow: visible; }
.calendar__swirl svg { width: 115%; max-width: 13rem; transform: translateX(6.5%); height: auto; fill: none; stroke: var(--gold); stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
/* Ngày cưới: tim đỏ nhỏ, số trắng đậm */
.calendar__day--marked { --heart: #e2475b; color: #fff; z-index: 0; }
.calendar__heart { position: absolute; inset: 0; display: grid; place-items: center; z-index: -1; pointer-events: none; }
.calendar__heart svg {
  width: clamp(30px, 8vw, 40px); height: clamp(30px, 8vw, 40px);
  fill: var(--heart); stroke: none;
  transform-origin: 50% 55%;
  animation: heartbeat 1.3s ease-in-out infinite;
}
.calendar__num { position: relative; top: -2px; font: 500 var(--fs-sm)/1 var(--sans); }
@keyframes heartbeat {
  0%, 100% { transform: scale(1); }
  14% { transform: scale(1.12); }
  28% { transform: scale(1); }
  42% { transform: scale(1.06); }
  70% { transform: scale(1); }
}
/* Tab đang chọn: tim đập nhanh; ngày kia nhạt hơn, đập chậm */
.calendar:has(.is-active) .calendar__day--marked:not(.is-active) { opacity: .45; }
.calendar:has(.is-active) .calendar__day--marked:not(.is-active) .calendar__heart svg { animation-duration: 2s; }
@media (prefers-reduced-motion: reduce) { .calendar__heart svg { animation: none; } }

/* ---------- A8. Màu trang phục ---------- */
.dress-code { margin: 2.5rem auto 0; }
.dress-code__note { margin: 0 0 .9rem; color: var(--muted); }
.dress-code__colors { display: flex; justify-content: center; gap: 1.5rem; }
.dress-code__item { display: flex; flex-direction: column; align-items: center; gap: .4rem; font-size: var(--fs-sm); }
.dress-code__dot { width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--line); box-shadow: inset 0 0 0 3px var(--surface); }

.line-icon--sm svg { width: 18px; height: 18px; }