﻿/* MonochromeA / Dominion - Our Services (Side-by-Side)
   Fonts, sizes, and weights matched to ThemeAbout ("About Our Firm").
   Scope: #themesidebysidefeatures.monoA-services-section
*/

#themesidebysidefeatures.monoA-services-section {
    padding: 4rem 1.5rem;
    background: var(--section-bg-1, #EFF0F2);
    color: var(--primary-color, #1b2b4c);
    font-family: 'Segoe UI', sans-serif; /* match About section base font */
}

    /* Container */
    #themesidebysidefeatures.monoA-services-section .monoA-services-container {
        max-width: 1140px;
        margin: 0 auto;
    }

    /* ===== Header / Title ===== */

    #themesidebysidefeatures.monoA-services-section .monoA-services-header {
        text-align: center;
        margin-bottom: 2.75rem;
    }

    /* Match .about-title exactly in feel */
    #themesidebysidefeatures.monoA-services-section .monoA-services-title {
        font-family: 'Segoe UI', sans-serif; /* same family as About */
        font-size: 2rem; /* same size as .about-title */
        font-weight: 700; /* equivalent to h2 bold */
        letter-spacing: 0.02em;
        color: #2C3E50; /* same color as .about-title */
        margin: 0 0 1rem 0;
    }

    /* Subtitle under "Our Services" – match .about-body typography */
    #themesidebysidefeatures.monoA-services-section .monoA-services-subtitle {
        font-family: 'Segoe UI', sans-serif; /* same as .about-body (inherits) */
        font-size: 1.125rem; /* same as .about-body */
        line-height: 1.75; /* same as .about-body */
        color: #555; /* same as .about-body */
        margin: 0 auto;
        max-width: 640px;
        text-align: center;
    }

    /* ===== Grid / Rows ===== */

    #themesidebysidefeatures.monoA-services-section .monoA-services-grid {
        display: flex;
        flex-direction: column;
        gap: 3rem;
    }

    #themesidebysidefeatures.monoA-services-section .monoA-services-row {
        display: grid;
        grid-template-columns: minmax(260px, 1.05fr) minmax(260px, 1fr);
        align-items: center;
        column-gap: 2.75rem;
    }

    #themesidebysidefeatures.monoA-services-section .monoA-services-row--reverse {
        grid-template-columns: minmax(260px, 1fr) minmax(260px, 1.05fr);
    }

        /* Maintain alternating layout via order, but ONLY within this section */
        #themesidebysidefeatures.monoA-services-section .monoA-services-row--reverse .monoA-services-text {
            order: 2;
        }

        #themesidebysidefeatures.monoA-services-section .monoA-services-row--reverse .monoA-services-image-wrapper {
            order: 1;
        }

    /* ===== Text Blocks ===== */

    #themesidebysidefeatures.monoA-services-section .monoA-services-text {
        font-family: 'Segoe UI', sans-serif; /* match About text */
    }

    /* Per-row headings – slightly stronger than body but same base size */
    #themesidebysidefeatures.monoA-services-section .monoA-services-item-title {
        font-family: 'Segoe UI', sans-serif;
        font-size: 1.125rem; /* same as .about-body */
        font-weight: 700; /* a bit stronger than body */
        letter-spacing: 0.01em;
        color: #2C3E50; /* same color as title for consistency */
        margin: 0 0 0.45rem 0;
    }

    /* Per-row body copy – match .about-body exactly */
    #themesidebysidefeatures.monoA-services-section .monoA-services-item-body {
        font-family: 'Segoe UI', sans-serif;
        font-size: 1.125rem; /* same as .about-body */
        line-height: 1.75; /* same as .about-body */
        color: #555; /* same as .about-body */
        margin: 0;
    }

    /* ===== Image block – uniform card, NO offset, NO pseudo-layers ===== */

    #themesidebysidefeatures.monoA-services-section .monoA-services-image-wrapper {
        position: relative;
        width: 100%;
        max-width: 420px;
        margin: 0 auto; /* centered, no left/right offset */
        border-radius: 24px;
        overflow: hidden;
        box-shadow: 0 18px 40px rgba(0, 0, 0, 0.16);
        background: #000; /* fully covered by the image */
        aspect-ratio: 16 / 11; /* uniform card size for all images */
        padding: 0;
    }

    #themesidebysidefeatures.monoA-services-section .monoA-services-image {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover; /* fill the card, no bands */
        margin: 0;
        border: 0;
    }

    /* No pseudo-elements – nothing to create a plate/offset */
    #themesidebysidefeatures.monoA-services-section .monoA-services-image-wrapper::before,
    #themesidebysidefeatures.monoA-services-section .monoA-services-image-wrapper::after {
        content: none;
    }

/* ===== Responsive ===== */

@media (max-width: 900px) {
    #themesidebysidefeatures.monoA-services-section {
        padding: 3rem 1.25rem;
    }

        #themesidebysidefeatures.monoA-services-section .monoA-services-row {
            grid-template-columns: 1fr;
            row-gap: 1.75rem;
        }

        /* On mobile, stack text then image consistently */
        #themesidebysidefeatures.monoA-services-section .monoA-services-row--reverse .monoA-services-text,
        #themesidebysidefeatures.monoA-services-section .monoA-services-row--reverse .monoA-services-image-wrapper {
            order: initial;
        }

        #themesidebysidefeatures.monoA-services-section .monoA-services-image-wrapper {
            max-width: 100%;
        }
}

@media (max-width: 600px) {
    #themesidebysidefeatures.monoA-services-section {
        padding: 2.5rem 1.1rem;
    }

        #themesidebysidefeatures.monoA-services-section .monoA-services-title {
            font-size: 1.7rem;
        }
}
