/* ============================================================
   全国家常菜 · 中国味 — style.css
   移动端优先 · 本地自托管字体（Inter/Playfair Display，无外部API）
   中文标题走系统衬线栈（Noto Serif SC / Songti SC）
   ============================================================ */

/* 本地字体（OFL 开源协议，存于 assets/fonts） */
@font-face {
  font-family: "Inter";
  src: url("assets/fonts/inter-latin-400-normal.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("assets/fonts/inter-latin-500-normal.woff2") format("woff2");
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("assets/fonts/inter-latin-600-normal.woff2") format("woff2");
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("assets/fonts/inter-latin-700-normal.woff2") format("woff2");
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Playfair Display";
  src: url("assets/fonts/playfair-display-latin-600-normal.woff2") format("woff2");
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Playfair Display";
  src: url("assets/fonts/playfair-display-latin-700-normal.woff2") format("woff2");
  font-weight: 700; font-style: normal; font-display: swap;
}

:root {
  /* 配色：暖米白底 · 辣椒橙红主色 · 香草绿辅助 · 藏红金点缀 */
  --bg: #FBF7F0;
  --card: #FFFFFF;
  --ink: #241F1B;
  --ink-2: #6B5E54;
  --line: #EDE4D6;
  --primary: #E8552D;
  --primary-deep: #C8431F;
  --primary-soft: #FDEAE2;
  --green: #3E7C5A;
  --gold: #E8A33D;
  --shadow: 0 4px 16px rgba(232, 85, 45, .08);
  --shadow-lg: 0 12px 32px rgba(36, 31, 27, .16);
  --radius: 16px;
  --font-title: "Playfair Display", Georgia, "Noto Serif SC", "Songti SC", "STSong", "SimSun", serif;
  --font-body: "Inter", -apple-system, "Helvetica Neue", "Segoe UI", "Noto Sans SC", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  --sat: env(safe-area-inset-top, 0px);
  --sab: env(safe-area-inset-bottom, 0px);
  --sal: env(safe-area-inset-left, 0px);
  --sar: env(safe-area-inset-right, 0px);
}

* { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html { scroll-behavior: smooth; }

body {
  font-family: var(--font-body);
  background: var(--bg);
  color: var(--ink);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  padding-bottom: env(safe-area-inset-bottom, 0px);
}

img { display: block; max-width: 100%; }

/* ============ Hero ============ */
.hero {
  position: relative;
  padding: calc(26px + var(--sat)) 20px 22px;
  color: #fff;
  text-align: center;
  overflow: hidden;
  background:
    radial-gradient(1200px 400px at 15% -10%, rgba(232, 163, 61, .30), transparent 60%),
    radial-gradient(900px 380px at 110% 10%, rgba(255, 130, 80, .40), transparent 55%),
    linear-gradient(140deg, #A62E14 0%, #D34822 45%, #E8552D 100%);
}
.hero::after {
  content: "🍚🥘🍜🌶️🦐🍖🥟🍲";
  position: absolute; left: 0; right: 0; bottom: 8px;
  font-size: 30px; letter-spacing: 10px; opacity: .18;
  white-space: nowrap; overflow: hidden;
  pointer-events: none;
}
.hero-inner { position: relative; z-index: 1; max-width: 720px; margin: 0 auto; }
.hero-badge {
  display: inline-block;
  padding: 4px 13px; margin-bottom: 8px;
  font-size: 13px; letter-spacing: 1px;
  background: rgba(255, 255, 255, .16);
  border: 1px solid rgba(255, 255, 255, .35);
  border-radius: 999px;
  backdrop-filter: blur(6px);
}
.hero-title {
  font-family: var(--font-title);
  font-size: clamp(28px, 8.5vw, 46px);
  font-weight: 700;
  letter-spacing: 2px;
  line-height: 1.25;
  text-shadow: 0 2px 18px rgba(0, 0, 0, .25);
}
.hero-dot { color: #F5C882; margin: 0 4px; }
.hero-sub {
  margin-top: 10px;
  font-size: clamp(13px, 3.6vw, 16px);
  color: rgba(255, 255, 255, .92);
}
.hero-stats {
  display: flex; justify-content: center; gap: 10px;
  margin-top: 10px;
}
.stat {
  min-width: 88px;
  padding: 7px 12px;
  background: rgba(255, 255, 255, .14);
  border: 1px solid rgba(255, 255, 255, .3);
  border-radius: 14px;
  backdrop-filter: blur(8px);
  display: flex; flex-direction: column;
}
.stat b { font-size: 18px; font-weight: 800; line-height: 1.2; }
.stat span { font-size: 11px; color: rgba(255, 255, 255, .85); }

/* ============ 吸顶栏 ============ */
.sticky-bar {
  position: sticky; top: 0; z-index: 50;
  background: rgba(251, 247, 240, .92);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line);
  padding: 10px 14px calc(8px + var(--sat) * 0);
  box-shadow: 0 2px 10px rgba(80, 40, 10, .05);
}
.search-row { display: flex; gap: 8px; max-width: 1080px; margin: 0 auto; }
.search-box {
  flex: 1;
  display: flex; align-items: center; gap: 6px;
  background: var(--card);
  border: 1.5px solid var(--line);
  border-radius: 999px;
  padding: 0 14px;
  transition: border-color .2s;
}
.search-box:focus-within { border-color: var(--primary); }
.search-icon { font-size: 15px; opacity: .7; }
.search-box input {
  flex: 1; min-width: 0;
  border: none; outline: none; background: none;
  font-size: 15px; font-family: inherit;
  padding: 10px 0;
  color: var(--ink);
}
.search-clear {
  border: none; background: #F0E8DC; color: #8A7A6C;
  width: 20px; height: 20px; border-radius: 50%;
  font-size: 11px; line-height: 1; cursor: pointer;
}
.btn-random {
  flex-shrink: 0;
  border: none; cursor: pointer;
  background: linear-gradient(135deg, var(--primary), var(--gold));
  color: #fff;
  font-size: 14px; font-weight: 600; font-family: inherit;
  padding: 0 16px;
  border-radius: 999px;
  box-shadow: 0 4px 12px rgba(194, 65, 12, .35);
  transition: transform .15s;
}
.btn-random:active { transform: scale(.95); }

/* 外卖热门入口（导航栏独立一行） */
.hot-nav {
  display: flex;
  gap: 6px;
  padding: 10px 2px 0;
  max-width: 1080px;
  margin: 0 auto;
}
.hot-nav a {
  text-decoration: none;
  flex: 1 1 auto;
  text-align: center;
  white-space: nowrap;
  font-size: 12.5px; font-weight: 700; letter-spacing: 1px;
  color: #fff;
  background: linear-gradient(135deg, #E5484D, #E8552D);
  border-radius: 999px;
  padding: 7px 10px;
  box-shadow: 0 3px 12px rgba(229, 72, 77, .35);
  transition: transform .15s, box-shadow .2s;
}
.hot-nav a:active { transform: scale(.96); }
.hot-nav a.active {
  box-shadow: 0 0 0 2px #E5484D, 0 4px 14px rgba(229, 72, 77, .4);
}
/* My Favor 入口（金色系） */
.hot-nav a.favor-entry {
  background: linear-gradient(135deg, #E8A33D, #D97706);
  box-shadow: 0 3px 12px rgba(232, 163, 61, .35);
}
/* 菜篮子入口（蓝色系） */
.hot-nav a.basket-entry {
  background: linear-gradient(135deg, #4A7FB5, #35648F);
  box-shadow: 0 3px 12px rgba(74, 127, 181, .35);
}
/* 补录菜品入口（绿色系） */
.hot-nav a.input-entry {
  background: linear-gradient(135deg, #3E7C5A, #2F5D43);
  box-shadow: 0 3px 12px rgba(62, 124, 90, .35);
}

/* 菜系快捷导航：无图标，7列×2行均分宽度（14菜系自适应两行） */
.cuisine-nav {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 6px;
  padding: 10px 2px 2px;
}
.cuisine-nav a {
  text-decoration: none;
  text-align: center;
  font-size: 12.5px; font-weight: 500;
  color: var(--ink-2);
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 6px 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: all .2s;
}
@media (min-width: 768px) {
  .cuisine-nav { gap: 8px; }
  .cuisine-nav a { font-size: 14px; padding: 7px 4px; }
}
.cuisine-nav a.active {
  color: #fff;
  background: var(--primary);
  border-color: var(--primary);
  box-shadow: 0 3px 10px rgba(232, 85, 45, .3);
}

/* 搜索反馈 */
.search-status {
  max-width: 1080px; margin: 14px auto 0; padding: 0 16px;
  font-size: 14px; color: var(--primary-deep);
}

/* ============ 菜系区块 ============ */
main { max-width: 1080px; margin: 0 auto; padding: 8px 14px 40px; }

.cuisine-section { padding-top: 26px; scroll-margin-top: 170px; }

.cuisine-head { margin-bottom: 16px; }
.cuisine-title-row { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.cuisine-emoji { font-size: 30px; }
.cuisine-name {
  font-family: var(--font-title);
  font-size: clamp(22px, 6vw, 30px);
  font-weight: 700; letter-spacing: 1px;
}
.cuisine-name small { font-size: 14px; font-weight: 400; color: var(--ink-2); margin-left: 8px; }
.cuisine-tagline {
  font-size: 13.5px;
  color: var(--c, var(--primary));
  font-weight: 600;
  border-left: 3px solid var(--c, var(--primary));
  padding-left: 8px;
  margin-top: 2px;
}
.cuisine-intro { margin-top: 8px; font-size: 13.5px; color: var(--ink-2); }
.cuisine-count {
  font-size: 12px; color: #fff;
  background: var(--c, var(--primary));
  border-radius: 999px; padding: 2px 10px;
  margin-left: auto;
}

/* 菜品卡片网格：手机端固定横排3个（360~440px 主流机型），大屏自动多列 */
.dish-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}
@media (min-width: 640px)  { .dish-grid { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 14px; } }
@media (min-width: 768px)  { .dish-grid { grid-template-columns: repeat(auto-fill, minmax(205px, 1fr)); gap: 16px; } }
@media (min-width: 1080px) { .dish-grid { grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 18px; } }

.dish-card {
  background: var(--card);
  border-radius: var(--radius);
  overflow: hidden;
  cursor: pointer;
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
  transition: transform .22s, box-shadow .22s;
  display: flex; flex-direction: column;
}
.dish-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.dish-card:active { transform: scale(.98); }

.card-img {
  position: relative;
  aspect-ratio: 1 / 1;   /* 手机3列用方形图 */
  background: linear-gradient(135deg, #FBEDE0, #F8DFC8);
  overflow: hidden;
}
@media (min-width: 640px) {
  .card-img { aspect-ratio: 4 / 3; }
}
.card-img img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform .35s;
}
.dish-card:hover .card-img img { transform: scale(1.06); }
.card-img-fallback {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 44px;
}

.card-body { padding: 8px 8px 10px; display: flex; flex-direction: column; gap: 4px; flex: 1; }
.card-name-row { display: flex; align-items: center; gap: 5px; flex-wrap: wrap; }
.card-name {
  font-family: var(--font-title);
  font-size: 13.5px; font-weight: 600;
}
/* 外卖热门红色标签 */
.hot-badge {
  display: inline-block;
  font-size: 9px; font-weight: 600;
  color: #fff;
  background: #E5484D;
  border-radius: 6px;
  padding: 1px 5px;
  white-space: nowrap;
  line-height: 1.4;
}
.card-sub {
  font-size: 9.5px; color: var(--c, var(--primary));
  background: var(--primary-soft);
  border: 1px solid rgba(232, 85, 45, .18);
  border-radius: 6px; padding: 1px 5px;
}
.card-taste { font-size: 12px; color: var(--ink-2); }
.card-meta {
  display: flex; align-items: center; gap: 10px;
  font-size: 11px; color: var(--ink-2);
  border-top: 1px dashed var(--line);
  padding-top: 6px; margin-top: auto;
}
/* 城市（subRegion）标签：放在烹饪时间行的右侧 */
.card-meta .card-sub {
  margin-left: auto;
  font-size: 9.5px;
}
/* 手机端3列：隐藏口味与难度，只留菜名+用时+城市（右侧），保持卡片紧凑 */
@media (max-width: 639px) {
  .card-name { font-size: 12.5px; }
  .card-taste { display: none; }
  .card-meta span:nth-child(2) { display: none; }
  .card-meta { font-size: 10px; padding-top: 4px; }
}

/* 无结果 */
.no-result {
  grid-column: 1 / -1;
  text-align: center; color: var(--ink-2);
  padding: 40px 0; font-size: 14px;
}

/* ============ 详情弹层 ============ */
.modal { position: fixed; inset: 0; z-index: 100; display: flex; align-items: center; justify-content: center; }
.modal[hidden] { display: none; }
/* 详情弹层在随机推荐弹层之上 */
#dishModal { z-index: 110; }
.modal-backdrop {
  position: absolute; inset: 0;
  background: rgba(30, 16, 6, .55);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  animation: fadeIn .2s;
}
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

.modal-panel {
  position: relative;
  width: min(92vw, 660px);
  max-height: 86vh;
  max-height: calc(86vh - var(--sat) - var(--sab));
  overflow-y: auto;
  background: var(--bg);
  border-radius: 22px;
  box-shadow: var(--shadow-lg);
  animation: slideUp .28s cubic-bezier(.2, .8, .3, 1);
  -webkit-overflow-scrolling: touch;
}
@keyframes slideUp { from { transform: translateY(40px); opacity: 0; } to { transform: none; opacity: 1; } }

.modal-close {
  position: sticky; top: 0; float: right; z-index: 2;
  margin: 12px 12px -46px 0;
  width: 34px; height: 34px;
  border: none; border-radius: 50%;
  background: rgba(0, 0, 0, .45); color: #fff;
  font-size: 15px; cursor: pointer;
  backdrop-filter: blur(4px);
}
.modal-hero-img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: 22px 22px 0 0;
}
.modal-hero-fallback {
  width: 100%; aspect-ratio: 16 / 9;
  display: flex; align-items: center; justify-content: center;
  font-size: 64px;
  background: linear-gradient(135deg, #FBEDE0, #F8DFC8);
  border-radius: 22px 22px 0 0;
}
.modal-body { padding: 6px 20px 26px; }
.modal-title {
  font-family: var(--font-title);
  font-size: 24px; font-weight: 700;
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
}
.modal-title .card-sub { font-size: 11px; padding: 2px 8px; }
.modal-taste { margin: 6px 0 4px; font-size: 13.5px; color: var(--primary-deep); font-weight: 600; }
.modal-meta { display: flex; gap: 14px; font-size: 12.5px; color: var(--ink-2); margin-bottom: 8px; }

.modal-block { margin-top: 16px; }
.modal-block h4 {
  font-size: 14.5px; font-weight: 700;
  display: flex; align-items: center; gap: 6px;
  margin-bottom: 8px;
}
.modal-block h4::before {
  content: ""; width: 4px; height: 16px;
  background: var(--primary); border-radius: 3px;
}
.chip-list { display: flex; flex-wrap: wrap; gap: 7px; }
.chip {
  font-size: 12.5px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 4px 11px;
  color: var(--ink);
}
.chip b { color: var(--primary-deep); font-weight: 600; }

.steps { list-style: none; counter-reset: step; display: flex; flex-direction: column; gap: 9px; }
.steps li {
  position: relative;
  counter-increment: step;
  padding: 9px 12px 9px 40px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 12px;
  font-size: 13.5px;
}
.steps li::before {
  content: counter(step);
  position: absolute; left: 10px; top: 10px;
  width: 22px; height: 22px;
  background: linear-gradient(135deg, var(--primary), var(--gold));
  color: #fff;
  font-size: 12px; font-weight: 700;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
}

/* ============ 随机推荐弹层 ============ */
.random-panel { width: min(94vw, 640px); }
.random-body { padding: 10px 20px 26px; }
.random-title {
  font-family: var(--font-title);
  font-size: 24px; font-weight: 700;
}
.random-sub { font-size: 12.5px; color: var(--ink-2); margin: 2px 0 12px; }
.random-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
.r-card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 12px;
  overflow: hidden;
  cursor: pointer;
  box-shadow: var(--shadow);
  transition: transform .2s, box-shadow .2s;
}
.r-card:active { transform: scale(.96); }
.r-card-img {
  aspect-ratio: 1 / 1;
  background: linear-gradient(135deg, #FBEDE0, #F8DFC8);
  overflow: hidden;
}
.r-card-img img { width: 100%; height: 100%; object-fit: cover; }
.r-card-name {
  padding: 6px 8px 8px;
  font-family: var(--font-title);
  font-size: 12.5px; font-weight: 600;
  text-align: center;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.r-card-cuisine { display: block; font-size: 10px; color: var(--ink-2); margin-top: 1px; font-family: var(--font-body); }
.random-filter-title {
  font-size: 14px; font-weight: 700;
  margin: 18px 0 10px;
  display: flex; align-items: center; gap: 6px;
}
.random-filter-title::before {
  content: ""; width: 4px; height: 16px;
  background: var(--primary); border-radius: 3px;
}
.random-tags { display: flex; flex-wrap: wrap; gap: 8px; }
.rtag {
  border: 1px solid var(--line);
  background: var(--card);
  color: var(--ink-2);
  font-size: 12.5px; font-family: inherit;
  border-radius: 999px;
  padding: 6px 13px;
  cursor: pointer;
  transition: all .18s;
}
.rtag.active {
  color: #fff;
  background: var(--primary);
  border-color: var(--primary);
  box-shadow: 0 2px 8px rgba(232, 85, 45, .3);
}
.btn-refresh {
  display: block;
  width: 100%;
  margin-top: 18px;
  border: none; cursor: pointer;
  background: linear-gradient(135deg, var(--primary), var(--gold));
  color: #fff;
  font-size: 15px; font-weight: 700; font-family: inherit;
  border-radius: 999px;
  padding: 12px;
  box-shadow: 0 4px 14px rgba(194, 65, 12, .35);
  transition: transform .15s;
}
.btn-refresh:active { transform: scale(.97); }

/* ============ 详情头部两列 ============ */
.modal-head { display: flex; gap: 14px; align-items: flex-start; }
.modal-head-left { flex: 1 1 auto; min-width: 0; }
.modal-head-tags { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-bottom: 4px; }
.modal-head-right {
  flex-shrink: 0;
  width: 44%;
  min-width: 130px;
}

/* ============ 收藏（FavoriteSection 独立组件） ============ */
.favorite-section {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: flex-end;
  align-content: flex-start;
}
.favor-btn {
  border: 1px solid var(--line);
  background: var(--card);
  color: var(--primary-deep);
  font-size: 12px; font-weight: 600; font-family: inherit;
  border-radius: 8px;
  padding: 6px 10px;
  cursor: pointer;
  transition: all .18s;
  white-space: nowrap;
}
.favor-btn:hover { border-color: var(--primary); background: var(--primary-soft); }
.favor-btn:active { transform: scale(.97); }
.favor-btn.added {
  color: var(--ink-2);
  background: #F0E8DC;
  border-color: #E4D8C8;
  cursor: pointer;
  font-weight: 500;
}
/* 收藏弹层里的栏目 */
.favor-section { margin-bottom: 20px; }
.favor-person {
  font-size: 16px; font-weight: 700;
  font-family: var(--font-title);
  display: flex; align-items: center; gap: 8px;
  margin-bottom: 10px;
}
.favor-person::before {
  content: ""; width: 4px; height: 18px;
  background: var(--gold); border-radius: 3px;
}
.favor-count {
  font-size: 11px; font-weight: 600; font-family: var(--font-body);
  color: #fff; background: var(--gold);
  border-radius: 999px; padding: 1px 8px;
}
.favor-empty { font-size: 12.5px; color: var(--ink-2); padding: 4px 0 0; }

/* ============ 补录菜品 ============ */
.input-textarea {
  width: 100%;
  box-sizing: border-box;
  border: 1px solid var(--line);
  background: var(--card);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.7;
  border-radius: 10px;
  padding: 12px 14px;
  resize: vertical;
  min-height: 160px;
  outline: none;
  transition: border-color .2s;
}
.input-textarea:focus { border-color: var(--primary); }
.input-textarea::placeholder { color: #B8AC9E; }
.input-status {
  margin-top: 10px;
  font-size: 12.5px;
  color: var(--green);
  text-align: center;
}

/* ============ 返回顶部 ============ */
.btn-top {
  position: fixed;
  right: calc(16px + var(--sar)); bottom: calc(22px + var(--sab));
  width: 44px; height: 44px;
  border: none; border-radius: 50%;
  background: rgba(36, 31, 27, .85); color: #fff;
  font-size: 18px; cursor: pointer;
  z-index: 60;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .25);
  transition: opacity .25s, transform .25s;
}
.btn-top:hover { transform: translateY(-3px); }

/* ============ 页脚 ============ */
.footer {
  text-align: center;
  padding: 30px 20px calc(26px + var(--sab));
  background: #241F1B;
  color: #D9CDBE;
  font-size: 13px;
}
.footer-note { margin-top: 4px; font-size: 12px; color: #8A7A6C; }

/* ============ 大屏微调 ============ */
@media (min-width: 1080px) {
  .hero { padding-top: 68px; }
  .sticky-bar { padding-left: 20px; padding-right: 20px; }
}