/* hubspot/theme/modules/_Blog-Listing.module copy/module.css */

@layer module {
    .module-blog-listing {
        & > .above-the-fold {
            --module-grid-rows: repeat(1, [row-start] minmax(0, min-content) [row-end]);
        }
        & > .below-the-fold {
            --module-grid-rows: repeat(4, [row-start] minmax(0, min-content) [row-end]);
        }
        & > .module-grid {
            & > .highlight { 
                grid-column: col-start 2 / col-end -2;
                grid-row: row-start 1 / row-end 1;
            }
            & > .filters { 
                grid-column: col-start 2 / col-end -2;
                grid-row: row-start 2 / row-end 2;
                display: flex;
                flex-wrap: wrap;
                column-gap: var(--cg);
                --cg-min: 24;
                --cg-max: 48;
                row-gap: var(--rg);
                --rg-min: 16;
                --rg-max: 32;
                justify-content: space-between;
                align-items: center;
                margin-block-end: var(--mbe);
                --mbe-min: 24;
                --mbe-max: 48;
                & ul {
                    display: flex;
                    gap: var(--g);
                    --g-min: 10;
                    --g-max: 16;
                    flex-wrap: wrap;
                    & li {
                        & button {
                            font-family: var(--font-base);
                            font-size: var(--fs);
                            --fs-min: 13;
                            --fs-max: 13;
                            padding-inline: var(--pi);
                            --pi-min: 15;
                            --pi-max: 15;
                            padding-block: var(--pb);
                            --pb-min: 10;
                            --pb-max: 10;
                            border-radius: 9999px;
                            background: var(--c-chaos-tag-pill-gray);
                            border-style: solid;
                            border-color: var(--c-chaos-tag-pill-gray);
                            border-width: 1px;
                            white-space: nowrap;
                            &.active {
                                background: var(--c-chaos-tag-pill-blue-background);
                                border-color: var(--c-chaos-tag-pill-blue-border);
                            }
                        }
                    }
                }
                & .search {
                    display: flex;
                    gap: 20px;
                    flex-grow: 1;
                    position: relative;
                    & input {
                        font-family: var(--font-base);
                        font-size: var(--fs);
                        --fs-min: 13;
                        --fs-max: 13;
                        inline-size: 100%;
                        padding: 10px 15px;
                        background: var(--cs-input-background);
                        color: var(--cs-input-color);
                        box-shadow: none;
                        border-width: 1px;
                        border-style: solid;
                        border-color: var(--cs-input-border);
                        border-radius: 9999px;
                        transition: all 0.3s ease-in-out;
                        &::placeholder {
                            color: var(--cs-input-placeholder);
                        }
                        &:focus {
                            outline: none;
                            border-color: var(--cs-input-border);
                            box-shadow: 0 0 3px 2px var(--cs-input-border-focus);
                        }
                    }
                    & :is(.search-icon, .close-icon) {
                        display: flex;
                        justify-content: center;
                        align-items: center;
                        & svg {
                            fill: var(--cs-standard);
                            inline-size: 20px;
                            block-size: 20px;
                        }
                    }
                    & .close-icon {
                        display: none;
                    }
                }
            }  
            & > .list { 
                --autolayout-width: 300px;
                grid-column: col-start 2 / col-end -2;
                grid-row: row-start 3 / row-end 3;
                align-items: flex-start;
                margin-block-end: 40px;
                row-gap: 40px;
            }
            & > .load-more {
                grid-column: col-start 2 / col-end -2;
                grid-row: row-start 4 / row-end 4;
                display: flex;
                justify-content: center;
                align-items: center;
            }
        }
        @media screen and (max-width: 576px) {
            & > .module-grid {
                & > .list { 
                    row-gap: 10px;
                }

                & .filters {
                    z-index: 4;
                    position: relative;
                    padding-block: 0;
                    block-size: 48px;
                    border-block-style: solid;
                    border-block-width: 1px;
                    border-color: #DBDBDB;

                    & .dropdown {
                        position: relative;
                        display: inline-block;
                        width: calc(100% - 48px);
                        block-size: 100%;
                        z-index: 5;
                        & .dropdown-toggle {
                            max-width: calc(100% - 48px);
                            font-family: var(--font-base);
                            font-weight: 600;
                            display: inline-flex;
                            align-items: center;
                            justify-content: center;
                            background-color: transparent;
                            color: #333;
                            padding-inline: .75rem;
                            block-size: 100%;
                            margin-bottom: 0;
                            border: none;
                            font-size: 1rem;
                            cursor: pointer;
                            transition: background-color 0.2s ease-in-out;
                            & svg {
                                fill: #333;
                                width: 1rem;
                                height: 1rem;
                                transition: transform 0.2s ease-in-out;
                                &[x-show="filterDropDownOpen"] {
                                    transform: rotate(180deg);
                                }
                            }
                        }
                        /* Dropdown Container */
                        & .dropdown-panel {
                            position: absolute;
                            top: 100%;
                            left: 0;
                            width: 100%;
                            background: white;
                            border: 1px solid #ccc;
                            border-radius: 0.25rem;
                            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
                            z-index: 1000;
                            display: flex;
                            flex-direction: column;
                            padding: 0.5rem;
                            margin-top: 0.25rem;
        
                            /* Dropdown Options */
                            & button {
                                font-family: var(--font-base);
                                font-weight: 300;
                                padding: .75rem 0.5rem;
                                font-size: 1rem;
                                color: #333;
                                text-align: left;
                                background: none;
                                border: none;
                                width: 100%;
                                cursor: pointer;
                                transition: background-color 0.2s ease-in-out;
                            }
        
                            & button:hover {
                                background-color: #f5f5f5;
                            }
        
                            /* Active Option */
                            & button.active {
                                background-color: #e9ecef;
                                font-weight: bold;
                            }
        
                            &[x-show="filterDropDownOpen"] {
                                animation: fadeIn 0.2s ease-in-out;
                            }
                        }
                    }
        
                    & .search {
                        position: absolute;
                        right: 0;
                        display: flex;
                        justify-content: flex-end;
                        width: 48px;
                        gap: 0;
                        z-index: 5;
                        & .text {
                            order: 2;
                            width: 100%;
                            max-width: 0;
                            transition: max-width 0.3s ease-in-out;
                            & input {
                                display: none
                                inline-size: 0;
                                block-size: 100%;
                                padding: 0 1rem;
                                border: none;
                                background: none;
                                color: #333;
                                font-size: 16px;
                                transition: width 0.3s ease-in-out;
                                border-radius: 0;
                                border: none;
                                &:focus {
                                    outline: none;
                                }
                            }
                        }
                        & :is(.search-icon, .close-icon) {
                            padding: .75rem;
                            order: 1;
                        }
                        & .close-icon {
                            display: none;
                            position: absolute;
                            right: 0;
                        }
                        &.open {
                            width: 100%;
                            & .text {
                                max-width: 576px;
                                input {
                                    display: block;
                                    width: 100%;
                                }
                            }
                            & .close-icon {
                                display: block;
                            }
                        }
                    }
                }



                @keyframes fadeIn {
                    from {
                        opacity: 0;
                        transform: translateY(-10%);
                    }
                    to {
                        opacity: 1;
                        transform: translateY(0);
                    }
                }
            }

        }
        @media (max-width: 1440px) {
            & > .module-grid > :is(.highlight, .filters, .list, .load-more) { 
                grid-column: col-start 1 / col-end -1;
            }
        }

        @media (max-width: 1200px) {

        }

        @media (max-width: 768px) {

        }
    }
}