/* 菜色介紹頁：主廚、熱門菜色、新版菜單切換與放大檢視。 */
.cuisine-hero img { object-position: 50% 50%; }
.cuisine-section { padding: 41px 5vw 118px; background: #fff; }
.cuisine-container { width: min(1320px, 100%); margin: 0 auto; }
.cuisine-eyebrow { margin: 0 0 8px; color: #9b7849; font-size: 12px; line-height: 1.4; letter-spacing: .22em; }

.chef-intro {
  position: relative;
  display: flex;
  align-items: flex-start;
  width: min(1200px, 100%);
  margin: 0 auto;
}
.chef-photo {
  flex: 0 0 58%;
  height: calc(min(928px, 69.6vw) - 50px);
  min-height: 0;
  margin: 0;
  overflow: hidden;
  background: #261b17;
}
.chef-photo img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; }
.chef-copy {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  flex: 1 1 auto;
  min-height: 430px;
  margin: 255px 0 0 -7%;
  padding: clamp(48px, 5vw, 72px);
  border-top: 2px solid var(--gold);
  background: var(--wine);
  box-shadow: 0 18px 42px rgba(54, 20, 18, .16);
  opacity: 0;
  transform: translateX(-34px);
  transition: opacity .85s ease, transform .85s cubic-bezier(.22, .61, .36, 1);
}
.chef-copy.is-visible { opacity: 1; transform: translateX(0); }
.chef-copy h2 {
  margin: 0;
  color: var(--gold);
  font-size: clamp(25px, 2.2vw, 34px);
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: .08em;
}
.chef-divider { width: 58px; height: 1px; margin: 24px 0 26px; background: var(--gold); }
.chef-copy .cuisine-eyebrow { color: #d9b882; }
.chef-copy p:not(.cuisine-eyebrow) { margin: 0 0 16px; color: #fffaf3; font-size: 17px; line-height: 2; }
.chef-copy p:last-child { margin-bottom: 0; }

.favorite-section,
.menu-section { margin-top: 88px; padding-top: 60px; border-top: 1px solid #eadfce; }
.cuisine-block-heading { max-width: 760px; margin: 0 auto 38px; text-align: center; }
.cuisine-block-heading h2 { margin: 0 0 12px; color: var(--wine); font-size: clamp(24px, 2vw, 30px); font-weight: 500; line-height: 1.5; letter-spacing: .08em; }
.cuisine-block-heading > p:last-child:not(.cuisine-eyebrow) { margin: 0; color: #5d514b; font-size: 17px; line-height: 1.9; }

.dish-grid { width: min(1200px, 100%); margin: 0 auto; }
.dish-row {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 24px;
  width: 100%;
  margin: 0 auto 42px;
}
.dish-row:last-child { margin-bottom: 0; }
.dish-spacer { flex: var(--spacer-grow) 1 0; min-width: 0; }
.dish-card {
  flex: 1 1 0;
  min-width: 0;
  margin: 0;
  cursor: zoom-in;
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .65s ease var(--delay), transform .65s ease var(--delay), flex-grow .48s cubic-bezier(.22, .61, .36, 1);
}
.dish-card.is-visible { opacity: 1; transform: translateY(0); }
.dish-card img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: contain;
  background: #eee7df;
  transition: box-shadow .38s ease;
}
.dish-row.has-expanded .dish-card { flex-grow: .8; }
.dish-row.has-expanded .dish-card.is-expanded { flex-grow: 1.6; }
.dish-row.has-expanded .dish-spacer { flex-grow: var(--spacer-expanded-grow); }
.dish-row.has-expanded .dish-card.is-expanded img { box-shadow: 0 18px 38px rgba(68, 43, 33, .16); }
.dish-card:focus-visible { outline: 3px solid rgba(198, 154, 98, .4); outline-offset: 4px; }
.dish-card figcaption { padding: 15px 12px 0; color: var(--brown); font-family: "Noto Serif TC", "PMingLiU", serif; font-size: 20px; line-height: 1.45; text-align: center; letter-spacing: .04em; }

@media (min-width: 1024px) {
  .dish-row {
    gap: 25px;
    transition: gap .48s cubic-bezier(.22, .61, .36, 1);
  }
  .dish-spacer {
    transition: flex-grow .48s cubic-bezier(.22, .61, .36, 1), flex-basis .48s cubic-bezier(.22, .61, .36, 1), opacity .3s ease;
  }
  .dish-card {
    overflow: hidden;
    transform: translateY(42px);
    transition: opacity .65s ease var(--delay), transform .65s ease var(--delay), flex-grow .48s cubic-bezier(.22, .61, .36, 1), flex-basis .48s cubic-bezier(.22, .61, .36, 1);
  }
  .dish-card img {
    height: clamp(560px, 50vw, 720px);
    aspect-ratio: auto;
    object-fit: cover;
    transition: height .48s cubic-bezier(.22, .61, .36, 1), box-shadow .38s ease;
  }
  .dish-card figcaption {
    transition: padding .48s cubic-bezier(.22, .61, .36, 1), font-size .48s cubic-bezier(.22, .61, .36, 1), opacity .3s ease;
  }
  .dish-row.has-expanded { gap: 0; }
  .dish-row.has-expanded .dish-card {
    flex-grow: 0;
    flex-basis: 0;
    opacity: 0;
    pointer-events: none;
  }
  .dish-row.has-expanded .dish-card.is-expanded {
    flex-grow: 1;
    flex-basis: 100%;
    overflow: visible;
    opacity: 1;
    pointer-events: auto;
  }
  .dish-row.has-expanded .dish-spacer {
    flex-grow: 0;
    flex-basis: 0;
    opacity: 0;
  }
  .dish-row.has-expanded .dish-card.is-expanded img {
    height: min(800px, 60vw);
    object-fit: contain;
  }
  .dish-row.has-expanded .dish-card.is-expanded figcaption {
    padding-top: 18px;
    font-size: clamp(24px, 2vw, 30px);
  }
}

.menu-section { width: min(1000px, 100%); margin-right: auto; margin-left: auto; }
.cuisine-menu-heading { margin-bottom: 28px; }
.menu-category-tabs,
.menu-page-tabs { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.menu-category-tabs { margin-bottom: 13px; }
.menu-page-tabs { min-height: 34px; margin-bottom: 24px; }
.menu-category-tab,
.menu-page-tab {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--gold-pale);
  border-radius: 999px;
  background: #fff;
  color: var(--wine);
  line-height: 1;
  transition: color .22s ease, background .22s ease, border-color .22s ease, transform .22s ease;
}
.menu-category-tab { min-width: 132px; min-height: 45px; padding: 10px 20px; font-size: 16px; letter-spacing: .06em; }
.menu-page-tab {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  padding: 0 0 1px;
  font-family: "Noto Sans TC", "Microsoft JhengHei", Arial, sans-serif;
  font-size: 15px;
}
.menu-category-tab:hover,
.menu-page-tab:hover { border-color: var(--wine); transform: translateY(-1px); }
.menu-category-tab.is-active,
.menu-page-tab.is-active { border-color: var(--wine); background: var(--wine); color: #fff; box-shadow: 0 7px 18px rgba(114, 23, 27, .14); }
.menu-category-tab:focus-visible,
.menu-page-tab:focus-visible,
.menu-image-button:focus-visible { outline: 3px solid rgba(198, 154, 98, .4); outline-offset: 3px; }
.cuisine-menu-figure { width: min(760px, 100%); margin: 0 auto; }
.menu-image-button { display: block; width: 100%; padding: 0; border: 0; background: #fff; cursor: zoom-in; box-shadow: 0 14px 40px rgba(74, 48, 36, .1); }
.menu-image-button img { width: 100%; height: auto; }

.menu-lightbox {
  width: min(1200px, 94vw);
  max-width: none;
  max-height: 94vh;
  margin: auto;
  padding: 0;
  border: 0;
  background: transparent;
  overflow: auto;
}
.menu-lightbox::backdrop { background: rgba(24, 15, 13, .86); }
.menu-lightbox img { width: min(100%, 1787px); height: auto; margin: 0 auto; background: #fff; }
.menu-lightbox-close {
  position: fixed;
  z-index: 2;
  top: 18px;
  right: 22px;
  width: 42px;
  height: 42px;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, .72);
  border-radius: 50%;
  background: rgba(38, 27, 23, .8);
  color: #fff;
  font-size: 28px;
  font-weight: 300;
  line-height: 1;
}

@media (max-width: 1023px) {
  .chef-photo { flex-basis: 56%; height: calc(min(896px, 67.2vw) - 50px); }
  .chef-copy { min-height: 390px; margin-left: -8%; padding: 42px; }
  .dish-row { gap: 22px; margin-bottom: 38px; }
  .dish-row.has-expanded .dish-card { flex-grow: .84; }
  .dish-row.has-expanded .dish-card.is-expanded { flex-grow: 1.35; }
}

@media (max-width: 767px) {
  .cuisine-hero img { object-position: 50% 50%; }
  .cuisine-section { padding-right: 24px; padding-bottom: 72px; padding-left: 24px; }
  .chef-intro { display: block; width: min(100%, 520px); }
  .chef-photo { width: 100%; height: auto; }
  .chef-photo img { height: auto; aspect-ratio: 3 / 4; }
  .chef-copy { min-height: 0; margin: 0; padding: 38px 30px 42px; transform: translateX(-20px); }
  .chef-copy p:not(.cuisine-eyebrow) { font-size: 16px; line-height: 1.9; }
  .favorite-section,
  .menu-section { margin-top: 58px; padding-top: 42px; }
  .cuisine-block-heading { margin-bottom: 30px; }
  .cuisine-block-heading > p:last-child:not(.cuisine-eyebrow) { font-size: 16px; }
  .dish-row,
  .dish-row[data-count="1"],
  .dish-row[data-count="2"],
  .dish-row[data-count="3"] { width: min(100%, 520px); margin-bottom: 36px; }
  .dish-spacer { display: none; }
  .dish-row.has-expanded .dish-card,
  .dish-row.has-expanded .dish-card.is-expanded { flex-grow: 1; }
  .dish-card { cursor: default; }
  .dish-card figcaption { padding-top: 13px; font-size: 19px; }
  .menu-category-tabs { gap: 8px; }
  .menu-category-tab { min-width: 0; min-height: 42px; padding: 9px 15px; font-size: 15px; }
  .menu-page-tabs { margin-bottom: 20px; }
  .menu-lightbox { width: 100vw; max-height: 100vh; }
  .menu-lightbox-close { top: 12px; right: 12px; }
}

@media (max-width: 430px) {
  .menu-category-tabs { display: grid; grid-template-columns: 1fr; width: min(100%, 300px); margin-right: auto; margin-left: auto; }
  .menu-category-tab { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .chef-copy,
  .dish-card { opacity: 1; transform: none; }
}

@media print {
  .menu-category-tabs,
  .menu-page-tabs { display: none; }
  .chef-copy,
  .dish-card { opacity: 1; transform: none; }
}
