/* ==========================================================================
   gallery.html / contact.html 专用样式（中英共用）
   依赖 site.css 的变量、.wrap/.section/.btn/.btn-ghost/.phero/.eyebrow/.lede
   ========================================================================== */

/* ---------- 页头 ---------- */
.phero{display:block;padding-top:clamp(40px,7vh,86px);padding-bottom:clamp(18px,3vh,32px)}
.phero h1{margin:14px 0 0;max-width:22ch}
.phero .lede{margin-top:18px}

/* ---------- Gallery：筛选 ---------- */
.gal-tabs{
  display:flex;flex-wrap:wrap;gap:8px;margin:22px 0 26px;
  border-bottom:1px solid var(--line);padding-bottom:18px;
}
.gal-tabs button{
  font:inherit;font-size:13.5px;letter-spacing:.1em;text-transform:uppercase;
  padding:9px 16px;min-height:40px;cursor:pointer;
  background:transparent;color:var(--body);border:1px solid var(--line-2);
  transition:background .25s,color .25s,border-color .25s;
}
.gal-tabs button:hover{border-color:var(--green);color:var(--green)}
.gal-tabs button[aria-pressed="true"]{background:var(--green);border-color:var(--green);color:var(--cream)}

/* ---------- Gallery：分组 ---------- */
.gal-group{margin-bottom:clamp(34px,5vh,60px);scroll-margin-top:90px}
.gal-group[hidden]{display:none}
.gal-head{display:flex;align-items:baseline;justify-content:space-between;gap:14px;flex-wrap:wrap;margin-bottom:16px}
.gal-head h2{font-size:clamp(1.2rem,2vw,1.6rem)}
.gal-head .n{font-size:13px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.gal-head p{flex-basis:100%;color:var(--muted);font-size:15px;line-height:1.7;max-width:64ch;margin-top:6px}

.gal{columns:3;column-gap:12px}
.gal figure{margin:0 0 12px;break-inside:avoid;position:relative;overflow:hidden;background:var(--cream-2)}
.gal figure[hidden]{display:none}
.gal img{width:100%;height:auto;display:block;transition:transform .6s ease}
.gal figure:hover img{transform:scale(1.03)}
.gal figcaption{
  position:absolute;left:0;right:0;bottom:0;padding:26px 14px 12px;
  font-size:12.5px;letter-spacing:.08em;color:#FBF9F4;
  background:linear-gradient(to top,rgba(14,12,9,.75),rgba(14,12,9,0));
  opacity:0;transition:opacity .3s;
}
.gal figure:hover figcaption,.gal figure:focus-within figcaption{opacity:1}
.gal button.imgbtn{display:block;width:100%;padding:0;border:0;background:none;cursor:zoom-in}

/* ---------- Lightbox ---------- */
.lb{
  position:fixed;inset:0;z-index:90;display:none;
  background:rgba(14,12,9,.94);
  align-items:center;justify-content:center;
  padding:56px 20px 72px;
}
.lb.on{display:flex}
.lb img{max-width:min(1200px,92vw);max-height:calc(100vh - 150px);width:auto;height:auto;object-fit:contain}
.lb .lb-cap{
  position:absolute;left:0;right:0;bottom:22px;text-align:center;
  color:rgba(251,249,244,.82);font-size:13px;letter-spacing:.1em;
}
.lb .lb-close,.lb .lb-prev,.lb .lb-next{
  position:absolute;background:rgba(251,249,244,.1);border:1px solid rgba(251,249,244,.3);
  color:#FBF9F4;width:46px;height:46px;line-height:1;cursor:pointer;font-size:18px;
  display:flex;align-items:center;justify-content:center;
}
.lb .lb-close{top:16px;right:16px}
.lb .lb-prev{left:16px;top:50%;transform:translateY(-50%)}
.lb .lb-next{right:16px;top:50%;transform:translateY(-50%)}
.lb .lb-close:hover,.lb .lb-prev:hover,.lb .lb-next:hover{background:rgba(251,249,244,.22)}

/* ---------- Contact：问候 + 联系卡 ---------- */
.hello h1{font-size:clamp(2.4rem,7vw,4.6rem);line-height:1.02;margin-top:10px}
.hello .lede{max-width:62ch}
.contact-grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);
  border:1px solid var(--line);margin-top:clamp(28px,4vh,44px);
}
.contact-card{background:var(--paper);padding:clamp(22px,3vw,32px);display:flex;flex-direction:column;gap:10px}
.contact-card .k{font-size:12.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.contact-card .v{font-family:var(--serif);font-size:clamp(1.05rem,1.6vw,1.3rem);color:var(--ink);word-break:break-word}
.contact-card .v a{border-bottom:1px solid var(--line-2)}
.contact-card .v a:hover{color:var(--green);border-color:var(--green)}
.contact-card .note{font-size:13.5px;color:var(--muted);line-height:1.65;margin-top:auto}
.contact-card .btn,.contact-card .btn-ghost{min-height:48px;width:100%;margin-top:8px}

/* ---------- Contact：预订表单 ---------- */
.req-wrap{scroll-margin-top:90px}
.req-grid{
  display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(26px,5vw,64px);align-items:start;
  margin-top:clamp(26px,4vh,40px);
}
.form-card{border:1px solid var(--line);background:var(--paper);padding:clamp(22px,3.4vw,38px)}
.f-row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.f-field{display:flex;flex-direction:column;gap:7px;margin-bottom:14px}
.f-field.full{grid-column:1/3}
.f-field label{font-size:12.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.f-field label .req{color:var(--green)}
.f-field input,.f-field select,.f-field textarea{
  font:inherit;font-size:15px;color:var(--ink);
  padding:12px 13px;min-height:48px;
  background:#fff;border:1px solid var(--line-2);border-radius:0;
  width:100%;appearance:none;-webkit-appearance:none;
}
.f-field select{
  background-image:linear-gradient(45deg,transparent 49%,var(--muted) 50%),linear-gradient(-45deg,transparent 49%,var(--muted) 50%);
  background-size:6px 6px,6px 6px;background-position:calc(100% - 20px) 22px,calc(100% - 14px) 22px;background-repeat:no-repeat;
  padding-right:44px;
}
.f-field textarea{min-height:96px;resize:vertical}
.f-field input:focus,.f-field select:focus,.f-field textarea:focus{outline:2px solid var(--green);outline-offset:1px;border-color:var(--green)}
.f-field .hint{font-size:12.5px;color:var(--muted)}
.f-field .err{font-size:12.5px;color:#9B2C1E;display:none}
.f-field.invalid .err{display:block}
.f-field.invalid input,.f-field.invalid select{border-color:#9B2C1E}

.summary{
  border-left:2px solid var(--green);background:var(--cream-2);
  padding:16px 18px;margin:6px 0 18px;font-size:14.5px;line-height:1.8;color:var(--body);
}
.summary .line{display:flex;justify-content:space-between;gap:14px}
.summary .line b{font-weight:400;font-family:var(--serif);color:var(--ink)}
.summary .total{border-top:1px solid var(--line-2);margin-top:8px;padding-top:8px;font-family:var(--serif);color:var(--green);font-size:1.05rem}

.form-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:6px}
.form-actions .btn{min-height:50px}
.fineprint{font-size:13px;color:var(--muted);line-height:1.7;margin-top:14px}

/* 待确认单 */
.voucher{border:1px solid var(--line-2);background:#fff;padding:clamp(20px,3vw,30px);margin-top:10px;display:none}
.voucher.on{display:block}
.voucher .vh{display:flex;justify-content:space-between;align-items:baseline;gap:14px;flex-wrap:wrap;border-bottom:1px solid var(--line);padding-bottom:12px;margin-bottom:14px}
.voucher .vh b{font-family:var(--serif);font-weight:400;font-size:1.1rem;letter-spacing:.06em;color:var(--green)}
.voucher .vh span{font-size:12.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.voucher dl{display:grid;grid-template-columns:auto 1fr;gap:8px 18px;font-size:14.5px;margin:0}
.voucher dt{color:var(--muted)}
.voucher dd{margin:0;color:var(--ink)}
.voucher .vfull{grid-column:1/3;margin-top:10px;font-size:13px;color:var(--muted);line-height:1.7}
.voucher .vactions{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px}
.voucher textarea{width:100%;min-height:120px;font-family:ui-monospace,Consolas,monospace;font-size:12.5px;line-height:1.6;margin-top:12px;padding:12px;border:1px solid var(--line-2);background:var(--cream);color:var(--body)}
.voucher .copied{font-size:12.5px;color:var(--green);display:none}
.voucher .copied.on{display:inline}

/* 右栏：说明 */
.aside-card{border-top:1px solid var(--line-2);padding-top:18px;margin-top:22px}
.aside-card:first-child{margin-top:0;border-top:0;padding-top:0}
.aside-card h3{font-size:1.05rem;margin-bottom:10px}
.aside-card p,.aside-card li{font-size:14.5px;line-height:1.75;color:var(--body)}
.aside-card ul{margin:8px 0 0;padding-left:18px}
.aside-card ul li{margin-bottom:6px}
.aside-card a{border-bottom:1px solid var(--line-2)}
.aside-card a:hover{color:var(--green);border-color:var(--green)}

/* ---------- 响应式 ---------- */
@media (max-width:1000px){
  .gal{columns:2}
  .req-grid{grid-template-columns:1fr}
  .contact-grid{grid-template-columns:1fr}
}
@media (max-width:640px){
  .gal{columns:1}
  .f-row{grid-template-columns:1fr}
  .f-field.full{grid-column:1/2}
  .lb{padding:48px 12px 64px}
  .lb .lb-prev,.lb .lb-next{width:40px;height:40px}
  .form-actions .btn{width:100%}
}