/* ==========================================
   INSIGHTS PAGE CATEGORY FILTER
========================================== */

/* FILTER BAR */

.insights-filter{
    display:flex;
    align-items:center;
    justify-content:flex-start;
    flex-wrap:wrap;
    gap:18px 50px;
    margin-bottom:40px;
    padding:18px 0;
    border-top:1px solid #E3E0D7;
    border-bottom:1px solid #E3E0D7;
}

.insights-filter button{
    background:none;
    border:none;
    padding:0;
    margin:0;
    cursor:pointer;
    white-space:nowrap;

    font-family:'Inter',sans-serif;
    font-size:14px;
    font-weight:500;
    color:#8A8A8A;

    transition:all .25s ease;
}

.insights-filter button:hover{
    color:#0F2A44;
}

.insights-filter button.active{
    color:#C2A75C;
}

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

.insights-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:50px 40px;
}

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

.insight-card{
    display:flex;
    flex-direction:column;
}

.insight-image-link{
    display:block;
    overflow:hidden;
    border-radius:12px;
}

.insight-card img{
    width:100%;
    height:260px;
    object-fit:cover;
    display:block;
    transition:transform .4s ease;
}

.insight-card:hover img{
    transform:scale(1.04);
}

.insight-content{
    padding-top:22px;
}

/* CATEGORY LABEL */

.insight-category{
    color:#C2A75C;
	font-family:'Inter',sans-serif;
    font-size:13px;
    text-transform:uppercase;
    letter-spacing:1px;
    margin-bottom:8px;
}

/* DATE */

.insight-meta{
	font-family:'Inter',sans-serif;
    font-size:13px;
    color:#8A8A8A;
    margin-bottom:16px;
    line-height:1.5;
}

/* TITLE */

.insight-card h3{
	font-family:'Inter',sans-serif;
    font-size:20px;
    line-height:1.35;
    margin-bottom:16px;
}

.insight-card h3 a{
    color:#0F2A44;
	font-family:'Inter',sans-serif;
    text-decoration:none;
    transition:all .25s ease;
}

.insight-card h3 a:hover{
    color:#C2A75C;
}

/* EXCERPT */

.insight-card p{
    color:#6A6A6A;
	font-family:'Inter',sans-serif;
    line-height:1.8;
    margin-bottom:20px;
    font-size:14px;
}

/* READ MORE */

.read-essay{
    color:#0F2A44;
	font-family:'Inter',sans-serif;
    font-weight:600;
    text-decoration:none;
    transition:all .25s ease;
}

.read-essay:hover{
    color:#C2A75C;
}

/* LOAD MORE */

.insights-load-more-wrap{
    display:flex;
    justify-content:center;
    margin-top:50px;
}

.insights-load-more{
    background:none;
    border:1px solid #0F2A44;
    border-radius:0;
    cursor:pointer;
    padding:14px 28px;

    color:#0F2A44;
	font-family:'Inter',sans-serif;
    font-size:14px;
    font-weight:600;
    text-decoration:none;

    transition:all .25s ease;
}

.insights-load-more:hover{
    border-color:#C2A75C;
    color:#C2A75C;
}

.insights-load-more:disabled{
    cursor:default;
    opacity:.55;
}

.insights-load-more.is-loading{
    align-items:center;
    display:inline-flex;
    gap:10px;
}

.insights-loading{
    align-items:center;
    color:#8A8A8A;
    display:flex;
    font-family:'Inter',sans-serif;
    font-size:14px;
    gap:12px;
    grid-column:1/-1;
    justify-content:center;
    min-height:260px;
}

.insights-spinner{
    animation:dryoshiInsightsSpin .8s linear infinite;
    border:2px solid #E3E0D7;
    border-top-color:#C2A75C;
    border-radius:50%;
    display:inline-block;
    flex:0 0 auto;
    height:18px;
    width:18px;
}

@keyframes dryoshiInsightsSpin{
    to{
        transform:rotate(360deg);
    }
}

/* Grid Filter Animation */
.insights-grid{
    transition:
        opacity .3s ease,
        transform .3s ease;
}

.insights-grid.filtering{
    opacity:.25;
    transform:translateY(8px);
}

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

@media (max-width:980px){

    .insights-grid{
        grid-template-columns:repeat(2,1fr);
        gap:40px 30px;
    }

    .insight-card h3{
        font-size:20px;
    }

    .insights-filter{
        justify-content:center;
        flex-wrap:wrap;
        gap:18px 28px;
    }

}

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

@media (max-width:767px){

    .insights-grid{
        grid-template-columns:1fr;
        gap:40px;
    }

    .insight-card img{
        height:auto;
        aspect-ratio:4/3;
    }

    .insight-card h3{
        font-size:20px;
        line-height:1.35;
    }

    .insights-filter{
        justify-content:center;
        flex-wrap:wrap;
        gap:12px 18px;
        padding:14px 0;
        margin-bottom:30px;
    }

    .insights-filter button{
        font-size:13px;
    }

}

/* ==========================================
   SMALL PHONES
========================================== */

@media (max-width:480px){

    .insights-filter{
        flex-direction:column;
        align-items:center;
        gap:14px;
    }

}