/* ==========================================================================
   地市专题 · 主题筛选模块（city-filter）
   --------------------------------------------------------------------------
   作用：为「地市专题」区块新增 主题标签筛选
         （全部 / 丝路古迹 / 自然风光 / 黄河与农耕人文）。
   说明：本文件是独立模块，只被 gansu.html 引入；未引入的页面完全不受影响。
        不改动原有导航栏、卡片、页脚的任何样式，只新增 .cf-* 系列规则。
        配色沿用站点主题变量（--primary 等），保证与整站风格统一。
   ========================================================================== */

/* ---------- 1. 标题下方的小字说明 ---------- */
.cf-note{
    font-size: .92rem;
    line-height: 1.85;
    color: var(--gray-500);
    max-width: 46rem;              /* 与 .subtitle 同宽，保持标题区块的居中节奏 */
    margin: 1rem auto 0;
}
.cf-note strong{ color: var(--gray-700); font-weight: 600; }

/* ---------- 2. 居中标签栏 ---------- */
.cf-tags{
    display: flex;
    flex-wrap: wrap;               /* 窄屏自动换行 */
    justify-content: center;       /* 居中 */
    gap: 1.5rem;                   /* 标签之间加大间距，排布更舒展 */
    margin-top: 1.6rem;
}

/* 单个标签：圆角 8px；默认浅灰背景 + 深灰文字 */
.cf-tag{
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    padding: .62rem 1.3rem;
    border: 1px solid var(--gray-200);
    border-radius: 8px;            /* 需求：圆角 8px */
    background: var(--gray-100);   /* 默认浅灰背景 */
    color: var(--gray-700);        /* 默认深灰文字 */
    font-family: inherit;
    font-size: .95rem;
    font-weight: 600;
    line-height: 1;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    /* 0.3s 平滑过渡：背景 / 文字 / 边框 / 阴影 / 位移 */
    transition: background-color .3s var(--ease-smooth),
                color            .3s var(--ease-smooth),
                border-color     .3s var(--ease-smooth),
                box-shadow       .3s var(--ease-smooth),
                transform        .3s var(--ease-smooth);
}
.cf-tag__icon{ font-size: 1.05rem; line-height: 1; }   /* 标签图标 */

/* 鼠标悬浮：背景轻微变淡 */
.cf-tag:hover{
    background: var(--gray-50);
    border-color: var(--gray-300);
    color: var(--dark);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0,0,0,.07);
}
/* 键盘可达性：只在键盘聚焦时显示焦点圈 */
.cf-tag:focus-visible{ outline: 2px solid var(--primary); outline-offset: 2px; }

/* 选中状态：站点主题红背景 + 白色文字
   外阴影比 --shadow-btn 更轻，避免厚重感 */
.cf-tag.is-active{
    background: var(--primary);
    border-color: var(--primary);
    color: #fff;
    box-shadow: 0 2px 7px rgba(181, 43, 67, .16);
}
.cf-tag.is-active:hover{
    background: var(--primary-dark);
    border-color: var(--primary-dark);
    color: #fff;
}

/* ---------- 3. 卡片的筛选状态 ---------- */
/* 注意：站点原有 gansu.css 里有若干「裸」属性选择器
   （如 [data-theme="river"]{background:蓝渐变}）用于图片占位渐变。
   卡片新增的 data-theme 恰好会命中其中 river 一条，故在此还原卡片本来的白底；
   分类属性只用于筛选判断，不改变卡片任何原有外观。 */
.city-card[data-theme]{ background: #fff; }
/* 用 animation 而不是 transition：既能稳定压过 .reveal / .city-card 的原有过渡，
   又能在动画结束后整类移除，不影响卡片原有的悬停位移与阴影过渡。 */
.city-card.cf-showing{ animation: cfIn  .46s var(--ease-expo) both; }        /* 淡入 */
.city-card.cf-hiding { animation: cfOut .36s var(--ease-smooth) forwards;    /* 淡出 */
                       pointer-events: none; }
.city-card.cf-in     { opacity: 1; }        /* 筛选后保持可见（覆盖 .reveal 的初始透明） */
.city-card.cf-off    { display: none; }     /* 淡出结束→移出网格，剩余卡片自动重排 */

@keyframes cfIn{
    from{ opacity: 0; transform: scale(.95); }   /* 由 0.95 轻微放大到 1，柔和无抖动 */
    to  { opacity: 1; transform: scale(1);   }
}
@keyframes cfOut{
    from{ opacity: 1; }                          /* 仅做透明度淡出，不产生位移抖动 */
    to  { opacity: 0; }
}

/* 尊重系统「减少动态效果」：直接切换显示，不做淡入淡出 */
@media (prefers-reduced-motion: reduce){
    .city-card.cf-showing,
    .city-card.cf-hiding { animation: none !important; }
    .city-card.cf-hiding { opacity: 0; }
}

/* ---------- 4. 小屏微调 ---------- */
@media (max-width: 520px){
    .cf-tags{ gap: .6rem; }
    .cf-tag{ padding: .55rem 1rem; font-size: .88rem; }
}