/* ===== 纵屏版差异样式 =====
   策略:portrait/index.html 已经引了主 /styles.css(CSS 变量、字体、按钮、modal、footwalk 等),
   本文件只覆盖纵屏下需要不同的规则。横屏专属(如 grid 1x3 布局、cover-frame 右贴、
   bg-names absolute left)需要 portrait 反向。 */

/* ============ 横屏反向提示 ============ */
/* 主 .portrait-hint 在纵版 DOM 里被替换成 .landscape-hint(class 名不同避主样式选择器),
   纵版只在用户横持时显示"请竖屏"(与主页方向反过来) */
.landscape-hint {
  display: none;
  position: fixed; inset: 0; z-index: 1100;
  background: var(--paper);
  color: var(--ink-soft);
  align-items: center; justify-content: center;
  text-align: center; padding: 30px;
}
.landscape-hint__inner { max-width: 280px; }
.landscape-hint__icon {
  width: 64px; height: 64px;
  margin: 0 auto 22px;
  color: var(--ink);
  animation: tilt-back 2.4s ease-in-out infinite;
  transform-origin: 50% 50%;
}
/* 与主 .portrait-hint__icon tilt 动画对称:从 -90deg (横放) 摆回 0deg (竖立) */
@keyframes tilt-back {
  0%, 100% { transform: rotate(-90deg); }
  50%      { transform: rotate(0deg); }
}
.landscape-hint__title {
  font-family: var(--font-serif);
  font-size: 17px; letter-spacing: 0.18em;
  color: var(--ink); margin: 0 0 8px;
}
.landscape-hint__sub {
  font-family: var(--font-en);
  font-size: 12px; letter-spacing: 0.28em;
  color: var(--ink-faint); margin: 0;
  text-transform: uppercase;
}
@media (orientation: landscape) {
  .landscape-hint { display: flex; }
  .pages, .intro-overlay { visibility: hidden; }
}
/* 主样式行 98 的 @media (orientation: portrait) .portrait-hint { display: flex } 在纵版下会触发,
   但 portrait 版 DOM 里没有 .portrait-hint 元素,选择器无匹配,无副作用。
   主样式行 100 同时把 .pages 和 .intro-overlay 设为 visibility: hidden — 这会让纵版
   竖屏(正常使用!)反而看不到内容。必须反向: */
@media (orientation: portrait) {
  .pages, .intro-overlay { visibility: visible !important; }
}

/* ============ .page--ch 通用:grid 1x3 → flex column ============ */
.page--ch {
  display: flex;
  flex-direction: column;
  /* 重置主样式 grid-template-columns 不让 grid 子元素错位 */
  grid-template-columns: none;
  padding: 5vh 8vw;
  gap: 2.5vh;
  min-height: 100vh;
  align-content: stretch;
  align-items: stretch;
}
.page--ch > .ch-head,
.page--ch > .ch-body,
.page--ch > .ch-illust,
.page--ch > .info-icons {
  /* 重置主样式给子元素挂的 grid 属性 + padding/margin */
  grid-column: unset;
  grid-row: unset;
  align-self: stretch;
  padding: 0;
  margin: 0;
  border-right: none; /* 主样式 .ch-head 有右边竖线,纵版垂直堆叠下不合适 */
}
.page--ch > .ch-head {
  flex: 0 0 auto;
  text-align: center;
  margin-bottom: 1vh;
}
.page--ch > .ch-head .ch-cn { margin-left: 0; } /* 主样式有 -3px 光学对齐,居中下还原 */
.page--ch > .ch-rule { margin: 0 auto 16px; } /* 横线居中 */
.page--ch > .ch-body {
  flex: 1 1 auto;
  align-self: center;
  max-width: 100%;
  width: 100%;
}
.page--ch > .ch-illust {
  flex: 0 0 auto;
  align-self: center;
  max-width: 80vw;
}
.page--ch > .ch-illust svg {
  width: 100%;
  height: auto;
  max-height: 24vh; /* 纵版底部 illust 限制高度,避免挤占文本 */
}

/* ============ 1: 封面 ============ */
.page--cover {
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 8vh 6vw;
  gap: 5vh; /* 元素间统一间距,避免 cover-bg-names 和 cover-frame 紧贴 */
}
.cover-bg-names {
  position: static;
  transform: none;
  /* 大字两行(RUNQIU / ZIHAO)垂直堆叠,横排会溢出 viewport */
  flex-direction: column;
  align-items: center;
  gap: 0;
  /* HTML 顺序里 cover-bg-names 在 cover-frame 之后,用 order 显示在上方 */
  order: -1;
}
.bg-name {
  font-size: 22vw;
  line-height: 0.9;
  text-align: center !important;
  margin-left: 0 !important; /* 重置主样式 -0.04em / 0.06em 光学偏移 */
  letter-spacing: 0.02em;
}
.cover-frame {
  position: relative;
  align-self: center;
  padding: 0;
  text-align: center;
  max-width: 100%;
}
.cover-label {
  font-size: 24px;
  margin: 0 0 16px 0;
  text-align: center;
}
.cover-pitch {
  font-size: 15px;
  line-height: 1.95;
  margin: 0 0 20px 0;
  text-align: center;
}
.cover-couple {
  font-size: 14px;
  padding-top: 14px;
  text-align: center;
}
.cover-hint {
  position: absolute;
  left: 0; right: 0; bottom: 2.5vh;
  text-align: center;
}

/* ============ 6: 婚礼信息 ============ */
.page--info {
  /* 重置主样式 page--info 的 grid + clamp 变量(横屏才合理) */
  grid-template-columns: none;
  /* clamp 用 vh 在纵版下 vh 是长边会偏大,改用 px 简明值 */
  --pad-y:     3vh;
  --row-pad:   10px;
  --col-gap:   18px;
  --label-w:   72px;
  --label-fz:  10px;
  --label-cn:  13px;
  --value-fz:  15px;
  --sub-fz:    12px;
  --head-fz:   24px;
  --num-fz:    11px;
  --en-fz:     11px;
  --icon-sz:   38px;
  --icon-gap:  14px;
  --marker-fz: 10px;
}
.page--info > .ch-body {
  display: flex;
  flex-direction: column;
  height: auto;
  padding: 0;
  margin: 0;
  align-items: center;
}
.page--info > .info-icons {
  padding: 0;
  flex-direction: row !important;
  justify-content: center;
  gap: var(--icon-gap);
}
.page--info .info-list {
  width: 100%;
  max-width: 100%;
}
/* 纵版下 info-row 用 flex column,label 在上、value 在下,避免 value 长内容被横向截断 */
.page--info .info-row {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.page--info .info-row > dt,
.page--info .info-row > dd {
  width: 100%;
}
.page--info .info-row > dt {
  flex-direction: row;
  gap: 8px;
  align-items: baseline;
}
.page--info .info-row > dd {
  margin: 0;
}

/* ============ 7: 川西婚纱照 ============ */
.page--photo {
  /* 主样式已经是 position: relative + overflow: hidden,本身合适 */
}
.photo-content {
  /* 主样式 align-self: flex-end + width: 50%,纵版改为全宽底部居中 */
  align-self: center !important;
  width: 86vw !important;
  margin: auto 0 6vh 0 !important;
  padding: 0 !important;
}
.photo-mask {
  /* 主样式横向渐变(从左透明到右深),纵版改纵向(从上透明到下深) */
  background: linear-gradient(180deg,
    rgba(0,0,0,0) 0%,
    rgba(0,0,0,0) 40%,
    rgba(0,0,0,0.3) 70%,
    rgba(0,0,0,0.6) 100%) !important;
}
.photo-title { font-size: 32px; }
.photo-sub   { font-size: 14px; margin-bottom: 22px; }

/* ============ 9: 出席回执 ============ */
/* 主样式把 .qr-rsvp 设到 grid 第 3 列(横屏右列),纵版 flex column 下直接堆叠在按钮下方 */
.page--footer {
  justify-content: center; /* footer 内所有元素垂直居中,避免 QR 离按钮太远 */
}
.page--footer > .ch-body {
  flex: 0 0 auto; /* 不撑满中间,内容自适应高度 */
  order: 1;
}
.page--footer > .qr-rsvp {
  grid-column: unset;
  grid-row: unset;
  flex: 0 0 auto;
  align-self: center;
  padding: 0;
  margin-top: 2vh;
  order: 2;
}
.rsvp-actions { gap: 12px; }
.rsvp-intro {
  font-size: 14px;
  line-height: 1.7;
  margin: 0 0 8px;
}
.qr-rsvp__img {
  width: 130px;
  height: 130px;
  padding: 6px;
}