/* 內頁共用大圖與手機頁首，以及關於寬和版面。主標題沿用 style.css。 */
body.inner-page { background: #fff; }

/* 內頁大圖不套用首頁的 min-height / max-height，保持視窗高度 70%。 */
.page-hero {
  position: relative;
  height: 70vh;
  overflow: hidden;
  background: #fff;
}
.page-hero picture { display: block; width: 100%; height: 100%; }
.page-hero img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 50%;
}
/* 僅在上方增加淡遮罩，維持頁首可讀性，不壓暗整張建築照片。 */
.page-hero::after {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 160px;
  background: linear-gradient(rgba(0, 0, 0, .32), transparent);
  pointer-events: none;
}

/* 與首頁 offers-section 相同：大圖下方 41px、主標下方 49px。 */
.about-section { padding: 41px 5vw 118px; background: #fff; }
.about-container { width: min(1320px, 100%); margin: 0 auto; }
.about-story {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: clamp(28px, 3.5vw, 64px);
}
.story-title,
.team-title {
  margin: 0 0 22px;
  color: var(--wine);
  font-size: clamp(22px, 1.6vw, 27px);
  font-weight: 500;
  line-height: 1.6;
  letter-spacing: .05em;
  text-wrap: pretty;
}
.story-copy p,
.about-values p,
.team-intro {
  margin: 0 0 15px;
  color: #514944;
  font-size: 17px;
  font-weight: 400;
  line-height: 1.95;
  overflow-wrap: break-word;
}
.story-copy p:last-child { margin-bottom: 0; }
.story-photo { margin: 0; }
.story-photo img { width: 100%; height: auto; }

.about-values {
  max-width: 1040px;
  margin: 64px auto 0;
  text-align: center;
}
.about-values::before {
  content: "";
  display: block;
  width: 64px;
  height: 1px;
  margin: 0 auto 30px;
  background: var(--gold-pale);
}
.about-values .values-intro { margin-bottom: 18px; }
.values-wishes { margin: 0 0 22px; }
.values-wishes p { margin-bottom: 8px; color: var(--wine); }
.values-wishes p:last-child { margin-bottom: 0; }
.about-values .values-closing { margin-bottom: 0; }

.about-team {
  margin-top: 76px;
  padding-top: 52px;
  border-top: 1px solid #eadfce;
}
.team-heading { max-width: 1040px; margin: 0 auto 32px; text-align: center; }
.team-title { margin-bottom: 16px; }
.team-intro { margin-bottom: 0; text-align: left; }
.chef-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 27px;
}
.chef-card { margin: 0; }
.chef-card img { width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; }
.chef-card figcaption {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 12px;
  margin-top: 18px;
  letter-spacing: .06em;
}
.chef-role { color: #73655c; font-size: 16px; }
.chef-name { color: var(--wine); font-size: 22px; font-weight: 500; }

@media (max-width: 1023px) {
  .about-story { grid-template-columns: 1fr; gap: 30px; }
  .story-photo { width: min(720px, 100%); margin: 0 auto; }
  .about-values { margin-top: 48px; }
  .chef-grid { gap: 20px; }
}

@media (max-width: 767px) {
  /* svh 避免手機網址列收合時，大圖高度跟著跳動。 */
  .page-hero { height: 70vh; height: 70svh; }
  .page-hero img { object-position: 50% 40%; }
  .about-section { padding-right: 24px; padding-bottom: 72px; padding-left: 24px; }
  .story-copy p, .about-values p, .team-intro { font-size: 16px; line-height: 1.9; }
  .about-values { text-align: left; }
  .about-values::before { margin-left: 0; }
  .about-team { margin-top: 48px; padding-top: 36px; }
  .team-heading { text-align: left; }
  .chef-grid { grid-template-columns: 1fr; gap: 36px; }
  .chef-card { width: min(420px, 100%); margin: 0 auto; }
  .chef-card figcaption { margin-top: 14px; }

  /* 小螢幕讓 Logo 與右側按鈕並列，避免互相遮擋；桌機維持置中。 */
  .inner-page .site-header { justify-content: flex-start; padding: 14px 18px; }
  .inner-page .brand, .inner-page .brand img { width: 88px; }
  .inner-page .header-actions { right: 18px; }
  .inner-page .menu-button { right: 18px; }
  .inner-page .menu-panel { padding: 22px 22px 30px; }
  .inner-page .menu-top { gap: 10px; }
  .inner-page .menu-social { gap: 7px; }
  .inner-page .menu-social a, .inner-page .menu-social img { width: 30px; height: 30px; }
  .inner-page .menu-booking { padding: 0 10px; font-size: 14px; white-space: nowrap; }
  .inner-page .menu-links { margin-left: 8px; margin-right: 8px; }
  .inner-page .menu-contact h2 { font-size: clamp(20px, 5.8vw, 25px); }
  .inner-page .menu-contact-main { gap: 12px; }
  .inner-page .menu-contact-main > img { flex-basis: 110px; width: 110px; height: 110px; }
  .inner-page .menu-contact-main p, .inner-page .menu-contact address { font-size: 14px; }
  .inner-page .footer-contact address { font-size: 14px; }
}