.ocf-home-routing { background: var(--ocf-bg-alt); }
.ocf-home-routing__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--grid-gap); }
.ocf-home-routing__card { display: flex; flex-direction: column; overflow: hidden; border: var(--card-border-width) solid var(--card-border-color); border-radius: var(--card-radius-lg); background: var(--ocf-bg); box-shadow: var(--card-shadow); }
.ocf-home-routing__media { aspect-ratio: 4 / 3; overflow: hidden; background: var(--ocf-bg-alt); }
.ocf-home-routing__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 260ms var(--ease); }
.ocf-home-routing__body { display: flex; flex: 1; flex-direction: column; align-items: flex-start; padding: clamp(1.25rem, 2vw, 1.75rem); }
.ocf-home-routing__icon { display: inline-grid; place-items: center; width: 2rem; height: 2rem; margin-bottom: 1rem; border-radius: 50%; background: color-mix(in srgb, var(--ocf-primary) 12%, transparent); color: var(--ocf-primary); font-size: var(--font-label-size); font-weight: var(--font-weight-bold); }
.ocf-home-routing__card h3 { margin: 0; color: var(--ocf-heading); font-family: var(--ocf-font-heading), system-ui, sans-serif; font-size: var(--font-h3-size); line-height: 1.2; }
.ocf-home-routing__card p { margin: .8rem 0 1.4rem; color: var(--ocf-body); font-size: var(--font-label-size); line-height: 1.6; }
.ocf-home-routing__card .btn-secondary { margin-top: auto; }
@media (hover: hover) and (pointer: fine) { .ocf-home-routing__card:hover { border-color: color-mix(in srgb, var(--ocf-primary) 30%, var(--card-border-color)); box-shadow: var(--card-shadow-hover); transform: var(--card-transform-hover); } .ocf-home-routing__card:hover .ocf-home-routing__media img { transform: scale(1.03); } }
@media (max-width: 900px) { .ocf-home-routing__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .ocf-home-routing__grid { grid-template-columns: 1fr; } }