/* =========================================================
   SERVICES PAGE
   ========================================================= */


/* =========================================================
   SERVICES HERO
   ========================================================= */

.services-hero {
    padding-top: 20px;

    text-align: left;
}

.services-hero h1 {
    margin: 0 0 18px;

    font-size: clamp(2rem, 4vw, 3rem);
    line-height: 1.15;
}

.services-hero p {
    margin: 0;

    color: #334155;

    font-size: 1.08rem;
    line-height: 1.8;
}

.services-hero strong {
    color: var(--na-color-navy);

    font-weight: 700;
}


/* =========================================================
   SERVICE SECTION — LAYOUT
   ========================================================= */

.service-section__grid {
    display: grid;
    grid-template-columns: 3fr 7fr;
    align-items: center;

    gap: 40px;

    min-height: 460px;
}


/* =========================================================
   SERVICE SECTION — REVERSE LAYOUT
   ========================================================= */

.service-section--reverse .service-section__grid {
    grid-template-columns: 7fr 3fr;
}

.service-section--reverse .service-section__content {
    order: 2;
}

.service-section--reverse .service-section__media {
    order: 1;
}


/* =========================================================
   SERVICE SECTION — HEADER
   ========================================================= */

.service-section--part {
    display: flex;
    align-items: center;

    gap: var(--na-gap-sm);

    margin-bottom: 14px;
}

.service-section h2 {
    margin: 0;

    font-size: 1.6rem;
}


/* =========================================================
   SERVICE SECTION — TITLE ICON
   ========================================================= */

.service-title--icon {
    width: 42px;
    height: 42px;

    display: flex;
    align-items: center;
    justify-content: center;

    flex-shrink: 0;

    color: var(--na-icon-color);
}

.service-title--icon svg {
    display: block;

    width: 42px;
    height: 42px;

    fill: currentColor;
}


/* =========================================================
   SERVICE SECTION — CONTENT
   ========================================================= */

.service-section__content p {
    margin: 0 0 14px;

    text-align: left;
}

.service-section__content ul {
    margin: 0;
    padding-left: 20px;
}

.service-section__content li + li {
    margin-top: 8px;
}


/* =========================================================
   SERVICE SECTION — MEDIA
   ========================================================= */

.service-section__media {
    width: 100%;
    min-height: 560px;

    display: flex;
    align-items: center;
}

.service-section__media img {
    display: block;

    width: 100%;
    max-height: 320px;
    height: auto;

    object-fit: contain;

    border-radius: var(--na-radius-lg);

    box-shadow:
        0 18px 40px rgba(15, 23, 42, 0.12);
}

.service-section__media-placeholder {
    width: 100%;
    min-height: 280px;

    border-radius: var(--na-radius-lg);

    background:
        linear-gradient(
            135deg,
            var(--na-color-slate-200),
            var(--na-color-slate-300)
        );

    box-shadow:
        0 18px 40px rgba(15, 23, 42, 0.12);
}


/* =========================================================
   TRANSITION TEXT
   ========================================================= */

.services-more {
    max-width: 900px;

    margin-left: auto;
    margin-right: auto;

    text-align: center;
}

.services-more p {
    color: var(--na-color-slate-500);

    font-size: 1.3rem;
    letter-spacing: 0.04em;
    line-height: 1.7;
}


/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 768px) {
    .services-hero {
        padding-top: 10px;
    }

    .services-hero p {
        font-size: 1rem;
        line-height: 1.75;
    }

    .service-section__grid,
    .service-section--reverse .service-section__grid {
        grid-template-columns: 1fr;

        gap: 24px;
    }

    .service-section__content {
        grid-row: 1;
    }

    .service-section__media {
        grid-row: 2;
    }

    .service-section--part {
        justify-content: center;

        text-align: left;
    }

    .service-section__content ul {
        padding-left: 18px;
    }

    .service-section__media img,
    .service-section__media-placeholder {
        max-height: 260px;
    }
}