/* ==========================================================
   Sustain — Principle (05) — three expandable photo cards
   CSS source: design-git/css/sustain-index.css §.susprin* (ln 31–92)
   ========================================================== */

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

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

/* ---- card row ---- */
.custom-sustain-principle .susprin {
    display: flex;
    gap: clamp(10px, calc(1.2 * var(--vwu, 14.4px)), 18px);
    align-items: stretch;
    min-height: clamp(300px, calc(46 * var(--vhu, 9px)), 460px); /* ok-rhythm — ความสูงของแถวการ์ด ไม่ใช่ระยะ section */
    margin-top: clamp(22px, calc(2.6 * var(--vwu, 14.4px)), 40px);
}

/* ---- card ---- */
.custom-sustain-principle .susprin__c {
    --c1: rgba(22,65,140,.92); --c2: rgba(22,65,140,.30);
    position: relative; overflow: hidden;
    flex: 1 1 0; min-width: 0;
    display: flex; flex-direction: column; justify-content: flex-end;
    padding: clamp(22px, calc(2.6 * var(--vwu, 14.4px)), 40px);
    border-radius: var(--curl-sm, 46px) 0 var(--curl-sm, 46px) 0;
    cursor: pointer;
    transition: flex-grow .55s var(--ease, cubic-bezier(.2,.8,.2,1)),
                box-shadow .45s var(--ease, cubic-bezier(.2,.8,.2,1));
}
.custom-sustain-principle .susprin__c--green { --c1: rgba(63,122,42,.94); --c2: rgba(124,193,92,.34); }
.custom-sustain-principle .susprin__c--blue  { --c1: rgba(22,65,140,.94); --c2: rgba(80,163,213,.34); }
.custom-sustain-principle .susprin__c--red   { --c1: rgba(168,31,31,.94); --c2: rgba(224,75,75,.34); }
.custom-sustain-principle .susprin__c--navy  { --c1: rgba(14,30,84,.94); --c2: rgba(22,65,140,.34); }
.custom-sustain-principle .susprin__c:focus-visible {
    outline: 3px solid var(--navy, #16418C); outline-offset: 3px;
}

/* ---- background photo ---- */
.custom-sustain-principle .susprin__shot { position: absolute; inset: 0; z-index: 0; }
.custom-sustain-principle .susprin__shot img {
    width: 100%; height: 100%; object-fit: cover; display: block;
    transform: scale(1.06);
    transition: transform .8s var(--ease, cubic-bezier(.2,.8,.2,1));
}
.custom-sustain-principle .susprin__shot::after {
    content: ""; position: absolute; inset: 0;
    background: linear-gradient(200deg, var(--c2) 0%, var(--c1) 88%);
    transition: opacity .55s var(--ease, cubic-bezier(.2,.8,.2,1));
}
.custom-sustain-principle .susprin__c:hover .susprin__shot img,
.custom-sustain-principle .susprin__c:focus-within .susprin__shot img { transform: scale(1); }
.custom-sustain-principle .susprin__c:hover .susprin__shot::after,
.custom-sustain-principle .susprin__c:focus-within .susprin__shot::after { opacity: .72; }
.custom-sustain-principle .susprin__c:hover,
.custom-sustain-principle .susprin__c:focus-within {
    flex-grow: 2;
    box-shadow: var(--sh-lg, 0 34px 80px -20px rgba(22,65,140,.30));
}

/* ---- card body ---- */
.custom-sustain-principle .susprin__body { position: relative; z-index: 1; }
.custom-sustain-principle .susprin__t {
    margin: 0;
    font-size: clamp(24px, calc(2.5 * var(--vwu, 14.4px)), 36px);
    font-weight: 700; line-height: 1.3; color: #fff;
    text-shadow: 0 2px 18px rgba(0,0,0,.32);
}
.custom-sustain-principle .susprin__rule {
    display: block; height: 4px; width: 48px; margin-top: 16px;
    border-radius: 999px; background: #fff; opacity: .9;
    transition: width .55s var(--ease, cubic-bezier(.2,.8,.2,1));
}
.custom-sustain-principle .susprin__c:hover .susprin__rule,
.custom-sustain-principle .susprin__c:focus-within .susprin__rule { width: 120px; }

/* ---- no-pointer stacks ---- */
@media (max-width: 1000px) {
    .custom-sustain-principle .susprin {
        flex-direction: column; min-height: 0; /* ok-rhythm */
    }
    .custom-sustain-principle .susprin__c {
        flex: 0 0 auto; min-height: clamp(200px, 42vw, 280px);
    }
    .custom-sustain-principle .susprin__c:hover,
    .custom-sustain-principle .susprin__c:focus-within { flex-grow: 0; box-shadow: none; }
}