/* ============================================
   food-geo.css — 饮食地理栏目专用样式
   ============================================ */

/* ---- Hero Customization ---- */
.food-hero {
    background: linear-gradient(160deg, #3E2723 0%, #5D4037 30%, #BF360C 60%, #3E2723 100%);
}

.food-hero .column-hero-badge .dot {
    background: #FF6F00;
}

/* ---- Core Topics ---- */
#core-topics .subcategory-card::before {
    background: linear-gradient(90deg, #E65100, #FF9800);
}

#core-topics .subcategory-icon {
    background: linear-gradient(135deg, #FFF3E0, #FFE0B2) !important;
    color: #E65100 !important;
}

/* Card accent colors */
.subcategory-card:nth-child(1)::before { background: linear-gradient(90deg, #C62828, #EF5350) !important; }
.subcategory-card:nth-child(2)::before { background: linear-gradient(90deg, #2E7D32, #66BB6A) !important; }
.subcategory-card:nth-child(3)::before { background: linear-gradient(90deg, #E65100, #FF9800) !important; }
.subcategory-card:nth-child(4)::before { background: linear-gradient(90deg, #F57F17, #FFCA28) !important; }
.subcategory-card:nth-child(5)::before { background: linear-gradient(90deg, #7B1FA2, #AB47BC) !important; }
.subcategory-card:nth-child(6)::before { background: linear-gradient(90deg, #00796B, #26A69A) !important; }
.subcategory-card:nth-child(7)::before { background: linear-gradient(90deg, #1565C0, #42A5F5) !important; }
.subcategory-card:nth-child(8)::before { background: linear-gradient(90deg, #C2185B, #EC407A) !important; }

/* ---- FIX: Canvas sizing in data cards ---- */
.data-chart-container {
    position: relative;
    width: 100%;
    min-height: 300px;
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-lg) var(--space-xl);
    overflow: hidden;
}

.data-chart-container canvas {
    display: block;
    width: 100% !important;
    height: 100% !important;
    max-width: 100%;
}

.data-card-wide .data-chart-container {
    min-height: 340px;
}

/* ---- Responsive ---- */
@media (min-width: 1024px) and (max-width: 1439px) {
    .data-card-wide { grid-column: span 2; }
}

@media (max-width: 767px) {
    .data-chart-container { min-height: 260px !important; padding: var(--space-md); }
    .data-card-wide { grid-column: span 1; }
}

@media (max-width: 479px) {
    .data-chart-container { min-height: 240px !important; padding: var(--space-sm); }
    .data-card-header { padding: var(--space-md); }
    .data-insight { padding: var(--space-md); }
}