/* ══════════════════════════════════════════════════════════════════════════
   home.css —— 首页

   版面（与 docs/05-门户设计参考.md 的结构映射一致）：
     ① 全屏宣传片首屏，标语压左下   ② 两张超大业务卡
     ③ 航校新闻图文卡               ④ 双栏图片墙
     ⑤ 深色全宽品牌宣言             页脚在母版里

   尺度比内页放大一档：容器 1600px、分区留白 96~160px。这是刻意的 ——
   首页要「大气、现代」，内页要「信息密度」，两者不是一套比例。

   色值一律取自 variables.css（含后台可调的那几个），本文件不写死品牌色。
   ══════════════════════════════════════════════════════════════════════════ */

/* ── 首页专属尺度 ───────────────────────────────────────────────────────── */

body.is-home {
    --container: 1600px;
    --home-gap: clamp(96px, 10vw, 160px);
}

/* ── 深色页头：绝对定位浮在首屏大图上 ────────────────────────────────────
   ⚠️ 不是 sticky —— 首屏就是一张全屏画面，导航跟着滚上去更干净。
      内页仍走 .site-header 原来的 sticky 规则，不受这里影响。 */

.site-header--overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    background: transparent;
    border-bottom-color: rgb(255 255 255 / 18%);
    /* 必须显式关掉：layout.css 给 .site-header 加了毛玻璃，叠在视频上的页头
       会因此把视频顶部整条糊掉（2026-10-21）。 */
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
}

.site-header--overlay .site-nav__link {
    color: rgb(255 255 255 / 88%);
}

.site-header--overlay .site-nav__link:hover,
.site-header--overlay .site-nav__link--active {
    /* 深色底上不能用 --brand-soft 浅底（对比度不够），改用半透明白 */
    color: #fff;
    background: rgb(255 255 255 / 14%);
}

.site-header--overlay .nav-toggle__bar {
    background: #fff;
}

/* 二级菜单仍然用浅底白卡 —— 浮在白卡上的文字要保持可读 */
.site-header--overlay .site-nav__sub {
    background: var(--bg);
}

.site-header--overlay .site-nav__sub .site-nav__link {
    color: var(--text);
}

.site-header--overlay .site-nav__sub .site-nav__link:hover,
.site-header--overlay .site-nav__sub .site-nav__link--active {
    color: var(--brand);
    background: var(--brand-soft);
}

/* ⚠️ 移动端必须把白色字收回来（2026-10-22 业务方报「H5 点菜单有幾项空白」）。
   上面那套白字是给「透明页头浮在视频上」用的。一旦宽度到 1199px，
   layout.css 把导航收进汉堡菜单，菜单板是 **白底**（--bg）——
   白字压白底直接隐形，一级项全看不见，只有二级项因为另外写了 var(--text) 才露出来。
   specificity 要压过上面两条（都是 0,2,0），这里用 0,2,0 + 后置即可。 */
@media (max-width: 1199px) {
    .site-header--overlay .site-nav__link {
        color: var(--text);
    }

    .site-header--overlay .site-nav__link:hover,
    .site-header--overlay .site-nav__link--active {
        color: var(--brand);
        background: var(--brand-soft);
    }
}

/* ── ① 首屏：全屏宣传片 ─────────────────────────────────────────────────── */

.home-hero {
    position: relative;
    min-height: 100vh;
    display: flex;
    align-items: flex-end;
    overflow: hidden;
    background: var(--bg-dark);
}

/* 底图（video 不可用时的兜底层）与宣传片：同位同尺寸，谁在上面都铺满首屏 */
.home-hero__poster,
.home-hero__media {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;

    /* ⚠️ 铺满的代价是裁切 —— 这一条别当 bug 改。
       首屏固定一屏高（100vh），而片子是 16:9：窗口宽高比一旦不是 16:9，
       `cover` 就必须裁掉一头。居中裁在宽屏窗口上会把上下各切一条，
       而地面（楼、大门、道闸）正好在下沿，看着就像「视频底部被挡住」。
       所以按「保底部」对齐：天空被裁掉看不出来，地面一直完整。
       要一帧都不裁只能退成 `contain`（两侧露深色边），那是另一个视觉取向。 */
    object-position: 50% 100%;
}

/* 尊重系统的「减少动态效果」偏好 —— 直接不显示视频，露出下面那张底图 */
@media (prefers-reduced-motion: reduce) {
    .home-hero__media {
        display: none;
    }
}

/* 压暗遮罩：保证白字在任何照片上都够对比度。左下更暗，因为标语在那儿 */
.home-hero__scrim {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(to top, rgb(0 0 0 / 72%) 0%, rgb(0 0 0 / 28%) 42%, rgb(0 0 0 / 34%) 100%);
}

.home-hero__inner {
    position: relative;
    z-index: 1;
    padding-block: clamp(64px, 9vw, 128px);
    color: #fff;
}

.home-hero__eyebrow {
    margin: 0 0 20px;
    color: rgb(255 255 255 / 78%);
    font-size: 15px;
    letter-spacing: 0.24em;
    text-transform: uppercase;
}

.home-hero__title {
    margin: 0;
    /* 用「大字重 + 负字距 + 收紧行高」做出紧凑粗体的密度感 ——
       中文没有 Condensed 变体，只能靠这三点逼近。 */
    max-width: 18ch;
    font-size: clamp(40px, 6.4vw, 92px);
    font-weight: 800;
    line-height: 1.06;
    letter-spacing: -0.02em;
}

/* 首屏标语：品牌标语的两条轮切（现值为「技以载道 诚信为本」/「崇尚品质 追求卓越」）。
   —— 用 grid 把两条叠在同一格里，容器高度自动等于一行，不用手写 min-height
     （以后改字号也不会错位）。
   —— 两条各占半个周期：14s 一轮、每条 7s（约 0.5s 淡入 → 常驻 → 约 0.5s 淡出），
     按 --motto-index 错开一个步长就成了轮播。
     时间线是按「两条」定死的；标语条数变了要同步改（见 HomePageDto.HeroMottos）。
   —— 纯 CSS，无 JS：两条文字都在 DOM 里，抓取和禁用动画都正常。 */
.home-motto {
    display: grid;
}

.home-motto__item {
    grid-area: 1 / 1;
    opacity: 0;
    animation: home-motto-cycle 14s infinite;
    animation-delay: calc(var(--motto-index) * 7s);
}

@keyframes home-motto-cycle {
    0% { opacity: 0; }
    4% { opacity: 1; }
    46% { opacity: 1; }
    50% { opacity: 0; }
    100% { opacity: 0; }
}

/* 系统开了「减少动态效果」就停轮切，只留第一条 —— 与首屏视频同一口径 */
@media (prefers-reduced-motion: reduce) {
    .home-motto__item {
        animation: none;
    }

    .home-motto__item:not(:first-child) {
        display: none;
    }

    .home-motto__item:first-child {
        opacity: 1;
    }
}

.home-hero__sub {
    margin: 24px 0 0;
    max-width: 52ch;
    color: rgb(255 255 255 / 82%);
    font-size: clamp(16px, 1.4vw, 20px);
    line-height: 1.7;
}

.home-hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    margin-top: 44px;
}

/* 首屏上的按钮要自己带底，不能用 --ghost 的浅边框 */
.home-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 16px 36px;
    border: 1px solid transparent;
    border-radius: 2px;      /* 方角，不用圆角 */
    font-size: 16px;
    letter-spacing: 0.04em;
    transition: background var(--transition), color var(--transition),
                border-color var(--transition);
}

.home-btn--solid {
    background: var(--brand);
    color: #fff;
}

.home-btn--solid:hover {
    background: var(--brand-strong);
}

.home-btn--outline {
    border-color: rgb(255 255 255 / 60%);
    color: #fff;
}

.home-btn--outline:hover {
    background: #fff;
    border-color: #fff;
    color: var(--bg-dark);
}

/* ── ② 两张超大业务卡 ───────────────────────────────────────────────────── */

.home-split {
    padding-block: var(--home-gap);
}

.home-split__grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
}

.home-card {
    position: relative;
    display: block;
    min-height: clamp(360px, 42vw, 560px);
    overflow: hidden;
    background: var(--bg-dark);
    color: #fff;
}

.home-card__media {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 600ms ease;
}

.home-card:hover .home-card__media {
    transform: scale(1.04);
}

.home-card__scrim {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgb(0 0 0 / 78%) 0%, rgb(0 0 0 / 12%) 62%);
}

.home-card__body {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    height: 100%;
    min-height: inherit;
    padding: clamp(28px, 3vw, 48px);
}

.home-card__title {
    margin: 0 0 12px;
    font-size: clamp(26px, 2.6vw, 38px);
    font-weight: 700;
    line-height: 1.16;
    letter-spacing: -0.01em;
}

.home-card__desc {
    margin: 0;
    max-width: 46ch;
    color: rgb(255 255 255 / 84%);
    font-size: 16px;
    line-height: 1.7;
}

.home-card__more {
    margin-top: 24px;
    font-size: 15px;
    letter-spacing: 0.06em;
    color: var(--brand-accent);   /* 金黄 —— 深色底上够亮，做 CTA 点睛 */
}

/* ── ③ 新闻区 ───────────────────────────────────────────────────────────── */

.home-news {
    padding-block: var(--home-gap);
    background: var(--bg-subtle);
}

.home-news__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px 32px;
    flex-wrap: wrap;
    margin-bottom: clamp(40px, 4vw, 64px);
}

.home-news__title {
    margin: 0;
    font-size: clamp(30px, 3.2vw, 46px);
    font-weight: 800;
    letter-spacing: -0.015em;
}

.home-news__more {
    font-size: 15px;
    letter-spacing: 0.04em;
    color: var(--text-muted);
}

.home-news__more:hover {
    color: var(--brand);
}

.home-news__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 32px;
}

.home-news-card {
    display: block;
    color: inherit;
}

.home-news-card__media {
    display: block;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    background: var(--bg);
}

.home-news-card__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 600ms ease;
}

.home-news-card:hover .home-news-card__media img {
    transform: scale(1.05);
}

.home-news-card__date {
    display: block;
    margin: 20px 0 10px;
    color: var(--text-faint);
    font-size: 13px;
    letter-spacing: 0.08em;
}

.home-news-card__title {
    display: block;
    font-size: 21px;
    font-weight: 700;
    line-height: 1.42;
    letter-spacing: -0.005em;
}

.home-news-card:hover .home-news-card__title {
    color: var(--brand);
}

/* ── ④ 双栏图片墙（人物风采 / 菁菁校园）────────────────────────────────── */

.home-gallery {
    padding-block: var(--home-gap);
}

.home-gallery__grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px 40px;
}

.home-gallery__col-title {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    margin: 0 0 24px;
    font-size: clamp(24px, 2.2vw, 32px);
    font-weight: 800;
    letter-spacing: -0.01em;
}

/* 每栏首图放大，撑住「大图」的量感。
   条数为偶数时末图也放大（视图里按奇偶决定）—— 2 列网格里首图占满整行，
   剩下若不是偶数张，最后一张会孤零零占半行、右边空一格。
   网格本身不限制行数，加多少张都能排下。 */
.home-gallery__tiles {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
}

.home-tile {
    position: relative;
    display: block;
    overflow: hidden;
    background: var(--bg-subtle);
    color: #fff;
}

.home-tile__media {
    display: block;
    width: 100%;
    height: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    transition: transform 600ms ease;
}

.home-tile:hover .home-tile__media {
    transform: scale(1.06);
}

.home-tile--lead {
    grid-column: 1 / -1;
}

.home-tile--lead .home-tile__media {
    aspect-ratio: 16 / 9;
}

.home-tile__name {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 14px 16px;
    background: linear-gradient(to top, rgb(0 0 0 / 76%), rgb(0 0 0 / 0%));
    color: #fff;
    font-size: 15px;
    line-height: 1.45;
    /* 两行截断，避免长标题把图压没 */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* ── ⑤ 品牌宣言（深色全宽，超大字号）───────────────────────────────────── */

.home-manifesto {
    /* 上方用统一节奏拉开；下方紧接页脚（同底色），不必再留同等空白 ——
       上下都给满，页脚再叠一层上内边距，底部就是一大片空场 */
    padding-top: var(--home-gap);
    padding-bottom: clamp(56px, 5vw, 96px);
    background: var(--bg-dark);
    color: #fff;
    text-align: center;
}

.home-manifesto__text {
    margin: 0 auto;
    max-width: 24ch;
    font-size: clamp(30px, 3.6vw, 54px);
    font-weight: 700;
    line-height: 1.32;
    letter-spacing: 0.01em;
}

.home-manifesto__en {
    margin: 40px 0 0;
    color: rgb(255 255 255 / 46%);
    font-size: 13px;
    letter-spacing: 0.34em;
    text-transform: uppercase;
}

/* ── 响应式 ─────────────────────────────────────────────────────────────── */

@media (max-width: 1023px) {
    .home-split__grid,
    .home-news__grid,
    .home-gallery__grid {
        grid-template-columns: 1fr;
    }

    .home-hero {
        min-height: 78vh;
    }

    .home-news__grid {
        gap: 40px;
    }
}

@media (max-width: 639px) {
    .home-gallery__tiles {
        gap: 12px;
    }

    .home-btn {
        padding: 14px 26px;
        font-size: 15px;
    }
}