/* ============================================
   IMPACT PAGE — page-specific styles
   ============================================ */

/* ============ HERO BANNER (full image, no crop) ============ */

.impact-banner {
    width: 100%;
    line-height: 0; /* removes the small gap under inline images */
    background: var(--green-darker); /* shows briefly while the image loads */
}
.impact-banner-img {
    width: 100%;
    height: auto;
    display: block;
}

/* ============ GLASS BACKDROP — wraps heading + table over one photo ============ */

.impact-glass-wrap {
    position: relative;
    background-size: cover;
    background-position: center;
    background-attachment: fixed; /* photo stays put while rows scroll over it (desktop only, see mobile override) */
    padding-bottom: 40px;
}
.impact-glass-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(8,18,10,0.55) 0%, rgba(8,18,10,0.72) 100%);
    pointer-events: none;
}

/* ============ EXPECTED IMPACT HEADING ============ */

.impact-summary {
    position: relative;
    padding: 64px 0 44px;
    text-align: center;
    justify-content: center;
    width: 100%;
}

/* >>>>>>>>>> AMENDMENT START <<<<<<<<<< */
/* The site-wide .container class uses margin: 0 10% (not margin: 0 auto),
   which pushes it off-center on wide viewports. Overriding just here, on
   the heading's own wrapper, centers it without touching the shared
   .container rule used elsewhere on the site. */
.impact-summary .container {
    margin: 0 auto;
}
/* >>>>>>>>>> AMENDMENT END <<<<<<<<<< */

.impact-summary-eyebrow {
    font-family: var(--font-heading);
    font-weight: 800;
    font-size: 40px;
    color: var(--white);
    letter-spacing: 0.02em;
    line-height: 1.25;
    margin: 0;
}

.impact-summary-year {
    display: inline-block;
    font-weight: 900;
    font-size: 64px;
    color: var(--yellow);
    line-height: 1;
    margin-left: 6px;
}

/* ============ IMPACT TABLE ============ */

.impact-table {
    position: relative;
    /* Even margin on all four sides around the table block itself */
    margin: 0 40px 40px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    min-height: 60vh;
}

/* >>>>>>>>>> AMENDMENT START <<<<<<<<<< */
/* Rounds each row on its own, spaced apart with .impact-table's gap above.
   Glass treatment: blurred translucent fill so the backdrop photo shows
   through, a solid-colour border at rest, and a yellow border + deeper
   shadow + lift on hover — same recipe as the volunteer form panel. */
.impact-row {
    border-radius: 24px;
    overflow: hidden;

    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border: 1.5px solid rgba(255, 255, 255, 0.35);
    box-shadow: 0 12px 30px rgba(8, 18, 10, 0.25);
    transition: border-color 0.25s ease, box-shadow 0.25s ease, transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.impact-row:hover,
.impact-row:focus-within {
    border-color: var(--yellow);
    box-shadow: 0 18px 40px rgba(8, 18, 10, 0.35), 0 0 0 1px rgba(242, 194, 48, 0.2);
    transform: translateY(-4px);
}
/* >>>>>>>>>> AMENDMENT END <<<<<<<<<< */

/* >>>>>>>>>> AMENDMENT START <<<<<<<<<< */
/* impact.html gives .impact-row-inner a second class, "container" —
   that shared class caps it at max-width:1200px and adds margin:0 10%.
   Overriding it here so the row content spans the full width of the
   colored bar (fixed-width columns below spread it out evenly instead). */
.impact-row-inner.container {
    max-width: 100%;
    width: 100%;
    margin: 0;
}
/* >>>>>>>>>> AMENDMENT END <<<<<<<<<< */

/* Alternating tint keeps the striped rhythm the rows had before, now as
   translucent glass instead of flat color — the photo shows through both,
   just at slightly different strengths. */
.impact-row:nth-child(odd) { background: rgba(13, 34, 19, 0.45); }
.impact-row:nth-child(even) { background: rgba(63, 145, 66, 0.28); }

.impact-row-inner {
    display: grid;
    /* >>>>>>>>>> AMENDMENT START <<<<<<<<<< */
    /* was: 90px 260px 1fr — fixed pixel widths meant the title and
       description stayed clumped near the icon while the rest of the
       (now full-width) row sat empty. Using fr units instead lets all
       three columns grow proportionally with the row's real width, so
       the icon, title, and description spread out evenly across it. */
    grid-template-columns: 90px 1fr 2fr;
    column-gap: 60px;
    padding: 28px 60px;
    /* >>>>>>>>>> AMENDMENT END <<<<<<<<<< */
    align-items: center;
}

.impact-icon {
    width: 84px;
    height: 84px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.impact-icon img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* Placeholder shown until a real icon path is set per row in views.py */
.impact-icon-placeholder {
    display: block;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    border: 2px dashed rgba(255, 255, 255, 0.45);
}

.impact-row-title {
    font-family: var(--font-heading);
    font-weight: 800;
    font-size: 18px;
    letter-spacing: 0.02em;
    color: var(--yellow);
    margin: 0;
    /* >>>>>>>>>> AMENDMENT START <<<<<<<<<< */
    /* Increased from 24px so the title sits further from the icon,
       more toward the middle of its column. */
    margin-left: 64px;
    /* >>>>>>>>>> AMENDMENT END <<<<<<<<<< */
}

.impact-row-desc {
    font-size: 15px;
    line-height: 1.75;
    color: rgba(255, 255, 255, 0.85);
    margin: 0;
}

/* ============ RESPONSIVE — TABLET (≤ 1024px) ============ */

@media (max-width: 1024px) {
    .impact-table { margin: 0 28px 28px; } /* AMENDMENT: even margin all round */
    .impact-row-inner.container { max-width: 100%; } /* AMENDMENT: full-width row, not centered narrow block */
    .impact-row-inner {
        grid-template-columns: 70px 1fr 2fr; /* AMENDMENT: fr units so it fills full width */
        column-gap: 30px;
        padding: 24px 32px;
    }
    .impact-summary-year { font-size: 52px; }
    .impact-row { border-radius: 20px; }
}

/* ============ RESPONSIVE — MOBILE (≤ 720px) ============ */

@media (max-width: 720px) {
    /* iOS Safari doesn't parallax background-attachment: fixed and it can
       cause scroll jank on some Android browsers — fall back to a normal
       scrolling background on phones. */
    .impact-glass-wrap { background-attachment: scroll; }

    .impact-table { margin: 0 16px 16px; gap: 10px; } /* AMENDMENT: even margin all round + tighter row gap */
    .impact-summary { padding: 44px 0 28px; }
    .impact-summary-eyebrow { font-size: 18px; }
    .impact-summary-year { font-size: 40px; margin-left: 0; }

    .impact-row { border-radius: 18px; }
    .impact-row:hover,
    .impact-row:focus-within { transform: translateY(-2px); } /* smaller lift, more finger-friendly */

    .impact-row-inner {
        grid-template-columns: 1fr;
        justify-items: center;
        text-align: center;
        row-gap: 10px;
        padding: 28px 20px;
    }
    .impact-icon { width: 48px; height: 48px; }
    .impact-icon-placeholder { width: 44px; height: 44px; }
    .impact-row-title { font-size: 16px; margin-left: 0; } /* AMENDMENT: reset desktop nudge, already centered here */
    .impact-row-desc { font-size: 13.5px; }
}

/* ============ RESPONSIVE — SMALL PHONE (≤ 420px) ============ */

@media (max-width: 420px) {
    .impact-table { margin: 0 12px 12px; }
    .impact-summary-eyebrow { font-size: 16px; }
    .impact-summary-year { font-size: 34px; }
    .impact-row-inner { padding: 22px 16px; }
    .impact-icon { width: 40px; height: 40px; }
    .impact-row-title { font-size: 14.5px; }
    .impact-row-desc { font-size: 13px; }
}

/* ============ RESPONSIVE — LANDSCAPE PHONE ============ */

@media (orientation: landscape) and (max-width: 1024px) {
    .impact-glass-wrap { background-attachment: scroll; }
    .impact-table { min-height: 0; }
    .impact-row-inner {
        grid-template-columns: 60px 1fr 2fr;
        padding: 18px 24px;
        column-gap: 20px;
    }
    .impact-row-title { margin-left: 0; }
}