/*=========================================================
HOME - SERVICES
=========================================================*/

.home_services
{
    padding:var(--space_3xl) 0;

    background:var(--aob-black);

    border-bottom:1px solid var(--aob-gold);
}


/*=========================================================
SERVICES HEADER
=========================================================*/

.home_services_header
{
    width:100%;
    max-width:54rem;

    margin:0 auto var(--space_2xl);

    text-align:center;
}

.home_services_header h2
{
    margin:0;

    color:var(--aob-soft-white);

    font-family:var(--font_display);
    font-size:clamp(2.75rem,11vw,4.75rem);
    font-weight:500;
    letter-spacing:-0.025em;
    line-height:0.95;
}

.home_services_intro
{
    max-width:42rem;

    margin:1rem auto 0;

    color:rgba(247,243,237,0.82);

    font-size:14px;
    line-height:1.7;
}


/*=========================================================
SERVICES GRID
=========================================================*/

.home_services_grid
{
    display:grid;

    grid-template-columns:1fr;

    gap:1rem;
}


/*=========================================================
SERVICE CARD
=========================================================*/

.home_services_card
{
    position:relative;

    min-height:17rem;

    overflow:hidden;

    background:var(--aob-black);

    border:1px solid rgba(184,138,79,0.7);

    box-shadow:
        0 1.25rem 2.75rem rgba(25,18,12,0.2),
        0 0.3rem 0.85rem rgba(25,18,12,0.14);

    isolation:isolate;
}

.home_services_card img
{
    position:absolute;

    inset:0;

    z-index:-2;

    display:block;

    width:100%;
    height:100%;

    object-fit:cover;
    object-position:center;

    transition:
        filter 450ms ease,
        transform 600ms ease;
}

.home_services_overlay
{
    position:absolute;

    inset:0;

    z-index:-1;

    background:
        linear-gradient(
            180deg,
            rgba(0,0,0,0.12) 0%,
            rgba(0,0,0,0.36) 38%,
            rgba(0,0,0,0.9) 100%
        );
}


/*=========================================================
SERVICE CARD CONTENT
=========================================================*/

.home_services_card_content
{
    position:absolute;
    inset:0;

    display:flex;

    box-sizing:border-box;

    padding:1.5rem;

    flex-direction:column;
    align-items:center;
    justify-content:flex-end;

    text-align:center;
}

.home_services_card h3
{
    margin:0;

    color:var(--aob-soft-white);

    font-family:var(--font_display);
    font-size:clamp(2rem,9vw,3rem);
    font-weight:500;
    letter-spacing:-0.02em;
    line-height:0.95;
    text-transform:uppercase;
}

.home_services_card h3 span
{
    display:block;

    margin-top:0.1rem;

    color:var(--aob-champagne-gold);

    font-family:var(--font_script);
    font-size:0.88em;
    font-weight:400;
    text-transform:none;
}

.home_services_card p
{
    max-width:22rem;

    margin:0.8rem auto 1.1rem;

    color:rgba(247,243,237,0.9);

    font-size:0.95rem;
    line-height:1.5;
}


/*=========================================================
SERVICE BUTTON
=========================================================*/

.home_services_button
{
    display:inline-flex;

    margin-top:auto;

    min-width:8.75rem;
    min-height:2.8rem;

    padding:0.65rem 1.2rem;

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

    border:1px solid var(--aob-gold);

    color:var(--aob-champagne-gold);

    font-size:0.7rem;
    font-weight:700;
    letter-spacing:0.2em;
    line-height:1;
    text-align:center;
    text-transform:uppercase;

    transition:
        background-color 220ms ease,
        border-color 220ms ease,
        color 220ms ease;
}

.home_services_button:hover,
.home_services_button:focus-visible
{
    background:var(--aob-gold);
    border-color:var(--aob-champagne-gold);
    color:var(--aob-black);
}


/*=========================================================
STANDARD MOBILE - TWO COLUMNS
=========================================================*/

@media (min-width:30rem)
{
    .home_services_grid
    {
        grid-template-columns:repeat(2,minmax(0,1fr));
    }

    .home_services_card
    {
        min-height:16rem;
    }

    .home_services_card_content
    {
        padding:1.25rem;
    }

    .home_services_card h3
    {
        font-size:clamp(1.65rem,5vw,2.35rem);
    }
}


/*=========================================================
TABLET
=========================================================*/

@media (min-width:48rem)
{
    .home_services
    {
        padding:var(--space_4xl) 0;
    }

    .home_services_grid
    {
        gap:1.25rem;
    }

    .home_services_card
    {
        min-height:19rem;
    }

    .home_services_card_content
    {
        padding:1.75rem;
    }
}


/*=========================================================
DESKTOP
=========================================================*/

@media (min-width:68rem)
{
    .home_services_grid
    {
        grid-template-columns:repeat(2,minmax(0,1fr));

        gap:1.5rem;
    }

    .home_services_card
    {
        min-height:23rem;
    }

    .home_services_card_content
    {
        padding:2rem;
    }

    .home_services_card h3
    {
        font-size:3.1rem;
    }

    .home_services_card p
    {
        font-size:14px;
    }
}


/*=========================================================
LARGE DESKTOP
=========================================================*/

@media (min-width:90rem)
{
    .home_services_card
    {
        min-height:25rem;
    }
}


/*=========================================================
HOVER - POINTER DEVICES ONLY
=========================================================*/

@media (hover:hover) and (pointer:fine)
{
    .home_services_card:hover img
    {
        filter:brightness(1.04);
        transform:scale(1.035);
    }
}


/*=========================================================
SMALL MOBILE
=========================================================*/

@media (max-width:29.99rem)
{
    .home_services
    {
        padding:var(--space_2xl) 0;
    }

    .home_services_header
    {
        margin-bottom:var(--space_xl);
    }

    .home_services_header h2
    {
        font-size:clamp(2.6rem,13vw,3.6rem);
    }
}


/*=========================================================
REDUCED MOTION
=========================================================*/

@media (prefers-reduced-motion:reduce)
{
    .home_services_card img,
    .home_services_button
    {
        transition:none;
    }

    .home_services_card:hover img
    {
        filter:none;
        transform:none;
    }
}