/*Phase 1 — Foundation*/
/*==================================================
TRAVEL JOURNAL
==================================================*/

.travel-journal .section-body{

    margin-top:clamp(3rem,6vw,5rem);

}

.journal-editorial{

    display:flex;
    flex-direction:column;

    gap:clamp(4rem,7vw,7rem);

}


/*Phase 2 — Featured Story

This is the magazine cover.*/

/*==================================================
FEATURE STORY
==================================================*/

.journal-feature{

    display:grid;

    grid-template-columns:1.7fr 1fr;

    align-items:stretch;

    overflow:hidden;

    border-radius:32px;

    background:var(--ms-white);

}



/*Image dominates.*/

.journal-feature__media{

    overflow:hidden;

    min-height:560px;

}

.journal-feature__media img{

    width:100%;
    height:100%;

    display:block;

    object-fit:cover;

    transition:transform 7s ease;

}

.journal-feature:hover img{

    transform:scale(1.05);

}



/*Editorial.*/

.journal-feature__body{

    display:flex;

    flex-direction:column;

    justify-content:center;

    padding:clamp(2.5rem,5vw,4rem);

}

/*Typography.*/

.journal-category{

    display:inline-block;

    margin-bottom:1rem;

    font-size:.72rem;

    font-weight:700;

    letter-spacing:.28em;

    text-transform:uppercase;

    color:var(--ms-orange);

}

/*Title.*/

.journal-feature h3{

    margin:0;

    max-width:12ch;

    font-size:clamp(2.5rem,4vw,3.8rem);

    line-height:1.08;

    color:var(--ms-green);

}

/*Paragraph.*/

.journal-feature p{

    margin:1.5rem 0 0;

    max-width:38ch;

    line-height:1.9;

    color:var(--ms-text);

}

/*Link.*/

.journal-feature a{

    margin-top:2rem;

    width:fit-content;

    text-decoration:none;

    color:var(--ms-green);

    font-weight:600;

    transition:.35s;

}

.journal-feature a:hover{

    color:var(--ms-orange);

}







/*Phase 3 — Editorial Grid

Unlike Safari Cards.

This should feel lighter.*/

/*==================================================
EDITORIAL GRID
==================================================*/

.journal-grid{

    display:grid;

    grid-template-columns:repeat(2,1fr);

    gap:2.5rem;

}

/*Each story.*/

.journal-story{

    display:flex;

    flex-direction:column;

    overflow:hidden;

    background:var(--ms-white);

    border-radius:24px;

    transition:

        transform .45s ease,

        box-shadow .45s ease;

}

/*Hover.*/

.journal-story:hover{

    transform:translateY(-8px);

    box-shadow:0 22px 55px rgba(0,0,0,.08);

}

/*Very restrained.

Images.*/

.journal-story__media{

    overflow:hidden;

    min-height:260px;

}

.journal-story__media img{

    width:100%;
    height:100%;

    display:block;

    object-fit:cover;

    transition:transform 1.1s ease;

}

.journal-story:hover img{

    transform:scale(1.06);

}

/*Body.*/

.journal-story__body{

    display:flex;

    flex-direction:column;

    padding:2rem;

}

/*Meta.*/

.journal-story__body span{

    margin-bottom:1rem;

    font-size:.72rem;

    font-weight:700;

    letter-spacing:.2em;

    text-transform:uppercase;

    color:var(--ms-orange);

}

/*Titles.*/

.journal-story h3{

    margin:0;

    font-size:1.6rem;

    line-height:1.3;

    color:var(--ms-green);

}

/*Paragraph.*/

.journal-story p{

    margin:1rem 0 0;

    line-height:1.85;

    color:var(--ms-text);

}

/*Read more.*/

.journal-story a{

    margin-top:auto;

    padding-top:2rem;

    text-decoration:none;

    font-weight:600;

    color:var(--ms-green);

    transition:.3s;

}

.journal-story:hover a{

    color:var(--ms-orange);

}















/*Phase 4 — Footer

Very understated.*/

/*==================================================
FOOTER
==================================================*/

.journal-footer{

    display:flex;

    justify-content:center;

}

/*Link.*/

.journal-footer a{

    text-decoration:none;

    font-size:.95rem;

    letter-spacing:.18em;

    text-transform:uppercase;

    color:var(--ms-green);

    font-weight:700;

    transition:.3s;

}

.journal-footer a:hover{

    color:var(--ms-orange);

}








/*Phase 5 — Tablet*/
@media (max-width:1100px){

    .journal-feature{

        grid-template-columns:1fr;

    }

    .journal-feature__media{

        min-height:420px;

    }

}
/*Phase 6 — Mobile*/
@media (max-width:768px){

    .journal-grid{

        grid-template-columns:1fr;

    }

    .journal-feature__media{

        min-height:280px;

    }

    .journal-feature__body{

        padding:2rem;

    }

    .journal-story__body{

        padding:1.5rem;

    }

    .journal-feature h3{

        max-width:none;

        font-size:2rem;

    }

}








/*One final touch

This is the little detail I'd add because we've now established a visual language across the homepage.

Notice:

Why Maramatta → thin editorial dividers.
Travel With Purpose → understated top rules.
Travel Journal should echo that.

I'd add a subtle top rule above the featured article:*/

.journal-feature{

    position:relative;

}

.journal-feature::before{

    content:"";

    position:absolute;

    top:0;

    left:0;

    width:120px;

    height:3px;

    background:var(--ms-orange);

    z-index:2;

}