/* ============================================================
   pages/brands.css — 品牌版圖｜品牌與門市(slug: brands)
   主題 tokens + BEM 命名空間 brands-*;斷點 1280/1024/768/640。
   ============================================================ */
:root {
  --br-pad: clamp(1rem, 3vw, 3rem);
  --br-maxw: 1096px;
  --br-fs-hero: calc(
    var(--fs-heading-scale) * clamp(1rem, calc(0.515rem + 2.071vw), 3rem)
  ); /* 16→48 */
  --br-fs-filter: calc(
    var(--fs-body-scale) * clamp(0.813rem, calc(0.682rem + 0.557vw), 1.352rem)
  ); /* 13→21.6 */
  --br-fs-title: calc(
    var(--fs-heading-scale) * clamp(0.813rem, calc(0.646rem + 0.712vw), 1.5rem)
  ); /* 13→24 */
  --br-fs-head: calc(
    var(--fs-heading-scale) *
      clamp(0.813rem, calc(0.688rem + 0.531vw), 1.325rem)
  ); /* 13→21.2 */
  --br-fs-text: calc(
    var(--fs-body-scale) * clamp(0.75rem, calc(0.718rem + 0.138vw), 0.883rem)
  ); /* 12→14 */
  --br-bullet-light: #d8d5d0;
  --br-bullet-dark: #444444;
}

.brands-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.6em 1.9em;
  border-radius: var(--radius-full);
  background: var(--color-brand);
  color: #fff;
  font-weight: 700;
  font-size: clamp(0.813rem, calc(0.706rem + 0.453vw), 1.25rem);
  border: 2px solid transparent;
  white-space: nowrap;
  transition: background var(--ease-base);
}
.brands-btn:hover {
  background: var(--color-brand-hover); /* 只變暗背景 */
  color: #fff; /* 文字維持白色,不被全域 a:hover 改成紅字 */
}

/* ── HERO ── */
/* 背景圖寫在 background：漸層遮罩 + 底色 + 食物照(cover 縮放、非固定) */
.brands-hero {
  position: relative;
  min-height: clamp(150px, 24vw, 371px);
  display: grid;
  place-items: center;
  overflow: hidden;
  background: var(--color-dark) url("../../images/brands/hero.webp") center /
    cover no-repeat;
}
.brands-hero__title {
  position: relative;
  z-index: 1;
  color: #fff;
  font-size: var(--br-fs-hero);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.6);
  padding: 0 var(--br-pad);
  text-align: center;
}

/* ── 區塊 ── */
.brands-sec {
  padding: clamp(2.25rem, 4vw, 3rem) var(--br-pad); /* 桌機上下 48px */
}
.brands-sec--dark {
  background: url("../../images/brands/bg-dark.webp") center / cover no-repeat
    var(--color-dark);
  color: #fff;
}
.brands-sec--light {
  background: var(--color-surface);
  color: var(--color-text);
}

/* 平滑捲動 + 吸頂 header 補償(錨點跳轉不被 header 蓋住) */
:root {
  scroll-behavior: smooth;
}
.brands-sec {
  scroll-margin-top: 84px;
}

/* ── 上方跳轉列(錨點按鈕;深色 strip)── */
.brands-nav {
  /* 與第一個(深底)區塊同一張石紋背景,視覺連續 */
  background: url("../../images/brands/bg-dark.webp") center / cover no-repeat
    var(--color-dark);
  padding: clamp(1.75rem, 4vw, 3rem) var(--br-pad) 0;
}
.brands-nav__list {
  list-style: none;
  margin: 0 auto;
  padding: 0;
  max-width: var(--br-maxw);
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.75rem;
}
.brands-nav__link {
  display: inline-block;
  border: 1.5px solid rgba(255, 255, 255, 0.85);
  color: #fff;
  border-radius: var(--radius-full);
  padding: 0.5em 1.3em;
  font-size: var(--br-fs-filter);
  line-height: 1.2;
  white-space: nowrap;
  text-decoration: none;
  transition:
    background var(--ease-base),
    border-color var(--ease-base);
}
/* 紅底白字 = hover(僅滑過時);不做 active 常駐高亮 */
.brands-nav__link:hover {
  background: var(--color-brand);
  border-color: var(--color-brand);
  color: #fff;
}

/* ── 右側橫槓定位指示器(scroll-spy;桌機)── */
.brands-rail {
  position: fixed;
  top: 50%;
  right: clamp(0.75rem, 1.6vw, 1.75rem);
  transform: translateY(-50%);
  z-index: 40;
  display: flex;
  flex-direction: column;
  align-items: flex-end; /* 右緣對齊:變長往左突出 */
  gap: 14px;
}
.brands-rail__bar {
  position: relative;
  display: block;
  width: 16px;
  height: 4px;
  border-radius: 4px;
  background: rgba(150, 150, 150, 0.6);
  transition:
    width var(--ease-base),
    background var(--ease-base);
}
.brands-rail__bar:hover {
  background: rgba(120, 120, 120, 0.85);
}
.brands-rail__bar.is-active {
  width: 28px;
  background: var(--color-brand);
}
.brands-rail__label {
  position: absolute;
  right: calc(100% + 10px);
  top: 50%;
  transform: translateY(-50%);
  white-space: nowrap;
  background: var(--color-dark);
  color: #fff;
  font-size: 12px;
  line-height: 1;
  padding: 4px 8px;
  border-radius: 4px;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--ease-base);
}
.brands-rail__bar:hover .brands-rail__label,
.brands-rail__bar.is-active .brands-rail__label {
  opacity: 1;
}

/* ── 品牌 block ── */
.brands-block {
  max-width: 1115px; /* 電腦版品牌區塊寬 */
  margin: 0 auto;
}
.brands-block__title {
  text-align: center;
  font-size: var(--br-fs-title);
  font-weight: 700;
  margin-bottom: clamp(1.5rem, 3vw, 2.25rem);
}
.brands-sec--dark .brands-block__title {
  color: #fff;
}
.brands-sec--light .brands-block__title {
  color: var(--color-heading);
}
.brands-block__cards {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.25rem, 2.5vw, 2.5rem);
  align-items: start;
}
.brands-card {
  display: flex;
  flex-direction: column;
}
.brands-card__photo {
  width: 100%;
  aspect-ratio: 348 / 249;
  object-fit: cover;
}
.brands-card__body {
  padding-top: 1rem;
}
.brands-card__heading {
  font-size: var(--br-fs-head);
  font-weight: 700;
  margin-bottom: 0.7rem;
}
.brands-sec--dark .brands-card__heading {
  color: #fff;
}
.brands-sec--light .brands-card__heading {
  color: var(--color-heading);
}
.brands-card__text {
  list-style: none;
  margin: 0;
  padding: 0;
}
.brands-card__text li {
  position: relative;
  padding-left: 1.15em;
  font-size: var(--br-fs-text);
  margin-bottom: 0.2rem;
}
.brands-card__text li::before {
  content: "•";
  position: absolute;
  left: 0.15em;
}
.brands-sec--dark .brands-card__text li {
  color: #fff;
}
.brands-sec--dark .brands-card__text li::before {
  color: var(--br-bullet-light);
}
.brands-sec--light .brands-card__text li {
  color: #000;
}
.brands-sec--light .brands-card__text li::before {
  color: var(--br-bullet-dark);
}
.brands-block__cta {
  text-align: center;
  margin-top: clamp(1.5rem, 3vw, 2.25rem);
}

/* ── 頁尾 CTA(品牌頁專屬;石紋深底)── */
.brands-cta {
  background: var(--color-surface); /* 灰底 #e5e5e5 */
  color: var(--color-text);
  text-align: center;
  padding: clamp(2.5rem, 5vw, 3.75rem) var(--br-pad);
}
.brands-cta__inner {
  max-width: var(--br-maxw);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(0.5rem, 1.4vw, 1rem);
}
.brands-cta__title {
  margin: 0;
  color: var(--color-brand); /* 紅字 */
  font-weight: 700;
  font-size: calc(
    var(--fs-heading-scale) * clamp(1.25rem, 0.9rem + 1.1vw, 1.75rem)
  ); /* →28 */
}
.brands-cta__subtitle {
  margin: 0;
  color: var(--color-brand); /* 紅字 */
  font-size: calc(
    var(--fs-body-scale) * clamp(0.875rem, 0.78rem + 0.3vw, 1rem)
  ); /* →16 */
}
.brands-cta__button {
  margin-top: clamp(0.75rem, 1.6vw, 1.25rem);
}

/* ============================================================ RWD ============================================================ */
@media (max-width: 1280px) {
  .brands-block,
  .brands-nav__list {
    max-width: 960px;
  }
}
/* 右側橫槓只在桌機(>1024)顯示;平板/手機改由上方跳轉列承擔 */
@media (max-width: 1024px) {
  .brands-rail {
    display: none;
  }
}
@media (max-width: 768px) {
  .brands-block__cards {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 640px) {
  .brands-hero {
    min-height: 128px;
    background-image: url("../../images/brands/hero-m.webp");
  }
  .brands-hero__title {
    font-weight: 600;
    letter-spacing: 0.06em;
  }
  .brands-sec {
    padding: 1.75rem var(--br-pad);
    scroll-margin-top: 48px;
  }
  /* 跳轉列:手機橫向捲動,不換行 */
  .brands-nav {
    padding-block: 1rem 0;
  }
  .brands-nav__list {
    flex-wrap: nowrap;
    overflow-x: auto;
    justify-content: flex-start;
    scrollbar-width: none;
    gap: 0.5rem;
  }
  .brands-nav__list::-webkit-scrollbar {
    display: none;
  }
  .brands-nav__link {
    padding: 0.3em 0.9em;
  }
  .brands-block__title {
    font-weight: 600;
    margin-bottom: 1.25rem;
  }
  .brands-block__cards {
    grid-template-columns: 1fr;
    gap: 1.4rem;
    max-width: 240px;
    margin: 0 auto;
  }
  .brands-card__body {
    padding-top: 0.6rem;
  }
  .brands-card__heading {
    font-weight: 600;
    margin-bottom: 0.4rem;
  }
}