/* ============================================
   气象卫星遥感子页面样式表
   迪卓依思 · 地理志 (djoyce.com)
   对应文件: meteorology/satellite-remote-sensing.html
   ============================================ */

/* --------------------------------------------
   1. Hero 首屏区域覆盖
   -------------------------------------------- */
.satellite-hero {
    background: linear-gradient(160deg, #0a0f1e 0%, #0d1f3a 40%, #0a1628 100%);
}

.satellite-hero .column-hero-content h1 .highlight {
    background: linear-gradient(135deg, #4FC3F7, #81D4FA);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* --------------------------------------------
   2. 轨道类型对比区域
   -------------------------------------------- */
.orbit-types-section {
    background: var(--color-bg);
    padding: var(--space-4xl) 0;
}

.orbit-comparison-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-xl);
    margin-bottom: var(--space-3xl);
}

.orbit-card {
    background: var(--color-card);
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-xl);
    overflow: hidden;
    transition: var(--transition-base);
}

.orbit-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
}

.orbit-card-header {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    padding: var(--space-xl);
    background: linear-gradient(135deg, rgba(2,119,189,0.05), rgba(79,195,247,0.05));
    border-bottom: 1px solid var(--color-border-light);
}

.orbit-icon {
    width: 56px;
    height: 56px;
    border-radius: var(--radius-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.75rem;
    background: linear-gradient(135deg, #E3F2FD, #BBDEFB);
    flex-shrink: 0;
}

.orbit-card-header h3 {
    font-family: var(--font-heading);
    font-size: 1.125rem;
    margin-bottom: 4px;
    color: var(--color-text);
}

.orbit-altitude {
    font-size: 0.8125rem;
    color: var(--color-text-muted);
}

.orbit-card-body {
    padding: var(--space-xl);
}

.orbit-card-body > p {
    color: var(--color-text-secondary);
    font-size: 0.9375rem;
    line-height: 1.8;
    margin-bottom: var(--space-lg);
}

.orbit-specs {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
}

.spec-row {
    display: flex;
    gap: var(--space-sm);
    font-size: 0.875rem;
    line-height: 1.6;
}

.spec-label {
    color: var(--color-text-muted);
    flex-shrink: 0;
    min-width: 80px;
}

.spec-value {
    color: var(--color-text);
    font-weight: 500;
}

/* 轨道可视化容器 */
.orbit-visual-container {
    background: var(--color-card);
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-xl);
    padding: var(--space-xl);
    overflow: hidden;
}

.orbit-visual-title {
    font-family: var(--font-heading);
    font-size: 1.125rem;
    margin-bottom: var(--space-md);
    color: var(--color-text);
    text-align: center;
}

.orbit-canvas-wrap {
    width: 100%;
    aspect-ratio: 16 / 9;
    background: linear-gradient(180deg, #0a1628 0%, #0d1f3a 60%, #0a1628 100%);
    border-radius: var(--radius-lg);
    overflow: hidden;
    position: relative;
}

.orbit-canvas-wrap canvas {
    width: 100%;
    height: 100%;
    display: block;
}

/* --------------------------------------------
   3. 风云卫星家族时间轴
   -------------------------------------------- */
.fy-section {
    background: var(--color-card);
    padding: var(--space-4xl) 0;
}

.fy-timeline-wrapper {
    position: relative;
    max-width: 1000px;
    margin: 0 auto;
}

.fy-timeline-line {
    position: absolute;
    left: 50%;
    top: 0;
    bottom: 0;
    width: 2px;
    background: linear-gradient(180deg, var(--color-secondary), var(--color-secondary-light));
    transform: translateX(-50%);
}

.fy-timeline-item {
    display: flex;
    align-items: flex-start;
    gap: var(--space-2xl);
    margin-bottom: var(--space-2xl);
    position: relative;
}

.fy-timeline-item:nth-child(even) {
    flex-direction: row-reverse;
}

.fy-timeline-item:last-child {
    margin-bottom: 0;
}

.fy-timeline-dot {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-heading);
    font-size: 0.875rem;
    font-weight: 700;
    flex-shrink: 0;
    box-shadow: var(--shadow-md);
    z-index: 2;
}

.fy-timeline-dot.fy1 { background: linear-gradient(135deg, #4CAF50, #2E7D32); }
.fy-timeline-dot.fy2 { background: linear-gradient(135deg, #FF9800, #F57C00); }
.fy-timeline-dot.fy3 { background: linear-gradient(135deg, #2196F3, #1565C0); }
.fy-timeline-dot.fy4 { background: linear-gradient(135deg, #9C27B0, #7B1FA2); }

.fy-timeline-content {
    flex: 1;
    background: var(--color-bg);
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-lg);
    padding: var(--space-lg);
    max-width: calc(50% - var(--space-xl));
}

.fy-era {
    font-size: 0.8125rem;
    color: var(--color-secondary);
    font-weight: 600;
    margin-bottom: var(--space-xs);
}

.fy-timeline-content h4 {
    font-family: var(--font-heading);
    margin-bottom: var(--space-sm);
    color: var(--color-text);
    font-size: 1.0625rem;
}

.fy-timeline-content p {
    font-size: 0.9375rem;
    color: var(--color-text-secondary);
    line-height: 1.7;
    margin-bottom: var(--space-sm);
}

.fy-timeline-content p:last-child {
    margin-bottom: 0;
}

.fy-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: var(--space-sm);
}

.fy-tags span {
    font-size: 0.75rem;
    padding: 3px 10px;
    background: var(--color-sky);
    color: var(--color-secondary-dark);
    border-radius: var(--radius-full);
}

/* 风云轨道可视化 */
.fy-orbit-visual {
    margin-top: var(--space-3xl);
    background: var(--color-bg);
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-xl);
    padding: var(--space-xl);
    overflow: hidden;
}

.fy-orbit-visual h3 {
    font-family: var(--font-heading);
    font-size: 1.125rem;
    margin-bottom: var(--space-md);
    color: var(--color-text);
    text-align: center;
}

.fy-orbit-canvas-wrap {
    width: 100%;
    aspect-ratio: 16 / 8;
    background: linear-gradient(180deg, #0a1628 0%, #0d1f3a 60%, #0a1628 100%);
    border-radius: var(--radius-lg);
    overflow: hidden;
    position: relative;
}

.fy-orbit-canvas-wrap canvas {
    width: 100%;
    height: 100%;
    display: block;
}

/* --------------------------------------------
   4. 国际气象卫星卡片
   -------------------------------------------- */
.international-section {
    background: var(--color-bg);
    padding: var(--space-4xl) 0;
}

.intl-sat-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-xl);
}

.intl-sat-card {
    background: var(--color-card);
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-xl);
    padding: var(--space-xl);
    transition: var(--transition-base);
    position: relative;
    overflow: hidden;
}

.intl-sat-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--color-secondary), var(--color-secondary-light));
    opacity: 0;
    transition: var(--transition-base);
}

.intl-sat-card:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow-lg);
    border-color: transparent;
}

.intl-sat-card:hover::before {
    opacity: 1;
}

.sat-flag {
    font-size: 2rem;
    margin-bottom: var(--space-sm);
}

.intl-sat-card h4 {
    font-family: var(--font-heading);
    font-size: 1.125rem;
    margin-bottom: 4px;
    color: var(--color-text);
}

.sat-operator {
    font-size: 0.8125rem;
    color: var(--color-secondary);
    font-weight: 500;
    margin-bottom: var(--space-sm);
}

.intl-sat-card > p {
    font-size: 0.875rem;
    color: var(--color-text-secondary);
    line-height: 1.7;
    margin-bottom: var(--space-md);
}

.sat-specs-mini {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.sat-specs-mini span {
    font-size: 0.75rem;
    padding: 3px 10px;
    background: var(--color-sky);
    color: var(--color-secondary-dark);
    border-radius: var(--radius-full);
}

/* --------------------------------------------
   5. 载荷与探测原理
   -------------------------------------------- */
.payload-section {
    background: var(--color-card);
    padding: var(--space-4xl) 0;
}

.payload-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-xl);
}

.payload-card {
    background: var(--color-bg);
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-xl);
    padding: var(--space-xl);
    transition: var(--transition-base);
}

.payload-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-md);
    border-color: var(--color-secondary-light);
}

.payload-icon {
    width: 56px;
    height: 56px;
    border-radius: var(--radius-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.75rem;
    margin-bottom: var(--space-md);
}

.payload-card h4 {
    font-family: var(--font-heading);
    font-size: 1.0625rem;
    margin-bottom: 4px;
    color: var(--color-text);
}

.payload-name {
    font-size: 0.8125rem;
    color: var(--color-secondary);
    font-weight: 500;
    margin-bottom: var(--space-sm);
}

.payload-card > p {
    font-size: 0.875rem;
    color: var(--color-text-secondary);
    line-height: 1.7;
    margin-bottom: var(--space-md);
}

.payload-specs {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.payload-specs span {
    font-size: 0.75rem;
    padding: 3px 10px;
    background: var(--color-sky);
    color: var(--color-secondary-dark);
    border-radius: var(--radius-full);
}

/* 光谱可视化 */
.spectrum-visual {
    margin-top: var(--space-3xl);
    background: var(--color-bg);
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-xl);
    padding: var(--space-xl);
    overflow: hidden;
}

.spectrum-visual h3 {
    font-family: var(--font-heading);
    font-size: 1.125rem;
    margin-bottom: var(--space-md);
    color: var(--color-text);
    text-align: center;
}

.spectrum-canvas-wrap {
    width: 100%;
    aspect-ratio: 16 / 7;
    background: #FAFAFA;
    border-radius: var(--radius-lg);
    overflow: hidden;
    position: relative;
}

.spectrum-canvas-wrap canvas {
    width: 100%;
    height: 100%;
    display: block;
}

/* --------------------------------------------
   6. 数据产品与应用
   -------------------------------------------- */
.data-products-section {
    background: var(--color-bg);
    padding: var(--space-4xl) 0;
}

.products-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-xl);
}

.product-card {
    background: var(--color-card);
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-xl);
    overflow: hidden;
    transition: var(--transition-base);
}

.product-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-md);
}

.product-visual {
    width: 100%;
    aspect-ratio: 16 / 10;
    background: linear-gradient(135deg, var(--color-sky), var(--color-border-light));
}

.product-visual svg {
    width: 100%;
    height: 100%;
}

.product-card h4 {
    font-family: var(--font-heading);
    font-size: 1.0625rem;
    padding: var(--space-md) var(--space-lg) 0;
    color: var(--color-text);
}

.product-card > p {
    font-size: 0.875rem;
    color: var(--color-text-secondary);
    line-height: 1.7;
    padding: var(--space-sm) var(--space-lg) var(--space-lg);
    margin-bottom: 0;
}

/* --------------------------------------------
   7. 数据亮点区域
   -------------------------------------------- */
.satellite-data-spotlight {
    background: var(--color-card);
    padding: var(--space-4xl) 0;
}

.satellite-data-spotlight .data-spotlight-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-xl);
}

.satellite-data-spotlight .data-card {
    background: var(--color-bg);
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-xl);
    padding: var(--space-xl);
    overflow: hidden;
    transition: var(--transition-base);
}

.satellite-data-spotlight .data-card:hover {
    box-shadow: var(--shadow-lg);
    transform: translateY(-2px);
}

.satellite-data-spotlight .data-card.full-width {
    grid-column: 1 / -1;
}

.satellite-data-spotlight .data-card h3 {
    font-family: var(--font-heading);
    font-size: 1.125rem;
    margin-bottom: var(--space-md);
    color: var(--color-text);
    display: flex;
    align-items: center;
    gap: var(--space-sm);
}

.global-sat-map-container {
    width: 100%;
    aspect-ratio: 16 / 8.4;
    background: linear-gradient(180deg, #E8F5E9 0%, #E3F2FD 100%);
    border-radius: var(--radius-lg);
    overflow: hidden;
    position: relative;
}

.channels-chart-wrap,
.imaging-time-chart-wrap {
    width: 100%;
    aspect-ratio: 16 / 9;
    background: #FAFAFA;
    border-radius: var(--radius-lg);
    overflow: hidden;
    position: relative;
}

.channels-chart-wrap canvas,
.imaging-time-chart-wrap canvas {
    width: 100%;
    height: 100%;
    display: block;
}

/* --------------------------------------------
   8. 响应式适配
   -------------------------------------------- */
@media (max-width: 1023px) {
    .orbit-comparison-grid {
        grid-template-columns: 1fr;
    }

    .fy-timeline-line {
        left: 28px;
    }

    .fy-timeline-item,
    .fy-timeline-item:nth-child(even) {
        flex-direction: row;
    }

    .fy-timeline-content {
        max-width: none;
        margin-left: var(--space-lg);
    }

    .intl-sat-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .payload-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .products-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .satellite-data-spotlight .data-spotlight-grid {
        grid-template-columns: 1fr;
    }

    .orbit-canvas-wrap,
    .fy-orbit-canvas-wrap,
    .spectrum-canvas-wrap,
    .global-sat-map-container,
    .channels-chart-wrap,
    .imaging-time-chart-wrap {
        aspect-ratio: 16 / 10;
    }
}

@media (max-width: 767px) {
    .intl-sat-grid {
        grid-template-columns: 1fr;
    }

    .payload-grid {
        grid-template-columns: 1fr;
    }

    .products-grid {
        grid-template-columns: 1fr;
    }

    .fy-timeline-line {
        left: 24px;
    }

    .fy-timeline-dot {
        width: 48px;
        height: 48px;
        font-size: 0.75rem;
    }

    .orbit-card-header {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--space-sm);
    }

    .spec-row {
        flex-direction: column;
        gap: 2px;
    }

    .spec-label {
        min-width: auto;
    }

    .orbit-canvas-wrap,
    .fy-orbit-canvas-wrap,
    .spectrum-canvas-wrap,
    .global-sat-map-container,
    .channels-chart-wrap,
    .imaging-time-chart-wrap {
        aspect-ratio: 4 / 3;
    }
}