/* ==========================================================================
   热门推荐 板块  hot.css
   —— 仅 gansu.html（甘肃旅游总首页）引入，不修改 gansu.css，不影响其它页面。
   沿用 gansu.css 的设计令牌：--primary #193B38 / --accent 麦金黄 / --earth
                              --radius-card / --radius-img / --shadow-card(-hover) / --ease-smooth
   结构：热门景点图片墙（横向一排 8 张，可拖动/箭头/键盘滚动）
        · 精品景点卡片（3 张：图片 + 名称 + 评分 + 等级标签 + 亮点 + 浏览量·参考票价）
        · 经典路线推荐（3 条：天数 / 主要行程 / 人均参考）
   滚动淡入直接复用 gansu.js 的 .reveal 观察器，本文件只负责外观。
   ========================================================================== */

/* ===== 1 板块容器：暖白岩彩底 + 两枚极淡光晕，与上下白色区做轻微区隔 ===== */
.hot {
    position: relative;
    padding: 5rem 0 4.5rem;
    overflow: hidden;
    background:
        radial-gradient(52% 38% at 10% 2%, rgba(181, 43, 67, .055) 0%, rgba(181, 43, 67, 0) 72%),
        radial-gradient(42% 36% at 94% 6%, rgba(251, 191, 36, .08) 0%, rgba(251, 191, 36, 0) 74%),
        linear-gradient(180deg, #FFF8F5 0%, #FFFFFF 48%, #FFFCFA 100%);
}
.hot::before,
.hot::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    height: 1px;
    pointer-events: none;
    background: linear-gradient(90deg, transparent, rgba(181, 43, 67, .16), transparent);
}
.hot::before { top: 0; }
.hot::after  { bottom: 0; }

/* ===== 2 标题区：沿用 .section-head / .heading-line，仅微调间距 ===== */
.hot .section-head { margin-bottom: 2.6rem; }

/* ===== 3 热门景点 · 沉浸式大图轮播 Banner =====
   2026-10 二次改版：由「8 张小卡网格」升级为「全宽沉浸式大图轮播」。
   · 宽屏：满宽铺满、文字区在 1200px 容器内居中；右侧竖排缩略图 + 左右箭头 + 键盘/悬停暂停
   · 窄屏（≤1100）：箭头隐藏、缩略图换成底部小圆点，文字缩小、贴底排列
   · 图片用 <img object-fit:cover>（等价于 background-size:cover），可懒加载、可长期缓存
   精品景点（第 4 节）、经典路线（第 5 节）样式完全未动。 */
.banner {
    position: relative;
    width: min(100% - 2rem, 1280px);     /* 圆角容器：比 1200 容器略宽，文字仍与其对齐 */
    margin: 0 auto;
    height: clamp(320px, 46vw, 600px);   /* 宽屏 600px 封顶，窄屏按视口自动压缩 */
    border-radius: 22px;                 /* 参考图那种圆角大片 */
    overflow: hidden;                    /* 图片与右侧胶片条都被圆角裁切 */
    background: #1b0f11;                 /* 大图未就位前的兜底底色（深红黑） */
    isolation: isolate;
    box-shadow: 0 18px 46px rgba(28, 12, 14, .16);
}
.banner__stage { position: absolute; inset: 0; }

/* ---- 单张 slide：交叉淡入淡出 ---- */
.banner__slide {
    position: absolute; inset: 0;
    opacity: 0; visibility: hidden;
    transition: opacity .9s var(--ease-smooth), visibility .9s;
}
.banner__slide.is-active { opacity: 1; visibility: visible; }

.banner__img {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    object-fit: cover; object-position: center;
    transform: scale(1.10);              /* 未激活时取景略大，激活后由动画缓缓推回 1 */
}
/* 「缓慢推近 + 轻微平移」：用 animation 而不是 transition ——
   transition 需要属性值发生变化才会动，首屏那张一加载就是 is-active，所以永远不会动；
   换成 animation，任意一张（含第一张）被激活时都会从头播一遍。 */
.banner__slide.is-active .banner__img { animation: bannerKen 9s cubic-bezier(.22, .61, .36, 1) both; }
@keyframes bannerKen {
    from { transform: scale(1.10) translate3d(1.2%, .7%, 0); }
    to   { transform: scale(1) translate3d(0, 0, 0); }
}

/* 暗色遮罩：左侧厚、右侧薄——文字可读，又不把画面压死 */
.banner__scrim {
    position: absolute; inset: 0;
    background:
        linear-gradient(90deg, rgba(24,10,12,.80) 0%, rgba(24,10,12,.58) 34%, rgba(24,10,12,.18) 66%, rgba(24,10,12,.06) 100%),
        linear-gradient(0deg, rgba(18,8,10,.58) 0%, rgba(18,8,10,0) 46%);
}

/* ---- 文字区：内缩量与页面 1200 容器对齐（1280 宽的横幅减去 (1280-1200)/2 再加 1rem） ---- */
.banner__inner {
    position: relative; z-index: 2;
    height: 100%;
    padding: 0 max(1.25rem, calc((100% - 1200px) / 2 + 1rem));
    display: flex; align-items: center;
}
.banner__content { max-width: 520px; color: #fff; }   /* 右侧胶片条从 47% 起，文字留出安全间距 */

.banner__city {
    display: inline-block;
    padding: .3rem .85rem;
    border-radius: 9999px;
    font-size: .8rem; font-weight: 500; letter-spacing: .1em;
    color: #fff;
    background: linear-gradient(135deg, var(--primary), var(--primary-dark));
    box-shadow: 0 8px 22px rgba(142, 31, 51, .42);
}
.banner__title {
    margin: .85rem 0 .5rem;
    font-family: 'Noto Serif SC', 'Source Han Serif SC', 'Songti SC', STSong, SimSun, serif;
    font-size: clamp(1.75rem, 3.3vw, 3rem);
    font-weight: 600; letter-spacing: .06em; line-height: 1.15;
    color: #fff;
    text-shadow: 0 4px 24px rgba(0, 0, 0, .45);
}
.banner__sub {
    margin: 0 0 .9rem;
    font-size: clamp(.85rem, 1.15vw, 1rem);
    letter-spacing: .1em;
    color: var(--accent);                /* 描金：与站点点缀色一致 */
}
.banner__desc {
    margin: 0;
    max-width: 34em;
    font-size: clamp(.85rem, 1.05vw, .95rem);
    line-height: 1.9;
    color: rgba(255, 255, 255, .86);
    text-shadow: 0 2px 14px rgba(0, 0, 0, .4);
}
.banner__btn {
    display: inline-flex; align-items: center; gap: .45rem;
    margin-top: 1.5rem;
    padding: .72rem 1.6rem;
    border-radius: var(--radius-btn);
    font-size: .92rem; font-weight: 500;
    color: var(--primary);
    background: #fff;
    box-shadow: 0 10px 26px rgba(0, 0, 0, .32);
    transition: all .3s var(--ease-smooth);
}
.banner__btn svg { width: 16px; height: 16px; transition: transform .3s ease; }
.banner__btn:hover { background: var(--primary); color: #fff; transform: translateY(-2px); box-shadow: var(--shadow-btn); }
.banner__btn:hover svg { transform: translateX(4px); }

/* 轮播右上角：进入景区官网（仅配置了可核实官网的景区） */
.banner__official {
    position: absolute;
    top: 1.3rem;
    right: max(1.15rem, calc((100% - 1200px) / 2 + 1rem));
    z-index: 3;
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    padding: .42rem .95rem;
    border-radius: 9999px;
    font-size: .78rem;
    font-weight: 500;
    letter-spacing: .04em;
    color: #fff;
    background: rgba(255, 255, 255, .14);
    border: 1px solid rgba(255, 255, 255, .36);
    -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
    transition: all .3s var(--ease-smooth);
}
.banner__official svg { width: 13px; height: 13px; transition: transform .3s ease; }
.banner__official:hover { background: var(--primary); border-color: var(--primary); transform: translateY(-1px); }
.banner__official:hover svg { transform: translateX(3px); }
@media (max-width: 680px) {
    .banner__official { top: .9rem; right: 1rem; padding: .34rem .72rem; font-size: .72rem; }
}

/* ---- 文字逐级上浮（仅当前 slide 播放） ---- */
.banner__slide .banner__content > * { opacity: 0; transform: translateY(18px); }
.banner__slide.is-active .banner__content > * { animation: bannerUp .8s var(--ease-smooth) both; }
.banner__slide.is-active .banner__content > *:nth-child(1) { animation-delay: .12s; }
.banner__slide.is-active .banner__content > *:nth-child(2) { animation-delay: .20s; }
.banner__slide.is-active .banner__content > *:nth-child(3) { animation-delay: .28s; }
.banner__slide.is-active .banner__content > *:nth-child(4) { animation-delay: .36s; }
.banner__slide.is-active .banner__content > *:nth-child(5) { animation-delay: .44s; }
@keyframes bannerUp { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }

/* ---- 右侧胶片条：外层是固定窗口（左边界 47%，超出右缘被圆角裁切），
        内层 .banner__rail 承载 8 张竖版圆角卡并随当前项滑动 ——
        窗口保证卡片永远不会滑到左侧盖住文字，同时保留参考图那种"卡片溢出右缘"的观感 ---- */
.banner__thumbs {
    position: absolute; z-index: 3;
    top: 50%; left: 47%; right: 0;
    transform: translateY(-50%);
    overflow: hidden;                    /* 关键：窗口裁切 */
    padding: 22px 0 22px 4px;            /* 纵向给阴影留空间；左侧 4px 避免放大后的当前卡被裁边 */
    pointer-events: none;                /* 窗口本身不吃点击，卡片可点 */
}
.banner__rail {
    display: flex; align-items: center;
    gap: clamp(8px, .85vw, 12px);
    /* 当前卡固定在窗口左缘：translateX(-k×步距) 由 hot.js 每次切换时推进 */
    transition: transform .7s var(--ease-smooth);
    will-change: transform;
}
.banner__thumb {
    flex: 0 0 auto;
    width: clamp(72px, 7.2vw, 104px);
    aspect-ratio: 3 / 4;                 /* 竖版，与参考图一致 */
    padding: 0;
    border: 2px solid rgba(255, 255, 255, .5);
    border-radius: 12px;
    overflow: hidden;
    background: #000;
    opacity: .55;
    cursor: pointer;
    pointer-events: auto;                /* 覆盖窗口的 pointer-events:none */
    box-shadow: 0 10px 26px rgba(0, 0, 0, .45);
    transition: opacity .35s ease, border-color .35s ease, transform .35s var(--ease-smooth), box-shadow .35s ease;
}
.banner__thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
.banner__thumb:hover { opacity: .85; transform: translateY(-3px); }
.banner__thumb.is-active {
    opacity: 1;
    border-color: #fff;
    transform: scale(1.06);
    box-shadow: 0 16px 34px rgba(0, 0, 0, .55);
}
.banner__thumb:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

/* ---- 左右切换箭头：右下角一对玻璃小圆钮（≤680px 隐藏，改用滑动与圆点） ---- */
.banner__arrow {
    position: absolute; z-index: 4; bottom: 22px; top: auto;
    width: 42px; height: 42px;
    display: grid; place-items: center;
    padding: 0 0 3px;
    font-size: 1.4rem; line-height: 1;
    color: #fff;
    background: rgba(12, 8, 9, .4);
    border: 1px solid rgba(255, 255, 255, .32);
    border-radius: 50%;
    cursor: pointer;
    backdrop-filter: blur(6px);
    transition: all .28s var(--ease-smooth);
}
.banner__arrow:hover { background: var(--primary); border-color: var(--primary); box-shadow: var(--shadow-btn); }
.banner__arrow:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.banner__arrow--prev { right: 74px; }
.banner__arrow--next { right: 22px; }

/* ---- 底部小圆点（窄屏主用，由 hot.js 生成） ---- */
.banner__dots {
    position: absolute; z-index: 3;
    left: 50%; transform: translateX(-50%);
    bottom: 18px;
    display: none; gap: .5rem;
}
.banner__dots button {
    width: 9px; height: 9px; padding: 0;
    border: 0; border-radius: 9999px;
    background: rgba(255, 255, 255, .45);
    cursor: pointer;
    transition: all .3s var(--ease-smooth);
}
.banner__dots button.is-active { width: 26px; background: #fff; }
.banner__dots button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* 窄屏：胶片条收起，启用底部小圆点（自动播放、键盘、触摸滑动照旧） */
@media (max-width: 1100px) {
    .banner__thumbs { display: none; }
    .banner__dots { display: flex; }
}
@media (max-width: 680px) {
    .banner { height: 400px; border-radius: 18px; }
    .banner__inner { align-items: flex-end; padding-bottom: 3.4rem; }  /* 文字贴底，给圆点让位 */
    .banner__title { font-size: 1.55rem; }
    .banner__desc { font-size: .82rem; line-height: 1.8; }
    .banner__btn { margin-top: 1rem; padding: .6rem 1.3rem; font-size: .85rem; }
    .banner__arrow { display: none; }                                   /* 手机端用滑动 + 圆点 */
}
@media (max-width: 430px) {
    .banner { height: 350px; }
    .banner__city { font-size: .74rem; padding: .24rem .7rem; }
    .banner__desc { font-size: .78rem; }
}

/* ===== 4 精品景点卡片区 ===== */
.hot-sub {
    display: flex;
    align-items: center;
    gap: .6rem;
    margin: 2.4rem 0 1.5rem;
}
.hot-sub__t {
    font-family: 'Noto Serif SC', 'Source Han Serif SC', 'Songti SC', STSong, SimSun, serif;
    font-size: 1.25rem;
    color: var(--dark);
    letter-spacing: .06em;
}
.hot-sub__t::before {
    content: '';
    display: inline-block;
    width: 4px;
    height: 1.05em;
    margin-right: .6rem;
    vertical-align: -.14em;
    border-radius: 2px;
    background: linear-gradient(180deg, var(--primary), var(--accent));
}
.hot-sub__n { font-size: .82rem; color: var(--gray-400); }

.hot-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.5rem;
}
.hot-card {
    position: relative;
    display: flex;
    flex-direction: column;
    background: #fff;
    border-radius: var(--radius-card);
    overflow: hidden;
    box-shadow: var(--shadow-card);
    transition: transform .3s var(--ease-smooth), box-shadow .3s var(--ease-smooth);
}
.hot-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-card-hover); }
.hot-card__media { position: relative; height: 205px; overflow: hidden; background: linear-gradient(135deg, #6B4A32, #2A1A14); }
.hot-card__media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .6s var(--ease-smooth);
}
.hot-card:hover .hot-card__media img { transform: scale(1.06); }
.hot-card__media::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(180deg, rgba(0, 0, 0, .18) 0%, rgba(0, 0, 0, 0) 42%, rgba(0, 0, 0, .34) 100%);
}
/* 等级标签 + 评分 */
.hot-card__level {
    position: absolute;
    top: .8rem;
    left: .8rem;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: .28rem;
    padding: .22rem .6rem;
    border-radius: 9999px;
    font-size: .74rem;
    font-weight: 600;
    letter-spacing: .04em;
    color: #fff;
    background: linear-gradient(135deg, var(--primary), var(--primary-dark));
    box-shadow: 0 4px 12px rgba(142, 31, 51, .35);
}
/* 右上角：进入景区官网 */
.hot-card__official {
    position: absolute;
    top: .8rem;
    right: .8rem;
    z-index: 3;
    display: inline-flex;
    align-items: center;
    gap: .22rem;
    padding: .3rem .64rem;
    border-radius: 9999px;
    font-size: .74rem;
    font-weight: 500;
    letter-spacing: .02em;
    color: #fff;
    background: rgba(17, 20, 24, .52);
    border: 1px solid rgba(255, 255, 255, .42);
    -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
    transition: all .3s var(--ease-smooth);
}
.hot-card__official svg { width: 12px; height: 12px; transition: transform .3s ease; }
.hot-card__official:hover { background: var(--primary); border-color: var(--primary); transform: translateY(-1px); }
.hot-card__official:hover svg { transform: translateX(3px); }

/* 评分（从右上角移到标题行，与景点名同行） */
.hot-card__rating {
    display: inline-flex;
    align-items: center;
    gap: .18rem;
    margin-left: .55rem;
    font-family: "Noto Sans SC", "Microsoft YaHei", "PingFang SC", "Hiragino Sans GB", sans-serif;
    font-size: .78rem;
    font-weight: 600;
    color: var(--gray-500);
    vertical-align: middle;
}
.hot-card__rating svg { width: 13px; height: 13px; color: var(--accent); }

.hot-card__body { padding: 1.15rem 1.35rem 1.35rem; display: flex; flex-direction: column; flex: 1; }
.hot-card__name {
    font-family: 'Noto Serif SC', 'Source Han Serif SC', 'Songti SC', STSong, SimSun, serif;
    font-size: 1.35rem;
    color: var(--dark);
    letter-spacing: .05em;
    margin-bottom: .5rem;
}
.hot-card__tags { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: .7rem; }
.hot-card__tag {
    font-size: .72rem;
    color: var(--primary);
    padding: .14rem .5rem;
    border-radius: 9999px;
    background: rgba(181, 43, 67, .06);
    border: 1px solid rgba(181, 43, 67, .22);
}
.hot-card__desc {
    font-size: .875rem;
    line-height: 1.8;
    color: var(--gray-600);
    margin-bottom: 1.1rem;
}
.hot-card__foot {
    margin-top: auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    padding-top: .85rem;
    border-top: 1px dashed var(--gray-200);
    font-size: .8rem;
    color: var(--gray-500);
}
.hot-card__stat { display: inline-flex; align-items: center; gap: .32rem; }
.hot-card__stat svg { width: 14px; height: 14px; color: var(--gray-400); }
.hot-card__price { color: var(--primary); font-weight: 600; }
.hot-card__price span { font-weight: 400; font-size: .72rem; color: var(--gray-400); }

/* 卡片底部：查看景点详情（指向景点页） */
.hot-card__go {
    margin-top: .9rem;
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    align-self: flex-start;
    font-size: .86rem;
    font-weight: 500;
    color: var(--primary);
    text-decoration: none;
}
.hot-card__go svg { width: 15px; height: 15px; transition: transform .3s ease; }
.hot-card:hover .hot-card__go svg { transform: translateX(4px); }

/* ===== 5 经典路线推荐 ===== */
.hot-routes { margin-top: 3.2rem; }
.hot-route-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.25rem;
}
.hot-route {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: .5rem;
    padding: 1.3rem 1.4rem 1.35rem 1.7rem;
    background: #fff;
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-card);
    transition: transform .3s var(--ease-smooth), box-shadow .3s var(--ease-smooth), border-color .3s ease;
}
.hot-route::before {
    content: '';
    position: absolute;
    left: 0;
    top: 1.3rem;
    bottom: 1.35rem;
    width: 3px;
    border-radius: 3px;
    background: linear-gradient(180deg, var(--primary), var(--accent));
}
.hot-route:hover { transform: translateY(-4px); border-color: rgba(181, 43, 67, .28); box-shadow: var(--shadow-card-hover); }
.hot-route__head { display: flex; align-items: center; gap: .5rem; }
.hot-route__head svg { width: 17px; height: 17px; color: var(--primary); flex: none; }
.hot-route__t {
    font-family: 'Noto Serif SC', 'Source Han Serif SC', 'Songti SC', STSong, SimSun, serif;
    font-size: 1.06rem;
    color: var(--dark);
    letter-spacing: .04em;
}
.hot-route__meta { display: flex; flex-wrap: wrap; gap: .45rem; }
.hot-route__pill {
    font-size: .72rem;
    color: var(--secondary);
    padding: .12rem .48rem;
    border-radius: 9999px;
    background: rgba(30, 58, 138, .06);
    border: 1px solid rgba(30, 58, 138, .16);
}
.hot-route__pill--day {
    color: var(--primary);
    background: rgba(181, 43, 67, .06);
    border-color: rgba(181, 43, 67, .2);
}
.hot-route__plan { font-size: .84rem; line-height: 1.75; color: var(--gray-600); }
.hot-route__cost {
    margin-top: auto;
    padding-top: .6rem;
    font-size: .78rem;
    color: var(--gray-400);
    border-top: 1px dashed var(--gray-200);
}
.hot-route__cost b { color: var(--primary); font-size: .95rem; font-weight: 600; }

/* ===== 6 小字免责 + 响应式 ===== */
.hot-note {
    margin-top: 1.5rem;
    font-size: .76rem;
    line-height: 1.8;
    color: var(--gray-400);
    text-align: center;
}
.hot-note b { color: var(--gray-500); font-weight: 500; }

/* 渐入错峰（.reveal 由 gansu.js 统一加 .active） */
.hot-grid .reveal:nth-child(2) { transition-delay: .08s; }
.hot-grid .reveal:nth-child(3) { transition-delay: .16s; }
.hot-route-grid .reveal:nth-child(2) { transition-delay: .08s; }
.hot-route-grid .reveal:nth-child(3) { transition-delay: .16s; }

@media (max-width: 1024px) {
    .hot-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .hot-grid .hot-card:nth-child(3) { grid-column: span 2; }
    .hot-grid .hot-card:nth-child(3) .hot-card__media { height: 235px; }
}
@media (max-width: 900px) {
    .hot-route-grid { grid-template-columns: 1fr; }
}
@media (max-width: 680px) {
    .hot { padding: 3.5rem 0 3rem; }
    .hot-grid { grid-template-columns: 1fr; }
    .hot-grid .hot-card:nth-child(3) { grid-column: auto; }
    .hot-grid .hot-card:nth-child(3) .hot-card__media { height: 205px; }
    .hot-card__media { height: 190px; }
}

/* 尊重「减少动态效果」偏好：关掉轮播的推近与文字上浮，只保留淡入淡出 */
@media (prefers-reduced-motion: reduce) {
    .hot-card, .hot-route, .hot-card__media img { transition: none; }
    .banner__img { transform: none !important; transition: none; }
    .banner__slide.is-active .banner__img { animation: none !important; }
    .banner__slide .banner__content > * { opacity: 1; transform: none; animation: none; }
    .banner__slide { transition: opacity .3s linear; }
}

/* ===== 精选景点：横向照片卡（2026-10-21，按设计稿改版） ===== */
.picks { margin: clamp(2.2rem, 4vw, 3rem) 0 clamp(1.6rem, 3vw, 2.4rem); }

.picks__head {
    display: flex; align-items: flex-end; justify-content: space-between;
    gap: 1.2rem; flex-wrap: wrap;
    margin-bottom: 1.1rem;
}
.picks__t {
    margin: 0; display: flex; align-items: baseline; gap: .7rem;
    font-size: clamp(1.15rem, 2vw, 1.45rem); font-weight: 700;
    color: var(--dark); letter-spacing: .06em;
}
.picks__t::before {
    content: ""; width: 3px; height: 1.05em; border-radius: 2px;
    background: linear-gradient(180deg, var(--accent), var(--ochre));
    transform: translateY(.12em);
}
.picks__en {
    font-size: .64rem; font-weight: 500; letter-spacing: .22em;
    color: var(--gray-400); text-transform: uppercase;
}
.picks__sub { margin: .45rem 0 0; font-size: .82rem; color: var(--gray-500); letter-spacing: .04em; }

.picks__act { display: flex; align-items: center; gap: .55rem; }
.picks__more {
    display: inline-flex; align-items: center; gap: .35rem;
    font-size: .8rem; color: var(--gray-600); text-decoration: none;
    transition: color .2s ease;
}
.picks__more svg { width: 12px; height: 12px; }
.picks__more:hover { color: var(--ochre); }
.picks__nav {
    width: 30px; height: 30px; display: grid; place-items: center;
    border-radius: 50%; border: 1px solid var(--gray-200); background: #fff;
    color: var(--gray-600); cursor: pointer;
    transition: border-color .2s ease, color .2s ease, background .2s ease;
}
.picks__nav svg { width: 13px; height: 13px; }
.picks__nav[data-pick="prev"] svg { transform: rotate(90deg); }
.picks__nav[data-pick="next"] svg { transform: rotate(-90deg); }
.picks__nav:hover { border-color: var(--primary); color: var(--primary); background: rgba(25,59,56,.04); }

.picks__row {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(0, 1fr);
    gap: clamp(.5rem, .8vw, .75rem);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 2px;
}
.picks__row::-webkit-scrollbar { display: none; }

.pick {
    position: relative; display: block; overflow: hidden;
    border-radius: .7rem;
    aspect-ratio: 5 / 4;
    min-height: 176px;
    text-decoration: none;
    background: #e8e2d6;
    scroll-snap-align: start;
}
.pick img {
    width: 100%; height: 100%; object-fit: cover; display: block;
    transition: transform .9s cubic-bezier(.2,.7,.2,1);
}
.pick::after {
    content: ""; position: absolute; inset: 0;
    background: linear-gradient(0deg, rgba(14,11,7,.82) 0%, rgba(14,11,7,.28) 46%, rgba(14,11,7,.04) 72%);
    transition: opacity .3s ease;
}
.pick:hover img { transform: scale(1.06); }
.pick__ov {
    position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
    display: flex; flex-direction: column; gap: .18rem;
    padding: .85rem .95rem 1.5rem;
}
.pick__ov b {
    font-size: 1.06rem; font-weight: 600; letter-spacing: .06em;
    color: #fdf6e6; line-height: 1.3;
}
.pick__ov small {
    font-size: .78rem; letter-spacing: .02em;
    color: rgba(253, 246, 230, .74);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.pick__go {
    position: absolute; right: .65rem; bottom: .7rem;
    width: 26px; height: 26px; border-radius: 50%;
    display: grid; place-items: center;
    border: 1px solid rgba(253, 246, 230, .55);
    color: #fdf6e6; font-style: normal;
    transition: background .2s ease, border-color .2s ease, transform .2s ease;
}
.pick__go svg { width: 10px; height: 10px; }
.pick:hover .pick__go { background: var(--accent); border-color: var(--accent); color: #22302b; transform: translateX(2px); }

@media (max-width: 1100px) {
    .picks__row { grid-auto-columns: minmax(232px, 1fr); }
}
@media (max-width: 700px) {
    .picks__row { grid-auto-columns: 62%; }
    .picks__sub { font-size: .78rem; }
    .picks__act { width: 100%; justify-content: space-between; }
}
@media (prefers-reduced-motion: reduce) {
    .pick img { transition: none !important; }
}