/* ================================================================
   page-country-export.css  –  Compliance Checker
   Styles specific to /country-export (producing country page).
   Extends page-country-shared.css with the export summary panel
   and the intro panel unique to this view.
   ================================================================ */


/* === PAGE HEADER + STAT CARDS ===================================
   The two-part page header (60x40 flag, divider, total stat) and
   the four-up .page-stats / .stat-card row beneath it are shared
   with /country and live in page-country-shared.css. No
   page-specific overrides are needed here. */


/* === LAYOUT =====================================================
   No coloured border on the summary (contrast with the country
   page's orange frame); title colour inherits the shared default. */

.export-summary {
    background-color: var(--white);
    border-radius: var(--radius-dropdown);
    box-shadow: var(--shadow);
    padding: var(--space-xl);
    margin: var(--space-2xl) auto;
    max-width: var(--page-max);
}


/* === COMPONENTS =================================================
   Export-only intro panel: soft-green card explaining the page. */

.export-intro-panel {
    background: linear-gradient(180deg,
        var(--color-data-panel-bg-top) 0%,
        var(--color-data-panel-bg-bottom) 100%);
    border: 1px solid var(--color-data-panel-border);
    border-left: 5px solid var(--ae-lightgreen);
    border-radius: 14px;
    padding: 1.5rem 1.75rem;
    margin: 2rem auto 2rem;
    max-width: var(--page-max);
    box-shadow: 0 8px 22px rgba(24, 62, 53, 0.06);
}

.export-intro-lead {
    margin: 0 0 1.25rem 0;
    font-size: 1.05rem;
    line-height: 1.75;
    color: var(--color-data-panel-value);
    max-width: 980px;
}


/* === RESPONSIVE (tablet) =======================================
   to do. */
@media (max-width: 1400px) {
    /* TODO */
}

/* === RESPONSIVE (mobile) =======================================
   to do. Header + stat-card responsive rules live in shared. */
@media (max-width: 768px) {
    /* TODO */
}