/* =========================================================
   AF_Growth v1.1.0
   Active Freight — stable timeline cards
   Developed by Ilyas Benayad
   ========================================================= */

.afg-growth{
    --af-orange:#ed501b;
    --af-navy:#081a30;
    --af-text:#303943;
    --af-growth-bg:#fff;
    --af-intro-width:27%;
    --afg-growth-hover-lift:8px;
    --afg-growth-hover-scale:1.01;
    --af-growth-icon-overlap:30px;

    width:100%;
    margin:0;
    padding:35px 0 45px;
    background:var(--af-growth-bg);
    color:var(--af-navy);
    overflow:hidden;
    font-family:"Inter",Arial,Helvetica,sans-serif;
}

.afg-growth *,
.afg-growth *::before,
.afg-growth *::after{box-sizing:border-box}

.afg-growth__wrapper{
    width:94%;
    margin:0 auto;
    display:grid;
    grid-template-columns:minmax(0,var(--af-intro-width)) minmax(0,1fr);
    align-items:start;
    gap:0;
}

.afg-growth__intro{
    min-width:0;
    width:100%;
    padding-right:30px;
    align-self:center;
}

.afg-growth__eyebrow{
    margin:0 0 12px;
    color:var(--af-orange);
    font-size:11px;
    line-height:1;
    font-weight:800;
    text-transform:uppercase;
}

.afg-growth__title{
    margin:0 0 18px;
    color:var(--af-navy);
    font-size:30px;
    line-height:1.12;
    letter-spacing:-.9px;
    font-weight:750;
    overflow-wrap:break-word;
}
.afg-growth__title span{display:block;color:var(--af-orange)}

.afg-growth__description{
    width:100%;
    max-width:470px;
    margin:0;
    color:var(--af-text);
    font-size:14px;
    line-height:1.62;
    font-weight:400;
    overflow-wrap:break-word;
}

/* =========================================================
   TIMELINE GRID
   ========================================================= */
.afg-growth__timeline{
    position:relative;
    width:100%;
    min-width:0;
    display:grid;
    grid-template-columns:repeat(5,minmax(0,1fr));
    gap:12px;
    padding-top:calc(var(--af-growth-icon-overlap) + 18px);
    overflow:visible;
    align-items:stretch;
}

/* The outer article may overflow only for the floating icon.
   The visible card body is .afg-growth__panel and clips its own content. */
.afg-growth__card{
    position:relative;
    z-index:2;
    min-width:0;
    width:100%;
    display:flex;
    align-self:stretch;
    overflow:visible;
    transform:translate3d(0,0,0);
    transform-origin:center;
    transition:transform .35s cubic-bezier(.2,.8,.2,1);
}

.afg-growth__panel{
    position:relative;
    z-index:1;
    width:100%;
    min-width:0;
    min-height:300px;
    height:auto;
    flex:1 1 auto;

    padding:38px 18px 26px;
    display:flex;
    flex-direction:column;
    align-items:center;

    text-align:center;
    background:#fff;
    border:1px solid #ededed;
    border-radius:8px;
    box-shadow:0 4px 14px rgba(20,30,40,.045);

    /* Text is always kept within the real card body. */
    overflow:hidden;

    transition:
        box-shadow .35s ease,
        border-color .35s ease,
        background .35s ease;
}

.afg-growth__card--current .afg-growth__panel{
    background:linear-gradient(180deg,#fff 0%,#fff 55%,#fffaf7 100%);
    border-color:#f0e4df;
    box-shadow:0 5px 18px rgba(237,80,27,.10),0 12px 30px rgba(237,80,27,.08);
}

/* =========================================================
   FLOATING ICON — ALWAYS ABOVE CARD
   ========================================================= */
.afg-growth__icon{
    position:absolute;
    left:50%;
    top:calc(-1 * var(--af-growth-icon-overlap));
    z-index:20;

    width:60px;
    height:60px;
    flex:0 0 60px;
    margin:0;

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

    border:5px solid #fff;
    border-radius:50%;
    color:#fff;
    background:#ed501b;
    box-shadow:0 0 0 5px rgba(237,80,27,.06),0 5px 16px rgba(237,80,27,.20);

    transform:translateX(-50%);
    transform-origin:center;
    transition:transform .35s ease,box-shadow .35s ease;
}

/* Elementor / Font Awesome: fill + stroke compatible */
.afg-growth__icon i{
    color:currentColor!important;
    opacity:1!important;
    visibility:visible!important;
}
.afg-growth__icon svg{
    display:block!important;
    width:28px;
    height:28px;
    color:currentColor!important;
    fill:currentColor!important;
    stroke:currentColor!important;
    opacity:1!important;
    visibility:visible!important;
    overflow:visible!important;
}
.afg-growth__icon svg *,
.afg-growth__icon svg path,
.afg-growth__icon svg circle,
.afg-growth__icon svg rect,
.afg-growth__icon svg line,
.afg-growth__icon svg polyline,
.afg-growth__icon svg polygon,
.afg-growth__icon svg ellipse{
    fill:currentColor!important;
    stroke:currentColor!important;
}

/* =========================================================
   DATE
   ========================================================= */
.afg-growth__date{
    width:100%;
    min-width:0;
    min-height:72px;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:5px;
    color:#262d34;
    font-size:18px;
    line-height:1.15;
    font-weight:500;
}
.afg-growth__date span,
.afg-growth__date strong{
    display:block;
    width:100%;
    max-width:100%;
    white-space:normal;
    overflow-wrap:break-word;
    word-break:normal;
}
.afg-growth__date strong{
    color:var(--af-orange);
    font-size:25px;
    line-height:1.12;
    font-weight:750;
}

/* =========================================================
   TEXT — NEVER CLIPPED / NEVER OUTSIDE
   ========================================================= */
.afg-growth__card-text{
    width:100%;
    min-width:0;
    max-width:100%;
    margin:18px auto 0;
    padding:0;

    color:#343b42;
    font-size:14px;
    line-height:1.56;
    font-weight:400;
    text-align:center;

    white-space:normal;
    overflow:visible;
    overflow-wrap:break-word;
    word-break:normal;
    hyphens:auto;
    text-wrap:pretty;

    /* Defend against theme line clamping/truncation. */
    display:block!important;
    -webkit-line-clamp:unset!important;
    -webkit-box-orient:unset!important;
    max-height:none!important;
    height:auto!important;
    text-overflow:clip!important;
    transform:none!important;
}

/* =========================================================
   HOVER — MOVE WHOLE CARD, NOT ITS TEXT
   ========================================================= */
@media (hover:hover) and (pointer:fine){
    .afg-growth-hover-lift .afg-growth__card:hover{
        transform:translate3d(0,calc(var(--afg-growth-hover-lift) * -1),0);
    }
    .afg-growth-hover-scale .afg-growth__card:hover{
        transform:scale(var(--afg-growth-hover-scale));
    }
    .afg-growth-hover-lift-scale .afg-growth__card:hover{
        transform:translate3d(0,calc(var(--afg-growth-hover-lift) * -1),0) scale(var(--afg-growth-hover-scale));
    }
    .afg-growth-hover-none .afg-growth__card:hover{transform:none}

    .afg-growth__card:hover{z-index:10}
    .afg-growth__card:hover .afg-growth__panel{
        border-color:rgba(237,80,27,.18);
        background:linear-gradient(180deg,#fff 0%,#fff 58%,#fff9f6 100%);
        box-shadow:0 8px 20px rgba(237,80,27,.10),0 18px 38px rgba(237,80,27,.13);
    }
    .afg-growth__card:hover .afg-growth__icon{
        transform:translateX(-50%) scale(1.06);
        box-shadow:0 0 0 6px rgba(237,80,27,.07),0 7px 20px rgba(237,80,27,.27);
    }
}

/* =========================================================
   TABLET / LAPTOP
   ========================================================= */
@media (max-width:1199px){
    .afg-growth{padding-left:24px;padding-right:24px}
    .afg-growth__wrapper{width:100%;grid-template-columns:1fr;gap:34px}
    .afg-growth__intro{max-width:760px;padding-right:0}
    .afg-growth__timeline{
        grid-template-columns:repeat(3,minmax(0,1fr));
        gap:calc(var(--af-growth-icon-overlap) + 28px) 16px;
        padding-top:calc(var(--af-growth-icon-overlap) + 18px);
    }
    .afg-growth__panel{min-height:260px;padding:38px 18px 26px}
    .afg-growth__card-text{font-size:15px;line-height:1.55}
}

/* =========================================================
   SMALL TABLET
   ========================================================= */
@media (max-width:767px){
    .afg-growth{padding-left:18px;padding-right:18px}
    .afg-growth__timeline{
        grid-template-columns:repeat(2,minmax(0,1fr));
        gap:calc(var(--af-growth-icon-overlap) + 28px) 16px;
    }
    .afg-growth__title{font-size:30px}
    .afg-growth__description{max-width:100%}
    .afg-growth__panel{min-height:240px}
}

/* =========================================================
   MOBILE
   ========================================================= */
@media (max-width:520px){
    .afg-growth{padding-left:14px;padding-right:14px}
    .afg-growth__wrapper{display:block}
    .afg-growth__intro{padding-bottom:34px}
    .afg-growth__timeline{
        grid-template-columns:1fr;
        row-gap:calc(var(--af-growth-icon-overlap) + 30px);
        padding-top:calc(var(--af-growth-icon-overlap) + 18px);
    }
    .afg-growth__card{width:100%}
    .afg-growth__panel{
        min-height:0;
        height:auto;
        padding:38px 18px 24px;
    }
    .afg-growth__date{min-height:auto}
    .afg-growth__date strong{font-size:24px}
    .afg-growth__card-text{margin-top:18px;font-size:14px;line-height:1.58}
}

/* =========================================================
   TOUCH
   ========================================================= */
@media (hover:none),(pointer:coarse){
    .afg-growth__card{transition:transform .18s ease}
    .afg-growth-touch .afg-growth__card:active{transform:scale(.993)}
    .afg-growth-touch .afg-growth__card:active .afg-growth__panel{border-color:rgba(237,80,27,.18)}
}

/* =========================================================
   HARD SAFETY
   ========================================================= */
.elementor-widget-af_growth,
.elementor-widget-af_growth .elementor-widget-container,
.afg-growth,
.afg-growth__wrapper,
.afg-growth__timeline,
.afg-growth__card,
.afg-growth__panel{
    max-width:100%;
}

/* The widget itself must NOT clip the circles above cards. */
.elementor-widget-af_growth,
.elementor-widget-af_growth .elementor-widget-container{
    overflow:visible!important;
}

.afg-growth{
    overflow-x:clip;
    overflow-y:visible;
}
@supports not (overflow:clip){
    .afg-growth{overflow-x:hidden;overflow-y:visible}
}

/* =========================================================
   REDUCED MOTION
   ========================================================= */
@media (prefers-reduced-motion:reduce){
    .afg-growth *,
    .afg-growth *::before,
    .afg-growth *::after{
        animation:none!important;
        transition:none!important;
        scroll-behavior:auto!important;
    }
    .afg-growth__card:hover,
    .afg-growth__card:active{transform:none!important}
}

/* =========================================================
   AF_Growth v1.2.0 — HARD ISOLATION & CARD FIXES
   ========================================================= */

/* This version uses afg-* classes specifically to ignore any legacy
   .af-growth CSS still present in Elementor HTML widgets, theme CSS,
   cached page CSS or older plugin versions. */

.elementor-widget-af_growth .afg-growth{
    position:relative;
    isolation:isolate;
}

/* One visual card only. The outer article is structural and transparent. */
.elementor-widget-af_growth .afg-growth__card{
    background:transparent!important;
    border:0!important;
    border-radius:0!important;
    box-shadow:none!important;
    padding:0!important;
    min-height:0!important;
    height:auto!important;
    overflow:visible!important;
}

.elementor-widget-af_growth .afg-growth__panel{
    position:relative!important;
    width:100%!important;
    min-width:0!important;
    height:100%!important;
    min-height:300px;
    padding:42px 18px 28px;
    display:flex!important;
    flex-direction:column!important;
    align-items:center!important;
    justify-content:flex-start!important;
    overflow:visible!important;
}

/* The grid makes every card in the same row equal to the tallest card.
   This guarantees the full text is visible without fixed-height clipping. */
.elementor-widget-af_growth .afg-growth__timeline{
    align-items:stretch!important;
}
.elementor-widget-af_growth .afg-growth__card{
    height:100%!important;
}
.elementor-widget-af_growth .afg-growth__panel{
    height:100%!important;
}

/* The icon circle is genuinely above the card body. */
.elementor-widget-af_growth .afg-growth__icon{
    top:0!important;
    margin:0!important;
    transform:translate(-50%,-50%)!important;
    z-index:50!important;
}
.elementor-widget-af_growth .afg-growth__timeline{
    padding-top:30px!important;
}

/* Full text — never line-clamped, never hidden, never ellipsized. */
.elementor-widget-af_growth .afg-growth__card-text{
    display:block!important;
    width:100%!important;
    max-width:100%!important;
    height:auto!important;
    min-height:0!important;
    max-height:none!important;
    overflow:visible!important;
    white-space:normal!important;
    overflow-wrap:normal!important;
    word-break:normal!important;
    hyphens:none!important;
    -webkit-line-clamp:unset!important;
    -webkit-box-orient:unset!important;
    text-overflow:clip!important;
}

/* Do not break French words with artificial hyphens on narrow cards. */
.elementor-widget-af_growth .afg-growth__date span,
.elementor-widget-af_growth .afg-growth__date strong,
.elementor-widget-af_growth .afg-growth__card-text{
    word-break:normal!important;
    overflow-wrap:break-word!important;
}

/* Keep enough breathing room around text. */
.elementor-widget-af_growth .afg-growth__date{
    flex:0 0 auto!important;
    min-height:72px;
}
.elementor-widget-af_growth .afg-growth__card-text{
    flex:0 0 auto!important;
    margin-top:20px;
}

/* Hover moves the complete structural card, while the icon keeps its centered offset. */
@media (hover:hover) and (pointer:fine){
    .elementor-widget-af_growth .afg-growth__card:hover .afg-growth__icon{
        transform:translate(-50%,-50%) scale(1.06)!important;
    }
}

/* Tablet: no clipped rows, enough vertical gap for circles. */
@media (max-width:1199px){
    .elementor-widget-af_growth .afg-growth__timeline{
        grid-template-columns:repeat(3,minmax(0,1fr));
        gap:54px 16px!important;
        padding-top:30px!important;
    }
    .elementor-widget-af_growth .afg-growth__panel{
        min-height:0!important;
        padding:42px 20px 28px;
    }
}

@media (max-width:767px){
    .elementor-widget-af_growth .afg-growth__timeline{
        grid-template-columns:repeat(2,minmax(0,1fr));
        gap:54px 16px!important;
    }
}

@media (max-width:520px){
    .elementor-widget-af_growth .afg-growth__timeline{
        grid-template-columns:1fr!important;
        gap:56px!important;
        padding-top:30px!important;
    }
    .elementor-widget-af_growth .afg-growth__panel{
        min-height:0!important;
        padding:42px 20px 26px;
    }
    .elementor-widget-af_growth .afg-growth__card-text{
        font-size:14px;
        line-height:1.6;
    }
}

/* Elementor containers must not cut the floating circles or the last text line. */
.elementor-widget-af_growth,
.elementor-widget-af_growth > .elementor-widget-container{
    overflow:visible!important;
    min-height:0!important;
    height:auto!important;
}