@import url('common.css');

.section {
    padding-left: 20vw;
    padding-right: 20vw;
}

@media (max-width: 1599px) {
    .section {
        padding-left: 18vw;
        padding-right: 18vw;
    }
}

@media (max-width: 1199px) {
    .section {
        padding-left: 16vw;
        padding-right: 16vw;
    }
}

@media (max-width: 991px) {
    .section {
        padding-left: 13vw;
        padding-right: 13vw;
    }
}

.hero {
    .back { display: inline-block; font-size: .85rem; margin-bottom: 3rem; }
    .facts { display: flex; flex-wrap: wrap; gap: 2rem 4rem; margin-top: 3rem; }
    dt { font-family: var(--font-mono); font-size: .8rem; color: var(--text-secondary); }
    dd { margin: .5rem 0 0; }
}
.context .split { --split-left: 4fr; --split-right: 6fr; --gap: 5rem; }
.implementation {
    article { grid-column: span 6; }
    article:nth-child(even) { margin-top: 3rem; }
    p { color: var(--text-secondary); line-height: 1.7; }
}
.results {
    .metrics { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 3rem; margin-block: 3rem; }
    .metrics > div { display: flex; flex-direction: column; }
    dt { font-family: var(--font-title); font-size: 1.1rem; }
    dd { order: -1; margin: 0; font-family: var(--font-title); font-size: clamp(2rem, 4vw, 4rem); font-weight: 600; }
    .metrics dd .note { display: block; margin-top: 1rem; font-family: var(--font-body); font-size: .8rem; font-weight: var(--weight-body); color: var(--surface-inverse-muted); }
    .note { color: var(--surface-inverse-muted); }
    .text-action { color: var(--surface-inverse-text); }
}

.final {
    .split { --split-left: 7fr; --split-right: 4fr; --align: center; }
    p { color: var(--text-secondary); margin-bottom: 0; }
    .action { text-align: right; }
}

@media (max-width: 767px) {
    .context .split { grid-template-columns: 1fr; gap: 2rem; }
    .implementation article:nth-child(n) { grid-column: 1 / -1; margin-top: 0; }
    .results .metrics { grid-template-columns: 1fr; }
}

@media (max-width: 767px) {
    .final .split { grid-template-columns: 1fr; gap: 2rem; }
    .final .action { text-align: left; }
}