/* ============================================
   XMU CCE — English site additions (en/)
   Only styles not covered by the shared core.css / responsive.css
   ============================================ */

/* Mobile menu open state.
   The shared responsive.css hides .nav-menu under 768px but defines no
   "open" state, so we provide one here, scoped to the English header. */
@media (max-width: 768px) {
    .header.mobile-menu-open .nav-menu {
        display: flex !important;
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        margin-left: 0;
        background: #fff;
        padding: 14px 20px 20px;
        box-shadow: 0 12px 30px rgba(0, 0, 0, 0.12);
        max-height: calc(100vh - 56px);
        overflow-y: auto;
    }

    [data-theme="dark"] .header.mobile-menu-open .nav-menu {
        background: #1e293b;
    }

    .header.mobile-menu-open .nav-item {
        width: 100%;
    }

    .header.mobile-menu-open .nav-link {
        width: 100%;
        padding: 12px 4px;
        font-size: 16px;
    }

    /* Dropdowns become inline stacks on mobile */
    .header.mobile-menu-open .dropdown-menu {
        position: static;
        opacity: 1;
        visibility: visible;
        transform: none;
        box-shadow: none;
        min-width: 100%;
        padding: 4px 0 8px 16px;
        background: transparent;
        border-left: 2px solid var(--xmu-blue);
    }

    .header.mobile-menu-open .dropdown-item {
        padding: 10px 8px;
    }

    /* Animate hamburger into an X */
    .header.mobile-menu-open .mobile-menu-btn span:nth-child(1) {
        transform: translateY(7px) rotate(45deg);
    }
    .header.mobile-menu-open .mobile-menu-btn span:nth-child(2) {
        opacity: 0;
    }
    .header.mobile-menu-open .mobile-menu-btn span:nth-child(3) {
        transform: translateY(-7px) rotate(-45deg);
    }
}

/* Keep English nav labels from wrapping awkwardly */
.nav-link {
    white-space: nowrap;
}

/* ============================================================
   English About — Introduction layout redesign
   The intro section now carries the long official profile, so the
   old "image-left / text-right" two-column grid left the image empty.
   Redesign: full-width banner image on top, single readable column
   of text below, and the three highlight cards laid out in a row.
   Scoped to .en-intro so the Chinese site (about.css) is untouched.
   ============================================================ */
.en-intro .about-intro-wrapper {
    display: block;
}

.en-intro .about-intro-image {
    width: 100%;
    height: 420px;
    margin-bottom: 44px;
}

.en-intro .about-intro-image img {
    height: 420px;
    object-fit: cover;
}

.en-intro .about-intro-content {
    max-width: 880px;
    margin: 0 auto;
}

.en-intro .about-intro-title {
    text-align: center;
    margin-bottom: 28px;
}

.en-intro .about-intro-text {
    text-align: justify;
}

.en-intro .about-intro-features {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 20px;
    margin-top: 44px;
}

.en-intro .intro-feature {
    flex: 1 1 0;
    min-width: 200px;
    flex-direction: column;
    align-items: center;
    text-align: center;
    background: #ffffff;
    border: 1px solid #eef1f5;
    border-radius: var(--radius-md);
    padding: 26px 22px;
    box-shadow: var(--shadow-sm);
}

.en-intro .intro-feature-text strong {
    font-size: 1.05rem;
}

/* Banner + cards adapt on small screens */
@media (max-width: 768px) {
    .en-intro .about-intro-image,
    .en-intro .about-intro-image img {
        height: 240px;
    }
    .en-intro .about-intro-image {
        margin-bottom: 32px;
    }
    .en-intro .about-intro-features {
        flex-direction: column;
    }
    .en-intro .intro-feature {
        width: 100%;
        flex: 1 1 auto;
    }
}

/* ============================================================
   English About — merged hero image
   The intro photo is removed (it duplicated the look). Instead the
   campus photo becomes the page-hero background with the title
   overlaid, so only ONE image shows at the top. Scoped to
   .en-about-hero so other pages (shared .page-hero) are untouched.
   ============================================================ */
.en-about-hero {
    background: url(../images/environment/campus-04.jpg) top / cover no-repeat;
    min-height: 380px;
}

.en-about-hero .page-hero-bg {
    background: linear-gradient(135deg, rgba(8, 30, 60, 0.55) 0%, rgba(8, 30, 60, 0.35) 100%);
}

.en-about-hero .page-hero-title,
.en-about-hero .page-hero-subtitle,
.en-about-hero .page-hero-breadcrumb,
.en-about-hero .page-hero-breadcrumb a,
.en-about-hero .page-hero-breadcrumb span {
    color: #ffffff;
}

.en-about-hero .page-hero-breadcrumb a:hover {
    color: #cfe0f5;
}

@media (max-width: 768px) {
    .en-about-hero {
        min-height: 260px;
    }
}

/* ============================================================
   English Homepage — CTA contact info (phone + email displayed
   directly with large font, instead of generic buttons)
   ============================================================ */
.cta-contact-info {
    display: flex;
    justify-content: center;
    gap: 28px;
    margin-top: 36px;
    flex-wrap: wrap;
}

.cta-contact-item {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 16px 32px;
    border-radius: 50px;
    font-size: 1.5rem;
    font-weight: 600;
    text-decoration: none;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.cta-contact-item:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12);
}

.cta-phone {
    background: var(--xmu-blue, #1a56db);
    color: #ffffff;
}

.cta-email {
    background: #ffffff;
    color: var(--xmu-blue, #1a56db);
    border: 2px solid var(--xmu-blue, #1a56db);
}

.cta-email:hover {
    background: var(--xmu-blue, #1a56db);
    color: #ffffff;
}

@media (max-width: 768px) {
    .cta-contact-info {
        flex-direction: column;
        align-items: center;
        gap: 16px;
    }

    .cta-contact-item {
        width: 100%;
        max-width: 340px;
        justify-content: center;
        font-size: 1.25rem;
        padding: 14px 24px;
    }
}

/* ============================================================
   English Campus Environment page (environment.html)
   Photo gallery grouped by category. Scoped to .env- classes.
   ============================================================ */
.en-env-hero {
    background: url(../images/environment/campus-01.jpg) center / cover no-repeat;
    min-height: 380px;
}

.en-env-hero .page-hero-bg {
    background: linear-gradient(135deg, rgba(8, 30, 60, 0.6) 0%, rgba(8, 30, 60, 0.4) 100%);
}

.en-env-hero .page-hero-title,
.en-env-hero .page-hero-subtitle,
.en-env-hero .page-hero-breadcrumb,
.en-env-hero .page-hero-breadcrumb a,
.en-env-hero .page-hero-breadcrumb span {
    color: #ffffff;
}

.en-env-hero .page-hero-breadcrumb a:hover {
    color: #cfe0f5;
}

.env-gallery {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 18px;
}

.env-item {
    margin: 0;
    border-radius: var(--radius-md, 12px);
    overflow: hidden;
    box-shadow: var(--shadow-sm, 0 2px 10px rgba(0, 0, 0, 0.08));
    cursor: zoom-in;
    background: #f2f4f7;
    aspect-ratio: 4 / 3;
}

.env-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.45s ease;
}

.env-item:hover img {
    transform: scale(1.06);
}

/* Lightbox overlay */
.env-lightbox {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: rgba(0, 0, 0, 0.9);
    align-items: center;
    justify-content: center;
    padding: 40px;
}

.env-lightbox.open {
    display: flex;
}

.env-lightbox-img {
    max-width: 92vw;
    max-height: 88vh;
    border-radius: 8px;
    box-shadow: 0 10px 50px rgba(0, 0, 0, 0.5);
}

.env-lightbox-close {
    position: absolute;
    top: 20px;
    right: 32px;
    color: #fff;
    font-size: 44px;
    line-height: 1;
    cursor: pointer;
    font-weight: 300;
}

/* Learning Resources: hide the category tab buttons above the cards.
   Scoped to this section only so other pages (news / About teams) keep their tabs.
   The other three panels remain in the HTML, just not switchable. */
#learning-resources .section-tabs {
    display: none;
}

@media (max-width: 768px) {
    .en-env-hero {
        min-height: 260px;
    }
    .env-gallery {
        grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
        gap: 12px;
    }
    .env-lightbox {
        padding: 16px;
    }
}

/* 英文版 LOGO 放大（与中文版一致，height 44px -> 56px） */
.logo .logo-img {
    height: 72px;
}

/* 导航最后一项(Resources)与主题切换太阳标间距（中文版靠 .zh-header-actions margin-left:28px，英文版补上） */
.header-actions {
    margin-left: 28px;
}

/* ---- 移动端头部修复：防止汉堡按钮被挤出屏幕右侧 ----
   上方 .logo .logo-img{height:56px} 与 .header-actions{margin-left:28px} 是桌面规则，
   由于 en.css 加载晚于 responsive.css，会盖掉 responsive.css 里的移动端尺寸。
   在 375px 屏上，56px 的 logo(宽约224px) + 操作按钮 + 汉堡 三项总宽超出可用宽度，
   导致 space-between 把最后一个(汉堡)推到视口外。下面规则必须位于上方桌面规则之后才能胜出。 */
@media (max-width: 768px) {
    .logo .logo-img {
        height: 38px;
    }
    .header-actions {
        margin-left: 12px;
    }
    .nav-container {
        gap: 8px;
    }
    .mobile-menu-btn {
        flex-shrink: 0;
    }
}