/* 页面基础居中 */
/* 行程卡片容器 */
.flight-card {
    /* background: #ffffff; */
    padding: 40px 10px;
    /* border-radius: 16px; */
    /* box-shadow: 0 10px 25px rgba(0, 0, 0, 0.05); */
    /* max-width: 950px; */
    width: 100%;
    box-sizing: border-box;
}

/* 【桌面端】核心：单行横向布局 */
.route-row {
    display: flex;
    align-items: center;
    white-space: nowrap; 
}

/* 机场信息区 */
.airport-node {
    text-align: center;
    flex-shrink: 0; 
}

/* 突出显示的全称样式 */
.airport-name {
    font-size: 15px;       
    font-weight: 600;      
    color: #0f172a;        
    line-height: 1.3;
}

/* 弱化的简称样式 */
.airport-code {
    font-size: 12px;       
    font-weight: 500;
    color: #94a3b8;        
    margin-top: 4px;
    letter-spacing: 1px;   
}

/* 桌面端航段区域 */
.segment-container {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0 10px;
    min-width: 80px; 
}

/* 桌面端航班编号样式 */
.flight-number {
    font-size: 12px;
    font-weight: 600;
    color: #3b82f6;
    background: #eff6ff;
    padding: 2px 8px;
    border-radius: 10px;
    margin-bottom: 8px;
}

/* 桌面端静态虚线样式 */
.flight-route-line {
    width: 100%;
    height: 0;
    border-top: 2px dashed #cbd5e1;
}


/* ==========================================
    【移动端】响应式适配 (屏幕宽度 <= 768px)
    ========================================== */
@media (max-width: 768px) {
    .flight-card {
        padding: 30px 20px; 
    }

    /* 将横向 Flex 改为纵向排列，并全局居中 */
    .route-row {
        flex-direction: column;
        align-items: center;      
        white-space: normal;     
        gap: 0;                  
    }

    /* 机场节点居中对齐 */
    .airport-node {
        text-align: center;       
    }

    /* 【核心重构】：航段容器变为 5行 x 2列 的网格布局 */
    .segment-container {
        display: grid;
        grid-template-columns: 1fr 1fr;     /* 左右等分两列 */
        grid-template-rows: repeat(5, 1fr); /* 上下等分五行 */
        width: 100%;
        height: 120px;                      /* 设定固定总高度，保证连线有足够空间 */
        padding: 0;
    }

    /* 隐藏桌面端的虚线 div，避免干扰网格 */
    .flight-route-line {
        display: none !important;
    }

    /* 航班号调整位置，放入网格中 */
    .flight-number {
        margin: 0;
        /* 定位到 第3行、第2列 */
        grid-column: 2 / 3;
        grid-row: 3 / 4;
        
        /* 【修复2】：水平靠左对齐，垂直保持居中 */
        justify-self: start;  
        align-self: center;
    }

    /* 【终极保底方案】：使用伪元素在左侧绘制垂直实线 */
    .segment-container::before {
        content: '';
        /* 【修复1】：占据第1至最后1行（即全部5行），第1列的区域 */
        grid-column: 1 / 2;
        grid-row: 1 / -1;      /* 使用 -1 代表网格的最后一条线 */
        
        /* 利用右边框作为垂直连接线 */
        border-right: 2px solid #cbd5e1; 
        
        /* 让线条紧贴右侧边缘，与右列无缝衔接 */
        justify-self: end; 
        align-self: stretch;
    }
}