/* ─── Aspen services ───
 * Photo cards with no frame: a rounded photo, the title in display type, a short summary and a "Learn more" link.
 * Three across (two on tablets, one on phones). The home section is a slider with the same per-frame counts; the
 * archive keeps the grid.
 */
.ocf-svc-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--ocf-grid-gap);
}

.ocf-svc-card {
    display: flex;
    flex-direction: column;
    gap: 14px;
    min-width: 0;
    color: var(--ocf-body);
    text-align: left;
}

.ocf-svc-card-media {
    display: block;
    height: var(--ocf-service-image-height);
    margin-bottom: 10px;
    overflow: hidden;
    border-radius: var(--image-radius);
    background: var(--aspen-bg-alt);
}

.ocf-svc-card-img { width: 100%; height: 100%; object-fit: cover; }

.ocf-svc-card-body { display: flex; flex-direction: column; gap: 14px; }
.ocf-svc-card h3 { margin: 0; }
.ocf-svc-card-text { display: block; font-size: 16px; line-height: 1.6; }
.ocf-svc-card:hover h3 { color: var(--ocf-link); }

/* Home slider: the shared [data-ocf-slider] reads --slider-per-view from the track. */
.ocf-svc-viewport {
    overflow: hidden;
    overflow: clip; /* no programmatic scroll when a card gets focus */
}

.ocf-svc-track {
    --slider-per-view: 3;
    display: flex;
    gap: var(--ocf-grid-gap);
    transition: transform calc(var(--duration) * 2) var(--ease);
}

.ocf-svc-track > .ocf-svc-card {
    flex: 0 0 calc((100% - var(--ocf-grid-gap) * (var(--slider-per-view) - 1)) / var(--slider-per-view));
}

.ocf-slider-foot {
    display: flex;
    justify-content: center;
    gap: 12px;
    margin-top: 36px;
}

.ocf-slider-foot[hidden] { display: none; }

@media (max-width: 1023px) {
    .ocf-svc-track { --slider-per-view: 2; }
    .ocf-svc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .ocf-svc-card-media { height: 240px; }
}

@media (max-width: 640px) {
    .ocf-svc-track { --slider-per-view: 1; }
    .ocf-svc-grid { grid-template-columns: 1fr; }
    .ocf-svc-card-media { height: 220px; }
}