/* ============================================================
   COCO Bakery — 关于我们页样式（about.css）完整最终版
   含：页头(左标题+右名片卡) / 品牌故事(左文+右围裙照卡) /
       理念(沿用 home.css 的 .philo) / 品牌视觉(bento+概念四宫格) /
       公司概要表 / CSR(左购物袋照卡+右文)
   照片卡语言（倾斜+阴影+角标）与首页首屏统一；
   about 全页不再使用「漂浮面包 mascot」，杜绝掉出卡片的问题。
   .philo / .story__verse / .bread-hero / .sec / .eyebrow 等通用样式来自全站加载的 home.css。
   ============================================================ */

/* ============ 页头 ============ */
.page-hero {
  padding: clamp(50px, 7vw, 90px) 0 clamp(46px, 6vw, 80px);
  position: relative;
  overflow: hidden;
}

.page-hero__glow {
  position: absolute;
  left: -10%;
  top: -40%;
  width: 50vw;
  height: 50vw;
  max-width: 600px;
  background: radial-gradient(circle, rgba(200, 118, 60, 0.16), transparent 62%);
  z-index: 0;
  pointer-events: none;
}

/* 页头两栏：左标题 + 右名片卡 */
.page-hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: clamp(30px, 5vw, 70px);
  align-items: center;
}

.page-hero__copy {
  min-width: 0;
}

.page-hero h1 {
  font-size: clamp(2.2rem, 5vw, 3.6rem);
  margin: 0.8rem 0 0.6rem;
}

.page-hero__media {
  display: grid;
  place-items: center;
}

/* ============ 通用照片卡（页头 / 故事 / CSR 共用） ============ */
.media-card {
  position: relative;
  margin: 0;
  width: min(94%, 440px);
  border-radius: 24px;
  overflow: hidden;
  background: var(--beige);                 /* 图裂 / onerror 隐藏后的兜底色 */
  box-shadow: 0 30px 60px -28px rgba(79, 48, 25, 0.5);
  transform: rotate(-1.5deg);
  transition: transform 0.5s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.media-card:hover {
  transform: rotate(0deg) translateY(-4px);
}

.media-card img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  transition: opacity 0.3s;
}

/* 页头名片卡：横向 */
.media-card--hero {
  width: min(100%, 460px);
  transform: rotate(1.5deg);
}

.media-card--hero img {
  aspect-ratio: 16 / 10;
}

.media-card--hero:hover {
  transform: rotate(0deg) translateY(-4px);
}

/* 故事围裙卡：竖向 */
.about-story__media .media-card img {
  aspect-ratio: 4 / 5;
}

/* CSR 购物袋卡：横向 */
.media-card--csr {
  transform: rotate(1.5deg);
}

.media-card--csr img {
  aspect-ratio: 5 / 4;
}

.media-card--csr:hover {
  transform: rotate(0deg) translateY(-4px);
}

/* 角标 */
.media-card__tag {
  position: absolute;
  top: 16px;
  right: 16px;
  background: var(--brown);
  color: var(--cream);
  font-family: var(--disp-jp);
  font-weight: 700;
  font-size: 0.76rem;
  letter-spacing: 0.04em;
  padding: 8px 14px;
  border-radius: 12px;
  box-shadow: 0 8px 18px -8px rgba(79, 48, 25, 0.6);
}

/* ============ 品牌故事（左文 + 右照卡，垂直居中） ============ */
.about-story {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: clamp(30px, 5vw, 80px);
  align-items: center;
}

.about-story__big {
  font-family: var(--disp-jp);
  font-weight: 900;
  font-size: clamp(2rem, 4.4vw, 3.4rem);
  line-height: 1.25;
  color: var(--brown-deep);
  margin: 0.8rem 0 0;
}

.about-story__big em {
  font-style: normal;
  color: var(--brown);
}

.about-story__stamp {
  margin: 1.6rem 0 2rem;
  display: inline-flex;
  align-items: center;
  gap: 0.8em;
  border: 2px dashed var(--brown-mid);
  border-radius: 999px;
  padding: 0.6em 1.3em;
  color: var(--brown);
  font-family: var(--disp-jp);
  font-weight: 700;
}

.about-story__stamp .bread-hero {
  width: 30px;
  height: 30px;
}

.about-story__body p {
  font-size: clamp(1.02rem, 1.3vw, 1.2rem);
  margin-bottom: 1.3em;
  color: var(--ink);
}

.about-story__body p:first-of-type::first-letter {
  font-family: var(--disp-lat);
  font-weight: 600;
  font-size: 3.2em;
  line-height: 0.8;
  float: left;
  margin: 0.05em 0.12em 0 0;
  color: var(--brown);
}

.about-story__media {
  display: grid;
  place-items: center;
}

/* ============ 品牌视觉 bento 画廊 ============ */
.brand-visual {
  position: relative;
}

.bv-bento {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(3, clamp(150px, 15vw, 210px));
  gap: 16px;
}

.bv-cell {
  margin: 0;
  position: relative;
  border-radius: 18px;
  overflow: hidden;
  box-shadow: var(--shadow-soft);
  background: var(--beige);
}

.bv-cell img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 0.3s;
}

.bv-cell:hover img {
  transform: scale(1.06);
}

.bv-cell--sign  { grid-column: 1 / 3; grid-row: 1 / 3; }
.bv-cell--card  { grid-column: 3 / 5; grid-row: 1 / 2; }
.bv-cell--cup   { grid-column: 3 / 4; grid-row: 2 / 3; }
.bv-cell--towel { grid-column: 4 / 5; grid-row: 2 / 3; }
.bv-cell--pack  { grid-column: 1 / 2; grid-row: 3 / 4; }
.bv-cell--tee   { grid-column: 2 / 4; grid-row: 3 / 4; }
.bv-cell--brand { grid-column: 4 / 5; grid-row: 3 / 4; }

/* 灯箱主图：裁掉左侧白墙 */
.bv-cell--sign img {
  object-position: 68% center;
}

/* 棕色品牌填空格 */
.bv-cell--brand {
  background: var(--brown);
  display: grid;
  place-items: center;
  gap: 8px;
  text-align: center;
  box-shadow: none;
}

.bv-cell--brand .bread-hero {
  width: 46%;
}

.bv-cell--brand .crust {
  fill: transparent;
  stroke: var(--cream);
}

.bv-cell--brand .score {
  stroke: var(--cream);
}

.bv-cell--brand .eye {
  fill: var(--cream);
  animation: none;
}

.bv-cell--brand .mouth {
  stroke: var(--cream);
}

.bv-cell--brand span {
  font-family: var(--disp-lat);
  font-weight: 600;
  font-size: 0.82rem;
  letter-spacing: 0.18em;
  line-height: 1.3;
  color: var(--cream);
}

/* —— 概念四宫格 —— */
.about-concept {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-top: clamp(28px, 3.4vw, 44px);
}

.ac-card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: clamp(20px, 2.4vw, 30px) 16px;
  text-align: center;
  transition: transform 0.4s, box-shadow 0.4s, border-color 0.4s;
}

.ac-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-soft);
  border-color: var(--brown-mid);
}

.ac-card__ic {
  width: 54px;
  height: 54px;
  margin: 0 auto 14px;
  border-radius: 50%;
  background: var(--beige);
  display: grid;
  place-items: center;
  transition: background 0.4s;
}

.ac-card:hover .ac-card__ic {
  background: var(--brown);
}

.ac-card__ic svg {
  width: 28px;
  height: 28px;
  stroke: var(--brown);
  fill: none;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: stroke 0.4s;
}

.ac-card:hover .ac-card__ic svg {
  stroke: var(--cream);
}

.ac-card b {
  font-family: var(--disp-jp);
  font-weight: 700;
  font-size: 1rem;
  color: var(--brown-deep);
}

/* ============ 公司概要表 ============ */
.company {
  border: 1px solid var(--line);
  border-radius: var(--r);
  overflow: hidden;
  background: var(--paper);
  display: grid;
  grid-template-columns: 1fr;
  box-shadow: var(--shadow-soft);
}

.company .row {
  display: contents;
}

.company dt,
.company dd {
  padding: 18px clamp(18px, 2.4vw, 30px);
  border-bottom: 1px solid var(--line);
}

.company dt {
  font-family: var(--disp-jp);
  font-weight: 700;
  color: var(--brown);
  background: var(--beige);
}

.company dd {
  color: var(--ink);
}

.company dd ul {
  display: grid;
  gap: 6px;
}

.company .row:last-child dt,
.company .row:last-child dd {
  border-bottom: none;
}

/* ============ CSR（左照卡 + 右文） ============ */
.csr {
  display: grid;
  grid-template-columns: 0.95fr 1.05fr;
  gap: clamp(30px, 5vw, 70px);
  align-items: center;
}

.csr__media {
  display: grid;
  place-items: center;
}

.csr__body p {
  font-size: clamp(1.02rem, 1.3vw, 1.18rem);
  margin-bottom: 1.2em;
  color: var(--ink);
}

.csr__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 1.4rem;
}

.csr__tags span {
  font-family: var(--disp-jp);
  font-weight: 700;
  font-size: 0.85rem;
  background: var(--beige);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 0.45em 1.1em;
  color: var(--brown);
  transition: 0.3s;
}

.csr__tags span:hover {
  background: var(--brown);
  color: var(--cream);
  border-color: var(--brown);
}

/* ============ 三端适配 ============ */
@media (min-width: 760px) {
  .company {
    grid-template-columns: 200px 1fr;
  }
}

@media (max-width: 1024px) {
  .page-hero__grid,
  .about-story,
  .csr {
    grid-template-columns: 1fr;
  }

  /* 页头：名片卡堆到标题下方，摆正 */
  .page-hero__media {
    margin-top: 8px;
  }

  .media-card--hero {
    transform: rotate(0deg);
  }

  /* 故事 / CSR：图移到文字上方 */
  .about-story__media,
  .csr__media {
    order: -1;
  }

  .media-card,
  .media-card--csr {
    transform: rotate(0deg);
  }

  /* bento 平板：2 列 */
  .bv-bento {
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: auto;
  }

  .bv-cell {
    grid-column: auto !important;
    grid-row: auto !important;
    aspect-ratio: 4 / 3;
  }

  .bv-cell--sign,
  .bv-cell--card,
  .bv-cell--tee {
    grid-column: span 2 !important;
    aspect-ratio: 16 / 9;
  }

  .bv-cell--brand {
    aspect-ratio: 4 / 3;
  }

  .about-concept {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 640px) {
  .bv-bento {
    grid-template-columns: 1fr;
  }

  .bv-cell,
  .bv-cell--sign,
  .bv-cell--card,
  .bv-cell--tee,
  .bv-cell--brand {
    grid-column: auto !important;
    aspect-ratio: 16 / 10;
  }

  .about-concept {
    grid-template-columns: repeat(2, 1fr);
  }

  .media-card,
  .media-card--hero,
  .media-card--csr {
    width: min(100%, 360px);
  }
}

/* 触屏回退 */
@media (hover: none) and (pointer: coarse) {
  .media-card:hover,
  .media-card--hero:hover,
  .media-card--csr:hover {
    transform: rotate(0deg);
  }

  .media-card:active,
  .media-card--hero:active,
  .media-card--csr:active {
    transform: translateY(-3px);
  }

  .bv-cell:hover img {
    transform: none;
  }

  .ac-card:hover {
    transform: none;
    box-shadow: none;
  }

  .ac-card:active {
    transform: translateY(-3px);
    box-shadow: var(--shadow-soft);
  }

  .ac-card:hover .ac-card__ic {
    background: var(--beige);
  }

  .ac-card:hover .ac-card__ic svg {
    stroke: var(--brown);
  }

  .ac-card:active .ac-card__ic {
    background: var(--brown);
  }

  .ac-card:active .ac-card__ic svg {
    stroke: var(--cream);
  }

  .csr__tags span:hover {
    background: var(--beige);
    color: var(--brown);
    border-color: var(--line);
  }

  .csr__tags span:active {
    background: var(--brown);
    color: var(--cream);
    border-color: var(--brown);
  }
}