/* ==========================================================================
   components/home.css — 首页
   结构 = 线上原版：home-hero 网格（横幅 / 陪陪展示 / 工作室名 / 官号 /
                          价格表 / 留言板 / 点单须知 / 横幅）
   比例 = 线上原版：圆钮 132px 正圆 · 大标题 clamp(30px,8vw,58px) · 容器 20px
   视觉 = 糖果粗野：纯糖果色块 + ink 硬描边 + 实心硬影
   ========================================================================== */

.home-hero {
  min-height: calc(100vh - 100px);
  display: grid;
  align-content: start;
  gap: clamp(22px, 5vw, 38px);
  padding-top: clamp(10px, 3vw, 24px);
}

/* --------------------------------------------------------------------------
   1 · 图片横幅（线上：radius 20px，图完整不裁切）
   -------------------------------------------------------------------------- */

.home-banner {
  width: 100%;
  margin: 0;
  overflow: hidden;
  border-radius: var(--r-xl);
  background: var(--panel-flat);
  border: var(--stroke) solid var(--ink);
  box-shadow: var(--hard);
}

.banner-img {
  display: block;
  width: 100%;
  max-height: min(72vh, 680px);
  height: auto;
  object-fit: contain;
  opacity: 0;
  transition: opacity 0.6s var(--ease-out);
}

.banner-img.loaded {
  opacity: 1;
}

.banner-fallback {
  display: grid;
  place-items: center;
  min-height: clamp(160px, 30vh, 320px);
  font-size: var(--fs-3xl);
  font-weight: var(--fw-blackest);
  letter-spacing: var(--ls-wide);
  color: var(--ink);
  background: var(--candy-pink-soft);
  text-shadow: 0 2px 0 rgba(255, 255, 255, 0.75);
}

/* 顶部横幅做视差时，图片比容器高一点，留出位移余量 */
.top-banner .banner-img.parallax-layer {
  height: 108%;
  object-fit: cover;
}

/* --------------------------------------------------------------------------
   2 · 陪陪展示（线上：紫色标题条 + 轮播 + 两个圆钮）
   -------------------------------------------------------------------------- */

.companion-box {
  position: relative;
}

.companion-box .module-grid {
  grid-template-columns: repeat(2, minmax(132px, 1fr));
  justify-content: center;
  max-width: 380px;
  margin: 0 auto;
  gap: clamp(14px, 3vw, 24px);
}

/* --------------------------------------------------------------------------
   3 · 工作室名（线上：居中大字）
   -------------------------------------------------------------------------- */

.profile {
  display: grid;
  justify-items: center;
  gap: 16px;
  text-align: center;
}

/* 贴纸大字：白色硬描边 + 糖果色硬影，像贴纸标签 */
.profile h1 {
  margin: 0;
  font-size: clamp(33px, 8.4vw, 64px);
  line-height: 1.05;
  letter-spacing: 0.05em;
  font-weight: var(--fw-blackest);
  color: var(--ink);
  text-shadow:
    0 3px 0 #fff,
    0 6px 0 var(--candy-pink-soft);
}

/* 糖果点缀：标题两侧的小糖粒（也用 ink 硬描边） */
.profile h1::before,
.profile h1::after {
  content: "";
  display: inline-block;
  width: 12px;
  height: 12px;
  margin: 0 14px;
  vertical-align: middle;
  border-radius: 50%;
  background: var(--candy-yellow);
  border: var(--stroke-thin) solid var(--ink);
}

.profile h1::after {
  background: var(--candy-mint);
}

/* --------------------------------------------------------------------------
   4 · 官号（线上：橙色标题条 + 大头像外链）
   -------------------------------------------------------------------------- */

.owner-card {
  display: grid;
  gap: 16px;
  justify-items: center;
}

.owner-links {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: clamp(18px, 5vw, 34px);
}

.owner-profile {
  display: grid;
  justify-items: center;
  gap: 10px;
  font-size: 17px;
  font-weight: var(--fw-black);
  color: var(--text);
}

/* 头像：糖果色圆环 + ink 硬描边（线上尺寸 clamp(118px,30vw,172px)） */
.profile-avatar {
  display: grid;
  place-items: center;
  width: clamp(118px, 30vw, 172px);
  aspect-ratio: 1;
  padding: 6px;
  overflow: hidden;
  background: var(--candy-pink);
  border: var(--stroke) solid var(--ink);
  border-radius: 50%;
  box-shadow: var(--hard);
  transition:
    transform var(--t-base) var(--ease-pop),
    box-shadow var(--t-base) var(--ease-pop);
}

.profile-avatar:hover {
  transform: var(--lift-lg) scale(1.02);
  box-shadow: var(--hard-hover);
}

.profile-avatar img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  border: var(--stroke) solid var(--ink);
  border-radius: 50%;
  opacity: 0;
  transition: opacity 0.5s var(--ease-out);
}

.profile-avatar img.loaded {
  opacity: 1;
}

.avatar-glyph {
  font-size: var(--fs-3xl);
  font-weight: var(--fw-blackest);
  color: var(--ink);
}

.owner-hint {
  font-size: var(--fs-sm);
  color: var(--muted);
}

/* --------------------------------------------------------------------------
   5 · 价格表（线上：橙色标题条 + 五个圆钮）
   -------------------------------------------------------------------------- */

.price-table-box {
  position: relative;
}

/* --------------------------------------------------------------------------
   圆钮（线上：min-width 132px + 正圆；糖果粗野版 = 纯糖果色块 + ink 硬描边）
   -------------------------------------------------------------------------- */

.module-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(132px, 1fr));
  gap: clamp(14px, 3vw, 24px);
  overflow-x: auto;
  padding: 8px 4px 16px;
  scrollbar-width: none;
}

.module-grid::-webkit-scrollbar {
  display: none;
}

.module-circle {
  position: relative;
  isolation: isolate;
  display: grid;
  place-items: center;
  min-width: 132px;
  aspect-ratio: 1;
  padding: 0;
  overflow: hidden;
  font-family: var(--font);
  font-size: clamp(19px, 3.2vw, 24px);
  font-weight: var(--fw-blackest);
  letter-spacing: 0.05em;
  color: var(--ink);
  text-align: center;
  background: var(--tone, var(--candy-pink));
  border: var(--stroke) solid var(--ink);
  border-radius: 50%;
  box-shadow: var(--hard);
  cursor: pointer;
  transition:
    transform var(--t-fast) var(--ease-pop),
    box-shadow var(--t-fast) var(--ease-pop),
    filter var(--t-fast) var(--ease);
}

.module-circle:hover {
  transform: var(--lift-lg);
  filter: saturate(1.08);
  box-shadow: var(--hard-hover);
}

.module-circle:active {
  transform: var(--press-flat);
  box-shadow: var(--hard-none);
}

/* 文字圆钮（线上：大字号） */
.module-circle.simple-circle {
  padding: 18px;
  font-size: clamp(26px, 5.4vw, 37px);
  line-height: 1.15;
}

/* 图片圆钮（线上：图片铺满整圆） */
.circle-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.5s var(--ease-out);
}

.circle-img.loaded {
  opacity: 1;
}

/* 糖果配色：价格表的五个圆钮依次换纯色块（柠檬 / 草莓 / 樱桃 / 薄荷 / 蓝莓） */
.module-grid > .module-circle:nth-child(1) {
  background: var(--candy-yellow);
}

.module-grid > .module-circle:nth-child(2) {
  background: var(--candy-pink);
}

.module-grid > .module-circle:nth-child(3) {
  background: var(--candy-red);
}

.module-grid > .module-circle:nth-child(4) {
  background: var(--candy-mint);
}

.module-grid > .module-circle:nth-child(5) {
  background: var(--candy-blue);
}

/* 陪陪展示的两个圆钮（图钮，底色被图盖住，描边与硬影照旧走 ink） */
.module-grid.module-grid-pair > .module-circle:nth-child(1) {
  background: var(--candy-orange);
}

.module-grid.module-grid-pair > .module-circle:nth-child(2) {
  background: var(--candy-purple);
}

/* --------------------------------------------------------------------------
   7 · 点单须知（线上：居中 860px）
   -------------------------------------------------------------------------- */

.order-notice p {
  margin: 12px 0 0;
  font-size: var(--fs-base);
  font-weight: var(--fw-medium);
  color: var(--text);
  line-height: 1.8;
}

.order-notice p:first-of-type {
  margin-top: 0;
}

/* --------------------------------------------------------------------------
   响应式
   -------------------------------------------------------------------------- */

@media (max-width: 620px) {
  .module-grid {
    grid-template-columns: repeat(5, 132px);
  }

  .home-banner .banner-img {
    max-height: none;
  }

  .top-banner .banner-img.parallax-layer {
    height: auto;
  }

  .owner-links {
    gap: 14px;
  }

  .profile-avatar {
    width: min(38vw, 136px);
  }

  .profile h1::before,
  .profile h1::after {
    display: none;
  }
}