/* ==========================================================
   Sustain — Pillars (03) — ESG three-column table
   CSS source: design-git/css/sustain.css §.sus .sufwtb* (ln 800–904)
               and §.suspil__band (ln 1224–1234)
   ========================================================== */

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

/* ---- section heading ---- */
.custom-sustain-pillars .sec__head--center {
    text-align: center;
    margin-bottom: clamp(20px, calc(2.4 * var(--vwu, 14.4px)), 36px);
}
.custom-sustain-pillars .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-pillars .h-sec em {
    position: relative;
    display: inline-block;
    font-style: italic;
    color: var(--cp-green, #5CA13F);
}
.custom-sustain-pillars .h-sec em::after {
    content: "";
    position: absolute;
    left: 0; right: 0; bottom: 4px;
    height: 6px;
    border-radius: 4px;
    background: currentColor;
    opacity: 0.18;
}

/* ---- scoping wrapper: DOM ancestor, no visual box ---- */
.custom-sustain-pillars .sus { display: contents; }

/* ---- table wrap ---- */
.custom-sustain-pillars .sus .sufwtb-wrap {
    margin-top: clamp(18px, calc(2 * var(--vwu, 14.4px)), 28px);
    border-radius: var(--curl-sm, 46px) 0 var(--curl-sm, 46px) 0;
    overflow: hidden;
    border: 1px solid var(--g200, #EEF2F7);
    box-shadow: var(--sh-sm, 0 6px 18px -6px rgba(22,65,140,.14));
    background: #fff;
}
.custom-sustain-pillars .sus .sufwtb {
    width: 100%; border-collapse: collapse; table-layout: fixed;
}
.custom-sustain-pillars .sus .sufwtb caption {
    position: absolute; width: 1px; height: 1px;
    margin: -1px; padding: 0; overflow: hidden;
    clip: rect(0 0 0 0); white-space: nowrap;
}

/* ---- the three column heads ---- */
.custom-sustain-pillars .sus .sufwtb__h {
    --p: var(--cp-green, #5CA13F);
    padding: clamp(20px, calc(2.4 * var(--vwu, 14.4px)), 30px)
             clamp(14px, calc(1.6 * var(--vwu, 14.4px)), 22px);
    background: var(--p); color: #fff;
    text-align: center; vertical-align: top;
}
.custom-sustain-pillars .sus .sufwtb__h--green    { --p: rgba(63,122,42,.94); }
.custom-sustain-pillars .sus .sufwtb__h--together { --p: rgba(22,65,140,.94); }
.custom-sustain-pillars .sus .sufwtb__h--right    { --p: rgba(168,31,31,.94); }

.custom-sustain-pillars .sus .sufwtb__ico {
    display: grid; place-items: center;
    width: 58px; height: 58px;
    margin: 0 auto 14px;
    padding: 10px; border-radius: 50%; background: #fff;
}
.custom-sustain-pillars .sus .sufwtb__ico svg {
    display: block; width: 100%; height: 100%; color: var(--p);
}
.custom-sustain-pillars .sus .sufwtb__cat {
    display: block; font-size: 14px; font-weight: 400;
    color: rgba(255,255,255,.82); line-height: 1.5;
}
.custom-sustain-pillars .sus .sufwtb__go {
    display: block; margin-top: 4px;
    font-size: clamp(20px, calc(1.7 * var(--vwu, 14.4px)), 24px);
    font-weight: 700; line-height: 1.35;
}
.custom-sustain-pillars .sus .sufwtb__tag {
    display: block; margin-top: 8px;
    font-size: 14px; font-weight: 400;
    color: rgba(255,255,255,.9); line-height: 1.6;
}

/* ---- the cells ---- */
.custom-sustain-pillars .sus .sufwtb__c {
    padding: clamp(16px, calc(1.8 * var(--vwu, 14.4px)), 22px)
             clamp(14px, calc(1.6 * var(--vwu, 14.4px)), 20px);
    vertical-align: top; text-align: center;
    font-size: 16px; font-weight: 400;
    color: var(--g700, #475569); line-height: 1.65;
}
.custom-sustain-pillars .sus .sufwtb tbody tr:nth-child(odd) .sufwtb__c {
    background: color-mix(in srgb, var(--p) 10%, #fff);
}
.custom-sustain-pillars .sus .sufwtb__cico {
    display: grid; place-items: center;
    width: 44px; height: 44px;
    margin: 0 auto 10px;
}
.custom-sustain-pillars .sus .sufwtb__c:nth-child(1) { --p: rgba(63,122,42,.94); }
.custom-sustain-pillars .sus .sufwtb__c:nth-child(2) { --p: rgba(22,65,140,.94); }
.custom-sustain-pillars .sus .sufwtb__c:nth-child(3) { --p: rgba(168,31,31,.94); }
.custom-sustain-pillars .sus .sufwtb__cico svg {
    display: block; width: 100%; height: 100%; color: var(--p);
}
.custom-sustain-pillars .sus .sufwtb__c span { display: block; }

/* narrow: horizontal scroll rather than collapsing columns */
@media (max-width: 760px) {
    .custom-sustain-pillars .sus .sufwtb-wrap {
        overflow-x: auto; overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
    }
    .custom-sustain-pillars .sus .sufwtb { min-width: 720px; }
}

/* ---- footer band (16th issue) ---- */
.custom-sustain-pillars .suspil__band {
    margin-top: clamp(18px, calc(2.2 * var(--vwu, 14.4px)), 34px);
    padding: clamp(18px, calc(2 * var(--vwu, 14.4px)), 28px)
             clamp(20px, calc(2.4 * var(--vwu, 14.4px)), 40px);
    border-radius: var(--curl-sm, 46px) 0 var(--curl-sm, 46px) 0;
    background: linear-gradient(120deg, #16418C 0%, #2E6BC4 100%);
    text-align: center;
}
.custom-sustain-pillars .suspil__band h2,
.custom-sustain-pillars .suspil__band h3,
.custom-sustain-pillars .suspil__band h4 {
    margin: 0;
    font-size: clamp(20px, calc(5 * var(--vwu, 14.4px) / 3), 24px);
    font-weight: 600; line-height: 1.4; color: #fff;
}