/* ==========================================================================
   Service detail (service-details.php) — design/reference/03-service-detail.png
   Page-only rules; shared pieces come from components.css. Tokens only.
   ========================================================================== */

/* ---------- Hero ---------- */
.sd-hero { min-height: clamp(380px, 28vw + 220px, 560px); }
.sd-hero .ab-title br + .ab-accent { display: inline-block; }
.sd-hero .ab-lead { max-width: 52ch; }
.sd-hero .ab-btn-row { margin-top: .5rem; }

/* ---------- Why choose + feature cards ---------- */
.sd-why__list { margin-top: 1.75rem; }
.sd-features {
    display: grid; gap: 20px;
    grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 576px) { .sd-features { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1200px) { .sd-features { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.sd-feature { display: flex; flex-direction: column; gap: .5rem; height: 100%; }
.sd-feature .ab-icon-badge { --_s: 48px; margin-bottom: .5rem; }
.sd-feature .ab-card__title { font-size: 1rem; }
.sd-feature .ab-card__text { margin: 0; }

/* ---------- Datasheet ---------- */
.sd-datasheet { margin-top: 1.5rem; box-shadow: var(--ab-shadow-sm); }
.sd-datasheet .ab-table th { width: 42%; font-weight: 600; color: var(--ab-dark); background: var(--ab-gray-1); }
.sd-datasheet .ab-table td { color: var(--ab-text); font-weight: 500; }
.sd-datasheet__label { display: inline-flex; align-items: center; gap: .65rem; }
.sd-datasheet__label i {
    display: inline-grid; place-items: center; flex: none;
    width: 32px; height: 32px; border-radius: 50%;
    background: var(--ab-primary-50); color: var(--ab-primary); font-size: .95rem;
}
@media (max-width: 575.98px) {
    .sd-datasheet .ab-table :is(th, td) { display: block; width: auto; }
    .sd-datasheet .ab-table th { border-bottom: 0; padding-bottom: 6px; }
    .sd-datasheet .ab-table td { padding-top: 6px; padding-left: calc(16px + 32px + .65rem); background: var(--ab-gray-1); }
}

.sd-stats {
    display: grid; gap: 16px; margin: 1.5rem 0 0;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}
.sd-stat {
    display: flex; flex-direction: column-reverse; gap: .25rem;
    padding: 20px; border-radius: var(--ab-radius);
    background: var(--ab-dark-2); color: var(--ab-white);
}
.sd-stat__value { margin: 0; font: 700 2rem/1.1 var(--ab-font); color: var(--ab-white); }
.sd-stat__value small { font-size: .55em; font-weight: 600; color: var(--ab-primary-300); }
.sd-stat__label { font: var(--ab-small); color: rgba(255, 255, 255, .78); font-weight: 500; }

.sd-blocks { display: grid; gap: 20px; }
.sd-block .ab-card__title { margin-bottom: .75rem; }
.sd-block p { font: var(--ab-small); color: var(--ab-text-soft); margin: 0 0 .75rem; }
.sd-block p:last-child { margin-bottom: 0; }

.sd-photo { position: relative; margin: 0; border-radius: var(--ab-radius-lg); overflow: hidden; box-shadow: var(--ab-shadow-lg); background: var(--ab-primary-50); }
.sd-photo img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.sd-photo__tag {
    position: absolute; left: 16px; right: 16px; bottom: 16px;
    display: flex; align-items: center; gap: .85rem;
    padding: 14px 16px; border-radius: var(--ab-radius);
    background: var(--ab-white); box-shadow: var(--ab-shadow);
}
.sd-photo__tag .ab-icon-badge { --_s: 44px; }
.sd-photo__tag strong { display: block; font: var(--ab-h4); font-size: 1rem; color: var(--ab-dark); }
.sd-photo__tag span > span { display: block; font: var(--ab-small); font-size: .8125rem; color: var(--ab-text-muted); }

/* ---------- Process band ---------- */
.sd-process {
    position: relative; isolation: isolate; overflow: hidden;
    padding-block: var(--ab-section-y);
    background: var(--ab-primary-50);
}
.sd-process__bg { display: none; }
@media (min-width: 992px) {
    .sd-process__bg { display: block; position: absolute; inset: 0 0 0 56%; z-index: -1; }
    .sd-process__bg img { width: 100%; height: 100%; object-fit: cover; display: block; }
    .sd-process__bg::before {
        content: ""; position: absolute; z-index: 1; inset: 0 auto 0 -1px; width: 38%;
        background: var(--ab-primary-50);
        border-radius: 0 0 100% 0 / 0 0 100% 0;
    }
    .sd-process__bg::after { content: ""; position: absolute; inset: 0; background: rgba(11, 16, 51, .25); }
}
.sd-process__main .ab-lead { max-width: 56ch; }
.sd-steps { margin-top: 2rem; }
.sd-steps .ab-step { flex-direction: row; flex-wrap: wrap; align-items: center; align-content: flex-start; text-align: left; gap: .5rem .6rem; }
.sd-steps .ab-step__num {
    order: -1; margin: 0; padding: 0; display: inline-grid; place-items: center;
    width: 28px; height: 28px; border-radius: 50%;
    background: var(--ab-primary); color: var(--ab-white); letter-spacing: 0; font-size: .8125rem;
}
.sd-steps .ab-step__icon { width: 52px; height: 52px; font-size: 1.25rem; }
.sd-steps .ab-step__title { flex-basis: 100%; font-size: 1rem; margin-top: .5rem; }
.sd-steps .ab-step__text { flex-basis: 100%; font-size: .8125rem; }
@media (min-width: 768px) {
    .sd-steps { gap: 20px; }
    .sd-steps .ab-step + .ab-step::before { display: none; }
}

.sd-help {
    padding: 32px; border-radius: var(--ab-radius-lg);
    background: var(--ab-dark-2); color: rgba(255, 255, 255, .85);
    box-shadow: var(--ab-shadow-lg);
}
.sd-help__head { display: flex; align-items: center; gap: .85rem; margin-bottom: .85rem; }
.sd-help__head i { font-size: 2rem; line-height: 1; color: var(--ab-white); }
.sd-help h3 { font: var(--ab-h3); font-size: 1.25rem; color: var(--ab-white); margin: 0; }
.sd-help p { margin: 0 0 1.5rem; }
.sd-help .ab-btn { white-space: normal; }

/* ---------- Related ---------- */
.sd-related .ab-card__media img { aspect-ratio: 16 / 10; }