.header-catalog-page {
    padding: 3rem 0 1rem 0;
}

/* Start Catalog Layout */
    .catalog-wrapper {
        display: grid;
        grid-template-columns: 1fr;
        gap: 1rem;
    }

        @media screen and (min-width: 992px) {
            .catalog-wrapper {
                grid-template-columns: minmax(275px, 25%) 1fr;
                gap: 1.5rem;
            }
        }

    .catalog-filters {
        background-color: var(--bs-secondary-light);
        padding: 1rem .5rem;
        display: flex;
        flex-direction: column;
        gap: .75rem;
        width: 100%;
        height: fit-content;
    }

    .filters-directory {
        background-color: var(--bs-secondary-light);
        padding: 1rem .5rem;
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        grid-template-areas: 
        "type type"
        "search search"
        "area role"
        "academics academics"
        "admin admin"
        ;
        gap: .75rem;
        width: 100%;
        height: fit-content;
    }
        #catalog-type {
            grid-area: type;
        }

        #catalog-search {
            grid-area: search;
        }

        #filter-role {
            grid-area: role;
        }

        #filter-area {
            grid-area: area;
        }

        #select-academics {
            grid-area: academics;
        }

        #select-admin {
            grid-area: admin;
        }
        @media screen and (min-width: 992px) {
            .catalog-filters {
                display: flex;
                flex-direction: column;
            }
        }

    .filters-news {
        display: flex;
        flex-direction: column;
    }

    .catalog-listings article {
        padding-bottom: 1rem;
        border-bottom: 1px solid var(--bs-secondary);
        margin-bottom: 1rem;
    }

    .catalog-listings h2 {
        font-family: var(--bs-font-sans-serif);
        font-size: clamp(21px, calc(1.3125rem + ((1vw - 5.76px) * 0.4808)), 24px);
        font-weight: 600;
        line-height: 150%;
        margin-bottom: 0;
        min-height: 0vw;
        color: var(--bs-black);
    }

    .catalog-item-details p {
        margin-bottom: 0;
    }

    .catalog-item-details footer {
        display: flex;
        flex-direction: column;
        gap: 0;
        padding-top: .25rem;
    }

        @media screen and (min-width: 1200px) {
            .catalog-item-details footer {
                flex-direction: row;
                gap: 1.25rem;
            }
        }

    a[class^="catalog-link-"] {
        position: relative;
        width: fit-content;
        padding-left: 1.5rem;
        line-height: 220%;
        text-decoration: none;
    }
        @media screen and (min-width: 768px) {

            a[class^="catalog-link-"] {
                padding-bottom: 4px;
            }

            a[class^="catalog-link-"]::after {
                content: "";
                position: absolute;
                bottom: 0;
                left: 0;
                width: 0;
                height: 2px;
                background: var(--bs-primary);
                transition: width .2s ease-in-out;
            }

            .catalog-link-back::after {
                left: unset!important;
                right: 0;
            }
        
            a[class^="catalog-link-"]:hover, a[class^="catalog-link-"]:focus-visible {
                padding-bottom: 4px;
                outline: none;
            }
        
            a[class^="catalog-link-"]:hover::after, a[class^="catalog-link-"]:focus-visible::after {
                width: 100%;
            }
        }

        @media screen and (min-width: 1200px) {
            a[class^="catalog-link-"] {
                padding-top: 0;
            }
        }

        a[class^="catalog-link-"]::before {
            font-family: "Font Awesome 6 Pro"; 
            font-weight: 900; 
            position: absolute;
            transform: translateX(-1.5rem);
        }

        .catalog-link-phone::before {
            content: "\f095"; /* Phone Icon */
        }

        .catalog-link-email::before {
            content: "\f0e0"; /* Envelope Icon */
        }

        .catalog-link-info::before {
            content: "\f05a"; /* Circle-info Icon */
        }

        .catalog-link-link::before {
            content: "\e60e"; /* Globe-pointer Icon */
        }

        .catalog-link-login::before {
            content: "\f2f6"; /* Right-to-bracket Icon */
        }
    
        .catalog-link-submit::before {
            content: "\f25a"; /* Hand-pointer Icon */
        }

        .catalog-link-download::before {
            content: "\f019"; /* Download Icon */
        }

        .catalog-link-booking::before {
            content: "\f783"; /* Calendar-day Icon */
        }

        .catalog-link-back::before {
            content: "\f053"; /* Chevron-left Icon */
        }

        .catalog-link-article::before {
            content: "\f1ea"; /* Newspaper Icon */
        }

        .catalog-link-external-news::before {
            content: "\f08e"; /* arrow-up-right-from-square Icon */
        }
/* End Catalog Layout */

/* Start Toggle */
    .catalog-toggle-label {
        position: relative;
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        width: 100%;
        color: var(--bs-primary);
        cursor: pointer;
        font-size: 1rem;
        line-height: 150%;
    }

        .catalog-toggle-label::before {
            content: '';
            position: absolute;
            width: 50%;
            height: 100%;
            left: 0%;
            background: var(--bs-primary);
            color: var(--bs-white);
            transition: all 0.3s;
        }

        .catalog-toggle:checked + .catalog-toggle-label::before {
            left: 50%;

        }
        .catalog-toggle-label strong {
            padding: .5rem;
            text-align: center;
            z-index: 1;
        }
        .catalog-toggle {
            display: none;
        }
        .catalog-toggle:checked + .catalog-toggle-label strong:first-child{
            color: var(--bs-primary);
            font-weight: normal;
            transition: color 0.3s;
        }
        .catalog-toggle:checked + .catalog-toggle-label strong:last-child{
            color: var(--bs-white);
            font-weight: bold;
            transition: color 0.3s;
        }
        .catalog-toggle + .catalog-toggle-label strong:first-child{
            color: var(--bs-white);
            font-weight: bold;
            transition: color 0.3s;
        }
        .catalog-toggle + .catalog-toggle-label strong:last-child{
            color: var(--bs-primary);
            font-weight: normal;
            transition: color 0.3s;
        }
/* End Toggle */

/* Start Directory Search */
    /* See components.css for base styles */
    .catalog-wrapper .search-container {
        margin: 0;
    }
    
    .catalog-wrapper .search-container::before {
        left: .625rem;
    }
    
    .catalog-wrapper .search-input {
        max-width: 100%;
        padding: .75rem 1rem .75rem 2.625rem;
        color: var(--bs-primary);
        background-color: var(--bs-white);
    }
    
    .catalog-wrapper [type="text"].search-input, .catalog-wrapper .search-input::placeholder {
        color: var(--bs-primary);
    }
    
    .catalog-wrapper input[type="text"].search-input:hover, .catalog-wrapper input[type="text"].search-input:focus, .catalog-wrapper input[type="text"].search-input:active {
        outline: 2px solid var(--bs-primary);
    }
    
    .catalog-wrapper input[type="text"].search-input:hover {
        background-color: var(--bs-white);
    }
    
    .catalog-wrapper input[type="text"].search-input:focus::placeholder, .catalog-wrapper input[type="text"].search-input:active::placeholder {
        color: transparent;
    }
/* End Directory Search */

/* Start Radios */
    /* See boostrap.css for base styles */
    .catalog-filters .form-check {
        padding-top: .25rem;
        padding-bottom: .25rem;
    }

    legend {
        font-size: var(--bs-body-font-size);
        line-height: var(--bs-body-line-height);
        font-weight: bold;
        margin-bottom: .25rem;
    }
/* End Radios */

/* Start Select */
    /* See boostrap.css for base styles */
    .catalog-select-wrapper label {
        font-weight: bold;
        margin-bottom: .25rem;
    }
/* End Select */

/* Start Catalog Item */

    .details-subtle {
        color: var(--bs-gray-700);
        font-style: italic;
        font-size: clamp(0.75rem, calc(0.75rem + ((1vw - 0.36rem) * 0.4808)), 0.875rem);
        min-height: 0vw;
    }

    .details-pill {
        background-color: var(--bs-secondary-light);
        color: var(--bs-gray-700);
        padding: .1rem .5rem;
        margin: 0 0 .5rem 0;
        font-size: clamp(0.6875rem, calc(0.6875rem + ((1vw - 0.36rem) * 0.2404)), 0.75rem);
        height: fit-content;
        min-height: 0vw;
        width: fit-content;
        min-width: 155px;
        border-radius: 33px;
        text-align: center;
    }

    @media screen and (min-width: 992px) {
        .details-pill {
            min-width: 175px;
            margin-left: 1rem;
        }
    }

    /* Start Person Item */
        .catalog-item-person {
            display: flex;
            gap: 1.5rem;
        }

        .catalog-item-person [class^="catalog-avatar"] {
            background-color: var(--bs-primary-light);
            background-position: top center;
            background-repeat: no-repeat;
            background-size: cover;
            width: 75px;
            height: 75px;
            display: block;
            position: relative;
        }
        .person-placeholder {
            background-image: url('../images/person-placeholder.png');
        }

    /* End Person Item */

    /* Start Software and Application Item */
        .catalog-item-software-apps {
            display: flex;
            gap: 1.5rem;
        }
        
        .catalog-item-software-apps .catalog-avatar {
            background-position: top center;
            background-repeat: no-repeat;
            background-size: contain;
            width: 100px;
            height: 75px;
            display: block;
            position: relative;
        }
    /* End Software and Application Item */

    /* Start News Item */
    .catalog-item-news {
        display: flex;
        gap: 1.5rem;
    }

    .catalog-item-news [class^="catalog-avatar"] {
        background-color: var(--bs-secondary);
        background-position: top center;
        background-repeat: no-repeat;
        background-size: cover;
        width: 100px;
        height: 100px;
        display: block;
        position: relative;
    }

    .news-item-category {
        margin-bottom: .5rem;
    }
    /* End News Item */
/* End Catalog Item */


/* Start Pagination */
    .prev-icon::before,
    .next-icon::before {
        font-family: "Font Awesome 6 Pro";
        font-weight: 900;
        display: inline-block;
        font-size: .75rem; 
        line-height: .9;
        vertical-align: middle;
        transition: transform 0.3s, content 0.3s;
        padding: 0 2px;
    }

    /* Default icons */
    .prev-icon::before {
        content: "\f053"; /* Unicode for chevron-left */
    }

    .next-icon::before {
        content: "\f054"; /* Unicode for chevron-right */
    }

    /* Hover effects */
    #prev-page:hover .prev-icon::before {
        content: "\f100"; /* Unicode for chevron-left-double */
        padding: 0;
    }

    #next-page:hover .next-icon::before {
        content: "\f101"; /* Unicode for chevron-right-double */
        padding: 0;
    }
/* End Pagination */

/* Start Catalog Item Layout */
.catalog-item-wrapper {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
}

    @media screen and (min-width: 992px) {
        .catalog-item-wrapper {
            grid-template-columns: minmax(300px, 30%) 1fr;
            gap: 1.5rem;
        }
    }


.catalog-profile {
    background-color: var(--bs-secondary-light);
    padding: 1rem;
    display: flex;
    flex-direction: column;
    gap: .75rem;
    width: 100%;
    height: fit-content;
}

.catalog-profile img {
    width: 100%;
    max-width: 150px;
    height: auto;
}
/* End Catalog Item Layout */