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

/* Number badge (shared with detail-page lists and the 404 cards): a square primary tile. */
.portola-num {
    display: inline-flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: calc(var(--ocf-space-unit) * 3);
    height: calc(var(--ocf-space-unit) * 3);
    border-radius: var(--button-radius);
    background: var(--portola-grad);
    color: var(--ocf-primary-contrast);
    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;
}

.portola-num--fill { background: var(--portola-grad); }

.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 .portola-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); }
.ocf-commitments-heading .heading-2 { max-width: var(--ocf-section-heading-width); }

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

.ocf-commitment {
    display: flex;
    flex-direction: column;
    gap: calc(var(--ocf-space-unit) * 0.75);
    padding: calc(var(--ocf-space-unit) * 2.25) calc(var(--ocf-space-unit) * 2.125);
    border-radius: var(--card-radius);
    background: var(--ocf-bg-alt);
    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; }

html[data-theme="dark"] .ocf-commitment { background: var(--ocf-bg-alt); }

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

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