/* Services: rounded cards pressed onto a primary shadow — photo, centered primary title, short description and a
 * small pressed button on a pale body. */
.ocf-svc-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: calc(var(--ocf-grid-gap) * 1.333); padding-bottom: var(--cardiff-press); }

.ocf-svc-card {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border: var(--card-border-width) solid var(--ocf-border);
    border-radius: var(--card-radius);
    background: var(--ocf-bg);
    box-shadow: var(--card-shadow);
    color: var(--ocf-body);
}

.ocf-svc-card-img { width: 100%; height: var(--ocf-service-image-height); object-fit: cover; }

.ocf-svc-card-body {
    display: flex;
    flex: 1;
    flex-direction: column;
    align-items: center;
    gap: calc(var(--ocf-space-unit) * 0.75);
    min-height: var(--ocf-service-card-body-height);
    padding: calc(var(--ocf-space-unit) * 1.75) calc(var(--ocf-space-unit) * 1.75) calc(var(--ocf-space-unit) * 2);
    background: color-mix(in srgb, var(--ocf-bg-alt) 45%, var(--ocf-bg));
    text-align: center;
}

.ocf-svc-card-body h3 { color: var(--ocf-link); font-size: calc(var(--font-h3-size) * 0.96); }

.ocf-svc-card-body p {
    color: var(--ocf-body);
    font-size: calc(var(--font-body-size) * 0.889);
    line-height: 1.625;
}

/* The card is the link; this is its pressed button. */
.ocf-svc-card-btn {
    display: inline-flex;
    align-items: center;
    margin-top: auto;
    padding: calc(var(--ocf-space-unit) * 0.625) calc(var(--ocf-space-unit) * 1.125);
    border: var(--button-border-width) solid var(--cardiff-ink);
    border-radius: var(--button-radius);
    background: var(--ocf-primary);
    box-shadow: 0 calc(var(--cardiff-press) - 1px) 0 var(--cardiff-ink);
    color: var(--ocf-primary-contrast);
    font-family: var(--ocf-font-heading), system-ui, sans-serif;
    font-size: calc(var(--cardiff-label-size) * 0.85);
    font-weight: 800;
    letter-spacing: var(--cardiff-label-tracking);
    line-height: 1.1;
    text-transform: uppercase;
    transition: transform var(--duration) var(--ease), box-shadow var(--duration) var(--ease);
}

.ocf-svc-card:hover .ocf-svc-card-btn { transform: translateY(2px); box-shadow: 0 2px 0 var(--cardiff-ink); }


.ocf-services-archive { background: var(--cardiff-bg-alt); }

/* Archive help bar: a pressed card in the secondary (contrast) color (ink outline + hard shadow) with a light call button. */
.ocf-catalog-help {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: calc(var(--ocf-grid-gap) * 0.75);
    margin-bottom: calc(var(--ocf-grid-gap) * 1.5);
    padding: calc(var(--ocf-grid-gap) * 0.75) calc(var(--ocf-grid-gap) * 0.75) calc(var(--ocf-grid-gap) * 0.75) var(--ocf-grid-gap);
    border: var(--button-border-width) solid var(--cardiff-ink);
    border-radius: var(--card-radius);
    background: var(--ocf-secondary);
    box-shadow: 0 calc(var(--cardiff-press) + 1px) 0 var(--cardiff-ink);
    color: var(--ocf-secondary-contrast);
    --ocf-control-accent: var(--cardiff-ink);
    font-weight: var(--font-weight-semibold);
}

.ocf-catalog-help p { margin: 0; }
.ocf-catalog-help .btn-secondary { flex: none; }

@media (max-width: 1000px) { .ocf-svc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

@media (max-width: 600px) {
    .ocf-svc-grid { grid-template-columns: 1fr; }
    .ocf-svc-card-body { min-height: 0; }
    .ocf-catalog-help { flex-direction: column; align-items: stretch; padding: var(--ocf-grid-gap); }
}