/* ==========================================================================
   BLOCK: GES - the Global Expenditure Survey display, included by
   members/expenditure-report.php from /ges/display.php. Pure-CSS
   proportional bars; every figure server-rendered from PHP arrays
   (production: MariaDB).
   ========================================================================== */

@scope (.block-ges) {
    :scope {
        padding-block: var(--space-lg);
        container-type: inline-size;
        container-name: ges;
    }

    .ges-headline {
        display: grid;
        gap: clamp(16px, 2cqw, 28px);
        margin-block-end: clamp(32px, 4cqw, 56px);
    }
    @container ges (width >= 720px) {
        .ges-headline { grid-template-columns: repeat(3, 1fr); }
    }
    .ges-stat {
        border-block-start: 2px solid var(--text-primary);
        padding-block-start: 16px;
        display: grid;
        gap: 6px;
    }
    .ges-stat strong {
        font-weight: 100;
        font-size: clamp(2.4rem, 4.4cqw, 4rem);
        letter-spacing: -0.03em;
        line-height: 1;
    }
    .ges-stat strong b { font-weight: 900; }
    .ges-stat span {
        font-size: 0.72rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.14em;
        color: var(--color-text-muted);
    }

    .ges-chart { margin-block: clamp(28px, 3.6cqw, 52px); }
    .ges-chart h3 {
        font-size: 0.84rem;
        font-weight: 900;
        text-transform: uppercase;
        letter-spacing: 0.18em;
        margin-block-end: 18px;
    }
    .ges-row {
        display: grid;
        grid-template-columns: minmax(110px, 180px) 1fr minmax(72px, auto);
        gap: clamp(12px, 1.6cqw, 24px);
        align-items: center;
        padding-block: 10px;
        border-block-start: 1px solid var(--border-light);
    }
    .ges-row .g-label { font-weight: 700; font-size: 0.94rem; }
    .ges-row .g-track { background: var(--surface-band, #f1f1ee); }
    .ges-row .g-bar {
        block-size: 14px;
        background: var(--accent-lime);
        inline-size: var(--w, 0%);
    }
    .ges-row .g-val {
        font-weight: 900;
        font-size: 0.94rem;
        text-align: end;
        font-variant-numeric: tabular-nums;
    }
    .ges-note {
        font-size: 0.78rem;
        color: var(--color-text-muted);
        max-width: 70ch;
        line-height: 1.7;
    }

    /* ------------------------------------------------ REPORT CTA ------- */
    .ges-cta {
        display: grid;
        margin-block-end: clamp(32px, 4cqw, 56px);
        min-block-size: 240px;
    }
    .ges-cta > * { grid-area: 1 / 1; }
    .ges-cta img {
        inline-size: 100%;
        block-size: 100%;
        object-fit: cover;
        display: block;
        background: #202430; /* floor if the image is missing */
    }
    .ges-cta .cta-overlay {
        background: linear-gradient(135deg, rgba(10,10,10,0.82), rgba(24,26,29,0.6));
        display: grid;
        gap: 20px;
        align-content: center;
        justify-items: start;
        padding: clamp(28px, 4cqw, 56px);
        color: #fff;
    }
    .ges-cta h2 {
        font-weight: 100;
        font-size: clamp(1.4rem, 2.6cqw, 2.2rem);
        letter-spacing: -0.02em;
        max-width: 26ch;
    }
    .ges-cta h2 strong { font-weight: 900; }

    /* ---------------------------------------------- TERRITORY FORM ----- */
    .ges-form {
        display: flex;
        gap: 14px;
        align-items: end;
        flex-wrap: wrap;
        margin-block-end: clamp(24px, 3cqw, 40px);
    }
    .ges-form .field { display: grid; gap: 8px; }
    .ges-form label {
        font-size: 0.72rem;
        font-weight: 900;
        text-transform: uppercase;
        letter-spacing: 0.16em;
        color: var(--text-secondary);
    }
    .ges-form select {
        font: inherit;
        color: var(--text-primary);
        background: transparent;
        border: 1px solid var(--border-light);
        padding: 14px 16px;
        min-inline-size: 240px;
    }
    .ges-form select:focus-visible { outline: none; border-color: var(--accent-lime); }
    .ges-form button { cursor: pointer; }

    /* ------------------------------------------------- DATA TABLE ------ */
    .ges-table-wrap {
        overflow-x: auto;
        border: 1px solid var(--border-light);
        background: #fff;
    }
    @supports (color: light-dark(#000, #fff)) {
        .ges-table-wrap { background: light-dark(#fff, #161616); }
    }
    .ges-table {
        inline-size: 100%;
        border-collapse: collapse;
        font-variant-numeric: tabular-nums;
    }
    .ges-table caption {
        text-align: start;
        font-weight: 900;
        font-size: 0.84rem;
        text-transform: uppercase;
        letter-spacing: 0.18em;
        padding: 18px;
    }
    .ges-table th, .ges-table td {
        padding: 12px 18px;
        border-block-start: 1px solid var(--border-light);
        text-align: end;
        white-space: nowrap;
        font-size: 0.95rem;
    }
    .ges-table th { font-weight: 900; }
    .ges-table th:first-child, .ges-table td:first-child { text-align: start; font-weight: 700; }
    .ges-table .t-bar {
        display: inline-block;
        block-size: 12px;
        background: var(--accent-lime);
        inline-size: var(--w, 0%);
        min-inline-size: 2px;
        vertical-align: baseline;
    }
    .ges-table td.t-cell { text-align: start; inline-size: 40%; min-inline-size: 160px; }
    .ges-table .t-fcast { color: var(--color-text-muted); font-weight: 400; }
}