/* ============================================================================
   Services hub page.
   ========================================================================== */

.services-list { margin-top: var(--s-9); gap: var(--s-7); }

.service-row {
    display: flex;
    flex-direction: column;
    height: 100%;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
    transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.service-row:hover { border-color: var(--gold-300); box-shadow: var(--shadow-lg); }

.service-row__media { background: var(--ink-100); }
.service-row__media img { transition: transform var(--dur-slow) var(--ease-out); }
.service-row:hover .service-row__media img { transform: scale(1.03); }

.service-row__number {
    position: absolute;
    right: var(--s-5);
    bottom: var(--s-4);
    font-family: var(--font-display);
    font-size: var(--fs-3xl);
    font-weight: 800;
    line-height: 1;
    color: var(--c-white);
    text-shadow: 0 2px 12px rgba(34, 34, 35, .45);
}

.service-row__body {
    display: flex;
    flex-direction: column;
    flex: 1;
    padding: var(--s-6);
}

.service-row__icon {
    display: grid;
    place-items: center;
    width: 52px;
    height: 52px;
    margin-bottom: var(--s-4);
    color: var(--c-gold);
    background: var(--gold-50);
    border-radius: var(--radius-sm);
    transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.service-row:hover .service-row__icon { background: var(--c-gold); color: var(--c-white); }

.service-row__title { font-size: var(--fs-xl); }
.service-row__title a { transition: color var(--dur) var(--ease); }
.service-row__title a:hover { color: var(--c-gold); }

.service-row__text {
    margin-top: var(--s-3);
    color: var(--text-muted);
}

.service-row__features {
    display: grid;
    gap: var(--s-2);
    margin-top: var(--s-5);
    font-size: var(--fs-sm);
}
.service-row__features li {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: start;
    gap: var(--s-3);
    color: var(--text-muted);
}
.service-row__features .icon { color: var(--c-gold); margin-top: 3px; }

.service-row__cta { margin-top: auto; padding-top: var(--s-6); align-self: flex-start; }

/* ---------------------------------------------------------------- process */
.services-process { margin-top: var(--s-9); }

/* ---------------------------------------------------------------- faqs */
.services-faq {
    display: grid;
    grid-template-columns: 1fr 1.3fr;
    gap: var(--s-9);
    align-items: start;
}

@media (max-width: 1023px) {
    .services-faq { grid-template-columns: 1fr; gap: var(--s-7); }
}

@media (max-width: 767px) {
    /* The heading is also the link to the service page. */
    .service-row__title a { display: inline-block; padding-block: var(--s-1); }
}