/*
=================================================================
Retep Advisory Website v2
03-layout.css

Page structure and editorial layout
Depends on:
01-tokens.css
02-base.css
=================================================================
*/

/* -------------------------------------------------------------
   PAGE
------------------------------------------------------------- */

.site{
    min-height:100vh;
    display:flex;
    flex-direction:column;
}

main{
    flex:1;
}

/* -------------------------------------------------------------
   HEADER
------------------------------------------------------------- */

.site-header{
    position:sticky;
    top:0;
    z-index:var(--z-header);

    background:rgba(251,249,243,.94);
    backdrop-filter:blur(12px);

    border-bottom:var(--border-thin);
}

.site-header-inner{

    width:min(calc(100% - 3rem),var(--container-wide));
    margin-inline:auto;

    display:flex;
    justify-content:space-between;
    align-items:center;

    min-height:88px;

}

/* -------------------------------------------------------------
   LOGO
------------------------------------------------------------- */

.site-logo img{
    width:220px;
    height:auto;
}

/* -------------------------------------------------------------
   NAVIGATION
------------------------------------------------------------- */

.site-nav ul{

    display:flex;
    align-items:center;

    gap:2.5rem;

    list-style:none;
    margin:0;
    padding:0;

}

.site-nav a{

    color:var(--color-navy);

    font-size:var(--fs-xs);

    text-transform:uppercase;
    letter-spacing:.18em;

    position:relative;

    padding-bottom:.35rem;

}

.site-nav a::after{

    content:"";

    position:absolute;

    left:0;
    bottom:0;

    width:0;

    height:2px;

    background:var(--color-gold);

    transition:width var(--transition-normal);

}

.site-nav a:hover::after,
.site-nav a.active::after{

    width:100%;

}

/* -------------------------------------------------------------
   HERO
------------------------------------------------------------- */

.hero{

    padding:var(--space-8) 0 var(--space-7);

}

.hero-inner{

    max-width:860px;

}

.hero-actions{

    display:flex;
    gap:1rem;
    margin-top:var(--space-4);

    flex-wrap:wrap;

}

/* -------------------------------------------------------------
   EDITORIAL CONTENT
------------------------------------------------------------- */

.editorial{

    max-width:var(--reading-width);

}

.editorial > * + *{

    margin-top:var(--space-3);

}

/* -------------------------------------------------------------
   FEATURED THINKING
------------------------------------------------------------- */

.featured-thinking{

    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(320px,1fr));

    gap:2rem;

}

/* -------------------------------------------------------------
   SPLIT LAYOUT
------------------------------------------------------------- */

.split{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:4rem;

    align-items:start;

}

/* -------------------------------------------------------------
   SECTION DIVIDER
------------------------------------------------------------- */

.section-divider{

    border-top:var(--border-thin);

}

/* -------------------------------------------------------------
   FOOTER
------------------------------------------------------------- */

.site-footer{

    margin-top:var(--space-8);

    border-top:var(--border-thin);

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

}

.site-footer-inner{

    width:min(calc(100% - 3rem),var(--container-wide));

    margin-inline:auto;

    display:flex;

    justify-content:space-between;

    gap:3rem;

}

.footer-brand{

    max-width:420px;

}

.footer-links{

    display:flex;

    flex-direction:column;

    gap:.75rem;

}

.footer-links a{

    color:var(--color-text-muted);

}

.footer-links a:hover{

    color:var(--color-gold);

}

/* -------------------------------------------------------------
   PAGE SPACING
------------------------------------------------------------- */

.page-gap > section + section{

    margin-top:var(--space-7);

}