/*
 * Heritage Motorworks — Home
 * Complete Home layout stylesheet
 *
 * Design reference:
 * - restrained editorial layout
 * - 1280px content axis
 * - 4px card radius
 * - 12px grid rhythm
 * - #171a21 anthracite
 * - #18A891 Heritage turquoise
 * - #f1f1ee warm grey
 *
 * Core module markup/CSS is intentionally not rebuilt here.
 * This file only creates the visual environment around it and
 * harmonizes its outer spacing with the rest of the Home page.
 */


/* ==========================================================
   DESIGN TOKENS
   ========================================================== */

:root{
    --hm-home-max:1280px;
    --hm-home-gutter:48px;

    --hm-home-ink:#171a21;
    --hm-home-accent:#18A891;
    --hm-home-warm:#f1f1ee;
    --hm-home-paper:#f7f7f5;
    --hm-home-white:#ffffff;
    --hm-home-muted:#737773;
    --hm-home-line:#e3e5e2;

    --hm-home-radius:4px;
    --hm-home-gap:12px;
}


/* ==========================================================
   GLOBAL HOME RHYTHM
   ========================================================== */

.home{
    background:var(--hm-home-white);
}

.home .site-content{
    padding-top:0;
}

.hm-home-hero,
.hm-intro,
.hm-core,
.hm-home-vehicles{
    box-sizing:border-box;
}

.hm-home-hero__inner,
.hm-intro__container,
.hm-home-vehicles__container{
    width:min(var(--hm-home-max), calc(100% - (var(--hm-home-gutter) * 2)));
    margin-left:auto;
    margin-right:auto;
}


/* ==========================================================
   TYPOGRAPHY / SECTION EYEBROWS
   ========================================================== */

.hm-home-hero__subtitle,
.hm-intro__subtitle,
.hm-home-vehicles__subtitle{
    display:inline-flex;
    align-items:center;
    gap:11px;

    margin:0 0 14px;

    color:var(--hm-home-accent);
    font-size:10px;
    font-weight:700;
    letter-spacing:.18em;
    line-height:1;
    text-transform:uppercase;
}

.hm-home-hero__subtitle::before,
.hm-intro__subtitle::before,
.hm-home-vehicles__subtitle::before{
    content:"";

    width:28px;
    height:1px;

    flex:0 0 28px;

    background:var(--hm-home-accent);
}


/* ==========================================================
   HERO
   Standard Heritage Motorworks Hero Layout
   ========================================================== */

.hm-home-hero{
    position:relative;
    min-height:680px;
    overflow:hidden;
    background:var(--hm-home-ink);
    color:#fff;
}

.hm-home-hero__bg{
    position:absolute;
    inset:0;
    z-index:1;
    overflow:hidden;
}

.hm-home-hero__bg img{
    position:absolute;
    inset:0;

    display:block;
    width:100%;
    height:100%;

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

    opacity:0;
    visibility:hidden;
    z-index:1;

    transition:
        opacity .9s ease,
        visibility .9s ease;
}

.hm-home-hero__bg img.is-active{
    opacity:1;
    visibility:visible;
    z-index:2;
}

@media (prefers-reduced-motion: reduce){

    .hm-home-hero__bg img{
        transition:none;
    }
}

.hm-home-hero__overlay{
    position:absolute;
    inset:0;

    background:
        linear-gradient(
            90deg,
            rgba(10,12,15,.82) 0%,
            rgba(10,12,15,.58) 42%,
            rgba(10,12,15,.16) 76%,
            rgba(10,12,15,.08) 100%
        );
}

.hm-home-hero__inner{
    position:relative;
    z-index:2;

    min-height:680px;

    display:flex;
    align-items:flex-end;

    padding-top:140px;
    padding-bottom:64px;

    box-sizing:border-box;
}

.hm-home-hero__content{
    width:min(760px,100%);
}

.hm-home-hero h1{
    max-width:760px;

    margin:0;

    color:#fff;

    font-size:clamp(48px,5.4vw,76px);
    font-weight:600;
    letter-spacing:-.055em;
    line-height:.94;
}

.hm-home-hero__content > p{
    max-width:650px;

    margin:22px 0 0;

    color:rgba(255,255,255,.78);

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


/* ==========================================================
   INTRO
   White editorial section.
   Same section-header logic as Shop/Core.
   ========================================================== */

.hm-intro{
    background:var(--hm-home-white);
}

.hm-intro__container{
    padding-top:94px;
    padding-bottom:47px;
}

 .hm-intro__intro{
    display:grid;
    grid-template-columns:minmax(0,1.15fr) minmax(300px,.85fr);
    align-items:end;

    column-gap:72px;
    row-gap:0;

    width:100%;
    margin:0;
    text-align:left;
}

.hm-intro__subtitle{
    grid-column:1 / -1;
    margin:0 0 16px;
}

.hm-intro__intro h1{
    grid-column:1;

    max-width:760px;

    margin:0;

    color:var(--hm-home-ink);

    font-size:clamp(38px,4vw,54px);
    font-weight:600;
    letter-spacing:-.045em;
    line-height:1;
}

.hm-intro__intro h3{
    grid-column:1;

    max-width:680px;

    margin:12px 0 0;

    color:var(--hm-home-accent);

    font-size:17px;
    font-weight:600;
    line-height:1.35;
}

.hm-intro__intro > p{
    grid-column:2;
    grid-row:2 / span 2;
    align-self:end;

    width:100%;
    max-width:none;

    margin:0 0 1px;

    color:var(--hm-home-muted);

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


/* ==========================================================
   CORE ENVIRONMENT
   Compact editorial header; core.css remains untouched.
   ========================================================== */

.hm-core.hm-core{
    width:min(var(--hm-home-max), calc(100% - (var(--hm-home-gutter) * 2)));
    margin-left:auto;
    margin-right:auto;

    padding-bottom:95px;

    box-sizing:border-box;
}

.hm-core .hm-core__header,
.hm-core .hm-core__grid{
    width:min(var(--hm-home-max), calc(100% - (var(--hm-home-gutter) * 2)));
    margin-left:auto;
    margin-right:auto;
}

.hm-core .hm-core__header{
    display:grid;
    grid-template-columns:auto minmax(0,1fr);
    align-items:baseline;
    column-gap:28px;
    margin-bottom:38px;
}

.hm-core .hm-core__header-left,
.hm-core .hm-core__header-right{
    min-width:0;
}

.hm-core .hm-core__header-left{
    display:flex;
    align-items:baseline;
}

.hm-core .hm-core__eyebrow{
    color:var(--hm-home-accent);
    font-size:10px;
    font-weight:700;
    letter-spacing:.18em;
    line-height:1;
    text-transform:uppercase;
    white-space:nowrap;
}

.hm-core .hm-core__header-right{
    align-self:baseline;
    padding:0;
}

.hm-core .hm-core__header-right p{
    margin:0;
    color:var(--hm-home-ink);
    font-size:clamp(30px,3.2vw,44px);
    font-weight:600;
    letter-spacing:-.045em;
    line-height:1;
    white-space:nowrap;
}

/* ==========================================================
   VEHICLES
   Clean white section + anthracite information cards.
   ========================================================== */

.hm-home-vehicles{
    background:var(--hm-home-warm);
}

.hm-home-vehicles__container{
    padding-top:94px;
    padding-bottom:100px;
}

.hm-home-vehicles__header{
    display:grid;
    grid-template-columns:minmax(0,1.15fr) minmax(300px,.85fr);
    align-items:end;

    gap:72px;

    margin-bottom:48px;

    text-align:left;
}

.hm-home-vehicles__subtitle{
    grid-column:1 / -1;
    margin-bottom:-48px;
}

.hm-home-vehicles__header h2{
    grid-column:1;

    max-width:760px;

    margin:0;

    color:var(--hm-home-ink);

    font-size:clamp(36px,4vw,54px);
    font-weight:600;
    letter-spacing:-.045em;
    line-height:1;
}

.hm-home-vehicles__grid{
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));

    gap:var(--hm-home-gap);
}

.hm-home-vehicle{
    display:block;

    overflow:hidden;

    border:0;
    border-radius:var(--hm-home-radius);

    background:var(--hm-home-ink);

    color:#fff;
    text-decoration:none;

    transition:transform .28s ease;
}

.hm-home-vehicle:hover{
    transform:translateY(-3px);
}

.hm-home-vehicle__image{
    aspect-ratio:16 / 10;

    overflow:hidden;

    background:var(--hm-home-warm);
}

.hm-home-vehicle__image img{
    display:block;

    width:100%;
    height:100%;

    object-fit:cover;

    transition:transform .45s ease;
}

.hm-home-vehicle:hover .hm-home-vehicle__image img{
    transform:scale(1.025);
}

.hm-home-vehicle__content{
    padding:17px 18px 18px;
}

.hm-home-vehicle__content h3{
    margin:0;

    color:#fff;

    font-size:16px;
    font-weight:600;
    letter-spacing:-.015em;
    line-height:1.25;
}

.hm-home-vehicle__facts{
    display:flex;
    flex-wrap:wrap;

    gap:8px 18px;

    margin-top:11px;
}

.hm-home-vehicle__facts span{
    color:rgba(255,255,255,.58);

    font-size:10px;
    font-weight:500;
    line-height:1.3;
}

.hm-home-vehicle:hover .hm-home-vehicle__facts span{
    color:rgba(255,255,255,.72);
}

.hm-home-vehicles__footer{
    display:flex;
    justify-content:flex-end;

    margin-top:22px;
}

.hm-home-vehicles__button{
    display:inline-flex;
    align-items:center;
    gap:10px;

    min-height:auto;

    padding:0;

    border:0;
    border-radius:0;

    background:transparent;

    color:var(--hm-home-ink);

    font-size:10px;
    font-weight:700;
    letter-spacing:.14em;
    line-height:1.2;
    text-decoration:none;
}

.hm-home-vehicles__button::after{
    content:"→";

    color:var(--hm-home-accent);

    font-size:16px;

    transition:transform .2s ease;
}

.hm-home-vehicles__button:hover{
    background:transparent;
    color:var(--hm-home-ink);
}

.hm-home-vehicles__button:hover::after{
    transform:translateX(3px);
}


/* ==========================================================
   DESKTOP SECTION SEPARATION
   ========================================================== */

.hm-intro + .hm-core{
    margin-top:0;
}

.hm-core + .hm-home-vehicles{
    margin-top:0;
}


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

@media (max-width:1024px){

    :root{
        --hm-home-gutter:32px;
    }

    /* Hero — standard tablet layout */
    .hm-home-hero{
        min-height:600px;
    }

    .hm-home-hero__inner{
        min-height:600px;

        padding-top:110px;
        padding-bottom:48px;
    }

    .hm-home-hero__content{
        width:min(680px,100%);
    }

    .hm-home-hero h1{
        max-width:680px;

        font-size:clamp(42px,5.8vw,60px);
        line-height:.94;
        letter-spacing:-.05em;
    }

    .hm-home-hero__content > p{
        max-width:600px;

        margin-top:20px;

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

    .hm-intro__intro,
    .hm-home-vehicles__header{
        grid-template-columns:minmax(0,1fr) minmax(260px,.8fr);
        gap:48px;
    }

    .hm-home-vehicles__grid{
        grid-template-columns:repeat(2,minmax(0,1fr));
    }
}


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

@media (max-width:767px){

    :root{
        --hm-home-gutter:14px;
        --hm-home-gap:8px;
    }

    /* Hero — standard mobile layout */
    .hm-home-hero{
        min-height:450px;
    }

    .hm-home-hero__inner{
        min-height:450px;

        align-items:flex-end;

        padding-top:110px;
        padding-bottom:28px;
    }

    .hm-home-hero__overlay{
        background:
            linear-gradient(
                180deg,
                rgba(10,12,15,.20) 0%,
                rgba(10,12,15,.42) 38%,
                rgba(10,12,15,.86) 100%
            );
    }

    .hm-home-hero h1{
        max-width:100%;

        font-size:clamp(29px,8.2vw,39px);
        line-height:.95;
        letter-spacing:-.05em;
    }

    .hm-home-hero__content > p{
        max-width:100%;

        margin:18px 0 0;

        font-size:13px;
        line-height:1.6;
    }

    /* Intro */
    .hm-intro__container{
        padding-top:64px;
        padding-bottom:35px;
    }

    .hm-intro__intro{
        display:block;

        width:100%;

        text-align:left;
    }

    .hm-intro__subtitle{
        margin:0 0 13px;
    }

    .hm-intro__intro h1{
        max-width:100%;

        margin:0;

        font-size:clamp(34px,10vw,48px);
        line-height:.98;
    }

    .hm-intro__intro h3{
        max-width:100%;

        margin:10px 0 20px;

        font-size:15px;
        line-height:1.35;
    }

    .hm-intro__intro > p{
        max-width:100%;

        margin:0;

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


    /* Core outer rhythm. */
    .hm-core.hm-core{
        width:calc(100% - 28px);
        padding-bottom:95px;
    }

    .hm-core .hm-core__header,
    .hm-core .hm-core__grid{
        width:calc(100% - 28px);
    }

    .hm-core .hm-core__header{
        display:block;
        margin-bottom:28px;
    }

    .hm-core .hm-core__header-right{
        margin-top:10px;
        padding:0;
    }

    .hm-core .hm-core__eyebrow{
        font-size:9px;
    }

    .hm-core .hm-core__header-right p{
        font-size:clamp(28px,8vw,40px);
        line-height:1;
    }

    /* Vehicles */
    .hm-home-vehicles__container{
        padding-top:64px;
        padding-bottom:70px;
    }

    .hm-home-vehicles__header{
        display:block;

        margin-bottom:28px;

        text-align:left;
    }

    .hm-home-vehicles__subtitle{
        margin:0 0 12px;
    }

    .hm-home-vehicles__header h2{
        max-width:100%;

        font-size:clamp(32px,9vw,46px);
        line-height:.98;
    }

    .hm-home-vehicles__grid{
        grid-template-columns:1fr;

        gap:8px;
    }

    .hm-home-vehicle__content{
        padding:15px 16px 16px;
    }

    .hm-home-vehicle__content h3{
        font-size:15px;
    }

    .hm-home-vehicle__facts{
        gap:7px 14px;

        margin-top:9px;
    }

    .hm-home-vehicle__facts span{
        font-size:9px;
    }

    .hm-home-vehicles__footer{
        margin-top:18px;
    }

    .hm-home-vehicles__button{
        font-size:9px;
    }
}


/* ==========================================================
   SMALL PHONES
   ========================================================== */

@media (max-width:420px){

    .hm-home-hero{
        min-height:416px;
    }

    .hm-home-hero__inner{
        min-height:416px;
    }
}