/* Máy tính bảng và MacBook. Điện thoại dùng bố cục gốc trong base.css / sections.css. */

/* iPad dọc (768–1023px): cột thiệp rộng 560px ở giữa, nền là ảnh làm mờ */
@media (min-width: 768px) and (max-width: 1023px) {
  :root { --card: 560px; }
}

/* MacBook (từ 1024px): nửa trái đứng yên, hiện trọn ảnh mở đầu (không cắt); nửa phải là thiệp cuộn */
@media (min-width: 1024px) {
  :root { --col: 50vw; --content: 600px; }
  body { background: var(--paper); font-size: 15px; }
  .backdrop { display: none; }

  .stage { display: block; position: fixed; top: 0; bottom: 0; left: 0; width: var(--col); overflow: hidden; background: #13241a; }
  .stage__bg { position: absolute; inset: -80px; background: url(../img/hero-blur.webp) center / cover no-repeat; filter: blur(36px) brightness(.7) saturate(1.1); }
  .stage__photo { position: absolute; top: 40px; left: 40px; width: calc(100% - 80px); height: calc(100% - 80px); object-fit: contain; filter: drop-shadow(0 24px 50px rgba(0, 0, 0, .4)); }

  .card { width: calc(100% - var(--col)); max-width: none; margin: 0 0 0 var(--col); box-shadow: none; }
  section { padding-left: max(var(--pad), calc((100% - var(--content)) / 2)); padding-right: max(var(--pad), calc((100% - var(--content)) / 2)); }

  /* Phần mở đầu: ảnh đã ở nửa trái nên bên phải chỉ còn chữ trên nền giấy */
  .hero { display: grid; place-items: center; min-height: 100vh; min-height: 100svh; color: var(--ink); }
  .hero::before {
    content: ''; position: absolute; top: -6px; right: -8px; width: var(--corner); aspect-ratio: 1;
    background: url(../svg/corner-sprig.svg) right top / contain no-repeat; transform: scaleX(-1);
    -webkit-mask-image: radial-gradient(circle at 0 0, transparent 5%, #000 20%);
    mask-image: radial-gradient(circle at 0 0, transparent 5%, #000 20%); /* gốc thân lá mờ dần, không bị mép cắt */
  }
  .hero__media, .hero__shade { display: none; }
  .hero__text { position: relative; width: auto; padding: 0 24px; }
  .hero__kicker { font-size: 15px; color: var(--green); }
  .hero__names { margin: 26px 0 30px; font-size: clamp(64px, 5.4vw, 92px); color: var(--green); text-shadow: none; }
  .hero__date { font-size: 22px; }
  .hero__cue { color: var(--green); filter: none; }

  /* Chữ và khối lớn hơn điện thoại khoảng 10–15% */
  .script-title { font-size: 62px; }
  .title__script { font-size: 54px; }
  .title__serif { font-size: 34px; }
  .title__serif--wide { font-size: 44px; }
  .darling__title { font-size: 58px; }
  .darling__line { font-size: 23px; }
  .cal__month { font-size: 40px; }
  .cal__cell { height: 36px; font-size: 13.5px; }
  .cal__head .cal__cell { height: 28px; font-size: 10px; }
  .cal__heart { width: min(38px, calc(100% + 4px)); }
  .family__label { font-size: 18px; }
  .family__side p { font-size: 13.5px; }
  .logo { width: 132px; }
  .family__invite { max-width: 380px; font-size: 13px; }
  .couple__name { font-size: 48px; }
  .when__time { font-size: 23px; }
  .when__date { max-width: 380px; }
  .when__side { font-size: 16px; }
  .when__day { font-size: 92px; }
  .when__place { font-size: 26px; }
  .when__addr { font-size: 14.5px; }
  .collage { max-width: 540px; margin: 0 auto; }
  .tl { max-width: 440px; margin-left: auto; margin-right: auto; }
  .tl__time { font-size: 16px; }
  .tl__label { font-size: 12px; }
  .mosaic__note { font-size: 28px; }
  .mosaic__love { font-size: 28px; }
  .quote { font-size: 23px; }
  .gallery__stage { width: min(100%, calc(78vh * 2 / 3)); margin: 0 auto; }
  .gallery__thumbs { max-width: var(--content); margin: 0 auto; }
  .rsvp__intro { max-width: 420px; font-size: 15px; }
  .rsvp__form { max-width: 440px; }
  .thanks__body { max-width: var(--content); margin: 0 auto; }
  .thanks__body p { font-size: 15px; }
  .thanks__body .thanks__script { font-size: 68px; }
  .music { right: 24px; bottom: 24px; }

  /* Màn mở thiệp: lớn hơn cho cân với màn hình rộng */
  .cover__inner { gap: 16px; max-width: 640px; }
  .cover__logo { width: 136px; }
  .cover__kicker { font-size: 14px; }
  .cover__names { font-size: 88px; }
  .cover__date { font-size: 20px; }
  .cover__btn { padding: 17px 36px; font-size: 14px; }
  .cover__hint { font-size: 13px; }
}

/* Màn rất rộng (MacBook Pro 16"): ảnh bên trái rộng hơn */
@media (min-width: 1600px) {
  :root { --col: 56vw; }
}