/*
 * Services hub
 */

.service-list {
    padding: var(--space-section-sm) 0 var(--space-section);
}

.service-list__wrp {
    display: flex;
    flex-direction: column;
    gap: 96px;
}

.service-row {
    display: flex;
    flex-direction: column;
    gap: 24px;
    padding-left: var(--content-indent);
}

.service-row__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 40px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--color-line);
}

.service-row__title { max-width: 760px; }

.service-row__link { transition: color var(--transition); }
.service-row__link:hover { color: var(--color-primary); }

.service-row__actions {
    flex: none;
    display: flex;
    align-items: center;
    gap: 16px;
    padding-top: 6px;
}

.service-row__body {
    display: flex;
    align-items: flex-start;
    gap: 40px;
}

.service-row__excerpt {
    flex: none;
    width: 380px;
    font-size: 18px;
    line-height: 1.45;
    color: var(--color-text-secondary);
}

.service-row__features {
    flex: 1;
}

.service-row__price {
    flex: none;
    min-width: 200px;
    font-size: var(--fs-h3);
    line-height: 1.2;
    text-align: right;
}

/* ═══ Tablet (< 1024px) ═════════════════════════════════════════════════ */
@media (max-width: 1023px) {
    .service-list__wrp { gap: 64px; }

    /* Rows line up with the container, like the breadcrumbs and the hero. */
    .service-row { padding-left: 0; }

    /* Three columns get cramped here, so the description takes its own line. */
    .service-row__body {
        flex-wrap: wrap;
        gap: 20px 40px;
    }

    .service-row__excerpt {
        flex: 1 1 100%;
        width: auto;
        max-width: 560px;
        font-size: 17px;
    }

    .service-row__features { flex: 1 1 auto; }
    .service-row__price { min-width: 0; }
}

/* ═══ Phone (< 768px) ═══════════════════════════════════════════════════ */
@media (max-width: 767px) {
    .service-list__wrp { gap: 48px; }
    .service-row { padding-left: 0; gap: 16px; }

    .service-row__head {
        flex-direction: column;
        align-items: flex-start;
        gap: 16px;
    }

    .service-row__actions { padding-top: 0; }
    .service-row__actions .btn { min-width: 0; }

    .service-row__body {
        flex-direction: column;
        gap: 16px;
    }

    .service-row__excerpt {
        width: auto;
        font-size: var(--fs-body);
    }

    .service-row__price {
        min-width: 0;
        font-size: var(--fs-h3);
        text-align: left;
    }
}