/*
=================================================================
Retep Advisory Website v2
04-components.css

Reusable UI components
Depends on:
01-tokens.css
02-base.css
03-layout.css
=================================================================
*/

/* -------------------------------------------------------------
   BUTTONS
------------------------------------------------------------- */

.button{
    display:inline-flex;
    align-items:center;
    justify-content:center;

    padding:0.95rem 1.8rem;

    font-size:var(--fs-xs);
    letter-spacing:.16em;
    text-transform:uppercase;

    border:1px solid var(--color-navy);

    color:#fff;
    background:var(--color-navy);

    transition:
        background var(--transition-normal),
        color var(--transition-normal),
        border-color var(--transition-normal);
}

.button:hover{
    background:transparent;
    color:var(--color-navy);
}

.button-secondary{
    background:transparent;
    color:var(--color-navy);
}

.button-secondary:hover{
    background:var(--color-navy);
    color:#fff;
}

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

.hero .eyebrow{
    margin-bottom:var(--space-2);
}

.hero .lead{
    max-width:40rem;
}

.hero h1{
    max-width:12ch;
}

/* -------------------------------------------------------------
   FEATURED ARTICLE
------------------------------------------------------------- */

.feature{

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

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

}

.feature:last-child{
    border-bottom:none;
}

.feature-title{

    display:block;

    margin-bottom:var(--space-2);

    color:var(--color-navy);

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

    font-size:clamp(1.8rem,3vw,2.4rem);

}

.feature-summary{

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

    max-width:34rem;

}

.feature-link{

    display:inline-flex;

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

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

    letter-spacing:.08em;

    color:var(--color-navy);

}

.feature-link:hover{

    color:var(--color-gold);

}

/* -------------------------------------------------------------
   THINKING LIST
------------------------------------------------------------- */

.thinking-list{

    display:grid;

    gap:var(--space-5);

}

.thinking-item{

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

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

}

.thinking-item:last-child{

    border-bottom:none;

}

.thinking-item h3{

    margin-bottom:var(--space-2);

}

.thinking-item p{

    margin-bottom:var(--space-2);

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

}

/* -------------------------------------------------------------
   PULL QUOTE
------------------------------------------------------------- */

.pullquote{

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

    max-width:44rem;

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

    border-left:var(--border-accent);

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

    font-size:clamp(1.7rem,3vw,2.4rem);

    line-height:1.35;

    color:var(--color-navy);

}

.pullquote cite{

    display:block;

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

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

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

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

    font-style:normal;

}

/* -------------------------------------------------------------
   CALLOUT
------------------------------------------------------------- */

.callout{

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

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

    border-left:var(--border-accent);

}

.callout h3{

    margin-bottom:var(--space-2);

}

.callout p:last-child{

    margin-bottom:0;

}

/* -------------------------------------------------------------
   SERVICES
------------------------------------------------------------- */

.service-grid{

    display:grid;

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

    gap:var(--space-5);

}

.service h3{

    margin-bottom:var(--space-2);

}

.service p{

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

}

/* -------------------------------------------------------------
   SIGNATURE
------------------------------------------------------------- */

.signature{

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

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

    color:var(--color-navy);

    font-size:1.35rem;

}

/* -------------------------------------------------------------
   CTA
------------------------------------------------------------- */

.cta{

    text-align:center;

    padding:var(--space-7);

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

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

}

.cta h2{

    max-width:18ch;

    margin-inline:auto;

}

.cta p{

    margin-inline:auto;

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

}

/* -------------------------------------------------------------
   ARTICLE META
------------------------------------------------------------- */

.article-meta{

    display:flex;

    gap:1rem;

    flex-wrap:wrap;

    margin-bottom:var(--space-5);

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

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

}

.article-meta span::after{

    content:"•";

    margin-left:1rem;

}

.article-meta span:last-child::after{

    display:none;

}