/* Service areas (homepage): a flat primary band; copy and a divided area list on the left, the photo cut on a slant
 * on the right (desktop) with a light slash. The areas archive reuses the tile list on a light surface. */
.ocf-service-areas {
    position: relative;
    overflow: hidden;
    background: var(--ocf-primary);
    color: color-mix(in srgb, var(--ocf-primary) 12%, #fff);
}

.ocf-service-areas .heading-2 { color: var(--ocf-heading-alt); font-size: clamp(28px, 2.9vw, 44px); }
.ocf-areas-intro { margin: calc(var(--ocf-grid-gap) * 0.5) 0 calc(var(--ocf-grid-gap) * 1.25); max-width: 38rem; }

.ocf-areas-inner { position: relative; z-index: 1; padding-block: calc(var(--ocf-space-unit) * 7.5); }
.ocf-areas-copy { max-width: min(700px, 48vw); }

.ocf-areas-media {
    position: absolute;
    inset: 0 0 0 auto;
    width: 43%;
}

.ocf-areas-media .portola-slash { left: -10px; }
.portola-slash--light { background: color-mix(in srgb, #fff 90%, transparent); --portola-slash: 10px; }

.ocf-area-chips {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 32px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.ocf-service-areas .ocf-area-chips a {
    display: flex;
    align-items: center;
    gap: 14px;
    min-height: 60px;
    border-bottom: 1px solid color-mix(in srgb, #fff 22%, transparent);
    color: #fff;
    font-family: var(--ocf-font-heading), system-ui, sans-serif;
    font-size: var(--font-body-size);
    font-weight: 600;
    transition: border-color var(--duration) var(--ease);
}

.ocf-service-areas .ocf-area-chips a span { flex: 1; min-width: 0; }
.ocf-area-pin { width: 20px; height: 20px; flex: none; }
.ocf-service-areas .ocf-area-pin { display: none; }
.ocf-area-arrow { width: 18px; height: 18px; flex: none; opacity: 0.7; transition: transform var(--duration) var(--ease); }
.ocf-service-areas .ocf-area-chips a:hover { border-color: color-mix(in srgb, #fff 60%, transparent); }
.ocf-service-areas .ocf-area-chips a:hover .ocf-area-arrow { transform: translateX(3px); opacity: 1; }

.ocf-areas-actions { margin-top: calc(var(--ocf-grid-gap) * 1.25); }

/* Light button: white fill, heading text (on primary bands). */
.portola-btn-light {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: calc(var(--ocf-space-unit) * 3.75);
    padding: calc(var(--ocf-space-unit) * 0.875) calc(var(--ocf-space-unit) * 1.875);
    background: #fff;
    color: #141414;
    font-family: var(--ocf-font-heading), system-ui, sans-serif;
    font-size: var(--portola-label-size);
    font-weight: 600;
}

.portola-btn-light svg { width: 1.05em; height: 1.05em; }
.portola-btn-light:hover { background: color-mix(in srgb, #fff 86%, var(--ocf-primary)); }

@media (max-width: 1023px) {
    .ocf-areas-media { position: relative; inset: auto; width: 100%; height: 300px; --strip-s: 0px; }
    .ocf-areas-media .portola-cut { inset: 0; clip-path: polygon(0 0, 100% 0, 100% calc(100% - 48px), 0 100%); }
    .ocf-areas-media .portola-slash { display: none; }
    .ocf-areas-inner { padding-block: calc(var(--ocf-space-unit) * 3.5) calc(var(--ocf-space-unit) * 5); }
    .ocf-areas-copy { max-width: none; }
}

@media (max-width: 640px) {
    .ocf-areas-media { height: 220px; }
    .ocf-area-chips { grid-template-columns: 1fr; gap: 0; }
    .ocf-service-areas .ocf-area-chips a { min-height: 56px; }
    .ocf-areas-actions .portola-btn-light { width: 100%; }
}

/* Areas archive: white tiles on the page surface — a primary-gradient pin box, the area name and an arrow. */
.ocf-areas-archive .ocf-area-chips { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--ocf-grid-gap); }

.ocf-areas-archive .ocf-area-chips a {
    display: flex;
    align-items: center;
    gap: 18px;
    min-height: 72px;
    padding-right: 22px;
    border: 1px solid var(--ocf-border);
    background: var(--ocf-bg);
    box-shadow: var(--card-shadow);
    color: var(--ocf-heading);
    font-family: var(--ocf-font-heading), system-ui, sans-serif;
    font-size: calc(var(--font-body-size) * 1.05);
    font-weight: 600;
    transition: box-shadow var(--duration) var(--ease);
}

.ocf-areas-archive .ocf-area-chips a > span[data-ocf-field] { flex: 1; min-width: 0; }
.ocf-area-pinbox { display: grid; place-items: center; width: 72px; align-self: stretch; flex: none; background: var(--portola-grad); color: var(--ocf-primary-contrast); }
.ocf-areas-archive .ocf-area-arrow { color: var(--ocf-link); opacity: 1; }
.ocf-areas-archive .ocf-area-chips a:hover { box-shadow: var(--card-shadow-hover); }
.ocf-areas-archive .ocf-area-chips a:hover .ocf-area-arrow { transform: translateX(3px); }
html[data-theme="dark"] .ocf-areas-archive .ocf-area-chips a { background: var(--ocf-bg-alt); }

@media (max-width: 1023px) { .ocf-areas-archive .ocf-area-chips { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .ocf-areas-archive .ocf-area-chips { grid-template-columns: 1fr; } .ocf-area-pinbox { width: 60px; } }