/*
=================================================================
Retep Advisory Website v2
05-responsive.css

Responsive behaviour
Depends on:
01-tokens.css
02-base.css
03-layout.css
04-components.css

Principles
- Preserve typography first
- Reduce chrome before reducing content
- Navigation remains simple
- Editorial reading experience is maintained
=================================================================
*/

/* -------------------------------------------------------------
   LARGE DESKTOP
------------------------------------------------------------- */

@media (min-width:1440px){

:root{
    --container:1040px;
    --container-wide:1280px;
    --reading-width:760px;
}

.hero{
    padding-top:10rem;
    padding-bottom:8rem;
}

}

/* -------------------------------------------------------------
   DESKTOP / LAPTOP
------------------------------------------------------------- */

@media (max-width:1200px){

.site-header-inner{
    width:min(calc(100% - 2.5rem),var(--container-wide));
}

.split{
    gap:3rem;
}

}

/* -------------------------------------------------------------
   TABLET
------------------------------------------------------------- */

@media (max-width:992px){

:root{

    --space-7:6rem;
    --space-8:8rem;

}

.hero{
    padding-top:7rem;
}

.site-header-inner{

    flex-direction:column;

    justify-content:center;

    gap:1.5rem;

    padding:1.5rem 0;

    min-height:auto;

}

.site-nav ul{

    flex-wrap:wrap;

    justify-content:center;

    gap:1.5rem;

}

.split{

    grid-template-columns:1fr;

    gap:3rem;

}

.featured-thinking{

    grid-template-columns:1fr;

}

.service-grid{

    grid-template-columns:1fr 1fr;

}

}

/* -------------------------------------------------------------
   MOBILE
------------------------------------------------------------- */

@media (max-width:768px){

html{

    font-size:15px;

}

.container,
.container-wide{

    width:min(calc(100% - 2rem),100%);

}

.section{

    padding:var(--space-6) 0;

}

.hero{

    padding-top:5rem;
    padding-bottom:4rem;

}

.hero h1{

    max-width:100%;

    font-size:clamp(2.4rem,10vw,3.5rem);

}

.hero-actions{

    flex-direction:column;

    align-items:stretch;

}

.button{

    width:100%;

}

.site-nav ul{

    gap:1rem;

}

.site-nav a{

    letter-spacing:.12em;

}

.service-grid{

    grid-template-columns:1fr;

}

.site-footer-inner{

    flex-direction:column;

    gap:2.5rem;

}

.footer-links{

    gap:1rem;

}

.pullquote{

    font-size:clamp(1.5rem,6vw,2rem);

    margin:var(--space-6) 0;

}

.cta{

    padding:var(--space-6) var(--space-3);

}

}

/* -------------------------------------------------------------
   SMALL MOBILE
------------------------------------------------------------- */

@media (max-width:480px){

:root{

    --space-6:4rem;
    --space-7:5rem;
    --space-8:6rem;

}

.site-logo img{

    width:180px;

}

.site-nav ul{

    flex-direction:column;

    gap:.85rem;

}

.hero{

    padding-top:4rem;

}

.hero .lead{

    font-size:1.05rem;

}

.feature{

    padding-bottom:var(--space-4);

}

.thinking-item{

    padding-bottom:var(--space-4);

}

.article-meta{

    flex-direction:column;

    gap:.5rem;

}

.article-meta span::after{

    display:none;

}

}

/* -------------------------------------------------------------
   REDUCED MOTION
------------------------------------------------------------- */

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

*,
*::before,
*::after{

    animation:none !important;
    transition:none !important;
    scroll-behavior:auto !important;

}

}