/* services.css — services icon cards, process steps, guarantee list. */

/* ─── Services — icon cards + service hero ─────────────────────── */
.service-card {
    text-align: left;
}
.service-card__icon {
    width: 80px;
    height: 80px;
    margin-bottom: var(--space-4);
    display: inline-flex;
}
.service-card__icon .service-icon {
    width: 100%;
    height: 100%;
}

.service-hero {
    padding-block: var(--space-8) var(--space-6);
    background:
        radial-gradient(ellipse 60% 50% at 100% 0%,
            color-mix(in srgb, var(--color-green) 12%, transparent) 0%,
            transparent 60%),
        var(--color-bg);
}
.service-hero__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-5);
    align-items: center;
}
@media (min-width: 768px) {
    .service-hero__grid { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: var(--space-7); }
}
.service-hero__title {
    margin: var(--space-3) 0 var(--space-4);
    max-width: 22ch;
}
.service-hero__icon {
    justify-self: center;
}
.service-hero__icon .service-icon {
    width: 200px;
    height: 200px;
    filter: drop-shadow(0 16px 32px color-mix(in srgb, var(--color-green) 22%, transparent));
}

/* Service hero media — used when admin uploads a photo or gallery. Slots
   into the same grid cell as service-hero__icon, so the SVG-only and photo
   variants stay visually balanced with the copy column. */
.service-hero__media {
    width: 100%;
    max-width: 480px;
    justify-self: center;
}
.service-hero__media--single {
    margin: 0;
    border-radius: var(--radius-lg, 18px);
    overflow: hidden;
    aspect-ratio: 4 / 3;
    box-shadow: var(--shadow-md);
}
.service-hero__media--single img {
    width: 100%; height: 100%; object-fit: cover; display: block;
}

/* Service video block — same 16:9 frame as the About page video. */
.service-video .video-frame {
    position: relative;
    width: 100%;
    max-width: 960px;
    margin-inline: auto;
    aspect-ratio: 16 / 9;
    border-radius: var(--radius-md);
    overflow: hidden;
    background: var(--color-bg-tint);
    box-shadow: var(--shadow-md);
}
.service-video .video-frame iframe,
.service-video .video-frame video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
    object-fit: cover;
}

/* Service cards with photos lose the icon top padding — the photo IS the visual. */
.service-card--has-photo .showcase-frame--card,
.service-card--has-photo > img {
    width: 100%;
    aspect-ratio: 4 / 3;
    overflow: hidden;
}
.service-card--has-photo > img { object-fit: cover; display: block; }

/* ─── Process steps — numbered horizontal list with gold connector ─ */
.process-steps {
    list-style: none;
    padding: 0;
    margin: var(--space-6) 0 0;
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-5);
    counter-reset: step;
}
@media (min-width: 768px) {
    .process-steps {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--space-6);
    }
}
@media (min-width: 1024px) {
    .process-steps { grid-template-columns: repeat(4, 1fr); position: relative; }
    .process-steps::before {
        content: '';
        position: absolute;
        top: 28px;
        left: 12%;
        right: 12%;
        height: 1px;
        background: linear-gradient(90deg,
            transparent 0%,
            color-mix(in srgb, var(--color-gold) 60%, transparent) 8%,
            color-mix(in srgb, var(--color-gold) 60%, transparent) 92%,
            transparent 100%);
        pointer-events: none;
    }
}
.process-step {
    text-align: center;
    position: relative;
}
.process-step__num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: var(--color-bg);
    color: var(--color-green-dark);
    border: 2px solid var(--color-green);
    font-family: var(--font-head);
    font-size: var(--fs-lg);
    font-weight: var(--fw-bold);
    font-variant-numeric: tabular-nums;
    margin-bottom: var(--space-3);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--color-green) 12%, transparent);
}
[data-theme="dark"] .process-step__num {
    color: var(--color-green);
    background: var(--color-bg-soft);
}
.process-step__title {
    font-size: var(--fs-lg);
    margin: 0 0 var(--space-2);
}
.process-step__body {
    color: var(--color-muted);
    font-size: var(--fs-sm);
    margin: 0 auto;
    max-width: 26ch;
}

/* ─── Guarantee list — checkmark-prefixed ──────────────────────── */
.guarantee-list {
    list-style: none;
    padding: 0;
    margin: var(--space-5) 0 0;
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-3);
}
@media (min-width: 768px) {
    .guarantee-list {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--space-4);
    }
}
.guarantee-item {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    padding: var(--space-4);
    background: var(--color-bg-soft);
    border-left: 3px solid var(--color-green);
    border-radius: 0 var(--radius-md) var(--radius-md) 0;
    color: var(--color-ink);
    line-height: 1.5;
}
.guarantee-item__check {
    color: var(--color-green);
    flex-shrink: 0;
    margin-top: 2px;
}