/* ==========================================
BLOG LAYOUT
========================================== */

.blog-list{
    padding:60px 0;
}

.blog-layout{
    display:grid;
    grid-template-columns:320px 1fr;
    gap:40px;
    align-items:start;
}

/* ==========================================
SIDEBAR
========================================== */

.blog-sidebar{
    position:sticky;
    top:120px;
}

.sidebar-card{
    background:#fff;
    border-radius:25px;
    padding:30px;
    box-shadow:0 15px 40px rgba(0,0,0,.06);
}

.sidebar-title{
    background:linear-gradient(
        135deg,
        #6366f1,
        #4f46e5
    );

    color:#fff;

    padding:18px;

    border-radius:15px;

    text-align:center;

    font-size:18px;

    font-weight:700;

    margin-bottom:25px;
}

.sidebar-link{
    display:flex;
    align-items:center;
    justify-content:space-between;

    padding:15px 18px;

    margin-bottom:12px;

    border-radius:14px;

    color:#1f2937;

    font-weight:600;

    transition:.35s;
}

.sidebar-link:hover{
    background:#eef2ff;
    color:#4f46e5;
    padding-left:25px;
}

.sidebar-link.active{
    background:linear-gradient(
        135deg,
        #6366f1,
        #4f46e5
    );

    color:white;

    box-shadow:
    0 10px 25px rgba(99,102,241,.25);
}

/* ==========================================
CONTENU BLOG
========================================== */

.blog-content-wrapper{
    width:100%;
}

/* ==========================================
GRID
========================================== */

.blog-grid{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:35px;
}

/* ==========================================
CARD
========================================== */

.blog-card{
    background:#fff;

    border-radius:22px;

    overflow:hidden;

    box-shadow:0 15px 40px rgba(0,0,0,.06);

    transition:.4s;
}

.blog-card:hover{
    transform:translateY(-10px);

    box-shadow:
    0 20px 50px rgba(0,0,0,.12);
}

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

.blog-image{
    height:260px;
    overflow:hidden;
}

.blog-image img{
    width:100%;
    height:100%;
    object-fit:cover;

    transition:.6s;
}

.blog-card:hover img{
    transform:scale(1.08);
}

/* ==========================================
CONTENU
========================================== */

.blog-content{
    padding:25px;
}

/* ==========================================
META
========================================== */

.blog-meta{
    display:flex;
    flex-wrap:wrap;
    gap:15px;

    margin-bottom:15px;

    color:#64748b;

    font-size:14px;
}

.blog-meta span{
    display:flex;
    align-items:center;
    gap:6px;
}

/* ==========================================
TITRE
========================================== */

.blog-content h3{
    color:#111827;

    font-size:24px;

    line-height:1.4;

    margin-bottom:15px;

    transition:.3s;
}

.blog-card:hover h3{
    color:#4f46e5;
}

/* ==========================================
DESCRIPTION
========================================== */

.blog-content p{
    color:#111827;

    font-size:15px;

    line-height:1.8;
}

/* ==========================================
BOUTON LIRE
========================================== */

.read-more{
    display:inline-flex;

    align-items:center;

    gap:10px;

    margin-top:20px;

    color:#4f46e5;

    font-weight:700;

    transition:.3s;
}

.read-more i{
    transition:.3s;
}

.read-more:hover i{
    transform:translateX(6px);
}

/* ==========================
PAGINATION
========================== */

.pagination-wrapper{
    margin-top:40px;
    display:flex;
    justify-content:center;
}

.pagination{
    display:flex;
    align-items:center;
    gap:6px;
    flex-wrap:wrap;
}

.pagination .page-item{
    list-style:none;
}

.pagination .page-link{

    width:36px;
    height:36px;

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

    border:none !important;

    border-radius:10px;

    background:#fff;

    color:#111827;

    font-size:14px;
    font-weight:600;

    box-shadow:0 3px 10px rgba(0,0,0,.05);

    transition:.3s;
}

.pagination .page-link:hover{
    background:#eef2ff;
    color:#6366f1;
}

/* Page active */

.pagination .active .page-link{
    background:linear-gradient(
        135deg,
        #6366f1,
        #4f46e5
    );

    color:#fff;
}

/* Précédent / Suivant */

.pagination .page-item:first-child .page-link,
.pagination .page-item:last-child .page-link{
    width:auto;
    min-width:36px;
    padding:0 12px;
}

/* Désactivé */

.pagination .disabled .page-link{
    opacity:.4;
    background:#f8fafc;
}

/* Icônes Laravel */

.pagination svg{
    width:14px;
    height:14px;
}


/* ==========================================
RESPONSIVE
========================================== */

@media(max-width:1200px){

    .blog-layout{
        grid-template-columns:280px 1fr;
    }
}

@media(max-width:991px){

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

    .blog-sidebar{
        position:relative;
        top:0;
    }

    .blog-grid{
        grid-template-columns:repeat(2,1fr);
    }
}

@media(max-width:768px){

    .blog-grid{
        grid-template-columns:1fr;
    }

    .sidebar-card{
        padding:20px;
    }

    .blog-content h3{
        font-size:20px;
    }

    .blog-image{
        height:220px;
    }
}

/* =========================
 PAGINATION LARAVEL
========================= */

.pagination-wrapper{
    margin-top:50px;
    display:flex;
    justify-content:center;
}

.pagination-wrapper nav{
    display:flex;
    justify-content:center;
}

.pagination-wrapper nav > div{
    display:flex;
    align-items:center;
    gap:8px;
}

.pagination-wrapper span,
.pagination-wrapper a{

    min-width:42px;
    height:42px;

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

    padding:0 14px;

    border-radius:12px;

    background:#fff;

    color:#1f2937;

    text-decoration:none;

    font-weight:600;

    box-shadow:0 5px 15px rgba(0,0,0,.06);

    transition:.3s;
}

.pagination-wrapper a:hover{

    background:#eef2ff;

    color:#6366f1;

    transform:translateY(-2px);
}

/* page active */

.pagination-wrapper [aria-current="page"] span{

    background:linear-gradient(
        135deg,
        #6366f1,
        #4f46e5
    );

    color:#fff;

    box-shadow:
    0 10px 25px rgba(99,102,241,.3);
}

/* disabled */

.pagination-wrapper .opacity-50{

    opacity:.4;
}

/* cache "Showing 1 to 6 of 10 results" */

.pagination-wrapper p{
    display:none;
}

/* icônes */

.pagination-wrapper svg{
    width:16px;
    height:16px;
}