/* railway-carriage.css - 中东铁路车厢视觉组件（共享） v1.3
 * 变更：
 *   v1.3 手机端（< 768px）隐藏车厢；平板/桌面（≥ 768px）由 JS 等比缩放
 *   v1.2 修复门楣版车窗压上腰带问题
 *   v1.1 三车型车窗尺寸差异区分
 *   v1.0 初版
 *
 * 用法：
 *   full-toc.php → <div class="rc-carriage rc-carriage--full  rc-carriage--binsui">
 *   museum.php   → <div class="rc-carriage rc-carriage--binsui">  (默认门楣版)
 */

/* ============ 外层容器 ============ */
.rc-carriage-wrap {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 32px 0 40px;
    padding: 16px;
    background: rgba(22, 17, 12, 0.5);
    border: 1px solid rgba(212, 162, 76, 0.15);
    border-radius: 12px;
    position: relative;
    overflow: hidden;
}

/* ============================================================
   车厢主体：默认门楣版尺寸（museum.php 用）
   ============================================================ */
.rc-carriage {
    width: 900px;
    max-width: 100%;
    height: var(--rc-h);
    border-radius: 10px;
    position: relative;
    overflow: hidden;
    border: 3px solid rgba(255, 255, 255, 0.3);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
    transition: all 0.4s ease;
    background: var(--rc-body-bg);
    box-sizing: border-box;

    /* ---- 门楣版尺寸参数 ---- */
    --rc-h: 260px;

    --rc-belt1-top: 25px;      /* 上腰带顶 */
    --rc-belt1-h: 14px;        /* 上腰带高 */

    --rc-win-top: 46px;        /* 车窗顶（避开腰带底 39，留 7px 间隙） */

    --rc-belt2-top: 192px;     /* 下腰带顶 */
    --rc-belt2-h: 14px;

    --rc-board-top: 180px;     /* 方向牌顶 */
    --rc-board-w: 150px;
    --rc-board-h: 32px;

    --rc-intro-top: 0;
}

.rc-carriage:hover {
    transform: translateY(-4px);
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.6), 0 0 25px rgba(212, 162, 76, 0.15);
}

/* ============================================================
   尺寸修饰符：目录版（full-toc，390px 高）
   ============================================================ */
.rc-carriage--full {
    --rc-h: 390px;
    --rc-win-top: 65px;
    --rc-belt1-top: 45px;
    --rc-belt1-h: 14px;
    --rc-belt2-top: 265px;
    --rc-belt2-h: 20px;
    --rc-board-top: 255px;
    --rc-board-w: 200px;
    --rc-board-h: 40px;
    --rc-intro-top: 305px;
}

/* ============================================================
   车型 1：滨绥 25B（绿皮 + 上下黄腰带）
   车窗 190×180（full）/ 133×126（lintel）
   ============================================================ */
.rc-carriage--binsui {
    --rc-body-bg: linear-gradient(135deg,
        rgba(0,70,28,1) 0%, rgba(0,85,34,0.9) 25%, rgba(0,100,40,0.8) 50%,
        rgba(0,85,34,0.9) 75%, rgba(0,70,28,1) 100%);
    --rc-win-bg: rgba(0,10,20,0.8);
    --rc-win-border-c: rgba(210,215,220,0.6);
    --rc-board-img: url('/images/s1.jpg');
    --rc-belt-bg: linear-gradient(to right,
        rgba(255,240,120,0.9) 0%, rgba(255,240,120,1) 20%,
        rgba(255,255,150,1) 50%,
        rgba(255,240,120,1) 80%, rgba(255,240,120,0.9) 100%);

    /* lintel 版：窗更窄更方 */
    --rc-win-w: 133px;
    --rc-win-h: 126px;
    --rc-win-radius: 13px;
}
.rc-carriage--full.rc-carriage--binsui {
    --rc-win-w: 190px;
    --rc-win-h: 180px;
    --rc-win-radius: 20px;
}

/* 滨绥双黄腰线 */
.rc-carriage--binsui::before,
.rc-carriage--binsui::after {
    content: "";
    position: absolute;
    left: 0; right: 0;
    background: var(--rc-belt-bg);
    z-index: 2;
    box-shadow: 0 2px 10px rgba(255, 240, 120, 0.4);
}
.rc-carriage--binsui::before { top: var(--rc-belt1-top); height: var(--rc-belt1-h); }
.rc-carriage--binsui::after  { top: var(--rc-belt2-top); height: var(--rc-belt2-h); }

/* ============================================================
   车型 2：滨洲 25G（红白配色）
   车窗 195×185（full）/ 137×130（lintel）
   ============================================================ */
.rc-carriage--binzhou {
    --rc-body-bg: linear-gradient(to bottom,
        rgba(240,240,240,0.95) 0%, rgba(230,230,230,0.9) 30px,
        rgba(220,220,220,0.85) 50px, rgba(210,210,210,0.8) 270px,
        rgba(200,200,200,0.75) 100%);
    --rc-win-bg: rgba(0,12,25,0.82);
    --rc-win-border-c: rgba(215,220,225,0.6);
    --rc-board-img: url('/images/s2.jpg');
    --rc-belt-bg: linear-gradient(to right,
        rgba(255,240,120,0.95), rgba(255,255,150,1), rgba(255,240,120,0.95));

    --rc-win-w: 137px;
    --rc-win-h: 130px;
    --rc-win-radius: 13px;
}
.rc-carriage--full.rc-carriage--binzhou {
    --rc-win-w: 195px;
    --rc-win-h: 185px;
    --rc-win-radius: 20px;
}

/* 滨洲红车身（窗后铺满） */
.rc-carriage--binzhou::before {
    content: "";
    position: absolute;
    top: var(--rc-belt1-top);
    left: 0; right: 0;
    height: calc(var(--rc-belt2-top) - var(--rc-belt1-top));
    background: linear-gradient(135deg,
        rgba(215,0,0,0.85) 0%, rgba(235,20,20,0.8) 25%,
        rgba(255,40,40,0.75) 50%,
        rgba(235,20,20,0.8) 75%, rgba(215,0,0,0.85) 100%);
    z-index: 1;
}
.rc-carriage--binzhou .rc-carriage__belt--yellow {
    position: absolute;
    top: var(--rc-belt2-top);
    left: 0; right: 0;
    height: var(--rc-belt2-h);
    background: var(--rc-belt-bg);
    z-index: 3;
    box-shadow: 0 3px 12px rgba(255, 240, 120, 0.5);
}

/* ============================================================
   车型 3：哈大 25K（蓝白配色，圆角更大）
   车窗 200×190（full）/ 140×133（lintel）
   ============================================================ */
.rc-carriage--hada {
    --rc-body-bg: linear-gradient(to bottom,
        rgba(245,245,245,0.95) 0%, rgba(235,235,235,0.9) 30px,
        rgba(225,225,225,0.85) 50px, rgba(215,215,215,0.8) 270px,
        rgba(205,205,205,0.75) 100%);
    --rc-win-bg: rgba(0,15,30,0.85);
    --rc-win-border-c: rgba(220,225,230,0.6);
    --rc-board-img: url('/images/s3.jpg');
    --rc-belt-bg: linear-gradient(to right,
        rgba(215,0,0,0.95), rgba(235,40,40,1), rgba(215,0,0,0.95));

    --rc-win-w: 140px;
    --rc-win-h: 133px;
    --rc-win-radius: 20px;
}
.rc-carriage--full.rc-carriage--hada {
    --rc-win-w: 200px;
    --rc-win-h: 190px;
    --rc-win-radius: 30px;
}

/* 哈大蓝车身（窗后铺满） */
.rc-carriage--hada::before {
    content: "";
    position: absolute;
    top: var(--rc-belt1-top);
    left: 0; right: 0;
    height: calc(var(--rc-belt2-top) - var(--rc-belt1-top));
    background: linear-gradient(135deg,
        rgba(0,45,90,0.85) 0%, rgba(20,65,110,0.8) 25%,
        rgba(40,85,130,0.75) 50%,
        rgba(20,65,110,0.8) 75%, rgba(0,45,90,0.85) 100%);
    z-index: 1;
}
.rc-carriage--hada .rc-carriage__belt--red {
    position: absolute;
    top: var(--rc-belt2-top);
    left: 0; right: 0;
    height: var(--rc-belt2-h);
    background: var(--rc-belt-bg);
    z-index: 3;
    box-shadow: 0 3px 12px rgba(215, 0, 0, 0.5);
}

/* ============ 车窗容器 ============ */
.rc-carriage__windows {
    position: absolute;
    top: var(--rc-win-top);
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 40px;
    justify-content: center;
    align-items: center;
    z-index: 5;
}
.rc-carriage--full .rc-carriage__windows { gap: 60px; }

/* ============ 车窗 ============ */
.rc-carriage__window {
    width: var(--rc-win-w);
    height: var(--rc-win-h);
    background: var(--rc-win-bg);
    background-size: cover;
    background-position: center;
    border-radius: var(--rc-win-radius);
    border: 3px solid var(--rc-win-border-c);
    box-shadow: inset 0 0 18px rgba(0, 0, 0, 0.9), 0 5px 18px rgba(0, 0, 0, 0.4);
    position: relative;
    box-sizing: border-box;
    overflow: hidden;
}

/* 空窗中横条（仅无 --link 时显示） */
.rc-carriage__window:not(.rc-carriage__window--link)::before {
    content: "";
    position: absolute;
    top: 50%; left: 0;
    width: 100%; height: 3px;
    background: linear-gradient(to right,
        rgba(180,180,180,0.9), rgba(200,200,200,1), rgba(180,180,180,0.9));
    transform: translateY(-50%);
}

/* 图片窗（可点击） */
.rc-carriage__window--link {
    display: block;
    cursor: pointer;
    transition: transform 0.4s ease, filter 0.4s ease;
    filter: brightness(0.75) saturate(0.85);
    text-decoration: none;
}
.rc-carriage__window--link:hover {
    transform: scale(1.06);
    filter: brightness(1) saturate(1);
    z-index: 10;
}

/* ============ 方向牌 ============ */
.rc-carriage__board {
    position: absolute;
    width: var(--rc-board-w);
    height: var(--rc-board-h);
    border-radius: 6px;
    z-index: 4;
    left: 50%;
    transform: translateX(-50%);
    top: var(--rc-board-top);
    background-image: var(--rc-board-img);
    background-size: cover;
    background-position: center;
    border: 2px solid rgba(255, 255, 255, 0.6);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.5);
}

/* ============ 简介文字（仅 --full 版显示） ============ */
.rc-carriage__intro {
    display: none;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: var(--rc-intro-top);
    width: 80%;
    max-width: 700px;
    color: #000;
    text-align: center;
    font-size: 0.95rem;
    line-height: 1.4;
    z-index: 4;
    padding: 0 15px;
    text-shadow: 0 1px 3px rgba(255, 255, 255, 0.7);
    font-weight: 600;
}
.rc-carriage--full .rc-carriage__intro { display: block; }

/* ============================================================
   响应式策略（v1.3）
   ─ 手机（< 768px）：隐藏车厢
   ─ 平板 / 窄桌面（768 ~ 959px）：车厢显示，由 JS 等比缩放到容器宽
   ─ 桌面（≥ 960px）：车厢原始尺寸 900px
   ============================================================ */

/* 手机：隐藏 */
@media (max-width: 767px) {
    .rc-carriage-wrap {
        display: none !important;
    }
}

/* 平板 / 窄桌面：JS 未就绪前兜底防止横向溢出 */
@media (min-width: 768px) and (max-width: 959px) {
    .rc-carriage-wrap {
        padding: 12px;
        margin: 24px 0 32px;
        overflow-x: hidden;
    }
}