/**
 * 本地实验：Studio6 式一屏一块（仅首页）
 * 关闭：URL ?fp=0 或 localStorage chunse-fp=0
 */
/*
 * 整屏切换只交给 JS（fullpage-snap.js），不要再用 CSS scroll-snap。
 * 否则会出现：JS smooth 滚一次 → 浏览器 snap 再纠一次 = 跳两下。
 */
html.chunse-fp {
  overscroll-behavior-y: none;
  scroll-behavior: auto !important;
}

html.chunse-fp .layout-home > .fp-screen {
  box-sizing: border-box;
  min-height: 100vh;
  min-height: 100dvh;
  height: 100vh;
  height: 100dvh;
  max-height: 100vh;
  max-height: 100dvh;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  position: relative;
}

/* 内容偏少时垂直居中 */
html.chunse-fp .layout-home > .fp-screen.fp-screen--center {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

html.chunse-fp .layout-home > .fp-screen.fp-screen--center > * {
  width: 100%;
}

html.chunse-fp.fp-locking {
  pointer-events: none;
}

html.chunse-fp.fp-locking .layout-home {
  pointer-events: auto;
}

.fp-dots {
  position: fixed;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 80;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 0;
  margin: 0;
  list-style: none;
}

.fp-dots[hidden] {
  display: none !important;
}

.fp-dots button {
  width: 8px;
  height: 8px;
  padding: 0;
  border: 1px solid rgba(244, 239, 230, 0.55);
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
  transition: background 0.2s ease, transform 0.2s ease, border-color 0.2s ease;
}

.fp-dots button[aria-current="true"] {
  background: rgba(244, 239, 230, 0.92);
  border-color: rgba(244, 239, 230, 0.92);
  transform: scale(1.25);
}

.fp-dots button:focus-visible {
  outline: 2px solid rgba(200, 164, 93, 0.9);
  outline-offset: 3px;
}

@media (max-width: 720px) {
  .fp-dots {
    right: 8px;
    gap: 8px;
  }
  .fp-dots button {
    width: 7px;
    height: 7px;
  }
}

@media (prefers-reduced-motion: reduce) {
  html.chunse-fp {
    scroll-snap-type: none;
    scroll-behavior: auto;
  }
}

/* —— 样片屏：卡片放大，少留白 —— */
html.chunse-fp #samples.fp-screen {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-block: clamp(3.5rem, 7vh, 5.5rem);
}

html.chunse-fp #samples.fp-screen > * {
  width: 100%;
  max-width: min(96rem, 96vw);
  margin-inline: auto;
}

/* compact 原为 min(42vh,380px)，整屏下显得过小 */
html.chunse-fp #samples.fp-screen .salon-ogl-hang-wall {
  height: min(64vh, 680px) !important;
  min-height: min(52vh, 560px);
}

html.chunse-fp #samples.fp-screen .section-title-en {
  font-size: clamp(0.85rem, 1.4vw, 1.05rem);
  letter-spacing: 0.28em;
}

html.chunse-fp #samples.fp-screen h2 {
  font-size: clamp(2.4rem, 5.2vw, 3.6rem) !important;
  margin-bottom: 0.4rem !important;
}

html.chunse-fp #samples.fp-screen h2 + p {
  font-size: clamp(1.05rem, 1.8vw, 1.25rem) !important;
  margin-bottom: 1.25rem !important;
}

@media (max-width: 768px) {
  html.chunse-fp #samples.fp-screen .salon-ogl-hang-wall {
    height: min(58vh, 520px) !important;
    min-height: 42vh;
  }
}

/* —— 首页板块整块等比缩放（why-us / studio，由 home-section-fit.js） —— */
#why-us,
#studio {
  --section-fit: 1;
  --section-fit-gap: 0px;
}

#why-us .section-fit-inner,
#why-us .why-us-fit-inner,
#studio .section-fit-inner,
#studio .studio-fit-inner {
  box-sizing: border-box;
  max-width: 1180px;
  width: 100%;
  margin-inline: auto;
  transform-origin: top center;
  padding-bottom: var(--section-fit-gap);
}

html.chunse-fp #why-us.fp-screen {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-block: clamp(1.1rem, 3vh, 2.75rem) !important;
  overflow: hidden !important;
}

html.chunse-fp #why-us.fp-screen .salon-organic-wave {
  display: none !important;
}

html.chunse-fp #why-us.fp-screen > .mx-auto,
html.chunse-fp #why-us.fp-screen .why-us-fit-inner,
html.chunse-fp #studio.fp-screen > .mx-auto,
html.chunse-fp #studio.fp-screen .studio-fit-inner {
  width: 100%;
  max-width: 1180px;
  min-width: 0;
  padding-inline: clamp(0.65rem, 1.8vw, 1.25rem);
  box-sizing: border-box;
}

/* 空间屏：去掉会把叠卡挤扁的约束，交给整体 zoom */
html.chunse-fp #studio.fp-screen {
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow: hidden !important;
}

html.chunse-fp #studio.fp-screen .studio-h-gallery,
html.chunse-fp #studio.fp-screen .shg-stage {
  max-width: 100%;
  min-width: 0;
}

/* 设计坐标系内固定舞台高度，随 section-fit 一起缩放（不用 vw，避免窄窗挤扁） */
html.chunse-fp #studio.fp-screen .shg-stage {
  height: 32rem;
}

html.chunse-fp #why-us.fp-screen .mb-10.max-w-5xl {
  margin-bottom: 0.7rem !important;
  max-width: 100% !important;
}

/* 取消死高度挤压；保持 bento 原始比例，靠 zoom 整体变小 */
#why-us .magic-bento-grid,
html.chunse-fp #why-us.fp-screen .magic-bento-grid {
  height: auto !important;
  max-height: none !important;
  width: 100% !important;
  min-width: 0 !important;
}

#why-us .magic-bento-card,
html.chunse-fp #why-us.fp-screen .magic-bento-card {
  min-width: 0 !important;
}

/* ≥721：始终保持桌面四列构图，只靠 why-us-fit 等比缩小 */
@media (min-width: 721px) {
  #why-us .magic-bento-grid {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    grid-auto-rows: minmax(7.25rem, auto) !important;
    gap: 0.75rem !important;
  }

  #why-us .magic-bento-grid .magic-bento-card:nth-child(3) {
    grid-column: span 2 !important;
    grid-row: span 2 !important;
  }

  #why-us .magic-bento-grid .magic-bento-card:nth-child(4) {
    grid-column: 1 / span 2 !important;
    grid-row: 2 / span 2 !important;
  }

  #why-us .magic-bento-grid .magic-bento-card:nth-child(6) {
    grid-column: 4 !important;
    grid-row: 3 !important;
  }
}

@media (max-width: 720px) {
  /* 很窄时不再硬缩放拼桌面布局，改自然折行，避免字过小 */
  #why-us .why-us-fit-inner,
  #why-us .section-fit-inner,
  #studio .studio-fit-inner,
  #studio .section-fit-inner {
    zoom: 1 !important;
    transform: none !important;
    width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-bottom: 0 !important;
  }

  html.chunse-fp #why-us.fp-screen,
  html.chunse-fp #studio.fp-screen {
    overflow-y: auto !important;
    justify-content: flex-start;
  }
}

/* —— 品牌屏：照片 + 文案放大，少留白 —— */
html.chunse-fp #brand.fp-screen {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-block: clamp(3.25rem, 6.5vh, 5rem);
}

html.chunse-fp #brand.fp-screen > * {
  width: 100%;
  max-width: min(92rem, 94vw) !important;
  margin-inline: auto;
}

html.chunse-fp #brand.fp-screen .section-title-en {
  font-size: clamp(0.85rem, 1.4vw, 1.05rem);
  letter-spacing: 0.28em;
}

html.chunse-fp #brand.fp-screen h2 {
  font-size: clamp(2.4rem, 5vw, 3.5rem) !important;
}

html.chunse-fp #brand.fp-screen h3 {
  font-size: clamp(1.7rem, 3.2vw, 2.6rem) !important;
}

html.chunse-fp #brand.fp-screen .mt-4.mb-10.h-0\.5,
html.chunse-fp #brand.fp-screen [aria-hidden="true"].bg-salon-sage\/70 {
  margin-bottom: 1.25rem !important;
}

/* 照片框吃掉更多视口高度 */
html.chunse-fp #brand.fp-screen .group.relative.mx-auto {
  max-width: none !important;
  width: fit-content;
  max-width: 100% !important;
}

html.chunse-fp #brand.fp-screen .group [class*="aspect-"] {
  width: auto !important;
  height: min(68vh, 720px) !important;
  aspect-ratio: 4 / 5;
  max-width: 100%;
  margin-inline: auto;
}

html.chunse-fp #brand.fp-screen .group [class*="aspect-"] img {
  max-height: none !important;
}

html.chunse-fp #brand.fp-screen .font-salon-body {
  font-size: clamp(1.05rem, 1.55vw, 1.2rem) !important;
  line-height: 1.75 !important;
}

@media (min-width: 768px) {
  html.chunse-fp #brand.fp-screen .max-w-6xl > div > .grid {
    grid-template-columns: minmax(0, 0.48fr) minmax(0, 0.52fr) !important;
    column-gap: clamp(2.5rem, 4vw, 4.5rem) !important;
    align-items: center !important;
  }

  html.chunse-fp #brand.fp-screen .group [class*="aspect-"] {
    height: min(72vh, 780px) !important;
  }
}

@media (max-width: 767px) {
  html.chunse-fp #brand.fp-screen .group.relative.mx-auto {
    width: 100%;
  }
  html.chunse-fp #brand.fp-screen .group [class*="aspect-"] {
    width: 100% !important;
    height: auto !important;
    max-height: min(48vh, 420px);
  }
}

/* —— 品牌页 /about：和大板块一屏一切（Studio6 节奏） —— */
html.chunse-fp-about .minimal-about-showcase {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

html.chunse-fp-about .minimal-about-showcase > .fp-screen {
  box-sizing: border-box;
  min-height: 100vh;
  min-height: 100dvh;
  height: 100vh;
  height: 100dvh;
  max-height: 100vh;
  max-height: 100dvh;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding-block: clamp(3.25rem, 7vh, 5rem);
  display: flex;
  flex-direction: column;
  justify-content: center;
}

html.chunse-fp-about .minimal-about-showcase > .fp-screen > * {
  width: 100%;
}

/* 时间线略收紧，尽量一屏看完；超出仍可屏内滚 */
html.chunse-fp-about .salon-curve-timeline__list {
  gap: clamp(1.25rem, 2.8vh, 2.25rem) !important;
}

html.chunse-fp-about .salon-curve-timeline__stage {
  margin-top: clamp(1.25rem, 3vh, 2rem) !important;
}

html.chunse-fp-about .salon-curve-timeline__year {
  font-size: clamp(2rem, 4.5vw, 3.25rem) !important;
}

html.chunse-fp-about #history h2,
html.chunse-fp-about .salon-curve-timeline #history h2 {
  font-size: clamp(1.85rem, 3.5vw, 2.6rem) !important;
}

html.chunse-fp-about #strength.fp-screen h1 {
  font-size: clamp(2.2rem, 4.5vw, 3.4rem) !important;
}

/* 首页轮播：原片通透，去掉压暗渐变与胶片噪点朦胧感 */
.salon-hero-carousel > .bg-gradient-to-t,
.salon-hero-carousel > .salon-film-grain,
[data-salon-hero-carousel] > .bg-gradient-to-t,
[data-salon-hero-carousel] > .salon-film-grain {
  display: none !important;
  opacity: 0 !important;
}

/* 首页纸色：香槟绸 / 暖石，细纸纹。轮播原片不动 */
html.chunse-fp-home .layout-minimal {
  --salon-bg: #efe6da;
  --salon-bg-alt: #e5d9cc;
}

html.chunse-fp-home .layout-home > .salon-wall {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.28'/%3E%3C/svg%3E");
  background-size: 180px 180px;
  background-blend-mode: multiply;
}

.salon-hero-carousel .salon-hero-caption {
  display: none !important;
}