/* ==========================================================
   PADIDAR ARTICLES MAGAZINE V2
   ========================================================== */

.pfa-page{
    --navy:#0a3357;
    --navy-dark:#071c30;
    --red:#ee1734;
    --text:#17344d;
    --muted:#6f8394;
    --line:#dfe7ee;
    --soft:#f5f8fb;

    background:
        #f6f8fb;

    color:
        var(--text);
}


.pfa-wrap{
    width:
        min(
            1320px,
            calc(100% - 48px)
        );

    margin-inline:auto;
}



/* ==========================================================
   HERO
   ========================================================== */

.pfa-hero{
    position:relative;

    overflow:hidden;

    padding:
        78px 0 72px;

    background:
        radial-gradient(
            circle at 8% 15%,
            rgba(255,255,255,.12),
            transparent 28%
        ),
        radial-gradient(
            circle at 90% 80%,
            rgba(238,23,52,.14),
            transparent 25%
        ),
        linear-gradient(
            135deg,
            #06192c 0%,
            #0a3459 60%,
            #0c416d 100%
        );

    color:#fff;
}


.pfa-hero:after{
    content:"";

    position:absolute;

    width:420px;
    height:420px;

    left:-170px;
    bottom:-220px;

    border:
        1px solid rgba(255,255,255,.10);

    border-radius:50%;
}


.pfa-hero-content{
    position:relative;
    z-index:2;

    max-width:
        820px;
}


.pfa-eyebrow{
    display:inline-flex;

    padding:
        7px 13px;

    border:
        1px solid rgba(255,255,255,.20);

    border-radius:
        999px;

    background:
        rgba(255,255,255,.07);

    color:
        #fff;

    font-size:
        12px;

    font-weight:
        900;
}


.pfa-hero h1{
    margin:
        18px 0 14px;

    max-width:
        820px;

    color:
        #fff;

    font-size:
        clamp(
            34px,
            4vw,
            54px
        );

    font-weight:
        950;

    line-height:
        1.45;
}


.pfa-hero p{
    max-width:
        710px;

    margin:0;

    color:
        #d3e0ea;

    font-size:
        15px;

    font-weight:
        500;

    line-height:
        2.05;
}


.pfa-hero-stats{
    display:flex;

    gap:
        12px;

    margin-top:
        27px;
}


.pfa-hero-stats > div{
    display:flex;

    align-items:center;

    gap:
        9px;

    min-height:
        46px;

    padding:
        0 15px;

    border:
        1px solid rgba(255,255,255,.12);

    border-radius:
        10px;

    background:
        rgba(255,255,255,.07);
}


.pfa-hero-stats strong{
    color:#fff;

    font-size:
        18px;

    font-weight:
        950;
}


.pfa-hero-stats span{
    color:
        #dbe5ee;

    font-size:
        11px;

    font-weight:
        700;
}



/* ==========================================================
   TOPICS
   ========================================================== */

.pfa-topics{
    padding:
        26px 0 23px;

    background:
        #fff;

    border-bottom:
        1px solid var(--line);
}


.pfa-topics-head{
    display:flex;

    align-items:center;

    justify-content:
        space-between;

    margin-bottom:
        15px;
}


.pfa-topics-head span{
    display:block;

    margin-bottom:
        3px;

    color:
        var(--red);

    font-size:
        11px;

    font-weight:
        900;
}


.pfa-topics-head strong{
    color:
        var(--navy);

    font-size:
        15px;

    font-weight:
        950;
}


.pfa-topic-scroll{
    display:flex;

    gap:
        9px;

    overflow-x:auto;

    padding-bottom:
        4px;

    scrollbar-width:
        none;
}


.pfa-topic-scroll::-webkit-scrollbar{
    display:none;
}


.pfa-topic-chip{
    display:inline-flex;

    align-items:center;

    gap:
        7px;

    flex:
        0 0 auto;

    min-height:
        39px;

    padding:
        0 13px;

    border:
        1px solid #dce5ed;

    border-radius:
        999px;

    background:
        #f8fafc;

    color:
        #375b78;

    font-size:
        11px;

    font-weight:
        850;

    text-decoration:
        none;

    transition:
        .2s ease;
}


.pfa-topic-chip small{
    display:inline-flex;

    align-items:center;

    justify-content:center;

    min-width:
        21px;

    height:
        21px;

    padding:
        0 6px;

    border-radius:
        999px;

    background:
        #eaf0f5;

    color:
        #506b81;

    font-size:
        9px;

    font-weight:
        900;
}


.pfa-topic-chip:hover,
.pfa-topic-chip.is-active{
    border-color:
        var(--red);

    background:
        var(--red);

    color:#fff;
}


.pfa-topic-chip:hover small,
.pfa-topic-chip.is-active small{
    background:
        rgba(255,255,255,.18);

    color:#fff;
}



/* ==========================================================
   SECTION TITLES
   ========================================================== */

.pfa-section-title{
    display:flex;

    align-items:flex-end;

    justify-content:
        space-between;

    gap:
        20px;

    margin-bottom:
        24px;
}


.pfa-section-title span{
    display:block;

    margin-bottom:
        4px;

    color:
        var(--red);

    font-size:
        11px;

    font-weight:
        900;
}


.pfa-section-title h2{
    margin:0;

    color:
        var(--navy);

    font-size:
        27px;

    font-weight:
        950;
}


.pfa-result-count{
    padding:
        7px 12px;

    border:
        1px solid var(--line);

    border-radius:
        8px;

    background:#fff;

    color:
        var(--muted);

    font-size:
        11px;

    font-weight:
        800;
}



/* ==========================================================
   FEATURED
   ========================================================== */

.pfa-featured-section{
    padding:
        48px 0 52px;

    background:
        #f5f8fb;
}


.pfa-featured-layout{
    display:grid;

    grid-template-columns:
        minmax(0,1.35fr)
        minmax(360px,.65fr);

    gap:
        22px;
}


.pfa-main-feature{
    overflow:hidden;

    border:
        1px solid var(--line);

    border-radius:
        20px;

    background:#fff;

    box-shadow:
        0 12px 35px
        rgba(7,44,75,.065);
}


.pfa-main-feature-image{
    display:block;

    position:relative;

    width:100%;

    aspect-ratio:
        16/9;

    overflow:hidden;

    background:
        #e9eef3;
}


.pfa-main-feature-image img{
    display:block;

    width:100%;
    height:100%;

    object-fit:
        cover;

    object-position:
        center;

    transition:
        transform .35s ease;
}


.pfa-main-feature:hover
.pfa-main-feature-image img{
    transform:
        scale(1.035);
}


.pfa-main-feature-body{
    padding:
        23px 24px 25px;
}


.pfa-card-meta{
    display:flex;

    align-items:center;

    justify-content:
        space-between;

    gap:
        14px;

    margin-bottom:
        11px;
}


.pfa-card-meta span{
    display:inline-flex;

    padding:
        5px 9px;

    border-radius:
        999px;

    background:
        #fff0f2;

    color:
        var(--red);

    font-size:
        10px;

    font-weight:
        900;
}


.pfa-card-meta time{
    color:
        #8b9aa8;

    font-size:
        10px;

    font-weight:
        700;
}


.pfa-main-feature h2{
    margin:
        0 0 12px;

    font-size:
        24px;

    line-height:
        1.65;

    font-weight:
        950;
}


.pfa-main-feature h2 a{
    color:
        var(--navy);

    text-decoration:
        none;
}


.pfa-main-feature p{
    margin:
        0 0 18px;

    color:
        #637a8c;

    font-size:
        13px;

    line-height:
        2;

    font-weight:
        500;
}


.pfa-read-button{
    display:inline-flex;

    align-items:center;

    gap:
        12px;

    min-height:
        43px;

    padding:
        0 15px;

    border-radius:
        9px;

    background:
        var(--red);

    color:#fff;

    font-size:
        11px;

    font-weight:
        900;

    text-decoration:
        none;
}


.pfa-read-button span{
    font-size:
        17px;
}



/* ==========================================================
   SPOTLIGHT CARDS
   ========================================================== */

.pfa-spotlight-grid{
    display:grid;

    grid-template-columns:
        1fr 1fr;

    gap:
        14px;
}


.pfa-spotlight-card{
    overflow:hidden;

    border:
        1px solid var(--line);

    border-radius:
        15px;

    background:
        #fff;

    box-shadow:
        0 7px 21px
        rgba(6,44,74,.045);
}


.pfa-spotlight-image{
    display:block;

    width:100%;

    aspect-ratio:
        4/3;

    overflow:hidden;

    background:
        #e9eef3;
}


.pfa-spotlight-image img{
    display:block;

    width:100%;
    height:100%;

    object-fit:
        cover;

    object-position:
        center;
}


.pfa-spotlight-body{
    padding:
        13px 13px 15px;
}


.pfa-small-category{
    color:
        var(--red);

    font-size:
        9px;

    font-weight:
        900;
}


.pfa-spotlight-card h3{
    min-height:
        55px;

    margin:
        6px 0 9px;

    font-size:
        13px;

    line-height:
        1.8;

    font-weight:
        900;
}


.pfa-spotlight-card h3 a{
    color:
        var(--navy);

    text-decoration:
        none;
}


.pfa-spotlight-card time{
    color:
        #91a0ad;

    font-size:
        9px;

    font-weight:
        700;
}



/* ==========================================================
   PLACEHOLDER IMAGE
   ========================================================== */

.pfa-image-placeholder{
    display:flex;

    align-items:center;

    justify-content:center;

    width:100%;
    height:100%;

    background:
        linear-gradient(
            135deg,
            #0a3459,
            #071c30
        );

    color:
        #fff;

    font-size:
        13px;

    font-weight:
        900;
}


.pfa-image-placeholder.is-small{
    font-size:
        10px;
}



/* ==========================================================
   ALL ARTICLES
   ========================================================== */

.pfa-all-section{
    padding:
        53px 0 70px;

    background:
        #fff;
}


.pfa-articles-grid{
    display:grid;

    grid-template-columns:
        repeat(
            3,
            minmax(0,1fr)
        );

    gap:
        21px;
}


.pfa-article-card{
    overflow:hidden;

    border:
        1px solid var(--line);

    border-radius:
        17px;

    background:
        #fff;

    box-shadow:
        0 8px 24px
        rgba(6,43,73,.045);

    transition:
        transform .2s ease,
        box-shadow .2s ease;
}


.pfa-article-card:hover{
    transform:
        translateY(-4px);

    box-shadow:
        0 14px 34px
        rgba(6,43,73,.09);
}


.pfa-article-image{
    position:relative;

    display:block;

    width:100%;

    aspect-ratio:
        16/10;

    overflow:hidden;

    background:
        #e9eef3;
}


.pfa-article-image img{
    display:block;

    width:100%;
    height:100%;

    object-fit:
        cover;

    object-position:
        center;

    transition:
        transform .35s ease;
}


.pfa-article-card:hover
.pfa-article-image img{
    transform:
        scale(1.035);
}


.pfa-card-category{
    position:absolute;

    right:
        12px;

    bottom:
        12px;

    display:inline-flex;

    min-height:
        28px;

    align-items:center;

    padding:
        0 10px;

    border-radius:
        999px;

    background:
        rgba(8,37,62,.90);

    color:#fff;

    font-size:
        9px;

    font-weight:
        900;

    backdrop-filter:
        blur(4px);
}


.pfa-article-body{
    padding:
        17px 18px 19px;
}


.pfa-article-body time{
    display:block;

    margin-bottom:
        7px;

    color:
        #92a1ae;

    font-size:
        9px;

    font-weight:
        700;
}


.pfa-article-body h3{
    min-height:
        62px;

    margin:
        0 0 9px;

    font-size:
        16px;

    line-height:
        1.9;

    font-weight:
        950;
}


.pfa-article-body h3 a{
    color:
        var(--navy);

    text-decoration:
        none;
}


.pfa-article-body p{
    min-height:
        72px;

    margin:
        0 0 14px;

    color:
        #6b8192;

    font-size:
        11px;

    line-height:
        2;

    font-weight:
        500;
}


.pfa-card-more{
    display:flex;

    align-items:center;

    justify-content:
        space-between;

    min-height:
        40px;

    padding:
        0 12px;

    border-radius:
        8px;

    background:
        #f5f8fb;

    color:
        #214966;

    font-size:
        10px;

    font-weight:
        900;

    text-decoration:
        none;

    transition:
        .2s ease;
}


.pfa-card-more span{
    color:
        var(--red);

    font-size:
        16px;
}


.pfa-card-more:hover{
    background:
        var(--navy);

    color:
        #fff;
}



/* ==========================================================
   EMPTY
   ========================================================== */

.pfa-no-results{
    padding:
        44px;

    border:
        1px dashed #ccd7e0;

    border-radius:
        15px;

    background:
        var(--soft);

    text-align:center;
}


.pfa-no-results strong{
    display:block;

    margin-bottom:
        14px;

    color:
        var(--navy);
}


.pfa-no-results a{
    color:
        var(--red);

    font-size:
        12px;

    font-weight:
        900;
}



/* ==========================================================
   CTA
   ========================================================== */

.pfa-bottom-cta{
    padding:
        0 0 72px;

    background:
        #fff;
}


.pfa-cta-box{
    display:flex;

    align-items:center;

    justify-content:
        space-between;

    gap:
        35px;

    padding:
        34px 38px;

    border-radius:
        20px;

    background:
        linear-gradient(
            135deg,
            #071c30,
            #0b3c65
        );

    color:#fff;

    box-shadow:
        0 15px 38px
        rgba(5,34,58,.14);
}


.pfa-cta-box span{
    color:
        #ff8291;

    font-size:
        11px;

    font-weight:
        900;
}


.pfa-cta-box h2{
    max-width:
        660px;

    margin:
        5px 0 8px;

    color:#fff;

    font-size:
        24px;

    font-weight:
        950;

    line-height:
        1.6;
}


.pfa-cta-box p{
    max-width:
        640px;

    margin:0;

    color:
        #d2dfeb;

    font-size:
        12px;

    line-height:
        1.9;
}


.pfa-cta-box > a{
    display:inline-flex;

    align-items:center;

    justify-content:center;

    flex:
        0 0 auto;

    min-width:
        175px;

    min-height:
        48px;

    padding:
        0 20px;

    border-radius:
        10px;

    background:
        var(--red);

    color:#fff;

    font-size:
        12px;

    font-weight:
        900;

    text-decoration:
        none;
}



/* ==========================================================
   TABLET
   ========================================================== */

@media(max-width:1050px){

    .pfa-featured-layout{
        grid-template-columns:
            1fr;
    }


    .pfa-spotlight-grid{
        grid-template-columns:
            repeat(4,minmax(0,1fr));
    }


    .pfa-spotlight-card h3{
        font-size:
            12px;
    }


    .pfa-articles-grid{
        grid-template-columns:
            repeat(2,minmax(0,1fr));
    }

}



/* ==========================================================
   MOBILE
   ========================================================== */

@media(max-width:700px){

    .pfa-wrap{
        width:
            calc(100% - 24px);
    }


    .pfa-hero{
        padding:
            46px 0 44px;
    }


    .pfa-hero h1{
        font-size:
            28px;
    }


    .pfa-hero p{
        font-size:
            13px;

        line-height:
            2;
    }


    .pfa-hero-stats{
        display:grid;

        grid-template-columns:
            1fr 1fr;
    }


    .pfa-hero-stats > div{
        justify-content:center;

        padding:
            0 9px;
    }


    .pfa-topics{
        padding:
            20px 0;
    }


    .pfa-featured-section{
        padding:
            34px 0 38px;
    }


    .pfa-section-title{
        align-items:
            flex-start;

        flex-direction:
            column;

        gap:
            9px;
    }


    .pfa-section-title h2{
        font-size:
            22px;
    }


    .pfa-main-feature{
        border-radius:
            15px;
    }


    .pfa-main-feature-image{
        aspect-ratio:
            16/10;
    }


    .pfa-main-feature-body{
        padding:
            17px;
    }


    .pfa-main-feature h2{
        font-size:
            18px;

        line-height:
            1.8;
    }


    .pfa-main-feature p{
        font-size:
            12px;
    }


    .pfa-spotlight-grid{
        display:grid;

        grid-template-columns:
            1fr 1fr;

        gap:
            10px;
    }


    .pfa-spotlight-image{
        aspect-ratio:
            16/11;
    }


    .pfa-spotlight-card h3{
        min-height:
            72px;

        font-size:
            11px;

        line-height:
            1.9;
    }


    .pfa-all-section{
        padding:
            36px 0 48px;
    }


    .pfa-articles-grid{
        grid-template-columns:
            1fr;

        gap:
            16px;
    }


    .pfa-article-card{
        border-radius:
            15px;
    }


    .pfa-article-image{
        aspect-ratio:
            16/10;
    }


    .pfa-article-body{
        padding:
            16px;
    }


    .pfa-article-body h3{
        min-height:
            0;

        font-size:
            16px;
    }


    .pfa-article-body p{
        min-height:
            0;

        font-size:
            12px;
    }


    .pfa-bottom-cta{
        padding:
            0 0 45px;
    }


    .pfa-cta-box{
        flex-direction:
            column;

        align-items:
            stretch;

        padding:
            25px 20px;
    }


    .pfa-cta-box h2{
        font-size:
            20px;
    }


    .pfa-cta-box > a{
        width:
            100%;
    }

}



/* ==========================================================
   EXTRA SMALL MOBILE
   ========================================================== */

@media(max-width:430px){

    .pfa-spotlight-grid{
        grid-template-columns:
            1fr;
    }


    .pfa-spotlight-card{
        display:grid;

        grid-template-columns:
            130px 1fr;
    }


    .pfa-spotlight-image{
        height:
            100%;

        aspect-ratio:
            auto;
    }


    .pfa-spotlight-card h3{
        min-height:
            0;
    }

}