/* ========================================
   HERO SECTION - Blog Archive
   ======================================== */

.module-hero--blog {
    background: var(--gradient-brand-dark-bg);
    padding: var(--spacing-16) 0;
    padding-top: 171px;
    text-align: center;
    position: relative;
    z-index: 3;
}

.hero-content {
    max-width: 800px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-6);
}

.hero-content__title {
        font-size: var(--font-size-4xl);
        font-weight: var(--font-weight-light);
        color: var(--color-white);
    }

.hero-content__title-highlight {
            background: var(--gradient-text);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }

.hero-content__description {
        font-size: var(--font-size-xl);
        line-height: var(--line-height-relaxed);
        color: var(--color-white);
    }

/* ========================================
   SEARCH BAR SECTION
   ======================================== */

.blog-search-section {
    padding: var(--spacing-10) 0;
}

.blog-search {
    display: flex;
    align-items: center;
    gap: var(--spacing-6);
    border-radius: var(--radius-xl);
    padding: var(--spacing-6);
    border: 1px solid rgba(var(--color-black-rgb), 0.1);
    justify-content: space-between;
    position: relative;
    z-index: 2;

    /* Custom select dropdown */
}

.blog-search__filter {
        display: flex;
        align-items: center;
        gap: var(--spacing-3);
        flex-shrink: 0;
    }

.blog-search__label {
        white-space: nowrap;
        font-size: var(--font-size-lg);
    }

.blog-search__select-wrapper {
        position: relative;
        min-width: 280px;
        font-size: var(--font-size-lg);
    }

.blog-search__customselect,
    .blog-search__multiselect {
        position: relative;
        width: 100%;
    }

.blog-search__customselect-button, .blog-search__multiselect-button {
            width: 100%;
            height: 47px;
            padding: 0 var(--spacing-10) 0 var(--spacing-4);
            border: 1px solid rgba(var(--color-black-rgb), 0.2);
            border-radius: var(--radius-md);
            cursor: pointer;
            background: white;
            text-align: left;
            font-size: var(--font-size-lg);
            display: flex;
            align-items: center;
            transition: var(--transition);
        }

.blog-search__customselect-button:hover, .blog-search__multiselect-button:hover {
                border-color: rgba(var(--color-black-rgb), 0.3);
            }

.blog-search__customselect-dropdown, .blog-search__multiselect-dropdown {
            position: absolute;
            margin-top: var(--spacing-1);
            width: 100%;
            background: var(--color-white);
            border: 1px solid rgba(var(--color-black-rgb), 0.2);
            border-radius: var(--radius-md);
            box-shadow: var(--box-shadow-md);
            display: none;
            z-index: 100;
            max-height: 300px;
            overflow-y: auto;
        }

.blog-search__customselect-dropdown.active, .blog-search__multiselect-dropdown.active {
                display: block;
            }

.blog-search__customselect-option, .blog-search__multiselect-option {
            padding: var(--spacing-3) var(--spacing-4);
            cursor: pointer;
            transition: var(--transition);
            display: flex;
            align-items: center;
            gap: var(--spacing-2);
        }

.blog-search__customselect-option:hover, .blog-search__multiselect-option:hover {
                background: rgba(var(--color-black-rgb), 0.05);
            }

.blog-search__customselect-option input[type="checkbox"], .blog-search__multiselect-option input[type="checkbox"] {
                margin: 0;
                cursor: pointer;
            }

.blog-search__customselect-option label, .blog-search__multiselect-option label {
                cursor: pointer;
                flex: 1;
                margin: 0;
            }

.blog-search__select-icon {
        position: absolute;
        right: var(--spacing-3);
        top: 50%;
        transform: translateY(-50%);
        pointer-events: none;
        color: var(--color-gray-600);
    }

.blog-search__input-wrapper {
        flex: 0 1 500px;
        display: flex;
        gap: var(--spacing-3);
        position: relative;
    }

.blog-search__input {
        flex: 1;
        height: 47px;
        padding: 0 var(--spacing-4);
        border: 1px solid rgba(var(--color-black-rgb), 0.2);
        border-radius: var(--radius-md);
        transition: var(--transition);
        font-size: var(--font-size-lg);
        line-height: 1;
    }

.blog-search__input::placeholder {
            color: var(--color-gray-500);
        }

.blog-search__input:hover {
            border-color: rgba(var(--color-black-rgb), 0.3);
        }

.blog-search__input:focus {
            outline: none;
        }

.blog-search__button {
        height: 47px;
        padding: 0 var(--spacing-8);
        color: var(--color-white);
        background: var(--color-black);
        border: none;
        border-radius: var(--radius-md);
        cursor: pointer;
        transition: var(--transition);
        white-space: nowrap;
        font-size: var(--font-size-lg);
        line-height: 1;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: var(--spacing-2);

        /* &:hover {
            transform: translateY(-1px);
        }

        &:active {
            transform: translateY(0);
        } */
    }

.blog-search__button-icon {
        display: none;
    }

.blog-search__button-text {
        display: block;
    }


/* ========================================
   RESPONSIVE
   ======================================== */
@media (max-width: 1250px) {
        .blog-search__select-wrapper {
            min-width: 200px;
        }
}

@media (max-width: 1100px) {
        .blog-search__select-wrapper {
            min-width: 150px;
        }
}

@media (max-width: 1000px) {
        .blog-search__select-wrapper {
            min-width: 100px;
        }
}

@media (max-width: 870px) {
    .module-hero--blog {
        padding: 120px 0 var(--spacing-12) 0;
    }

    .hero-content {
        max-width: 100%;
        gap: var(--spacing-4);
    }

        .hero-content__title {
            font-size: var(--font-size-3xl);
        }

        .hero-content__description {
            font-size: var(--font-size-lg);
        }

    .blog-search-section {
        padding: var(--spacing-8) 0;
        padding-bottom: 0;
    }

    .blog-search {
        flex-wrap: wrap;
        gap: var(--spacing-4);
    }

        .blog-search__filter {
            width: 100%;
        }

        .blog-search__select-wrapper {
            flex: 1;
        }

        .blog-search__input-wrapper {
            width: 100%;
            flex: 1
        }

        .blog-search__label {
            display: none;
        }

        .blog-search__select,
        .blog-search__input,
        .blog-search__button {
            font-size: var(--font-size-lg);
            padding: var(--spacing-2) var(--spacing-3);
        }

        .blog-search__select {
            padding-right: var(--spacing-8);
        }

        .blog-search__button {
            padding: 0;
            min-width: 47px;
        }

        .blog-search__button-text {
            display: none;
        }

        .blog-search__button-icon {
            display: block;
        }
}
/* ========================================
   BLOG ARCHIVE TEMPLATE
   ======================================== */

/* ========================================
   BLOG SECTIONS
   ======================================== */

.blog-archive {
    background: var(--color-white);
}

.blog-section--all-blog+.blog-section--all-blog {
    padding-top: 0;
}

.blog-section {
    padding: var(--spacing-16) 0;
}

.blog-section--all-blog {
        padding-bottom: 100px;
    }

.blog-section__header {
        text-align: center;
        margin-bottom: var(--spacing-8);
    }

.blog-section__title {
        font-size: var(--font-size-3xl);
        font-weight: var(--font-weight-light);
        color: var(--color-black);
    }

.blog-section__title-highlight {
            background: var(--gradient-text);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }

.blog-section__grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: var(--spacing-6);

        /* CTO Corner section has 2 columns */
    }

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

.blog-section__no-posts {
        grid-column: 1 / -1;
        text-align: center;
        padding: var(--spacing-8) 0;
        font-size: var(--font-size-lg);
        color: var(--color-gray-600);
    }

/* Blog Cards - Same style as suggested-posts cards */
.blog-card {
    background: var(--color-white);
    border: 1px solid rgba(var(--color-black-rgb), 0.1);
    border-radius: var(--radius-xl);
    overflow: hidden;
    transition: var(--transition);
    position: relative;
    display: flex;
    flex-direction: column;
    height: 100%;
}
.blog-card:hover {
        transform: translateY(-4px);
        box-shadow: 0 8px 32px rgba(var(--color-black-rgb), 0.12);
    }
.blog-card__image {
        width: 100%;
        height: 230px;
        overflow: hidden;
        position: relative;
        flex-shrink: 0;
        padding: var(--spacing-6);
        padding-bottom: 0;

        /* CTO Corner cards have taller images */
    }
.blog-section--cto-corner .blog-card__image {
            height: 370px;
        }
.blog-card__img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        border-radius: var(--radius-md);
    }
.blog-card__content {
        padding: var(--spacing-6);
        display: flex;
        flex-direction: column;
        flex-grow: 1;
    }
.blog-card__title {
        margin: 0 0 var(--spacing-4) 0;
    }
.blog-card__title a {
            font-size: var(--font-size-2xl);
            font-weight: var(--font-weight-light);
            color: var(--color-black);
            line-height: 1.3;
            transition: var(--transition);
            text-decoration: none;
        }
.blog-card__title a:hover {
                color: var(--color-brand-purple);
            }
.blog-card__excerpt {
        color: var(--color-gray-600);
        line-height: 1.5;
        margin-bottom: var(--spacing-6);
        flex-grow: 1;
    }
.blog-card__link {
        display: inline-flex;
        align-items: center;
        gap: var(--spacing-2);
        font-size: var(--font-size-lg);
        color: var(--color-black);
        transition: var(--transition);
    }
.blog-card__link:hover {
            color: var(--color-brand-purple);
        }
.blog-card__link:hover svg {
                transform: translateX(4px);
            }
.blog-card__link svg {
            transition: transform 0.3s ease;
        }

/* ========================================
   RESPONSIVE
   ======================================== */
@media (max-width: 870px) {
    .blog-results--filtered {
        padding-top: var(--spacing-16)!important;
    }

    .blog-section {
        padding: var(--spacing-10) 0;
    }

        .blog-section--cto-corner {
            padding: var(--spacing-16) 0;
        }

        .blog-section--all-blog {
            padding-top: 0;
            padding-bottom: var(--spacing-8);
        }

        .blog-section__header {
            margin-bottom: var(--spacing-6);
        }

        .blog-section__title {
            font-size: var(--font-size-3xl);
        }

        .blog-section__grid {
            grid-template-columns: 1fr !important;
            gap: var(--spacing-4);
        }
        .blog-card__image {
            height: 200px !important;
            padding: var(--spacing-4);
            padding-bottom: 0;
        }

        .blog-card__content {
            padding: var(--spacing-4);
        }
            .blog-card__title a {
                font-size: var(--font-size-xl);
            }

        .blog-card__excerpt {
            font-size: var(--font-size-sm);
            margin-bottom: var(--spacing-4);
        }

        .blog-card__link {
            font-size: var(--font-size-md);
        }
}