/*
 * ************************************************************
 * ************************************************************
 * ** 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.
 * ************************************************************
 * ************************************************************
 */

/* ==========================
   COMPONENTS / IMPACT VISUALS
   Reusable primitives for the four Visual Impact Enhancement
   components (v10). Loaded globally (like cards.css / timeline.css)
   because the metric-tile grid is reused on both Home (Visual 1) and
   the Competencies content partial (Visual 3).
========================== */

/* ---- Metric tiles (Visual 1 + Visual 3) ---- */

.metric-tile-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:24px;
    margin-bottom:28px;
}

.metric-tile-grid:last-child{
    margin-bottom:0;
}

.metric-tile{
    display:block;
    text-align:center;
    text-decoration:none;
    color:inherit;
    padding:28px 16px;
    background:var(--white);
    border:1px solid var(--border);
    border-radius:var(--radius);
    transition:transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

/* Only tiles rendered as <a> (i.e. with a source/case-study link) get the
   interactive treatment — plain <div> tiles are unaffected. */
a.metric-tile:hover,
a.metric-tile:focus-visible{
    transform:translateY(-4px);
    box-shadow:var(--shadow);
    border-color:var(--accent);
}

.metric-value{
    display:block;
    font-family:'Cormorant Garamond',serif;
    font-size:2.6rem;
    font-weight:600;
    color:var(--navy);
    line-height:1.1;
}

.metric-tile--accent .metric-value{
    color:var(--accent);
}

/* Non-numeric tiles (e.g. "EMEA · APAC · Americas") need a smaller,
   more compact treatment than a large serif number. */
.metric-tile--text .metric-value{
    font-size:1.15rem;
    font-family:'Inter',sans-serif;
    font-weight:700;
}

.metric-label{
    display:block;
    margin-top:8px;
    color:var(--slate);
    font-size:0.85rem;
    letter-spacing:0.3px;
}

.metric-sublabel{
    display:block;
    margin-top:4px;
    color:var(--slate);
    font-size:0.78rem;
    opacity:0.85;
}

.leadership-scope-card{
    max-width:820px;
    margin:0 auto;
    background:var(--off-white);
    border:1px solid var(--border);
    border-radius:var(--radius);
    padding:32px 40px;
}

.leadership-scope-card ul{
    list-style:none;
}

.leadership-scope-card li{
    position:relative;
    padding-left:24px;
    color:var(--charcoal);
    margin-bottom:14px;
}

.leadership-scope-card li:last-child{
    margin-bottom:0;
}

.leadership-scope-card li::before{
    content:"";
    position:absolute;
    left:0;
    top:9px;
    width:8px;
    height:8px;
    border-radius:50%;
    background:var(--accent);
}

/* ---- Range bars (Visual 2: Selected Transformation Outcomes) ---- */

.outcome-bars{
    max-width:820px;
    margin:0 auto;
    display:flex;
    flex-direction:column;
    gap:20px;
}

.outcome-bar{
    display:grid;
    grid-template-columns:230px 1fr 74px;
    align-items:center;
    gap:18px;
    text-decoration:none;
    color:inherit;
    /* Negative margin matches the padding so the hover background reads
       as a full-width row without shifting the grid's alignment. */
    padding:6px 12px;
    margin:-6px -12px;
    border-radius:10px;
    transition:background 0.2s ease;
}

.outcome-bar:hover,
.outcome-bar:focus-visible{
    background:var(--off-white);
}

.outcome-bar:hover .outcome-bar-label,
.outcome-bar:focus-visible .outcome-bar-label{
    color:var(--accent);
}

.outcome-bar-label{
    color:var(--charcoal);
    font-weight:600;
    font-size:0.92rem;
}

.outcome-bar-track{
    position:relative;
    height:10px;
    background:var(--border);
    border-radius:999px;
    overflow:hidden;
}

/* Solid segment: 0 up to the reported lower bound. */
.outcome-bar-base{
    position:absolute;
    left:0;
    top:0;
    bottom:0;
    background:var(--navy);
    border-radius:999px;
}

/* Lighter overlay segment: spans from the lower bound to the upper
   bound, so the bar itself reads as a range rather than one number. */
.outcome-bar-range{
    position:absolute;
    top:0;
    bottom:0;
    background:var(--accent);
    opacity:0.55;
}

.outcome-bar-value{
    color:var(--navy);
    font-weight:700;
    font-size:0.92rem;
    text-align:right;
    font-variant-numeric:tabular-nums;
    white-space:nowrap;
}

/* ---- Career evolution stepper (Visual 4) ---- */

.career-evolution{
    margin-bottom:60px;
}

.evolution-track{
    display:grid;
    grid-template-columns:repeat(5,1fr);
    gap:16px;
    position:relative;
}

.evolution-track::before{
    content:"";
    position:absolute;
    top:9px;
    left:5%;
    right:5%;
    height:2px;
    background:var(--border);
    z-index:0;
}

.evolution-step{
    position:relative;
    z-index:1;
    padding-top:32px;
}

.evolution-dot{
    position:absolute;
    top:0;
    left:0;
    width:20px;
    height:20px;
    border-radius:50%;
    background:var(--navy);
    border:3px solid var(--white);
    box-shadow:0 0 0 1px var(--border);
}

.evolution-years{
    color:var(--accent);
    font-weight:700;
    font-size:0.85rem;
    letter-spacing:0.3px;
    margin-bottom:6px;
}

.evolution-step h4{
    font-family:'Cormorant Garamond',serif;
    color:var(--navy);
    font-size:1.15rem;
    margin-bottom:8px;
}

.evolution-step p{
    color:var(--slate);
    font-size:0.85rem;
    line-height:1.5;
}

.evolution-narrative{
    text-align:center;
    color:var(--slate);
    font-size:0.9rem;
    margin-top:36px;
    padding-top:24px;
    border-top:1px solid var(--border);
}