/*
Theme Name: CreeNex Travel
Theme URI: https://www.creenex.com
Author: CreeNex Team
Author URI: https://www.creenex.com
Description: A custom WordPress theme for CreeNex Travel – Authentic China tours with small groups and tailor-made itineraries. High-end, minimal, modern inbound tourism website with TailwindCSS integration.
Version: V0.7.14.2
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: creenex
Tags: custom-theme, responsive, tailwindcss, travel
*/

/* ========== 全局 CSS 变量 ========== 
   定义主题色、背景色、字体等，方便统一管理和后期在后台修改 */

:root {
  --color-primary: #1D4A35; /* 主色：深墨绿色 */
  --color-accent: #D4A373; /* 点缀色：玫瑰金 */
  --color-bg: #FFFFFF;  /* 页面背景色：白色 */
  --color-text: #1A1A1A; /* 正文字体颜色：深灰 */
  --color-muted: #EDEDED; /* 辅助背景色：浅灰 */

  --font-heading: 'Playfair Display', serif; /* 标题字体 */
  --font-body: 'Inter', sans-serif; /* 正文字体 */
}

/* 全局基础排版样式 */
body {
  font-family: var(--font-body); /* 使用定义的正文字体 */
  color: var(--color-text);  /* 正文颜色 */
  background-color: var(--color-bg); /* 背景色 */
  margin: 0;
  padding: 0;
  line-height: 1.6; /* 全局行距 */
}

/* 标题样式：统一使用标题字体和主色 */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  color: var(--color-primary);
  margin-top: 0;
}

/* 避免 WordPress 后台工具栏挡住导航栏 */
body.admin-bar header#siteNav {
  top: 32px;
}

/* ========== Section 模块间距 ========== */
.section {
  padding-top: 4rem; /* 小屏上下留白 64px */
  padding-bottom: 4rem;
}
@media (min-width: 768px) {
  .section {
    padding-top: 6rem; /* 中屏及以上上下留白 96px */
    padding-bottom: 6rem;
  }
}

/* ========== 按钮样式 ========== */

.btn {
  display: inline-flex;  /* 按钮内部内容居中 */
  align-items: center;
  justify-content: center;
  padding: 0.75rem 1.25rem;  /* 内边距：上12px, 左右20px */
  border-radius: 1rem;  /* 圆角 */
  font-size: 0.875rem;  /* 字体大小14px */
  font-weight: 500;   /* 半粗体 */
  text-decoration: none;  /* 去掉下划线 */
  transition: all 0.25s ease, box-shadow 0.3s ease; /* 添加过渡动画 */
}

.btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 15px rgba(0,0,0,0.2);
}
.btn:active {
  transform: scale(0.97);
  box-shadow: 0 3px 8px rgba(0,0,0,0.2);
}

/* 主按钮：主色背景，白色文字 */
.btn-primary {
  background-color: var(--color-primary);
  color: #fff;
}

.btn-primary:hover {
  background-color: var(--color-accent); /* hover 变点缀色 */
  color: var(--color-primary); /* hover 文字变主色 */
  transform: translateY(-1px); /* hover 时轻微上浮 */
}

/* ========== Hero 区副按钮（透明白描边 + 反转 Hover） ========== */
/* 用于首页 Hero Banner 的 “Tailor-Made Travel”、
   Tailor-Made 模块的 “Get Inspiration” 按钮等场景 */

.btn-hero-outline {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.75rem 1.25rem;
  text-align: center;
  font-size: 0.9rem;
  font-weight: 500;
  border: 1.5px solid rgba(255, 255, 255, 0.7);
  border-radius: 1rem;
  background-color: transparent;
  color: #fff;
  text-decoration: none;
  transition: all 0.3s ease;
}

/* Hover：反转为白底 + 墨绿字 + 微上浮 */
.btn-hero-outline:hover {
  background-color: #fff;
  color: var(--color-primary);
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.18);
}

/* Active：轻微按压反馈 */
.btn-hero-outline:active {
  transform: scale(0.98);
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.12);
}

@media (max-width: 640px) {
  .btn-hero-outline {
    width: auto;                 /* 宽度自适应文字 */
    min-width: 140px;            /* 确保触控区域不太小 */
    margin-inline: auto;         /* 居中 */
    display: flex;
    justify-content: center;
  }
}

/* 描边按钮 */
.btn-outline {
  border: 1px solid var(--color-accent);        /* 边框用点缀色 */
  color: var(--color-primary);                  /* 字体用主色 */
  background-color: rgba(255, 255, 255, 0.3); /* 白色 30% 透明，更轻盈 */
  transition: background-color 0.25s ease, opacity 0.25s ease;
  }

.btn-outline:hover {
  background-color: var(--color-accent);  
  color: var(--color-primary);
}

/* 点缀按钮：点缀色背景 + 主色文字 */
.btn-accent {
  background-color: var(--color-accent);
  color: var(--color-primary);
}

.btn-accent:hover {
  opacity: 0.9; /* hover 时整体轻微变暗 */
}

/* Featured Tours 区块的 View Tour 按钮 → 统一成 Hero Banner 的 View Tours 风格 */
.tour-card .btn-primary {
  background-color: var(--color-primary);
  color: #fff;
  transition: background-color 0.25s ease, transform 0.2s ease;
}
.tour-card .btn-primary:hover {
  background-color: var(--color-accent);
  color: var(--color-primary);
  transform: translateY(-2px);
}

/* 金变绿按钮：点缀色背景，白色文字 */
.btn-accenttoprimary {
  background-color: var(--color-accent);
  color: #fff;
}

.btn-accenttoprimary:hover {
  background-color: var(--color-primary); /* hover 变主色 */
  color: var(--color-accent); /* hover 文字变点缀色 */
  transform: translateY(-1px); /* hover 时轻微上浮 */
}

/* Tailor-Made CTA 区块按钮，继承 Hero Banner 风格 */
#tailor .btn-primary {
  /* 与 Hero Banner 的 View Tours 一致 */
}
#tailor .btn-outline {
  /* 与 Hero Banner 的 Tailor-Made Travel 一致 */
}

/* Reviews 卡片 hover：整体阴影，星级高亮 */
.reviews-card:hover {
  box-shadow: 0 8px 20px rgba(0,0,0,0.15);
}

.reviews-card .stars {
  color: #fbbf24; /* 默认金色（可调整） */
  font-size: 1.1rem;
  transition: color 0.25s ease;
}
.reviews-card .stars:hover {
  color: var(--color-accent); /* Hover 变为点缀色 */
  transform: none !important; /* 移除放大效果 */
}

/* Travel Guide "Read more" 链接交互 */
.travel-guide a span {
  transition: color 0.25s ease, transform 0.25s ease;
}
.travel-guide a:hover span {
  color: var(--color-accent);
  text-decoration: underline;
  text-underline-offset: 3px;
  transform: translateX(3px);
}

/* Top Destinations 卡片标题 Hover 效果优化 */
#destinations .group span {
  text-decoration: none; /* 默认不显示下划线 */
  transition: text-decoration-color 0.25s ease;
}
#destinations .group:hover span {
  text-decoration: underline;
  text-decoration-color: var(--color-accent);
  text-underline-offset: 4px; /* 增加与文字的间距 */
}

/* ========== Typography 工具类 ========== */

/* 模块大标题（headline） */
.headline {
  font-family: var(--font-heading);
  font-weight: 600;
  color: var(--color-primary);
  font-size: 1.875rem; /* 默认 30px */
  line-height: 1.3;
}
@media (min-width: 768px) {
  .headline { font-size: 2.25rem; } /* 中屏及以上 36px */
}

/* 模块副标题（subhead） */
.subhead {
  font-family: var(--font-body);
  font-weight: 400;
  color: #4B5563; /* 灰色 */
  font-size: 1rem;
  line-height: 1.6;
}
@media (min-width: 768px) {
  .subhead { font-size: 1.125rem; } /* 中屏及以上 18px */
}

/* 小标题（eyebrow） */
.eyebrow {
  font-family: var(--font-body);
  font-weight: 500;
  color: var(--color-accent); /* 使用点缀色 */
  text-transform: uppercase; /* 转大写 */
  letter-spacing: 0.1em; /* 字间距 */
  font-size: 0.75rem; /* 12px */
}
@media (min-width: 768px) {
  .eyebrow { font-size: 0.875rem; } /* 14px */
}

/* 正文段落（body-text） */
.body-text {
  font-family: var(--font-body);
  font-weight: 400;
  color: #374151; /* 深灰 */
  font-size: 1rem;
  line-height: 1.7;
}
@media (min-width: 768px) {
  .body-text { font-size: 1.125rem; } /* 18px */
}


/* 卡片标题（用于 Featured Tours / Destinations / Travel Guide） */
.card-title {
  font-weight: 600;
  font-size: 1.125rem; /* text-lg */
  color: var(--color-primary);
  font-family: var(--font-heading);
  transition: color 0.25s ease;
}

.card-title:hover {
  color: var(--color-accent); /* hover 时变成点缀色 */
}



/* ========== 导航条 Logo ========== */

/* 控制 Logo 尺寸，统一大小，让导航条更精致 */
.custom-logo {
  max-height: 28px; /* 桌面端 Logo 最大高度 28px */
  width: auto;
}
@media (max-width: 768px) {
  .custom-logo { max-height: 26px; } /* 移动端稍微小一点 */
}


/* ========== 导航条外观（双色反转：初始玫瑰金 → 滚动深墨绿） ========== */

/* 初始状态：玫瑰金背景 + 墨绿色文字 */
#siteNav {
  position: sticky;
  top: 0;
  z-index: 1000;
  background-color: var(--color-accent);       /* 玫瑰金背景 */
  color: var(--color-primary);                 /* 墨绿色文字 */
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  transition:
    background-color 0.4s ease,
    color 0.4s ease,
    box-shadow 0.4s ease;
}

/* 滚动后：深墨绿背景 + 白色文字 */
#siteNav.nav-scrolled {
  background-color: var(--color-primary);
  color: #fff;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
}

/* 导航链接默认墨绿文字 */
#siteNav .nav-links li a {
  color: var(--color-primary);
  border-bottom: 2px solid transparent;
  transition: color 0.25s ease, border-color 0.25s ease;
}

/* hover 时变为白色 */
#siteNav .nav-links li a:hover {
  color: #fff;
  border-bottom-color: #fff;
}

/* 滚动后：白字 + hover 点缀色 */
#siteNav.nav-scrolled .nav-links li a {
  color: #fff;
}
#siteNav.nav-scrolled .nav-links li a:hover {
  color: var(--color-accent);
  border-bottom-color: var(--color-accent);
}

/* Logo 切换动画 */
.logo-default,
.logo-inverse {
  transition: opacity 0.35s ease;
}
.logo-inverse { opacity: 0; }
#siteNav.nav-scrolled .logo-default { opacity: 0; }
#siteNav.nav-scrolled .logo-inverse { opacity: 1; }

/* 没有反白版 Logo 时，滚动后自动反白 */
#siteNav.nav-scrolled .logo-inverse.logo-fallback img {
  filter: invert(1) brightness(1.8) contrast(1.05);
}


/* ========== Enquire Now 按钮（导航栏专用） ========== */

/* 初始状态：深墨绿底 + 白字 */
#siteNav .enquire-btn {
  background-color: var(--color-primary);
  color: #fff;
  border: 1.5px solid var(--color-primary);
  border-radius: 0.75rem;
  font-weight: 600;
  transition: all 0.3s ease;
  box-shadow: 0 2px 6px rgba(0,0,0,0.12);
}

/* Hover：变为玫瑰金底 + 墨绿字 */
#siteNav .enquire-btn:hover {
  background-color: var(--color-accent);
  color: var(--color-primary);
  border-color: var(--color-accent);
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(0,0,0,0.18);
}

/* 滚动后：白底 + 深墨绿字 + 主色边框 */
#siteNav.nav-scrolled .enquire-btn {
  background-color: #fff;
  color: var(--color-primary);
  border: 1.5px solid var(--color-primary);
  box-shadow: 0 2px 6px rgba(0,0,0,0.08);
}

/* 滚动后 Hover：浅玫瑰金底 + 深墨绿字 */
#siteNav.nav-scrolled .enquire-btn:hover {
  background-color: color-mix(in srgb, var(--color-accent) 25%, white);
  color: var(--color-primary);
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(0,0,0,0.12);
}


/* ========== 移动端菜单按钮颜色逻辑 ========== */

/* 默认状态：未滚动 → 主色（绿色） */
#menuToggle {
  color: var(--color-primary);
  transition: color 0.3s ease;
}

/* 滚动后：白色 */
#siteNav.nav-scrolled #menuToggle {
  color: #fff;
}

/* ===== Header/Hero 尺寸变量 ===== */
:root{
  --header-h: 64px;     /* 导航高度，对应 h-16 */
  --hero-peek: 56px;    /* 首屏露出下一屏高度（可微调 40~80px） */
}

/* 管理员登录后台时，WordPress Admin Bar 可能占位。sticky 一般无需特殊处理，如需更精细可在这里调。 */
/* body.admin-bar { } */

/* ===== 首屏 Hero：高度 = 视口高 - 导航高 - 预留peek ===== */
.home-hero{
  min-height: calc(100svh - var(--header-h) - var(--hero-peek));
  display: flex;
  align-items: center;
  position: relative;
}


/* ========== 菜单设置========== */

/* 移动端菜单动效（覆盖页面，非透明） */
/* 默认隐藏，展开时淡入 + 下滑动画 */

#mobileMenu {
  opacity: 0;
  transform: translateY(-8px);
  transition: opacity .25s ease, transform .25s ease;
  background-color: var(--color-primary); /* 确保背景是主色 */
  z-index: 9999; /* 保持在最上层 */
}

#mobileMenu.show {
  opacity: 1;
  transform: translateY(0);
}

/* 遮罩层，展开菜单时显示黑色半透明背景 */
#menuOverlay { opacity: 0; transition: opacity .25s ease; }
#menuOverlay.show { opacity: 1; }


/* 移动端菜单项样式 + hover 效果 */

.mobile-nav li a {
  display: block;
  padding: 0.9rem 1rem;
  transition: background-color .2s ease, color .2s ease;
}

.mobile-nav li a:hover {
  background-color: rgba(255,255,255,.08); /* hover 半透明白背景 */
  color: var(--color-accent); /* hover 字体变点缀色 */
}

/* ========== Footer ========== */

/* ===== Footer namespace: 所有样式只作用于页底 ===== */
.footer-root{
  background-color: var(--color-primary);
  color: #fff;
}

/* 内容包裹宽度（与 header 容器独立） */
.footer-wrap{
  max-width: 72rem; /* ~ 1152px，相当于 max-w-6xl */
  margin-inline: auto;
  padding: 0 1.5rem;
}

/* Newsletter 区：两列布局 */
.footer-newsletter{
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
  align-items: center;
  padding: 2.5rem 0;
}
@media (min-width: 768px){
  .footer-newsletter{ grid-template-columns: 1.1fr 0.9fr; }
}
.footer-title{
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1.5rem;
  color: #fff; /* 强制白色 */
}
@media (min-width: 768px){
  .footer-title{ font-size: 1.875rem; }
}
.footer-subtitle{ margin-top: .5rem; color: rgba(255,255,255,.8); }

/* Newsletter 表单 */
.footer-form{
  display: flex; flex-wrap: wrap; gap: .75rem; justify-content: flex-start;
}
.footer-input{
  flex: 1 1 16rem;
  min-width: 12rem;
  padding: .75rem 1rem;
  border-radius: .75rem;
  border: none;
  background: #fff;
  color: #111;
  outline: none;
  box-shadow: 0 1px 0 rgba(0,0,0,.06) inset;
}
.footer-input:focus{
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-accent) 35%, white);
}
.footer-btn{
  padding: .75rem 1.25rem;
  border-radius: .75rem;
  background: var(--color-accent);
  color: var(--color-primary);
  font-weight: 600;
  cursor: pointer;
  transition: transform .2s ease, box-shadow .2s ease, opacity .2s ease;
  box-shadow: 0 2px 6px rgba(0,0,0,.15);
  width: auto; /* 默认不拉满 */
}

.footer-btn:hover{
  transform: scale(1.03);
  box-shadow: 0 6px 18px rgba(0,0,0,.25);
}
.footer-btn:active{ transform: scale(.98); }

@media (max-width: 640px) {
  .footer-btn {
    width: 100%; /* 移动端和输入框一样宽 */
  }
}

.footer-note{ margin-top: .5rem; font-size: .75rem; color: rgba(255,255,255,.7); }

/* 分隔线（与内容同宽） */
.footer-divider{
  height: 1px;
  background: rgba(255,255,255,.2);
}

/* 主体四列 */
.footer-main{
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.5rem;
  padding: 2.75rem 0;
}
@media (min-width: 768px){
  .footer-main{ grid-template-columns: 1.2fr 1fr 1fr 1fr; }
}

/* 品牌区 */
.footer-logo{ height: 40px; width: auto; display: block; }
.footer-logo-text{ font-family: var(--font-heading); font-weight: 700; font-size: 1.125rem; }
.footer-brand-desc{ margin-top: .75rem; font-size: .9rem; color: rgba(255,255,255,.8); max-width: 28rem; }

/* 如果用默认 Logo，当成反白兜底： */
.footer-logo-fallback img{
  filter: invert(1) brightness(2) contrast(1.1);
  height: 40px; width: auto;
}

/* 区块标题 */
.footer-section-title{
  color: #fff;
  font-weight: 700;
  letter-spacing: .06em;
  margin-bottom: 1rem;
  font-size: 1.125rem; /* text-lg */
}

/* 链接列表 */
.footer-links{ display: flex; flex-direction: column; gap: .5rem; }
.footer-link{
  color: rgba(255,255,255,.85);
  text-decoration: none;
  transition: color .2s ease, text-underline-offset .2s ease;
}
.footer-link:hover{ color: var(--color-accent); text-decoration: underline; text-underline-offset: 3px; }

/* 联系方式与社交 */
.footer-contact{ color: rgba(255,255,255,.8); }
.footer-socials{ display: flex; gap: .9rem; margin-top: .75rem; }
.footer-social{
  color: #fff; opacity: .9; display: inline-flex; align-items: center; justify-content: center;
  transition: color .2s ease, transform .2s ease, opacity .2s ease;
}
.footer-social:hover{ color: var(--color-accent); transform: scale(1.1); opacity: 1; }
.footer-social-icon{ width: 22px; height: 22px; display: block; }

/* 底部栏 */
.footer-bottom{ border-top: 1px solid rgba(255,255,255,.15); }
.footer-bottom-inner{
  max-width: 72rem; margin-inline: auto; padding: 1.1rem 1.5rem;
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: .75rem;
  color: rgba(255,255,255,.75);
  font-size: .75rem;
}
.footer-legal{ display: inline-flex; align-items: center; gap: .65rem; }
.footer-legal-link{ color: inherit; text-decoration: none; transition: color .2s ease, text-decoration .2s ease; }
.footer-legal-link:hover{ color: #fff; text-decoration: underline; text-underline-offset: 2px; }
.footer-sep{ color: rgba(255,255,255,.35); }


/* ========== Tours集合页 ========== */

/* ============================================================
   CreeNex Tours Archive — Filter + Sort Unified Dropdown System
   ============================================================ */

/* ------- 1. 统一容器布局 ------- */
.crx-filterbar {
  --dropdown-height: 42px;
}

/* ------- 2. Dropdown 外观 ------- */
.crx-dropdown {
  position: relative;
}

.crx-dropdown-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  min-width: 180px;
  padding: 0.65rem 0.9rem;
  height: var(--dropdown-height);
  background: #fff;
  border: 1px solid #e5e7eb; /* gray-200 */
  border-radius: 0.9rem;
  font-size: 0.875rem;
  color: #374151; /* gray-700 */
  cursor: pointer;
  transition: background-color 0.25s ease, border-color 0.25s ease,
              box-shadow 0.25s ease, transform 0.15s ease;
}

.crx-dropdown-toggle:hover {
  background-color: #fafafa;
  border-color: var(--color-accent);
  box-shadow: 0 3px 12px -6px rgba(0, 0, 0, 0.15);
}

.crx-dropdown-toggle:active {
  transform: translateY(1px);
}

.crx-dropdown-toggle:focus {
  outline: none;
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--color-accent) 30%, white);
}

/* ------- 3. 图标动画 ------- */
.crx-icon {
  width: 16px;
  height: 16px;
  transition: transform 0.25s ease;
  pointer-events: none;
}

.crx-icon.rotate-180 {
  transform: rotate(180deg);
}

/* ------- 4. 下拉菜单 ------- */
.crx-dropdown-menu {
  position: absolute;
  top: calc(100% + 0.45rem);
  left: 0;
  min-width: 100%;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 0.9rem;
  box-shadow: 0 18px 40px -18px rgba(0, 0, 0, 0.25);
  overflow: hidden;
  z-index: 50;
  animation: crxFadeSlide 0.22s ease both;
}

.crx-dropdown-menu.hidden {
  display: none;
}

/* 菜单项 */
.crx-dropdown-menu button {
  width: 100%;
  text-align: left;
  padding: 0.6rem 0.9rem;
  font-size: 0.875rem;
  color: #374151;
  background: transparent;
  border: none;
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.crx-dropdown-menu button:hover {
  background: color-mix(in srgb, var(--color-accent) 12%, white);
  color: var(--color-primary);
}

.crx-dropdown-menu button.is-active {
  background: color-mix(in srgb, var(--color-accent) 18%, white);
  color: var(--color-primary);
  font-weight: 600;
}

/* 动画 */
@keyframes crxFadeSlide {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ------- 5. 响应式微调 ------- */
@media (max-width: 768px) {
  .crx-dropdown-toggle {
    min-width: 100%;
  }
  .crx-dropdown-menu {
    width: 100%;
  }
  .crx-filterbar {
    gap: 1rem;
  }
}

/* ============================================================
   CreeNex Tours Archive — Pagination Styles
   ============================================================ */

.crx-pagination {
  margin-top: 2rem;
  gap: 0.5rem;
}

.crx-page-link a,
.crx-page-link span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.2rem;
  height: 2.2rem;
  padding: 0 0.75rem;
  font-size: 0.875rem;
  border-radius: 0.5rem;
  color: #374151;
  background-color: #fff;
  border: 1px solid #e5e7eb;
  transition: all 0.2s ease;
  text-decoration: none;
}

.crx-page-link a:hover {
  color: var(--color-primary);
  border-color: var(--color-accent);
  background-color: color-mix(in srgb, var(--color-accent) 10%, white);
}

.crx-page-link .current {
  background-color: var(--color-primary);
  color: #fff;
  border-color: var(--color-primary);
  font-weight: 600;
}

.crx-page-link .dots {
  color: #9ca3af;
}

/* ===== Photo Story：强制圆角 & 可见性修复 ===== */

/* 让卡片可以露出边缘且不被裁平（避免直角）*/
#photo-story #crxGalleryWrap {
  overflow: visible !important;
}

/* 统一卡片和图片的圆角（与站内其他卡片协调，可调大小）*/
#photo-story figure[data-gallery-card],
#photo-story figure[data-gallery-card] img {
  border-radius: 1.25rem !important; /* 约 20px；可调为 1.5rem 以更柔和 */
}

/* 双保险：在所有变换状态下用 clip-path 强制裁剪为圆角 */
#photo-story figure[data-gallery-card] {
  clip-path: inset(0 round 1.25rem);
  overflow: hidden; /* 让内部内容遵从圆角裁剪 */
}

/* Safari/iOS 兜底（某些版本对 clip-path+transform 存在边缘锯齿或直角幻觉）*/
@supports (-webkit-touch-callout: none) {
  #photo-story figure[data-gallery-card] {
    -webkit-mask-image: -webkit-radial-gradient(white, black);
  }
}