/* ==========================================================================
   Services listing page (services.php) — design/reference/02-services.png
   Sections: services_grid layout "wide" (.svc-offer / .svc-card),
   service_spotlight (.svc-spot), why_split (.svc-why).
   Tokens only (assets/css/tokens.css); shared classes from components.css.
   ========================================================================== */

/* ---------- What we offer: 2-column horizontal cards ---------- */
.svc-offer__grid {
    list-style: none; margin: 0; padding: 0;
    display: grid; gap: 24px;
    grid-template-columns: minmax(0, 1fr);
}
.svc-offer__grid > li { display: flex; min-width: 0; }
@media (min-width: 992px) {
    .svc-offer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.svc-card {
    position: relative; flex: 1; min-width: 0;
    display: grid; grid-template-columns: minmax(0, 1fr);
    background: var(--ab-white);
    border: 1px solid var(--ab-gray-2); border-radius: var(--ab-radius);
    box-shadow: var(--ab-shadow-sm); overflow: hidden;
    transition: transform .25s var(--ab-ease), box-shadow .25s var(--ab-ease), border-color .25s var(--ab-ease);
}
.svc-card:hover { transform: translateY(-3px); box-shadow: var(--ab-shadow-lg); border-color: var(--ab-primary-100); }

.svc-card__media { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: var(--ab-primary-50); }
.svc-card__media picture, .svc-card__media img { display: block; width: 100%; height: 100%; }
.svc-card__media img { object-fit: cover; transition: transform .5s var(--ab-ease); }
.svc-card:hover .svc-card__media img { transform: scale(1.04); }
.svc-card__flag { position: absolute; top: 12px; left: 12px; box-shadow: var(--ab-shadow); }

.svc-card__body { display: flex; flex-direction: column; align-items: flex-start; gap: .35rem; padding: 20px 22px 22px; }
.svc-card__icon { margin-bottom: .45rem; }
.svc-card__title { font: var(--ab-h4); font-size: 1.1875rem; color: var(--ab-dark); margin: 0; letter-spacing: -0.01em; }
.svc-card__title a { color: inherit; text-decoration: none; }
.svc-card__title a:hover { color: var(--ab-primary); }
/* Whole card clickable; the visible arrow link stays on top for focus. */
.svc-card__title a::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.svc-card__meta { font: var(--ab-caption); font-size: .78rem; color: var(--ab-text-muted); margin: 0; }
.svc-card__text { font: var(--ab-small); color: var(--ab-text-soft); margin: .35rem 0 .6rem; }
.svc-card__link { position: relative; z-index: 2; margin-top: auto; font-size: .875rem; }

.svc-card--flagship { border-color: var(--ab-primary-100); box-shadow: 0 0 0 1px var(--ab-primary-100), var(--ab-shadow); }
.svc-card--flagship .svc-card__icon { background: var(--ab-primary); color: var(--ab-white); }

@media (min-width: 576px) {
    .svc-card { grid-template-columns: minmax(0, 46%) minmax(0, 1fr); }
    .svc-card__media { aspect-ratio: auto; min-height: 220px; }
    .svc-card__media picture { position: absolute; inset: 0; }
}
@media (min-width: 992px) and (max-width: 1199.98px) {
    .svc-card { grid-template-columns: minmax(0, 42%) minmax(0, 1fr); }
    .svc-card__body { padding: 18px; }
}

/* ---------- Flagship spotlight (dark band) ---------- */
.svc-spot__list { grid-template-columns: minmax(0, 1fr); margin-bottom: 2rem; }
@media (min-width: 576px) {
    .svc-spot__list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .9rem 1.5rem; }
}
.svc-spot__list li { font-size: .9375rem; }
.svc-spot__media { position: relative; margin: 0 0 28px; }
.svc-spot__media img {
    display: block; width: 100%; height: auto; max-height: 520px; object-fit: cover;
    border-radius: var(--ab-radius-lg); box-shadow: var(--ab-shadow-lg);
    background: rgba(255, 255, 255, .06);
}
.svc-spot__illust { border-radius: var(--ab-radius-lg); background: rgba(255, 255, 255, .06); padding: 24px; }
.svc-spot__badge {
    position: absolute; left: 20px; bottom: -24px;
    display: flex; align-items: center; gap: .75rem;
    padding: 12px 18px 12px 12px;
    background: var(--ab-white); color: var(--ab-text-soft);
    border-radius: var(--ab-radius); box-shadow: var(--ab-shadow-lg);
    font: var(--ab-small); max-width: calc(100% - 40px);
}
.svc-spot__badge strong { display: block; color: var(--ab-dark); font-weight: 700; }
.svc-spot__badge span > span { display: block; font-size: .8125rem; color: var(--ab-text-muted); }

/* ---------- Why choose us: heading left, icon columns right ---------- */
.svc-why .ab-lead { font-size: 1rem; }
.svc-why__cta { margin-top: .5rem; }
.svc-why__features { list-style: none; margin: 0; padding: 0; }
.svc-why .ab-feature { padding: 20px 16px; }
.svc-why .ab-feature__title { font-size: 1rem; }
.svc-why .ab-feature__text { font-size: .8125rem; }
@media (min-width: 992px) {
    .svc-why .ab-feature { padding-block: 8px; }
}

@media (prefers-reduced-motion: reduce) {
    .svc-card, .svc-card__media img { transition: none; }
    .svc-card:hover { transform: none; }
    .svc-card:hover .svc-card__media img { transform: none; }
}