@import url('https://fonts.googleapis.com/css2?family=Average&family=Francois+One&family=Merriweather+Sans:ital,wght@0,300..800;1,300..800&family=Rubik:ital,wght@0,300..900;1,300..900&family=Ubuntu:ital,wght@0,300;0,400;0,500;0,700;1,300;1,400;1,500;1,700&display=swap');

@import url("tablet-view.css");
@import url("mobile-view.css");

@media only screen and (min-width: 992px) {
    /* ----------------------------------------------------
   PLD LAYOUT (2 COLUMN: CATEGORY + POSTS)
---------------------------------------------------- */

    .pld-grid{
        display: grid;
        grid-template-columns: 260px 1fr;
        gap: 40px;
        align-items: start;
    }

    .pld-sidebar{
        padding-right: 20px;
    }

    .pld-content{
        width: 100%;
    }


    /* =========================================
    FIRST POST FULL WIDTH + 2 COLUMN GRID
    ========================================= */

    .pld-post-list{
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 32px;
    }

    /* First post full width */
    .pld-post-item:first-child{
        grid-column: 1 / -1;
        display: flex;
        flex-direction: row;
    }

    /* Make first post image larger */
    .pld-post-item:first-child .pld-post-image img{
        width: 976px;
        height: 450px;
        object-fit: cover;
        object-position: top;
        border-radius: 8px;
        margin-bottom: 20px;
    }

    /* Stack text under image for first post */
    .pld-post-item:first-child{
        flex-direction: column;
        color: #fff;
    
    }

    /* Optional bigger title */
    .pld-post-item:first-child .pld-post-title{
        width: 976px!important;
        font-family: "Average", serif;
        font-weight: 400;
        font-style: normal;
        font-size: 40px;
        line-height: 120%;
        letter-spacing: 1%;
        color: #fff;
        
    }
    .pld-post-item:first-child .pld-post-title a{
        color: #fff;
    }

    .pld-post-btn {
        padding-top: 30px;
    }

    .pld-post-item:first-child .pld-post-btn a{
        color: #fff;
        font-family: "Merriweather Sans", sans-serif;
        font-weight: 700;
        font-size: 18px;
        line-height: 160%;
    }

    /* Other posts normal */
    .pld-post-item:not(:first-child){
        flex-direction: column;
        width: 472px!important;
        color: #fff;
        padding-top: 30px;
        
    }

    .pld-post-item:not(:first-child) .pld-post-image img{
        width: 472px;
        height: 265.5px;
        object-fit: cover;
        object-position: top;
        border-radius: 8px;
    }

    .pld-post-item:not(:first-child) .pld-post-title{
        font-size: 28px;
        width: 472px!important;
        color: #fff;
    }

    .pld-post-item:not(:first-child) .pld-post-title a{
        color: #fff;
    }

    .pld-post-item:not(:first-child) .pld-post-btn a{
        color: #fff;
        font-family: "Merriweather Sans", sans-serif;
        font-weight: 700;
        font-size: 18px;
        line-height: 160%;
    }

    .pld-post-btn a{
    display:inline-flex;
    align-items:center;
    gap:8px;
    text-decoration:none;
    }

    .pld-arrow-icon{
        width:12px;
        height:8px;
        transition: transform .3s ease;
    }

    .pld-post-btn a:hover .pld-arrow-icon{
        transform: translateX(4px);
    }
    /* ----------------------------------------------------
    Category Filter (Sidebar Style)
    ---------------------------------------------------- */
    .pld-category-title{
        font-family: "Roboto";
        font-size: 700;
        font-size: 18px;
        line-height: 150%;
        color:#fff;
    }
    .pld-category-filter {
        list-style: none;
        padding: 0;
        margin: 0;
    }

    .pld-category-filter li {
        padding: 10px 15px;
        margin-bottom: 10px;
        cursor: pointer;
        font-size: 0.9em;
        font-weight: 500;
        color: #fff;
        transition: all 0.3s ease;
        text-transform: capitalize;
    }

    .pld-category-filter li:hover {
        background: #0C0C0C;
        color: #fff;
        border: 1px solid rgba(255, 255, 255, 0.2);
    }

    .pld-category-filter li.active {
        background: #0C0C0C;
        color: #fff;
        border: 1px solid rgba(255, 255, 255, 0.2);
    }


    /* ----------------------------------------------------
    Pagination
    ---------------------------------------------------- */

    .pld-pagination {
        margin-top: 40px;
    }

    .pld-page {
        display: inline-block;
        padding: 8px 16px;
        margin: 0 4px;
        background: #fff;
        border: 1px solid #e0e0e0;
        border-radius: 6px;
        cursor: pointer;
        font-weight: 500;
        color: #444;
        transition: all 0.2s ease;
    }

    .pld-page:hover {
        background: #111;
        color: #fff;
        border-color: #111;
    }

    .pld-page.active {
        background: #111;
        color: #fff;
        border-color: #111;
        box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    }
    
}