/* Map & Segments */
/* ===== MAP SECTION ===== */
.map-section {
    background: var(--navy-deep);
    text-align: center;
}

.map-stats {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: var(--map-stats-gap);
    margin-top: var(--space-xl);
}

.map-stat {
    text-align: center;
}

.map-stat-value {
    font-size: var(--map-stat-value-size);
    font-weight: 800;
    color: var(--teal);
    line-height: 1;
}

.map-stat-label {
    font-size: var(--map-stat-label-size);
    color: var(--muted);
    margin-top: var(--space-xs);
}

/* ===== SEGMENTS ===== */
.segments-section {
    background: var(--navy);
}

.segments-grid {
    display: grid;
    grid-template-columns: repeat(var(--segments-grid-columns), 1fr);
    gap: var(--space-sm);
}

.segment {
    padding: var(--segment-card-pad-y) var(--segment-card-pad-x);
    text-align: center;
    background: var(--segment-card-bg);
    border: 1px solid var(--card-border);
    border-radius: var(--radius-lg);
    transition: background var(--transition-base),
                border-color var(--transition-base),
                transform var(--transition-base);
}

.segment:hover {
    border-color: var(--teal);
    background: var(--segment-card-bg-hover);
    transform: translateY(var(--segment-card-lift));
}

.segment-icon {
    width: var(--icon-size-circle);
    height: var(--icon-size-circle);
    margin: 0 auto var(--space-icon-gap);
    color: var(--teal);
}

.segment-icon svg {
    width: var(--icon-size-circle-glyph);
    height: var(--icon-size-circle-glyph);
    stroke: currentColor;
    stroke-width: 1.5;
    fill: none;
}

.segment-name {
    font-size: var(--segment-name-size);
    font-weight: 600;
    letter-spacing: var(--segment-name-tracking);
    text-transform: uppercase;
    color: var(--text);
}

@media (max-width: 1024px) {
    .segments-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .map-stats {
        gap: var(--map-stats-gap-md);
    }
}

@media (max-width: 768px) {
    .segments-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .map-stats {
        flex-direction: column;
        gap: var(--map-stats-gap-sm);
    }
}

@media (max-width: 480px) {
    .segments-grid {
        grid-template-columns: 1fr;
    }

    .map-stat-value {
        font-size: var(--map-stat-value-size-sm);
    }
}