/* =========================================================
   BLOG VARIABLES
========================================================= */

.portfolio-blog {

    --blog-bg:#ffffff;
    --blog-card:#ffffff;

    --blog-accent:#06b6d4;
    --blog-accent-dark:#0891b2;
    --blog-accent-light:#e0f7fb;

    --blog-border:#c7edf4;

    --blog-text:#0f172a;
    --blog-muted:#64748b;
    --blog-soft:#f5fcfd;

    background:#ffffff;
    color:var(--blog-text);

    font-family:'Roboto',sans-serif;

    font-size:14px;
    line-height:1.65;
}


/* =========================================================
   HEADER
========================================================= */

.blog-page-header {

    position:relative;

    overflow:hidden;

    padding:52px 20px 42px;

    text-align:center;

    background:#ffffff;

    border-bottom:
        3px solid
        var(--blog-accent);
}


.blog-page-header::before {

    content:"";

    position:absolute;

    width:500px;
    height:220px;

    left:50%;
    bottom:-150px;

    transform:
        translateX(-50%);

    background:
        radial-gradient(
            ellipse,
            rgba(6,182,212,.15),
            transparent 70%
        );

    pointer-events:none;
}


.blog-page-header h1 {

    position:relative;

    margin:0 0 8px;

    font-size:
        clamp(
            30px,
            5vw,
            43px
        );

    line-height:1.2;

    font-weight:700;

    letter-spacing:-.5px;

    color:#0f172a;
}


.blog-page-header h1 span {
    color:var(--blog-accent);
}


.blog-page-header p {

    position:relative;

    max-width:700px;

    margin:0 auto;

    color:#64748b;

    font-size:14px;
    line-height:1.6;
}


.blog-header-line {

    width:65px;
    height:3px;

    margin:
        18px auto 0;

    border-radius:3px;

    background:
        var(--blog-accent);
}


/* =========================================================
   CONTROLS
========================================================= */

.blog-controls {

    position:sticky;

    top:0;

    z-index:50;

    padding:13px 20px;

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

    backdrop-filter:
        blur(10px);

    border-bottom:
        1.5px solid
        var(--blog-border);

    box-shadow:
        0 3px 14px
        rgba(
            6,
            182,
            212,
            .06
        );
}


.blog-controls-inner {

    max-width:1180px;

    margin:0 auto;

    display:flex;

    flex-wrap:wrap;

    align-items:center;

    gap:12px;
}


/* =========================================================
   SEARCH
========================================================= */

.blog-search-wrap {

    position:relative;

    flex:1 1 250px;

    min-width:200px;
}


.blog-search-wrap svg {

    position:absolute;

    width:16px;
    height:16px;

    left:13px;
    top:50%;

    transform:
        translateY(-50%);

    color:
        var(--blog-accent);

    pointer-events:none;
}


#blogSearchInput {

    width:100%;

    padding:
        10px 12px
        10px 38px;

    border:
        1.5px solid
        var(--blog-border);

    border-radius:8px;

    background:#fbfeff;

    color:
        var(--blog-text);

    font-family:inherit;

    font-size:14px;

    outline:none;

    transition:.2s;
}


#blogSearchInput:focus {

    border-color:
        var(--blog-accent);

    box-shadow:
        0 0 0 3px
        rgba(
            6,
            182,
            212,
            .12
        );
}


/* =========================================================
   FILTERS
========================================================= */

.blog-filters {

    display:flex;

    flex-wrap:wrap;

    gap:7px;
}


.blog-filter-btn {

    border:
        1.5px solid
        var(--blog-border);

    background:#ffffff;

    color:#475569;

    border-radius:20px;

    padding:
        6px 13px;

    cursor:pointer;

    font-family:inherit;

    font-size:12px;

    font-weight:600;

    letter-spacing:.3px;

    text-transform:uppercase;

    transition:.18s;
}


.blog-filter-btn:hover {

    color:
        var(--blog-accent-dark);

    border-color:
        var(--blog-accent);

    background:
        var(--blog-accent-light);
}


.blog-filter-btn.active {

    background:
        var(--blog-accent);

    border-color:
        var(--blog-accent);

    color:#ffffff;
}


/* =========================================================
   MAIN
========================================================= */

.blog-main {

    max-width:1180px;

    margin:0 auto;

    padding:
        34px 20px
        70px;
}


.blog-results-info {

    margin-bottom:20px;

    color:#64748b;

    font-size:14px;
}


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

.blog-grid {

    display:grid;

    grid-template-columns:
        repeat(
            auto-fill,
            minmax(
                330px,
                1fr
            )
        );

    gap:24px;
}


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

.blog-card {

    overflow:hidden;

    display:flex;

    flex-direction:column;

    background:#ffffff;

    border:
        1.5px solid
        var(--blog-border);

    border-radius:15px;

    box-shadow:
        0 3px 10px
        rgba(
            6,
            182,
            212,
            .06
        );

    transition:
        transform .25s ease,
        box-shadow .25s ease,
        border-color .25s ease;
}


.blog-card:hover {

    transform:
        translateY(-4px);

    border-color:
        var(--blog-accent);

    box-shadow:
        0 10px 30px
        rgba(
            6,
            182,
            212,
            .14
        );
}


.blog-card-strip {

    height:3px;

    flex-shrink:0;

    background:
        var(--blog-accent);
}


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

.blog-card-images,
.single-blog-gallery {

    position:relative;

    width:100%;

    overflow:hidden;

    background:#f4fbfc;
}


.blog-img-slider {

    position:relative;

    width:100%;

    overflow:hidden;
}


.blog-img-slider img {

    width:100%;

    height:230px;

    object-fit:cover;

    object-position:
        center 30%;

    display:block;

    cursor:zoom-in;

    transition:
        transform .4s ease;
}


.blog-img-slider img[hidden] {
    display:none;
}


/* PATENT */

.blog-patent-card
.blog-img-slider {

    min-height:230px;

    display:flex;

    align-items:center;

    justify-content:center;

    background:#f8fcfd;
}


.blog-patent-card
.blog-img-slider img {

    height:auto;

    max-height:360px;

    object-fit:contain;

    object-position:center;
}


/* =========================================================
   ZOOM
========================================================= */

.blog-img-slider.zoomed img:not([hidden]) {
    transform:scale(1.55);
    cursor:zoom-out;
}


.blog-img-slider.zoomed-more img:not([hidden]) {
    transform:scale(1.95);
    cursor:zoom-out;
}


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

.blog-img-arrow {

    position:absolute;

    top:50%;

    width:32px;
    height:32px;

    transform:
        translateY(-50%);

    border:0;

    border-radius:50%;

    background:
        rgba(
            0,
            0,
            0,
            .43
        );

    color:#ffffff;

    cursor:pointer;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:18px;

    z-index:5;
}


.blog-img-arrow.prev {
    left:9px;
}


.blog-img-arrow.next {
    right:9px;
}


.blog-img-arrow:hover {
    background:
        var(--blog-accent);
}


/* =========================================================
   DOTS
========================================================= */

.blog-img-nav {

    position:absolute;

    left:50%;
    bottom:9px;

    transform:
        translateX(-50%);

    display:flex;

    gap:5px;

    z-index:6;
}


.blog-img-dot {

    width:7px;
    height:7px;

    padding:0;

    border:0;

    border-radius:50%;

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

    cursor:pointer;
}


.blog-img-dot.active {

    background:#ffffff;

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


/* =========================================================
   ZOOM ICON
========================================================= */

.blog-zoom-hint {

    position:absolute;

    right:10px;
    top:10px;

    width:30px;
    height:30px;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

    background:
        rgba(
            0,
            0,
            0,
            .45
        );

    color:#ffffff;

    font-size:14px;

    pointer-events:none;

    z-index:5;
}


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

.blog-card-body {

    display:flex;

    flex-direction:column;

    flex:1;

    gap:10px;

    padding:
        18px 20px 20px;
}


.blog-card-meta {

    display:flex;

    align-items:center;

    gap:8px;
}


.blog-date {

    margin-left:auto;

    font-size:12px;

    color:#94a3b8;
}


.blog-cat-badge {

    display:inline-block;

    padding:
        4px 10px;

    border-radius:6px;

    font-size:11px;

    font-weight:700;

    letter-spacing:.4px;

    text-transform:uppercase;
}


/* =========================================================
   CATEGORY COLORS
========================================================= */

.cat-hackathon {
    background:#e0f2fe;
    color:#0369a1;
}

.cat-research {
    background:#ede9fe;
    color:#6d28d9;
}

.cat-patent {
    background:#d1fae5;
    color:#065f46;
}

.cat-award {
    background:#fef3c7;
    color:#92400e;
}

.cat-conference {
    background:#ffedd5;
    color:#c2410c;
}

.cat-lab {
    background:#fce7f3;
    color:#9d174d;
}

.cat-collaboration {
    background:#ccfbf1;
    color:#0f766e;
}

.cat-outreach {
    background:#f1f5f9;
    color:#475569;
}

.cat-startup {
    background:#fef9c3;
    color:#854d0e;
}

.cat-coder {
    background:#e0e7ff;
    color:#3730a3;
}


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

.blog-card-title {

    margin:0;

    font-size:18px;

    line-height:1.4;

    font-weight:700;
}


.blog-card-title a {

    color:#0f172a;

    text-decoration:none;
}


.blog-card-title a:hover {

    color:
        var(--blog-accent-dark);
}


/* =========================================================
   TEXT
========================================================= */

.blog-card-text {

    color:#334155;

    font-size:14px;

    line-height:1.65;
}


.blog-read-more {

    margin-top:auto;

    color:
        var(--blog-accent-dark);

    font-size:14px;

    font-weight:600;

    text-decoration:none;
}


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

.blog-empty {

    grid-column:1/-1;

    padding:
        60px 20px;

    text-align:center;

    color:#64748b;

    font-size:14px;
}


/* =========================================================
   SINGLE BLOG
========================================================= */

.single-blog {

    padding:
        70px 20px;

    font-family:
        'Roboto',
        sans-serif;

    background:#ffffff;
}


.single-blog-inner {

    max-width:900px;

    margin:0 auto;
}


.single-blog-back {

    display:inline-block;

    margin-bottom:25px;

    color:#64748b;

    font-size:14px;

    font-weight:500;

    text-decoration:none;
}


.single-blog-back:hover {
    color:#06b6d4;
}


.single-blog-header {

    margin-bottom:30px;
}


.single-blog-header h1 {

    margin:
        15px 0 12px;

    color:#0f172a;

    font-size:
        clamp(
            28px,
            5vw,
            42px
        );

    line-height:1.2;

    font-weight:700;
}


.single-blog-meta {

    display:flex;

    flex-wrap:wrap;

    gap:15px;

    color:#64748b;

    font-size:14px;
}


/* =========================================================
   SINGLE GALLERY
========================================================= */

.single-blog-gallery {

    margin-bottom:30px;

    border-radius:15px;
}


.single-blog-gallery
.blog-img-slider img {

    height:auto;

    max-height:600px;

    object-fit:contain;

    background:#f8fafc;
}


/* =========================================================
   SINGLE CONTENT
========================================================= */

.single-blog-content {

    color:#334155;

    font-size:16px;

    line-height:1.8;
}


.single-blog-content p {
    margin-bottom:18px;
}


.single-blog-content h2,
.single-blog-content h3,
.single-blog-content h4 {

    color:#0f172a;

    margin:
        28px 0 12px;
}


.single-blog-content img {

    max-width:100%;

    height:auto;

    border-radius:10px;
}


/* TAGS */

.single-blog-tags {

    display:flex;

    flex-wrap:wrap;

    gap:8px;

    margin-top:35px;

    padding-top:20px;

    border-top:
        1px solid #e2e8f0;
}


.single-blog-tags a {

    padding:
        6px 11px;

    border-radius:20px;

    background:#ecfeff;

    color:#0891b2;

    font-size:13px;

    text-decoration:none;
}


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

@media(max-width:768px) {

    .blog-page-header {
        padding:
            38px 16px
            32px;
    }

    .blog-page-header h1 {
        font-size:30px;
    }

    .blog-controls {
        padding:
            10px 12px;
    }

    .blog-grid {

        grid-template-columns:
            repeat(
                auto-fill,
                minmax(
                    290px,
                    1fr
                )
            );

        gap:18px;
    }

    .blog-img-slider img {
        height:215px;
    }

}


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

@media(max-width:620px) {

    .blog-page-header {
        padding:
            30px 14px
            25px;
    }

    .blog-page-header h1 {
        font-size:26px;
    }

    .blog-page-header p {
        font-size:14px;
    }

    .blog-search-wrap {
        flex-basis:100%;
    }

    .blog-main {
        padding:
            20px 12px
            45px;
    }

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

    .blog-filter-btn {
        font-size:14px;
    }

    #blogSearchInput {
        font-size:14px;
    }

    .blog-card-body {
        padding:
            15px 15px
            17px;
    }

    .blog-img-slider img {
        height:205px;
    }

    .blog-card-title,
    .blog-card-text,
    .blog-date,
    .blog-cat-badge,
    .blog-read-more,
    .blog-results-info {
        font-size:14px;
    }

    .single-blog {
        padding:
            45px 14px;
    }

    .single-blog-header h1 {
        font-size:26px;
    }

    .single-blog-meta,
    .single-blog-content,
    .single-blog-back {
        font-size:14px;
    }

}


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

@media(max-width:380px) {

    .blog-page-header h1 {
        font-size:23px;
    }

    .blog-main {
        padding-left:10px;
        padding-right:10px;
    }

    .blog-card-body {
        padding:13px;
    }

    .blog-img-slider img {
        height:185px;
    }

}

/* =========================================================
   BLOG CATEGORY FILTER — HARD HIDE
========================================================= */

.blog-card.blog-card-filtered-out,
.blog-card[hidden] {
    display: none !important;
}