/* ============================================================
   家族皮肤：coastal —— Coastal Mediterranean 爱琴海正午
   装饰语言：直角照片窗、遮阳篷条纹带、衬线标签、海港印章徽章；
   mono 只用于经纬度坐标与图下编号（海图/档案编号感）
   （2026-07 质量攻坚版：去掉拱形；业态评审版：mono 收缩、补地中海道具）
   ============================================================ */

/* 更松弛的章节节奏 */
[data-family="coastal"] { --space-2xl: 8rem; }

/* ---------- 标签 ---------- */

/* mono 坐标标签：仅经纬度/海图场景使用，不写正文、不做通用标签 */
[data-family="coastal"] .tag-mono {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--muted);
}

/* 胶囊牌：地址、评分等（衬线大写，渡轮票根感） */
[data-family="coastal"] .capsule {
  display: inline-block;
  font-family: var(--font-display);
  font-size: var(--text-xs);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
  border: 1px solid var(--accent);
  border-radius: 999px;
  padding: var(--space-3xs) var(--space-sm);
  background: var(--surface);
}

/* 海港印章徽章：圆形双环 + 衬线（圆形是 coastal 独占形状） */
[data-family="coastal"] .badge {
  display: inline-grid;
  place-items: center;
  width: 6.5rem;
  height: 6.5rem;
  border: 1px solid var(--accent);
  border-radius: 50%;
  box-shadow: inset 0 0 0 3px var(--surface), inset 0 0 0 4px var(--accent);
  font-family: var(--font-display);
  font-size: 0.75rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
  text-align: center;
  line-height: 1.6;
  padding: var(--space-sm);
  transform: rotate(-8deg);
}

/* eyebrow 用衬线大写宽字距：菜单刊头感 */
[data-family="coastal"] .eyebrow {
  font-family: var(--font-display);
  letter-spacing: 0.34em;
}

/* 大标题里的斜体词用 accent 混色（混色标题手法） */
[data-family="coastal"] .section-title em,
[data-family="coastal"] .hero-ed__title em { color: var(--accent); }

/* ---------- 图片 ---------- */

/* 直角 + 小圆角 + 细白边照片框（复古度假明信片感，禁止拱形） */
[data-family="coastal"] .media-frame {
  border-radius: var(--radius-sm);
  border: 1px solid var(--line);
  background: var(--surface);
  padding: var(--space-2xs);
}

/* 编号 caption：图下衬线小字 + 海蓝 mono 编号 */
[data-family="coastal"] .cap {
  display: flex;
  align-items: baseline;
  gap: var(--space-2xs);
  margin-top: var(--space-2xs);
  font-family: var(--font-display);
  font-size: var(--text-sm);
  letter-spacing: 0.1em;
  color: var(--muted);
}
[data-family="coastal"] .cap-num {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--accent);
}

/* ---------- 组件微调 ---------- */

/* 按钮用直角小圆角，与"直角照片窗"一致（胶囊形只留给 .capsule） */
[data-family="coastal"] .btn { border-radius: var(--radius-sm); border-color: var(--accent); color: var(--accent); }
[data-family="coastal"] .btn--solid { background: var(--accent); color: var(--accent-ink); }
[data-family="coastal"] .btn--accent { color: var(--accent-ink); }
[data-family="coastal"] .btn--solid:hover { filter: brightness(1.1); }
[data-family="coastal"] .btn--ghost:hover { background: var(--accent); color: var(--accent-ink); }
[data-family="coastal"] .hero--immersive .btn { border-color: #fff; color: #fff; }
[data-family="coastal"] .hero--immersive .btn--solid { background: #fff; color: var(--accent); border-color: #fff; }
/* CTA banner 在照片上，按钮反白（solid 保持海蓝） */
[data-family="coastal"] .cta--banner .btn { border-color: #fff; color: #fff; }
[data-family="coastal"] .cta--banner .btn--solid { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }

/* CTA banner 顶部遮阳篷条纹带：南法海滩俱乐部信号（只此一处） */
[data-family="coastal"] .cta--banner::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  z-index: 1;
  height: 6px;
  background: repeating-linear-gradient(
    -45deg,
    var(--surface) 0 10px,
    var(--accent) 10px 20px
  );
}

/* classic 菜单分类标题用斜体衬线 */
[data-family="coastal"] .menu-cat__title { font-style: italic; }