/* ==========================================================
   Sustain — Progress (06) — metric bento grid
   CSS source: design-git/css/sustain.css §.suspil__head* (ln 1185–1221)
               design-git/css/sustain-index.css §.susbxg/.susbx* (ln 108–222)
   ========================================================== */

/* ---- shell ---- */
.custom-sustain-progress {
    padding-inline: 90px;
    padding-block: clamp(52px, calc(8.6 * var(--vwu, 14.4px)), 160px);
}
@media (max-width: 1024px) {
    .custom-sustain-progress { padding-inline: 40px; }
}
@media (max-width: 640px) {
    .custom-sustain-progress { padding-inline: 24px; }
}

/* ---- section heading ---- */
.custom-sustain-progress .sec__head--center {
    text-align: center;
    margin-bottom: clamp(20px, calc(2.4 * var(--vwu, 14.4px)), 36px);
}
.custom-sustain-progress .h-sec {
    font-size: min(clamp(28px, calc(3.9 * var(--vwu, 14.4px)), 56px), calc(6.2 * var(--vhu, 9px)));
    font-weight: 600; line-height: 1.3;
    color: var(--navy, #16418C); margin: 0;
}
.custom-sustain-progress .h-sec em {
    position: relative;
    display: inline-block;
    font-style: italic;
    color: var(--cp-green, #5CA13F);
}
.custom-sustain-progress .h-sec em::after {
    content: "";
    position: absolute;
    left: 0; right: 0; bottom: 4px;
    height: 6px;
    border-radius: 4px;
    background: currentColor;
    opacity: 0.18;
}
.custom-sustain-progress .lead {
    margin: clamp(10px, calc(1.2 * var(--vwu, 14.4px)), 16px) auto 0;
    max-width: 870px;
    font-size: clamp(16px, calc(1.25 * var(--vwu, 14.4px)), 18px);
    font-weight: 400; line-height: 1.7; color: var(--g700, #475569);
}

/* ---- group header ---- */
.custom-sustain-progress .suspil__head {
    display: flex;
    align-items: center;
    gap: clamp(12px, calc(1.4 * var(--vwu, 14.4px)), 18px);
    margin-bottom: clamp(16px, calc(1.8 * var(--vwu, 14.4px)), 26px);
}
.custom-sustain-progress .susbxg + .suspil__head {
    margin-top: clamp(24px, calc(2.8 * var(--vwu, 14.4px)), 44px);
}
.custom-sustain-progress .suspil__head--green { --c: var(--sus-green, #5CA13F); }
.custom-sustain-progress .suspil__head--blue  { --c: var(--sus-blue, #3D8CB8); }
.custom-sustain-progress .suspil__head--red   { --c: var(--sus-red, #CE2929); }

.custom-sustain-progress .suspil__ring {
    flex: 0 0 auto; display: grid; place-items: center;
    width: clamp(56px, calc(5 * var(--vwu, 14.4px)), 76px); aspect-ratio: 1;
    border-radius: 50%; background: #fff;
    box-shadow: 0 0 0 1px var(--g200, #EEF2F7), 0 6px 18px -8px rgba(22,65,140,.22);
}
.custom-sustain-progress .suspil__ring svg {
    width: 58%; height: 58%; display: block; color: var(--c, var(--navy, #16418C));
}
.custom-sustain-progress .suspil__t {
    margin: 0;
    font-size: clamp(20px, calc(5 * var(--vwu, 14.4px) / 3), 24px);
    font-weight: 600; line-height: 1.3; color: var(--c, var(--navy, #16418C));
}
.custom-sustain-progress .suspil__s {
    margin: 4px 0 0; font-size: 14px; font-weight: 400;
    line-height: 1.5; color: var(--c, var(--navy, #16418C));
}

/* ---- bento grid ---- */
.custom-sustain-progress .susbxg {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: clamp(10px, calc(1 * var(--vwu, 14.4px)), 16px);
    margin-bottom: clamp(26px, calc(3.2 * var(--vwu, 14.4px)), 52px);
    max-width: 1920px; margin-inline: auto;
}
/* 3 narrow + 2 wide — six tracks so rows align edge to edge */
.custom-sustain-progress .susbxg > :nth-child(-n+3) { grid-column: span 2; }
.custom-sustain-progress .susbxg > :nth-child(n+4)  { grid-column: span 3; }

/* ---- bento card ---- */
.custom-sustain-progress .susbx {
    --c: var(--navy, #16418C);
    position: relative; overflow: hidden;
    aspect-ratio: 4 / 5;
    border-radius: var(--r-lg, 20px);
    background: var(--navy-darker, #0E1E54);
    box-shadow: 0 2px 6px rgba(22,65,140,.06), 0 12px 28px -10px rgba(22,65,140,.14);
    transition: transform .35s var(--ease, cubic-bezier(.2,.8,.2,1)),
                box-shadow .35s var(--ease, cubic-bezier(.2,.8,.2,1));
}
.custom-sustain-progress .susbxg > :nth-child(n+4) { aspect-ratio: 2 / 1; }
.custom-sustain-progress .susbx--green { --c: var(--sus-green, #5CA13F); }
.custom-sustain-progress .susbx--blue  { --c: var(--sus-blue, #3D8CB8); }
.custom-sustain-progress .susbx--red   { --c: var(--sus-red, #CE2929); }
@media (hover: hover) {
    .custom-sustain-progress .susbx:hover {
        transform: translateY(-3px);
        box-shadow: 0 18px 40px -18px rgba(22,65,140,.24);
    }
}

/* ---- card photo ---- */
.custom-sustain-progress .susbx__shot {
    position: absolute; inset: 0; z-index: 0; margin: 0;
}
.custom-sustain-progress .susbx__shot img {
    width: 100%; height: 100%; object-fit: cover;
    object-position: center; display: block;
}
.custom-sustain-progress .susbx__shot::after {
    content: ""; position: absolute; inset: 0; z-index: 1;
    background: linear-gradient(180deg,
        rgba(0,0,0,0) 0%, rgba(0,0,0,0) 38%, rgba(10,22,60,.98) 100%);
    opacity: .92;
}

/* ---- card body ---- */
.custom-sustain-progress .susbx__body {
    position: absolute; z-index: 2; inset: auto 0 0 0;
    padding: clamp(10px, calc(1.1 * var(--vwu, 14.4px)), 16px);
}
.custom-sustain-progress .susbx__badge {
    display: flex; align-items: center; gap: 8px; margin-bottom: 6px;
}
.custom-sustain-progress .susbx__bico {
    flex: 0 0 auto; display: grid; place-items: center;
    width: 34px; height: 34px; border-radius: 50%;
    background: var(--c); color: #fff;
    box-shadow: 0 2px 6px rgba(0,0,0,.25);
}
.custom-sustain-progress .susbx__bico svg { width: 22px; height: 22px; display: block; }
.custom-sustain-progress .susbx__t {
    margin: 0; font-size: 18px; font-weight: 600; line-height: 1.3; color: #fff;
    text-shadow: 0 1px 3px rgba(0,0,0,.4);
}
.custom-sustain-progress .susbx__res {
    margin: 0;
    font-size: clamp(18px, calc(1.6 * var(--vwu, 14.4px)), 24px);
    font-weight: 700; line-height: 1.25; color: #fff; letter-spacing: -.01em;
}
.custom-sustain-progress .susbx__k {
    display: block; margin-bottom: 4px;
    font-size: 10px; font-weight: 600; letter-spacing: .1em;
    text-transform: uppercase; color: rgba(255,255,255,.7);
}
.custom-sustain-progress .susbx__goal {
    margin: 8px 0 0; padding-top: 8px;
    border-top: 1px solid rgba(255,255,255,.3);
    font-size: 12px; font-weight: 500; line-height: 1.4; color: rgba(255,255,255,.92);
}
.custom-sustain-progress .susbx__goal b { font-weight: 600; color: #fff; }
.custom-sustain-progress .susbx__d {
    margin: 6px 0 0; font-size: 14px; font-weight: 300;
    line-height: 1.5; color: rgba(255,255,255,.85);
    display: -webkit-box; -webkit-line-clamp: 2;
    -webkit-box-orient: vertical; overflow: hidden;
}

/* ---- narrow: reflow ---- */
@media (max-width: 1100px) {
    .custom-sustain-progress .susbxg {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
    .custom-sustain-progress .susbxg > :nth-child(n)  { grid-column: span 2; aspect-ratio: 4 / 5; }
    .custom-sustain-progress .susbxg > :nth-child(5)   { grid-column: span 4; aspect-ratio: 2.4 / 1; }
}
@media (max-width: 680px) {
    .custom-sustain-progress .susbxg {
        grid-template-columns: minmax(0, 1fr);
        margin-bottom: 0;
    }
    .custom-sustain-progress .susbxg > :nth-child(n) { grid-column: span 1; aspect-ratio: 16 / 12; }
}