/* How We Work / Why choose us.
 * Split (homepage): a ruled numbered list and the buttons beside a framed photo with a tint offset.
 * Cards (inner pages): three pressed cards on the alternate surface, each with a filled number badge. */
.ocf-commitments--cards { background: var(--cardiff-bg-alt); }

/* Pressed number badge (shared with detail-page lists and the 404 cards). */
.cardiff-num {
    display: inline-flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: calc(var(--ocf-space-unit) * 3.25);
    height: calc(var(--ocf-space-unit) * 3.25);
    border: var(--button-border-width) solid var(--cardiff-ink);
    border-radius: var(--button-radius);
    background: var(--ocf-bg-alt);
    box-shadow: 0 calc(var(--cardiff-press) - 1px) 0 var(--cardiff-ink);
    color: var(--ocf-link);
    font-family: var(--ocf-font-heading), system-ui, sans-serif;
    font-size: calc(var(--font-body-size) * 1.33);
    font-weight: 800;
    line-height: 1;
}

.cardiff-num--fill { background: var(--ocf-primary); color: var(--ocf-primary-contrast); }

.ocf-commitments-split {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 560px);
    gap: var(--ocf-split-gap);
    align-items: center;
}

.ocf-commitments-split .cardiff-framed { height: 580px; }

.ocf-commitments-rows {
    margin: calc(var(--ocf-grid-gap) * 1.25) 0 calc(var(--ocf-grid-gap) * 1.5);
    border-top: var(--button-border-width) solid var(--ocf-border);
}

.ocf-commitment-row {
    display: flex;
    gap: calc(var(--ocf-space-unit) * 1.25);
    align-items: flex-start;
    padding: calc(var(--ocf-space-unit) * 1.375) 0;
    border-bottom: var(--button-border-width) solid var(--ocf-border);
}

.ocf-commitment-row h3 { margin: 0; font-size: calc(var(--font-h3-size) * 0.86); }
.ocf-commitment-row p { margin: calc(var(--ocf-space-unit) * 0.25) 0 0; font-size: calc(var(--font-body-size) * 0.944); }

.ocf-commitments-heading { margin-bottom: calc(var(--ocf-grid-gap) * 2); text-align: center; }
.ocf-commitments-heading .eyebrow { justify-content: center; }
.ocf-commitments-heading .heading-2 { max-width: var(--ocf-section-heading-width); margin-inline: auto; }

.ocf-commitments-list {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: calc(var(--ocf-grid-gap) * 1.333);
    padding-bottom: var(--cardiff-press);
}

.ocf-commitment {
    display: flex;
    flex-direction: column;
    gap: calc(var(--ocf-space-unit) * 0.75);
    padding: calc(var(--ocf-space-unit) * 2);
    border: var(--card-border-width) solid var(--ocf-border);
    border-radius: var(--card-radius);
    background: var(--ocf-bg);
    box-shadow: var(--card-shadow);
}

.ocf-commitment h3 { margin: calc(var(--ocf-space-unit) * 0.75) 0 0; }
.ocf-commitment p { margin: 0; color: var(--ocf-body); font-size: calc(var(--font-body-size) * 0.944); line-height: 1.6; }

@media (max-width: 1023px) {
    .ocf-commitments-split { grid-template-columns: 1fr; }
    .ocf-commitments-split .cardiff-framed { height: 440px; }
    .ocf-commitments-list { grid-template-columns: 1fr; }
}

@media (max-width: 767px) {
    .ocf-commitments-split .cardiff-framed { height: 320px; box-shadow: 10px 10px 0 var(--cardiff-tint); }
    .ocf-commitments .ocf-actions { flex-direction: column; align-items: stretch; }
    .ocf-commitments .ocf-actions > a { width: 100%; }
    .cardiff-num { width: calc(var(--ocf-space-unit) * 2.75); height: calc(var(--ocf-space-unit) * 2.75); }
}