/*
 * ************************************************************
 * ************************************************************
 * ** Copyright (c) flavio.ferrara.it
 * ** All rights reserved.
 * **
 * ** Strict Proprietary Notice:
 * ** This website data, source code, and associated
 * ** assets are the exclusive property of flavio.ferrara.it.
 * ** Unauthorized copying, modification,
 * ** or distribution via any medium is strictly prohibited.
 * ************************************************************
 * ************************************************************
 */

/* ==========================
   SECTION / HOME (HERO)
========================== */

.hero{
    background:linear-gradient(135deg, var(--navy) 0%, var(--charcoal) 100%);
    color:var(--white);
    padding:14px 0 18px;
    display:flex;
    align-items:center;
}

.hero-grid{
    display:grid;
    grid-template-columns:1.2fr 0.8fr;
    gap:60px;
    align-items:start;
}

.eyebrow{
    text-transform:uppercase;
    letter-spacing:2px;
    font-size:0.8rem;
    color:var(--light-slate);
    margin-bottom:9px;
}

.hero h1{
    font-family:'Cormorant Garamond',serif;
    font-size:clamp(2.65rem, 6vw, 3.35rem);
    line-height:1.1;
    margin-bottom:15px;
    word-wrap:break-word;
}

.hero-grid > *{ min-width:0; }

.hero p{
    font-size:1.1rem;
    line-height:1.54;
    color:var(--pale);
    max-width:650px;
    margin-bottom:15px;
}

.hero-meta{
    display:flex;
    flex-wrap:wrap;
    gap:10px 24px;
    margin-bottom:28px;
    font-size:0.95rem;
    color:var(--light-slate);
}

.hero-meta span{ white-space:nowrap; }

.cta-group{
    display:flex;
    gap:16px;
    flex-wrap:wrap;
}

.headshot-card{
    background:rgba(255,255,255,0.05);
    border:1px solid rgba(255,255,255,0.1);
    padding:42px;
    border-radius:24px;
    display:flex;
    flex-direction:column;
}

.headshot-photo{
    width:100%;
    aspect-ratio:4/5;
    height:auto;
    border-radius:16px;
    object-fit:cover;
}

/* Location/role badges and CTA buttons live inside the photo card (below
   the photo) rather than the text column, so they're scoped under
   .headshot-card here — .hero-meta/.cta-group above keep their original,
   unscoped styling since the About section (rendered in Home's own
   collapsible panel, and on /about/) reuses the same .cta-group class
   and must not be affected by this hero-only layout. */
.headshot-card .hero-meta{
    flex-direction:column;
    flex-wrap:nowrap;
    gap:4px;
    margin:9px 0 0;
    font-size:0.82rem;
}

.headshot-card .cta-group{
    gap:8px;
    margin-top:7px;
}

.headshot-card .cta-group .btn{
    flex:0 1 auto;
    justify-content:center;
    text-align:center;
    padding:8px 14px;
    font-size:0.9rem;
}

/* Single-row, no-wrap button treatment only once .container reliably hits
   its 1200px cap (viewport >= 1200/0.92 ~= 1304px) — below that, including
   every tablet/phone width, buttons wrap so nothing overflows the screen
   edge (verified at 1024/1100/1200/1280px and phone widths). */
@media(min-width:1310px){
    .headshot-card .cta-group{ flex-wrap:nowrap; }
    .headshot-card .cta-group .btn{ padding:8px 10px; font-size:0.85rem; white-space:nowrap; }
}

/* ==========================
   HOME — full-content section browser
   Lets visitors scroll the whole site from Home without leaving the
   page, reusing the exact same partials as each dedicated page.
========================== */

.home-overview{
    padding-bottom:0;
}

.home-collapsible{
    border-top:1px solid var(--border);
    scroll-margin-top:96px;
}

.home-collapsible:last-of-type{
    border-bottom:1px solid var(--border);
}

.home-collapsible-toggle{
    width:100%;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:16px;
    padding:30px 0;
    background:none;
    border:none;
    cursor:pointer;
    text-align:left;
}

.home-collapsible-title{
    font-family:'Cormorant Garamond',serif;
    font-size:1.9rem;
    color:var(--navy);
}

.home-collapsible-icon{
    flex-shrink:0;
    width:32px;
    height:32px;
    border-radius:50%;
    border:1px solid var(--border);
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:1.3rem;
    color:var(--slate);
    transition:0.3s ease;
}

.home-collapsible-toggle[aria-expanded="true"] .home-collapsible-icon{
    background:var(--navy);
    color:var(--white);
    border-color:var(--navy);
}

.home-collapsible-panel{
    max-height:0;
    overflow:hidden;
    opacity:0;
    transition:max-height 0.5s cubic-bezier(0.4,0,0.2,1), opacity 0.4s ease;
}

.home-collapsible-panel.open{
    max-height:12000px;
    opacity:1;
    padding-bottom:70px;
}

/* ==========================
   HOME — Visual 1: Career Scale / Impact Metrics
   Visual 2: Selected Transformation Outcomes
   Sit between the Hero and the collapsible section browser so scale and
   impact are visible immediately, without expanding anything.
========================== */

.impact-summary{
    background:var(--off-white);
    /* Top padding intentionally smaller than bottom: the hero above ends
       with its own bottom padding, so the sitewide-standard 80px here on
       top of that read as a large empty band before "Scale, Scope &
       Impact" even appeared. */
    padding:32px 0 80px;
}

.impact-summary .section-header,
.outcomes-summary .section-header{
    margin-bottom:40px;
}

.outcomes-summary{
    background:var(--white);
    padding:80px 0;
}

.outcome-note{
    text-align:center;
    color:var(--slate);
    font-size:0.85rem;
    max-width:700px;
    margin:28px auto 0;
}