/*====================================================
TRAVEL WITH PURPOSE
Foundation
====================================================*/

.travel-purpose .section-body{

    display:flex;
    flex-direction:column;

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

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

}



/*====================================================
MANIFESTO: Phase 2 — Manifesto The manifesto should feel like reading a quote in a luxury coffee-table book.
====================================================*/

.purpose-manifesto{

    display:flex;

    justify-content:center;

}


.purpose-manifesto__quote{

    position:relative;

    max-width:820px;

    margin:0;

    padding-inline:2rem;

    text-align:center;

    font-family:var(--font-heading);

    font-size:clamp(2rem,3vw,3.2rem);

    line-height:1.45;

    font-weight:300;

    color:var(--ms-green);

    letter-spacing:-0.02em;

}




/*Decorative quotation marks Very subtle. Very editorial.*/

.purpose-manifesto__quote::before,
.purpose-manifesto__quote::after{

    position:absolute;

    font-family:Georgia, serif;

    font-size:7rem;

    color:rgba(177,87,39,.12);

    line-height:1;

}


.purpose-manifesto__quote::before{

    content:"“";

    left:-.4rem;

    top:-2rem;

}


.purpose-manifesto__quote::after{

    content:"”";

    right:-.4rem;

    bottom:-4rem;

}




/*Phase 3 — Landscape This image is the emotional centre. It should dominate.*/

/*====================================================
LANDSCAPE
====================================================*/

.purpose-landscape{

    margin:0;

    overflow:hidden;

    border-radius:32px;

}


.purpose-landscape img{

    width:100%;

    aspect-ratio:16/8;

    display:block;

    object-fit:cover;

    transition:transform 8s ease;

}
/*Hover*/
.purpose-landscape:hover img{

    transform:scale(1.05);

}




/*Phase 4 — Editorial Commitments Three columns. Nothing boxed. Just typography.*/

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

.purpose-editorial{

    display:grid;

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

    gap:clamp(3rem,5vw,5rem);

}


/*Phase 4 — Editorial Commitments Three columns. Nothing boxed. Just typography.*/

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

.purpose-editorial{

    display:grid;

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

    gap:clamp(3rem,5vw,5rem);

}

/*Each chapter.*/

.purpose-editorial > .purpose-chapter{

    position:relative;

    padding-top:1.8rem;

}

.purpose-editorial > .purpose-chapter:hover h3{
    color:var(--ms-orange);
}


.purpose-chapter::before{

    content:"";

    position:absolute;

    left:0;

    top:0;

    width:70px;

    height:1px;

        background:rgba(39,73,33,.15);

  }
  
  
  
  
  
  
  
  
  /*Number.*/

.purpose-chapter__number{

    display:block;

    margin-bottom:1rem;

    font-size:.75rem;

    letter-spacing:.28em;

    text-transform:uppercase;

    color:var(--ms-orange);

    font-weight:700;

}

/*Heading.*/

.purpose-chapter h3{

    margin:0 0 1rem;

    font-size:1.55rem;

    line-height:1.25;

    color:var(--ms-green);

}

/*Body.*/

.purpose-chapter p{

    margin:0;

    color:var(--ms-text);

    line-height:1.95;

}





/*Phase 5 — Luxury Motion Almost invisible.*/

.purpose-chapter{

    transition:transform .45s ease;

}


.purpose-chapter:hover{

    transform:translateY(-6px);

}

/*That's enough. Phase 6 — Tablet*/
@media (max-width:1024px){

    .purpose-editorial{

        grid-template-columns:1fr;

        gap:3rem;

    }

    .purpose-landscape img{

        aspect-ratio:16/10;

    }

}






/*Phase 7 — Mobile This is where many websites fail. They simply shrink everything. We don't. We preserve the feeling.*/

@media (max-width:768px){

    .travel-purpose .section-body{

        gap:3rem;

    }

    .purpose-manifesto__quote{

        padding-inline:1rem;

        font-size:1.7rem;

        line-height:1.55;

    }

    .purpose-manifesto__quote::before,

    .purpose-manifesto__quote::after{

        font-size:4rem;

    }

    .purpose-manifesto__quote::before{

        top:-1rem;

        left:0;

    }

    .purpose-manifesto__quote::after{

        bottom:-2rem;

        right:0;

    }

    .purpose-landscape{

        border-radius:20px;

    }

    .purpose-landscape img{

        aspect-ratio:4/3;

    }

}



/*The final touch I'd add: This is the one thing I think separates a polished design from a truly premium one. Instead of placing the landscape on the plain page background, give it a subtle stage.*/

.travel-purpose{

    position:relative;

}


.travel-purpose::before{

    content:"";

    position:absolute;

    left:0;

    right:0;

    top:34%;

    height:42%;

    background:linear-gradient(
        180deg,
        transparent,
        rgba(242,239,232,.55),
        transparent
    );

    pointer-events:none;

}