.guoqing-2026 {
    background: #fbc0a7;
}

.guoqing-2026 img {
    display: block;
    width: 100%;
    height: auto;
}

.guoqing-hero {
    overflow: hidden;
}

.guoqing-intro-art {
    display: none;
}

/* The desktop artwork already contains the introductory copy. */
.guoqing-intro {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
}

.guoqing-content {
    padding: 35px 0 140px;
    background: #ffdac0 url('/images/zhuan-ti/2026/guoqing/background.jpg') center top / 100% 100% no-repeat;
}

.guoqing-section {
    width: 57.3%;
    max-width: 1100px;
    margin: 0 auto;
}

.guoqing-section + .guoqing-section {
    margin-top: 95px;
}

.guoqing-heading {
    width: 92%;
    margin: 0 auto 36px;
}

.guoqing-tours {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 40px 0;
}

.guoqing-tour {
    display: block;
    border-radius: 28px;
    transition: transform .2s ease;
}

.guoqing-tour:hover {
    transform: translateY(-4px);
}

.guoqing-tour:focus,
.guoqing-tour:active {
    outline: none;
}

.guoqing-tour:focus-visible {
    outline: 3px solid #b9380c;
    outline-offset: 3px;
}

@media (max-width: 991px) {
    .guoqing-section {
        width: 90%;
    }

    .guoqing-content {
        padding: 24px 0 60px;
    }

    .guoqing-section + .guoqing-section {
        margin-top: 48px;
    }

    .guoqing-tours {
        row-gap: 22px;
    }
}

@media (max-width: 767px) {
    /* Enlarge the original dialogue artwork below the landscape on phones. */
    .guoqing-hero {
        height: calc(100vw * 620 / 1920);
    }

    .guoqing-intro-art {
        display: block;
        position: relative;
        height: 0;
        padding-top: calc(100% * 504 / 1100);
        overflow: hidden;
    }

    /* hero.jpg: x=410, y=650, width=1100, height=504 includes both avatars and the arrow. */
    .guoqing-intro-art img {
        position: absolute;
        top: 0;
        left: calc(-100% * 410 / 1100);
        width: calc(100% * 1920 / 1100);
        max-width: none;
        transform: translateY(calc(-100% * 650 / 1154));
    }

    .guoqing-section {
        width: 96%;
    }

    .guoqing-heading {
        width: 94%;
        margin-bottom: 18px;
    }

    .guoqing-tours {
        gap: 12px;
    }

    .guoqing-tour {
        overflow: hidden;
        border-radius: 12px;
    }

    /* Each 547px source has a 488px card and 59px of transparent space on the right. */
    .guoqing-tour img {
        width: calc(100% * 547 / 488);
        max-width: none;
    }

    .guoqing-section + .guoqing-section {
        margin-top: 30px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .guoqing-tour {
        transition: none;
    }
}