/* ============================================================
   COCO Bakery — 联系我们页样式（contact.css）安静有温度版
   开屏 = 左文 + 右两张叠放拍立得（店招 + 名片）；
   联系信息(深色卡) + 表单(白卡) 两栏；
   来店案内 = 地图 + 购物袋拍立得。
   无斜切 / 无漂浮 / 无旋转环 / 无空心巨字。
   活感仅来自：滚动淡入(.reveal) / 拍立得错落 hover 摆正 /
   信息行 hover 高亮 / "营业中"脉冲点。
   全站基础类 .page-hero / .page-hero__glow / .eyebrow / .h-display / .lede /
   .btn / .sec / .sec-head / .wrap 来自 about.css / style.css / home.css，不重定义。
   本页独有类 c- 前缀；info-card / form-card / map 为本页原有类，优化后保留。
   ============================================================ */

/* ============ 开屏：左文 + 右叠放拍立得 ============ */
.c-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  gap: clamp(32px, 6vw, 80px);
  align-items: center;
}

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

.c-hero__copy h1 {
  font-size: clamp(2rem, 4.4vw, 3.2rem);
  line-height: 1.2;
  margin: 0.9rem 0 1.1rem;
}

.c-hero__copy .lede {
  margin-bottom: 1.8rem;
}

/* "营业中"状态条 + 脉冲点 */
.c-status {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--disp-jp);
  font-weight: 700;
  font-size: 0.86rem;
  color: var(--brown-deep);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 0.55em 1.2em;
}

.c-status__dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #7aa86b;
  box-shadow: 0 0 0 0 rgba(122, 168, 107, 0.5);
  animation: c-pulse 2s ease-out infinite;
}

@keyframes c-pulse {
  0% { box-shadow: 0 0 0 0 rgba(122, 168, 107, 0.5); }
  70% { box-shadow: 0 0 0 8px rgba(122, 168, 107, 0); }
  100% { box-shadow: 0 0 0 0 rgba(122, 168, 107, 0); }
}

/* 右栏：叠放容器 */
.c-hero__aside {
  display: flex;
  justify-content: center;
}

.c-stack {
  position: relative;
  width: min(88%, 380px);
}

/* 主拍立得（店招，在上） */
.c-stack .c-polaroid--a {
  position: relative;
  z-index: 1;
}

/* 副拍立得（名片，叠在右下角） */
.c-stack .c-polaroid--b {
  position: absolute;
  z-index: 2;
  right: -7%;
  bottom: -9%;
  width: 60%;
}

/* ============ 拍立得（自然比例 · 本页自包含） ============ */
.c-polaroid {
  position: relative;
  margin: 0;
  background: #fff;
  padding: 11px 11px 0;
  border-radius: 6px;
  box-shadow: 0 18px 40px -22px rgba(79, 48, 25, 0.45);
  transform: rotate(var(--rot, 0deg));
  transition:
    transform 0.45s cubic-bezier(0.2, 0.8, 0.2, 1),
    box-shadow 0.45s;
}

.c-polaroid:hover {
  transform: rotate(0deg) translateY(-8px) scale(1.02);
  box-shadow: 0 28px 54px -24px rgba(79, 48, 25, 0.55);
  z-index: 3;
}

.c-polaroid__tape {
  position: absolute;
  top: -11px;
  left: 50%;
  width: 60px;
  height: 20px;
  transform: translateX(-50%) rotate(-4deg);
  background: rgba(244, 233, 214, 0.82);
  border-left: 1px dashed rgba(122, 78, 46, 0.2);
  border-right: 1px dashed rgba(122, 78, 46, 0.2);
  box-shadow: 0 2px 6px rgba(79, 48, 25, 0.12);
  z-index: 3;
}

/* 照片区：米底兜底；img 自然比例，绝不裁切 */
.c-polaroid__photo {
  background: var(--beige);
  border-radius: 3px;
  overflow: hidden;
}

.c-polaroid__photo img {
  width: 100%;
  height: auto;
  display: block;
  transition: transform 0.5s ease;
}

.c-polaroid:hover .c-polaroid__photo img {
  transform: scale(1.04);
}

/* 图加载失败时的温柔占位 */
.c-polaroid__photo.is-empty {
  aspect-ratio: 4 / 3;
  display: grid;
  place-items: center;
}

.c-polaroid__photo.is-empty::after {
  content: "🍞";
  font-size: 2.2rem;
  opacity: 0.5;
}

.c-polaroid__cap {
  padding: 11px 6px 13px;
  text-align: center;
  font-family: var(--disp-jp);
  font-weight: 700;
  font-size: 0.88rem;
  color: var(--brown-deep);
}

/* ============ 联系信息卡（深色） ============ */
.contact {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: clamp(28px, 4vw, 60px);
  align-items: start;
}

.info-card {
  background: var(--brown-deep);
  color: var(--beige);
  border-radius: var(--r);
  padding: clamp(28px, 3.4vw, 46px);
  position: relative;
  overflow: hidden;
}

.info-card::after {
  content: "";
  position: absolute;
  right: -30%;
  bottom: -30%;
  width: 70%;
  height: 70%;
  background: radial-gradient(circle, rgba(200, 118, 60, 0.3), transparent 65%);
  pointer-events: none;
}

.info-card h3 {
  font-family: var(--disp-jp);
  font-weight: 900;
  font-size: 1.5rem;
  color: var(--cream);
  margin-bottom: 1.4rem;
  position: relative;
}

.info-row {
  display: flex;
  gap: 14px;
  align-items: center;
  padding: 14px 12px;
  margin: 0 -12px;
  border-bottom: 1px solid rgba(244, 233, 214, 0.14);
  border-radius: 12px;
  position: relative;
  transition: background 0.3s ease;
}

.info-row:last-of-type {
  border-bottom: none;
}

/* hover 行轻微高亮 */
.info-row:hover {
  background: rgba(244, 233, 214, 0.07);
}

.info-row .ic {
  flex: none;
  width: 40px;
  height: 40px;
  border-radius: 11px;
  background: rgba(244, 233, 214, 0.12);
  display: grid;
  place-items: center;
  transition: background 0.3s ease;
}

.info-row:hover .ic {
  background: var(--oven);
}

.info-row .ic svg {
  width: 20px;
  height: 20px;
  stroke: var(--beige);
  fill: none;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: stroke 0.3s ease;
}

.info-row:hover .ic svg {
  stroke: var(--cream);
}

.info-row small {
  display: block;
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  color: rgba(244, 233, 214, 0.6);
  text-transform: uppercase;
  font-family: var(--disp-lat);
  margin-bottom: 2px;
}

.info-row b {
  font-family: var(--disp-jp);
  font-weight: 700;
  color: var(--cream);
  font-size: 1.02rem;
  line-height: 1.5;
}

.info-note {
  margin-top: 1.4rem;
  font-size: 0.86rem;
  color: rgba(244, 233, 214, 0.7);
  position: relative;
  line-height: 1.8;
}

/* ============ 表单卡 ============ */
.form-card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: clamp(26px, 3.2vw, 44px);
  box-shadow: var(--shadow-soft);
}

.form-card h3 {
  font-family: var(--disp-jp);
  font-weight: 900;
  font-size: 1.4rem;
  color: var(--brown-deep);
  margin-bottom: 0.4rem;
}

.form-card .sub {
  color: var(--ink-soft);
  font-size: 0.92rem;
  margin-bottom: 1.6rem;
}

/* ============ 来店案内：地图 + 拍立得 ============ */
.c-access {
  display: grid;
  grid-template-columns: 1.5fr 0.85fr;
  gap: clamp(24px, 3.4vw, 48px);
  align-items: stretch;
}

.c-access__map {
  position: relative;
  border-radius: var(--r);
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--beige);
  box-shadow: var(--shadow-soft);
  min-height: 360px;
}

.c-access__map iframe {
  width: 100%;
  height: 100%;
  min-height: 360px;
  border: 0;
  display: block;
  filter: sepia(0.18) saturate(0.9) hue-rotate(-6deg);
}

.map__pin {
  position: absolute;
  top: 18px;
  left: 18px;
  z-index: 2;
  background: var(--paper);
  border-radius: 12px;
  padding: 11px 18px;
  box-shadow: var(--shadow-soft);
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--disp-jp);
  font-weight: 700;
  color: var(--brown-deep);
  font-size: 0.92rem;
}

.c-access__side {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 20px;
  text-align: center;
}

.c-access__side .c-polaroid--solo {
  width: min(74%, 240px);
}

.c-access__txt {
  font-size: 0.94rem;
  color: var(--ink-soft);
  line-height: 1.85;
}

/* ============ 三端适配 ============ */
@media (max-width: 1024px) {
  .c-hero,
  .contact,
  .c-access {
    grid-template-columns: 1fr;
  }

  /* 开屏拍立得移到文字上方 */
  .c-hero__aside {
    order: -1;
    margin-bottom: 12px;
  }

  .c-stack {
    width: min(72%, 320px);
  }

  .c-access__side {
    padding-top: 8px;
  }
}

@media (max-width: 640px) {
  .c-stack {
    width: min(80%, 300px);
  }

  .c-stack .c-polaroid--b {
    right: -4%;
    bottom: -7%;
    width: 56%;
  }

  .c-access__side .c-polaroid--solo {
    width: min(70%, 220px);
  }

  .info-row {
    margin: 0 -8px;
    padding: 12px 8px;
  }
}

/* ============ 触屏回退：hover 改 active ============ */
@media (hover: none) and (pointer: coarse) {
  .c-polaroid:hover {
    transform: rotate(var(--rot, 0deg));
    box-shadow: 0 18px 40px -22px rgba(79, 48, 25, 0.45);
  }

  .c-polaroid:hover .c-polaroid__photo img {
    transform: none;
  }

  .info-row:hover {
    background: transparent;
  }

  .info-row:hover .ic {
    background: rgba(244, 233, 214, 0.12);
  }

  .info-row:hover .ic svg {
    stroke: var(--beige);
  }

  .c-polaroid:active {
    transform: rotate(0deg) translateY(-5px) scale(1.02);
    box-shadow: 0 22px 44px -22px rgba(79, 48, 25, 0.5);
  }

  .c-polaroid:active .c-polaroid__photo img {
    transform: scale(1.04);
  }

  .info-row:active {
    background: rgba(244, 233, 214, 0.07);
  }

  .info-row:active .ic {
    background: var(--oven);
  }

  .info-row:active .ic svg {
    stroke: var(--cream);
  }
}

/* ============ 尊重减少动效 ============ */
@media (prefers-reduced-motion: reduce) {
  .c-polaroid,
  .c-polaroid__photo img,
  .info-row,
  .info-row .ic,
  .info-row .ic svg,
  .c-status__dot {
    transition: none;
    animation: none;
  }
}