/* ===================================
   Marine & Coastal Page Styles
   Full Responsive Design
   =================================== */

/* Marine Stats Grid */
.marine-stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1.5rem;
    margin: 2rem 0;
}

.marine-stat-card {
    background: var(--white);
    padding: 1.5rem;
    border-radius: 12px;
    box-shadow: var(--shadow-medium);
    text-align: center;
    transition: var(--transition-fast);
}

.marine-stat-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-large);
}

.marine-stat-card.blue { border-left: 4px solid #2196F3; }
.marine-stat-card.teal { border-left: 4px solid #00BCD4; }
.marine-stat-card.orange { border-left: 4px solid #FF9800; }
.marine-stat-card.red { border-left: 4px solid #F44336; }

.marine-stat-card i {
    font-size: 2.5rem;
    margin-bottom: 0.5rem;
}

.marine-stat-card.blue i { color: #2196F3; }
.marine-stat-card.teal i { color: #00BCD4; }
.marine-stat-card.orange i { color: #FF9800; }
.marine-stat-card.red i { color: #F44336; }

.marine-stat-card h3 {
    font-size: 2rem;
    margin: 0.5rem 0;
    color: var(--text-dark);
}

.marine-stat-card p {
    color: var(--text-medium);
    font-size: 0.95rem;
    margin: 0;
}

/* Charts */
.chart-container-large,
.chart-container-medium {
    background: var(--white);
    padding: 2rem;
    border-radius: 12px;
    box-shadow: var(--shadow-medium);
    margin: 2rem 0;
}

.chart-container-large {
    height: 450px;
}

.chart-container-medium {
    height: 350px;
}

/* Fisheries Breakdown */
.fisheries-breakdown {
    margin: 3rem 0;
}

.breakdown-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 2rem;
    margin-top: 2rem;
}

.breakdown-card {
    background: var(--white);
    padding: 2rem;
    border-radius: 12px;
    box-shadow: var(--shadow-medium);
    transition: var(--transition-fast);
}

.breakdown-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-large);
}

.breakdown-icon {
    width: 70px;
    height: 70px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1.5rem;
    font-size: 2rem;
    color: var(--white);
}

.breakdown-icon.artisanal { background: linear-gradient(135deg, #2196F3, #00BCD4); }
.breakdown-icon.industrial { background: linear-gradient(135deg, #FF9800, #F57C00); }
.breakdown-icon.aqua { background: linear-gradient(135deg, #4CAF50, #66BB6A); }

.breakdown-stat {
    text-align: center;
    margin: 1.5rem 0;
}

.breakdown-stat strong {
    display: block;
    font-size: 1.75rem;
    color: var(--text-dark);
    margin-bottom: 0.5rem;
}

.breakdown-stat span {
    color: var(--text-medium);
    font-size: 0.95rem;
}

.breakdown-details {
    list-style: none;
    padding: 0;
    margin: 1.5rem 0;
}

.breakdown-details li {
    padding: 0.5rem 0;
    color: var(--text-medium);
    border-bottom: 1px solid var(--medium-gray);
}

.breakdown-details li:last-child {
    border-bottom: none;
}

.trend-note {
    text-align: center;
    padding: 0.75rem;
    border-radius: 8px;
    font-weight: 600;
    margin-top: 1rem;
}

.trend-note.decline {
    background: rgba(244, 67, 54, 0.1);
    color: #D32F2F;
}

.trend-note.growth {
    background: rgba(76, 175, 80, 0.1);
    color: #388E3C;
}

/* Species Section */
.species-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 1.5rem;
    margin-top: 2rem;
}

.species-card {
    background: var(--white);
    padding: 1.5rem;
    border-radius: 12px;
    box-shadow: var(--shadow-medium);
    border-left: 4px solid var(--medium-gray);
}

.species-card.overexploited { border-left-color: #F44336; }
.species-card.fully-exploited { border-left-color: #FF9800; }
.species-card.moderate { border-left-color: #4CAF50; }

.species-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
}

.status-badge {
    padding: 0.25rem 0.75rem;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
}

.status-badge.critical {
    background: rgba(244, 67, 54, 0.1);
    color: #D32F2F;
}

.status-badge.warning {
    background: rgba(255, 152, 0, 0.1);
    color: #F57C00;
}

.status-badge.moderate {
    background: rgba(76, 175, 80, 0.1);
    color: #388E3C;
}

.scientific-name {
    font-style: italic;
    color: var(--text-light);
    font-size: 0.9rem;
    margin-bottom: 1rem;
}

.species-stat {
    margin: 1rem 0;
}

.species-stat strong {
    display: block;
    font-size: 1.3rem;
    color: var(--text-dark);
    margin-bottom: 0.25rem;
}

.species-stat span {
    color: var(--text-medium);
    font-size: 0.9rem;
}

.species-note {
    color: var(--text-medium);
    font-size: 0.95rem;
    line-height: 1.6;
}

/* Pollution Section */
.pollution-overview {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 2rem;
    margin: 2rem 0;
}

.pollution-stat-large {
    text-align: center;
    padding: 2rem;
    background: var(--white);
    border-radius: 12px;
    box-shadow: var(--shadow-medium);
}

.pollution-stat-large strong {
    display: block;
    font-size: 2.5rem;
    color: #F44336;
    margin-bottom: 0.5rem;
}

.pollution-stat-large p {
    color: var(--text-medium);
    font-size: 0.95rem;
}

.sources-chart {
    background: var(--white);
    padding: 2rem;
    border-radius: 12px;
    box-shadow: var(--shadow-medium);
    margin-top: 2rem;
}

.source-bar {
    background: linear-gradient(90deg, #FF9800, #F57C00);
    padding: 1rem;
    margin: 0.75rem 0;
    border-radius: 8px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: var(--white);
    font-weight: 600;
    transition: var(--transition-fast);
}

.source-bar:hover {
    transform: translateX(10px);
}

/* Hotspots Grid */
.hotspots-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1.5rem;
    margin-top: 2rem;
}

.hotspot-card {
    background: var(--white);
    padding: 1.5rem;
    border-radius: 12px;
    box-shadow: var(--shadow-medium);
    border-left: 4px solid var(--medium-gray);
}

.hotspot-card.critical { border-left-color: #D32F2F; }
.hotspot-card.severe { border-left-color: #F44336; }
.hotspot-card.high { border-left-color: #FF9800; }

.hotspot-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 1rem;
    gap: 1rem;
}

.pollution-badge {
    padding: 0.25rem 0.75rem;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    white-space: nowrap;
}

.pollution-badge.critical {
    background: rgba(211, 47, 47, 0.1);
    color: #D32F2F;
}

.pollution-badge.severe {
    background: rgba(244, 67, 54, 0.1);
    color: #F44336;
}

.pollution-badge.high {
    background: rgba(255, 152, 0, 0.1);
    color: #F57C00;
}

.hotspot-stat {
    margin: 1rem 0;
}

.hotspot-stat strong {
    display: block;
    font-size: 1.5rem;
    color: var(--text-dark);
    margin-bottom: 0.25rem;
}

.hotspot-stat span {
    color: var(--text-medium);
    font-size: 0.9rem;
}

.hotspot-issues,
.health-impact {
    color: var(--text-medium);
    font-size: 0.9rem;
    line-height: 1.6;
    margin: 0.75rem 0;
}

/* Contamination Grid */
.contamination-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 2rem;
    margin-top: 2rem;
}

.contamination-card {
    background: var(--white);
    padding: 2rem;
    border-radius: 12px;
    box-shadow: var(--shadow-medium);
    text-align: center;
}

.contamination-card i {
    font-size: 3rem;
    color: #F44336;
    margin-bottom: 1rem;
}

.contam-stat {
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--text-dark);
    margin: 1rem 0;
}

.contamination-card ul {
    list-style: none;
    padding: 0;
    margin: 1rem 0;
    text-align: left;
}

.contamination-card li {
    padding: 0.5rem 0;
    color: var(--text-medium);
    border-bottom: 1px solid var(--medium-gray);
}

.contamination-card li:last-child {
    border-bottom: none;
}

.health-warning {
    background: rgba(244, 67, 54, 0.1);
    padding: 1rem;
    border-radius: 8px;
    color: #D32F2F;
    font-weight: 600;
    margin-top: 1rem;
}

/* Impact Cards */
.temperature-impacts {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1.5rem;
    margin-top: 2rem;
}

.impact-card {
    background: var(--white);
    padding: 1.5rem;
    border-radius: 12px;
    box-shadow: var(--shadow-medium);
    text-align: center;
}

.impact-card i {
    font-size: 2.5rem;
    color: #FF9800;
    margin-bottom: 1rem;
}

/* Economic Hardship Grid */
.economic-hardship-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 1.5rem;
    margin-top: 2rem;
}

.hardship-card {
    background: var(--white);
    padding: 2rem;
    border-radius: 12px;
    box-shadow: var(--shadow-medium);
    text-align: center;
}

.hardship-card i {
    font-size: 2.5rem;
    color: #F44336;
    margin-bottom: 1rem;
}

.hardship-stat {
    font-size: 2rem;
    font-weight: 600;
    color: var(--text-dark);
    margin: 1rem 0;
}

.comparison {
    background: rgba(244, 67, 54, 0.1);
    padding: 0.5rem;
    border-radius: 6px;
    color: #D32F2F;
    font-size: 0.9rem;
    margin-top: 0.5rem;
}

/* Operational Challenges */
.operational-challenges {
    background: var(--white);
    padding: 2rem;
    border-radius: 12px;
    box-shadow: var(--shadow-medium);
    margin-top: 2rem;
}

.operational-challenges ul {
    list-style: none;
    padding: 0;
}

.operational-challenges li {
    padding: 1rem;
    margin: 0.75rem 0;
    background: var(--light-gray);
    border-radius: 8px;
    display: flex;
    align-items: center;
    gap: 1rem;
}

.operational-challenges li i {
    color: #FF9800;
    font-size: 1.5rem;
}

/* Jobs Grid */
.jobs-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1.5rem;
    margin-top: 2rem;
}

.job-card {
    background: var(--white);
    padding: 1.5rem;
    border-radius: 12px;
    box-shadow: var(--shadow-medium);
    text-align: center;
}

.job-count {
    font-size: 1.75rem;
    font-weight: 600;
    color: #2196F3;
    margin: 1rem 0;
}

.job-note {
    color: var(--text-medium);
    font-size: 0.9rem;
}

/* Data Sources Grid */
.sources-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 2rem;
    margin-top: 2rem;
}

.source-card {
    background: var(--white);
    padding: 2rem;
    border-radius: 12px;
    box-shadow: var(--shadow-medium);
    text-align: center;
    transition: var(--transition-fast);
}

.source-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-large);
}

.source-card i {
    font-size: 3rem;
    color: #2196F3;
    margin-bottom: 1rem;
}

/* Section Intro */
.section-intro {
    font-size: 1.1rem;
    color: var(--text-medium);
    text-align: center;
    max-width: 900px;
    margin: 0 auto 2rem;
    line-height: 1.8;
}

/* ===================================
   Tablet Responsive (768px - 1024px)
   =================================== */
@media (max-width: 1024px) {
    .marine-stats-grid,
    .breakdown-grid,
    .species-grid,
    .hotspots-grid,
    .contamination-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .chart-container-large {
        height: 350px;
        padding: 1.5rem;
    }

    .chart-container-medium {
        height: 300px;
        padding: 1.5rem;
    }
}

/* ===================================
   Mobile Responsive (Below 768px)
   =================================== */
@media (max-width: 768px) {
    .marine-stats-grid,
    .breakdown-grid,
    .species-grid,
    .pollution-overview,
    .hotspots-grid,
    .contamination-grid,
    .temperature-impacts,
    .economic-hardship-grid,
    .jobs-grid,
    .sources-grid {
        grid-template-columns: 1fr;
        gap: 1rem;
    }

    .marine-stat-card,
    .breakdown-card,
    .species-card,
    .pollution-stat-large,
    .hotspot-card,
    .contamination-card,
    .impact-card,
    .hardship-card,
    .job-card,
    .source-card {
        padding: 1.25rem;
    }

    .marine-stat-card h3,
    .pollution-stat-large strong,
    .hardship-stat {
        font-size: 1.75rem;
    }

    .marine-stat-card i,
    .contamination-card i,
    .impact-card i,
    .hardship-card i,
    .source-card i {
        font-size: 2rem;
    }

    .chart-container-large,
    .chart-container-medium {
        height: 300px;
        padding: 1rem;
    }

    .breakdown-icon {
        width: 60px;
        height: 60px;
        font-size: 1.75rem;
    }

    .breakdown-stat strong {
        font-size: 1.5rem;
    }

    .species-stat strong {
        font-size: 1.15rem;
    }

    .hotspot-header {
        flex-direction: column;
        align-items: flex-start;
    }

    .pollution-badge,
    .status-badge {
        font-size: 0.7rem;
        padding: 0.2rem 0.6rem;
    }

    .source-bar {
        flex-direction: column;
        gap: 0.5rem;
        text-align: center;
        padding: 0.75rem;
    }

    .operational-challenges li {
        flex-direction: column;
        text-align: center;
        padding: 0.75rem;
    }

    .section-intro {
        font-size: 1rem;
        padding: 0 1rem;
    }

    /* Ensure images in sections are responsive */
    .section-with-image {
        margin-bottom: 2rem;
    }
}

/* ===================================
   Small Mobile (Below 480px)
   =================================== */
@media (max-width: 480px) {
    .marine-stat-card h3 {
        font-size: 1.5rem;
    }

    .breakdown-stat strong {
        font-size: 1.25rem;
    }

    .chart-container-large,
    .chart-container-medium {
        height: 250px;
        padding: 0.75rem;
    }

    .job-count {
        font-size: 1.5rem;
    }
}