/* Category listing: tabs, featured post, grid */
.oms-tabs {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    margin: 0 0 clamp(20px, 3vw, 30px);
}
.oms-tabs__a {
    display: inline-flex; align-items: center; gap: 8px;
    min-height: 42px;
    padding: 8px 16px;
    border-radius: 99px;
    background: #fff;
    color: var(--oms-ink);
    font-size: 15px;
    font-weight: 500;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
    transition: background-color 0.2s ease, color 0.2s ease;
}
.oms-tabs__count {
    display: inline-grid; place-items: center;
    min-width: 24px; height: 22px; padding: 0 7px;
    border-radius: 99px;
    background: var(--oms-pale);
    color: var(--oms-cyan-ink);
    font-size: 12.5px; font-weight: 700;
}
.oms-tabs__a.is-current { background: var(--oms-slate); color: #fff; }
.oms-tabs__a.is-current .oms-tabs__count { background: var(--oms-cyan); color: #053b3d; }
@media (hover: hover) { .oms-tabs__a:not(.is-current):hover { background: var(--oms-cyan); color: #053b3d; } }

@media (max-width: 640px) {
    /* One scrollable row instead of four wrapped pills (gotcha #27: end padding via max-content) */
    .oms-tabs { flex-wrap: nowrap; justify-content: flex-start; overflow-x: auto; margin-left: -18px; margin-right: -18px; padding: 2px 18px 6px; scroll-padding-inline: 18px; scrollbar-width: none; }
    .oms-tabs::-webkit-scrollbar { display: none; }
    .oms-tabs__a { flex: none; }
    .oms-tabs::after { content: ""; flex: none; width: 1px; }
}

.oms-feature {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
    margin-bottom: clamp(18px, 2.4vw, 28px);
    background: #fff;
    border-radius: var(--oms-radius-sm);
    box-shadow: var(--oms-shadow-sm);
    overflow: hidden;
}
.oms-feature__media { display: block; min-height: 100%; background: #dfeff0; }
.oms-feature__media img { width: 100%; height: 100%; min-height: 320px; object-fit: cover; display: block; }
.oms-feature__body { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; padding: clamp(22px, 3vw, 40px); }
.oms-feature__title { margin: 0; font-size: clamp(22px, 2.4vw, 30px); line-height: 1.25; }
.oms-feature__title a { color: var(--oms-ink); }
@media (hover: hover) { .oms-feature__title a:hover { color: var(--oms-cyan-ink); } }
.oms-feature__date { display: flex; align-items: center; gap: 8px; margin: 0; color: #7c858b; font-size: 14px; }
.oms-feature__date svg { width: 15px; height: 15px; }
.oms-feature__excerpt { margin: 0 0 8px; color: var(--oms-ink-soft); font-size: 16px; line-height: 1.65; }

@media (max-width: 900px) {
    .oms-feature { grid-template-columns: minmax(0, 1fr); }
    .oms-feature__media img { min-height: 0; aspect-ratio: 16 / 10; }
}