/* ================================================
   ChongwuPet page-zone.css
   ============================================== */

:root {
    --vw: calc(100vw - (100vw - 100%));
    --hero-base-h: clamp(80px, 20svh, 120px);
}

@media (min-width:1024px) {
    :root {
        --hero-base-h: clamp(100px, 22svh, 140px);
    }
}
html,
body {
    display: block;
}
body {
  padding-top: calc(var(--nav-h, 80px));
}

/* 横幅BANNER */
.full-bleed-banner {
    position: relative;
    z-index: 1;
    overflow: hidden;
    height: clamp(180px, 30vw, 400px);
    inline-size: var(--vw);
    margin-inline: calc(50% - (var(--vw)/2));
}

.full-bleed-banner .banner-img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    object-position: center;
}

/* 栏目头 */
.hero {
    width: auto;
    position: relative;
    z-index: 2;
    text-align: center;
    min-height: var(--hero-base-h);
    margin-top: calc(-0.5 * var(--hero-base-h));
    background: #fff;
    border-radius: var(--radius);
    padding-left: var(--gutter-safe-left);
    padding-right: var(--gutter-safe-right);
}

.hero .module-hero {
    padding: 16px 0 5px;
}

.hero h1 {
    font-size: clamp(30px, 2.6vw, 36px);
    margin: 0 0 6px;
    color: var(--primary-color);
}

.hero p {
    display: inline-flex;
    font-size: clamp(14px, 2.6vw, 16px);
    margin: 0;
    color: var(--text-color-secondary, #666);
    line-height: 1.7;
}

@media (min-width:1024px) {
    .hero p {
        width: clamp(560px, 55vw, 760px);
    }
}

.zone-title {
    font-size: clamp(18px, 2.2vw, 22px);
    font-weight: 700;
    margin: 0 0 10px;
}

.zone-nav {
    margin: 0 auto clamp(40px, 4.5vw, 60px);
}

.zone-hot {
    margin: 0 auto 40px;
}

/* ===== 猫咪专区：快速入口（圆形 SVG 图标版） ===== */
.nav-grid--icons {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    row-gap: 10px;
    column-gap: 0;
    place-items: center;
}

@media (min-width:1024px) {
    .nav-grid--icons {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: clamp(20px, 1.5vw, 28px);
    }
}

.icon-entry {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-decoration: none;
    -webkit-tap-highlight-color: transparent;
}

.icon-entry:hover {
    color: var(--primary-color);
}

.icon-bubble {
    --d: 120px;
    width: var(--d);
    height: var(--d);
    background: #fff;
    display: grid;
    place-items: center;
    transition: transform .18s ease, box-shadow .18s ease;
}

@media (min-width:1024px) {
    .icon-bubble {
        --d: 220px;
    }
}

.icon-bubble img {
    width: 90%;
    height: auto;
    display: block;
}

.icon-title {
    font-size: clamp(22px, 1.6vw, 28px);
    font-weight: 400;
    color: var(--primary-color);
    line-height: 1.2;
}

.icon-title:hover {
    color: var(--primary-color);
    text-decoration: underline;
}

@media (hover:hover) and (pointer:fine) {
    .icon-entry:hover .icon-bubble {
        transform: translateY(-2px);
    }

    .icon-entry:hover .icon-title {
        text-decoration: underline;
    }
}

.icon-entry:focus-visible {
    outline: 2px solid var(--primary-color);
    outline-offset: 4px;
    border-radius: 12px;
}

.cards .card .card-link::after {
    background: none;
}

@media (min-width:1024px) {
    .cards .card .card-link::after {
        content: "";
        position: absolute;
        right: 15px;
        bottom: 10px;
        width: 18px;
        height: 18px;
        background-color: var(--primary-color);
        mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12h12m0 0-5-5m5 5-5 5' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
        mask-repeat: no-repeat;
        mask-position: center;
        mask-size: 100% 100%;
        pointer-events: none;
        transform: translateX(0);
        opacity: 0;
        transition: transform .5s var(--ease-smooth);
        will-change: transform;
    }

    .cards .card .card-link:hover::after,
    .cards .card .card-link:focus-visible::after {
        transform: translateX(5px);
        opacity: 1;
    }
}

.card .card-body .card-cat {
    font-size: 12px;
    color: var(--text-color-secondary);
}

.zone-hot .card>.card-link {
    box-shadow: none;
    border: none;
    background: #f5f5f5;
}

.zone-hot .card>.card-link:hover,
.zone-hot .card>.card-link:focus,
.zone-hot .card>.card-link:active {
    box-shadow: none;
    border: none;
}