/* ── m3 12 Case studies — maarch-3/sections/12-case-studies/brief.md ──
   Figma 1:1428 title · case 1: 1:1432 image 1654×845 @ (145,8837) + 1:1433 gradient + 1:1460 overlay (80/.9) +
   1:1515 4px white-42% rule · case 2: 1:1504 image 1638×870 · captions 26 · 2×2 grid: labels 700/42,
   texts 26/30 justify (case 1 bottom row normalised from 22px → 26px at sign-off) · col B @ x1044 */

.m3-cases {
    background: var(--skin-canvas);
    padding: calc(61 * var(--u)) 0 calc(36 * var(--u));
}
.m3-cases__title { text-align: center; }
.m3-cases > .m3-box { margin-top: calc(56 * var(--u)); }

.m3-case + .m3-case { margin-top: calc(68 * var(--u)); }
.m3-case__media { position: relative; margin: 0; overflow: hidden; background: #ccc; }
.m3-case__media--ice { width: calc(1654 / 1656 * 100%); height: calc(845 * var(--u)); margin-left: calc(3 * var(--u)); }
.m3-case__media--ice::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0) 3.849%, rgba(0, 0, 0, .37) 51.032%);
}
.m3-case__media--champion { width: calc(1638 / 1656 * 100%); height: calc(870 * var(--u)); margin-left: calc(3 * var(--u)); }
.m3-case__overlay {
    position: absolute;
    z-index: 2;
    left: calc(76 * var(--u));
    top: calc(561.5 * var(--u));
    font-size: var(--fs-display);
    line-height: .9;
    color: var(--skin-white);
}
.m3-case__overlay::before {
    content: "";
    position: absolute;
    left: calc(-20 * var(--u));
    top: calc(13 * var(--u));
    width: max(2px, calc(4 * var(--u)));
    height: calc(199.5 * var(--u));
    background: rgba(255, 255, 255, .42);
}

.m3-case__caption { margin: calc(14 * var(--u)) 0 0 calc(3 * var(--u)); font-size: var(--fs-body); line-height: 1; }
.m3-case__media--champion + .m3-case__caption { margin-top: calc(9 * var(--u)); }

.m3-case__grid {
    display: grid;
    grid-template-columns: 902fr 754fr;
    row-gap: calc(50 * var(--u));
    margin: calc(62 * var(--u)) 0 0 calc(3 * var(--u));
}
.m3-case__grid dt { font-size: var(--fs-sub); font-weight: 700; line-height: 1; }
.m3-case__grid dd {
    max-width: calc(735 * var(--u));
    margin: calc(48 * var(--u)) 0 0;
    font-size: var(--fs-body);
    line-height: calc(30 / 26);
    text-align: justify;
}
.m3-case__grid > div:nth-child(even) dd { max-width: calc(753 * var(--u)); }

@media (max-width: 991.98px) {
    .m3-cases { padding: 56px 0 40px; }
    .m3-cases > .m3-box { margin-top: 32px; }
    .m3-case + .m3-case { margin-top: 56px; }
    .m3-case__media--ice, .m3-case__media--champion { width: 100%; height: max(300px, 52vw); margin-left: 0; }
    .m3-case__overlay { left: 36px; top: auto; bottom: 28px; font-size: 40px; }
    .m3-case__overlay::before { left: -16px; top: 6px; height: calc(100% - 8px); }
    .m3-case__caption { margin-left: 0; font-size: 16px; }
    .m3-case__grid { grid-template-columns: 1fr 1fr; column-gap: 32px; row-gap: 28px; margin: 32px 0 0; }
    .m3-case__grid dt { font-size: 24px; }
    .m3-case__grid dd, .m3-case__grid > div:nth-child(even) dd { max-width: none; margin-top: 12px; font-size: 16px; line-height: 1.5; }
}
@media (max-width: 767.98px) {
    .m3-case__grid { grid-template-columns: 1fr; }
    .m3-case__grid dd { text-align: left; }
}