/* ========================================
   天一风物志 — 响应式断点
   ======================================== */

/* ---- 平板（768px - 1023px） ---- */
@media (max-width: 1023px) {
  :root {
    --fs-h1: var(--fs-h1-mobile);
    --fs-h2: var(--fs-h2-mobile);
    --fs-h3: var(--fs-h3-mobile);
    --fs-body: var(--fs-body-mobile);
  }

  .grid-4 {
    grid-template-columns: repeat(2, 1fr);
  }

  .page-hero {
    height: 200px;
  }

  .page-hero h1 {
    font-size: 34px;
  }

  /* 详情页hero高度统一（平板端与列表页一致） */
  .spot-hero,
  .dish-hero,
  .detail-hero {
    height: 200px !important;
  }

  /* 详情页：标题区和信息条整体下移 */
  .spot-hero-content,
  .dish-hero-content,
  .detail-hero-content:not(.figure-hero-grid),
  .page-hero-content {
    padding-top: 96px !important;
  }
  .spot-info-bar,
  .dish-info-bar,
  .detail-info-bar {
    margin-top: -12px !important;
  }

  /* 详情页副标题强制单行，防止两行撑高 */
  .spot-subtitle,
  .dish-subtitle,
  .detail-subtitle {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 95%;
    margin: 0 auto;
  }

  /* 详情页hero内容左右留白 */
  .spot-hero-content,
  .dish-hero-content,
  .detail-hero-content {
    width: 100%;
  }
}

/* ---- 详情页标题全局统一 ---- */
.spot-hero h1,
.dish-hero h1,
.detail-hero h1 {
  margin-bottom: 8px !important;
  font-size: 36px !important;
}
.spot-hero .spot-subtitle,
.dish-hero .dish-subtitle,
.detail-hero .detail-subtitle {
  margin-top: 0;
}

/* ---- 去掉列表页模块副标题 ---- */
.section-subtitle {
  display: none !important;
}

/* ---- 窄屏导航：一级栏目进入抽屉，二级入口按栏目展开 ---- */
@media (max-width: 1100px) {
  .hamburger {
    display: flex;
  }

  .hamburger.active span {
    background: var(--color-text);
  }

  .nav-links {
    position: fixed;
    top: 0;
    right: -100%;
    width: min(360px, 90vw);
    height: 100vh;
    height: 100dvh;
    background: var(--color-white);
    padding: 78px var(--spacing-lg) var(--spacing-xl);
    overflow-y: auto;
    transition: right var(--transition-normal);
    box-shadow: var(--shadow-lg);
    z-index: 999;
  }

  .nav-links.open {
    right: 0;
  }

  .nav-list {
    width: 100%;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
  }

  .nav-primary-link,
  .nav-group-toggle {
    color: var(--color-text) !important;
    font-size: var(--fs-body);
    width: 100%;
    min-height: 52px;
    padding: 10px 4px;
    border-bottom: 1px solid var(--color-border);
  }

  .nav-group-toggle {
    justify-content: space-between;
    text-align: left;
  }

  .nav-primary-link.active,
  .nav-group-toggle.active,
  .nav-item.open .nav-group-toggle {
    color: var(--color-primary) !important;
  }

  .nav-primary-link::after,
  .nav-group-toggle::after {
    display: none;
  }

  .nav-dropdown,
  .nav-item:last-child .nav-dropdown {
    position: static;
    width: auto;
    margin: 8px 0 12px 12px;
    padding: 6px;
    border-color: var(--color-border);
    border-radius: var(--border-radius);
    background: var(--color-bg);
    box-shadow: none;
    transform: none;
  }

  .nav-secondary-link {
    min-height: 58px;
    padding: 9px 10px;
  }

  .nav-dropdown li + li .nav-secondary-link {
    border-top: 1px solid var(--color-border);
  }

  .footer-inner {
    grid-template-columns: 1fr;
    gap: 36px;
  }

  .footer-brand-block .footer-brand-note {
    max-width: 430px;
  }

  .footer-directory {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--spacing-lg);
  }

  /* ---- 遮罩 ---- */
  .nav-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--color-overlay);
    z-index: 998;
  }

  .nav-overlay.active {
    display: block;
  }
}

/* ---- 手机（< 768px） ---- */
@media (max-width: 767px) {
  :root {
    --navbar-height: 60px;
    --spacing-lg: 16px;
    --spacing-xl: 24px;
    --spacing-2xl: 32px;
    --spacing-3xl: 40px;
  }

  /* ---- 网格调整为单列 ---- */
  .grid-2,
  .grid-3,
  .grid-4 {
    grid-template-columns: 1fr;
  }

  .page-hero {
    height: 200px;
  }

  .page-hero h1 {
    font-size: 28px;
  }

  .spot-hero h1,
  .dish-hero h1,
  .detail-hero h1,
  .place-detail-hero h1 {
    font-size: 28px !important;
  }

  .page-hero p {
    font-size: var(--fs-small);
  }

  .section {
    padding: 36px 0 36px;
  }

  /* 修复：section.container 时.container会覆盖掉.section的垂直padding */
  .section.container {
    padding-top: 24px;
    padding-bottom: 36px;
  }

  .section-title {
    margin-top: 0;
  }

  .channel-section-heading { margin-bottom: var(--spacing-lg); }

  .channel-section-heading__row {
    flex-direction: column;
    gap: 0;
  }

  .channel-section-heading__note,
  .channel-section-heading__aside {
    flex: 0 1 auto;
    width: auto;
    max-width: none;
  }

  .channel-section-heading__note {
    margin-top: 0;
    font-size: var(--fs-small);
    text-align: left;
  }

  .channel-section-heading__aside {
    align-items: flex-start;
    gap: 10px;
  }

  /* section-alt 顶部少留白 */
  .section-alt {
    padding-top: 24px;
  }

  .footer {
    padding: 40px 0 20px;
  }

  .footer-inner {
    gap: 32px;
    text-align: left;
  }

  .footer-directory {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 28px 20px;
  }

  .footer-bottom {
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
  }

  .container {
    padding: 0 var(--page-gutter);
  }

  .back-to-top {
    bottom: 20px;
    right: 20px;
    width: 44px;
    height: 44px;
    font-size: 16px;
  }

  .figure-detail-hero { height: auto !important; min-height: 350px; }
  .figure-detail-hero .figure-hero-grid { grid-template-columns: 160px minmax(0,1fr); gap: 28px; width: var(--page-content-width); padding-top: 104px !important; }
  .figure-profile-bar { grid-column: 1 / -1; grid-template-columns: repeat(2,minmax(0,1fr)); margin: 0 !important; }
  .figure-place-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }

  .tab-nav--category {
    display: flex;
    justify-content: flex-start;
    flex-wrap: nowrap;
    gap: 10px;
    margin-bottom: 30px;
    overflow-x: auto;
    scroll-padding-inline: var(--spacing-md);
    scroll-snap-type: x proximity;
    scrollbar-width: none;
  }

  .tab-nav--category::-webkit-scrollbar { display: none; }

  .tab-nav--category .tab-btn {
    flex: 0 0 174px;
    width: auto;
    min-height: 58px;
    padding: 12px 14px;
    scroll-snap-align: start;
  }
}

@media (max-width: 767px) {
  .figure-detail-hero { min-height: 470px; }
  .figure-detail-hero .figure-hero-grid { grid-template-columns: 1fr; gap: 18px; padding: 118px 0 34px !important; text-align: center; }
  .figure-portrait { width: 132px; height: 156px; margin: 0 auto; border-radius: 14px; }
  .figure-detail-hero .figure-hero-tags { justify-content: center; margin-top: 14px; }
  .figure-detail-hero .detail-subtitle { white-space: normal; }
  .figure-profile-bar { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 0; margin: 0 !important; }
  .figure-detail-content { padding-top: var(--spacing-xl); }
  .figure-detail-content > section { margin-bottom: 46px; }
  .figure-metric-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .figure-metric-card { min-height: 125px; padding: 16px; }
  .figure-timeline { display: block; margin-left: 5px; padding-left: 22px; border-left: 1px solid var(--color-border); }
  .figure-timeline::before { display: none; }
  .figure-timeline-item { display: block; min-height: 0; padding: 0 0 28px 8px; border-top: 0; }
  .figure-timeline-item + .figure-timeline-item { margin-top: 4px; }
  .figure-timeline-item::before { top: 5px; left: -28px; }
  .figure-timeline-item time { text-align: left; }
  .figure-timeline.is-expanded .is-extra { display: block; }
  .figure-expand-button { width: 100%; min-width: 0; margin-left: 0; }
  .figure-quotes,.figure-place-grid { grid-template-columns: 1fr; }
}

/* ---- 详情页标题全局统一 ---- */
/* ---- 列表页副标题 ---- */
.page-hero p {
  font-size: 15px !important;
}

@media (min-width: 768px) and (max-width: 1023px) {
  .figure-detail-hero { height: auto !important; min-height: 350px; }
  .figure-detail-hero .figure-hero-grid { grid-template-columns: 160px minmax(0,1fr); gap: 28px; width: var(--page-content-width); padding-top: 104px !important; }
  .figure-profile-bar { grid-column: 1 / -1; grid-template-columns: repeat(2,minmax(0,1fr)); margin: 0 !important; }
  .figure-place-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
}

/* ---- 小屏手机（< 480px） ---- */
@media (max-width: 479px) {
  .page-hero {
    height: 200px;
  }

  .page-hero h1 {
    font-size: 24px;
  }

  .spot-hero h1,
  .dish-hero h1,
  .detail-hero h1,
  .place-detail-hero h1 {
    font-size: 24px !important;
  }
}

.spot-content .spot-desc,
.detail-content .detail-desc,
.detail-content p {
  font-size: 16px !important;
}

/* ---- 桌面端 ---- */
@media (min-width: 768px) {
  /* 各模块标题上移 */
  .section {
    padding: 24px 0 40px;
  }
  .section.container {
    padding: 24px var(--page-gutter) 40px;
  }

  /* 传统胶囊页签上移；分类页签组件自行管理垂直节奏。 */
  .tab-nav:not(.tab-nav--category) {
    margin-top: -12px;
  }

  .spot-hero-content,
  .dish-hero-content,
  .detail-hero-content:not(.figure-hero-grid),
  .place-detail-hero-content,
  .page-hero-content {
    padding-top: 80px !important;
  }

  /* 详情页正文在所有视口统一为 16px */
  .spot-content .spot-desc,
  .dish-content .dish-desc,
  .detail-content .detail-desc,
  .detail-content p {
    font-size: 16px !important;
  }

  /* 详情页PC端标题 */
  .spot-hero h1,
  .dish-hero h1,
  .detail-hero h1,
  .place-detail-hero h1,
  .page-hero h1 {
    font-size: 48px !important;
  }

  /* 列表页和详情页 hero 高度 */
  .page-hero,
  .spot-hero,
  .dish-hero,
  .detail-hero:not(.figure-detail-hero),
  .place-detail-hero {
    height: 250px !important;
  }

  /* 时间轴内容 PC 字体 */
  .timeline-content,
  .timeline-content p {
    font-size: 15px !important;
  }
}

/* ---- 城市生活卡片内容字体（全局） ---- */
.card-text {
  font-size: 14px !important;
}

/* ---- 时间轴内容字体 ---- */
.timeline-content,
.timeline-content p {
  font-size: 16px !important;
}

/* ---- 卡片类文本统一 ---- */
body .card-text,
body .card-title,
body .tag {
  font-size: 14px !important;
}
