/**
 * ==========================================================
 * Environmental Health — Resource Search
 * ==========================================================
 *
 * Styles for the Excel-driven Environmental Health resource
 * search interface.
 *
 * Includes:
 * - Search and filter controls
 * - Resource count
 * - Category filter buttons
 * - Resource cards
 * - Card image / hero alignment
 * - Fallback card artwork
 * - Resource action buttons
 * - Language dropdowns
 * - Pagination
 * - Responsive card layout
 *
 * Responsive Card Layout:
 * - Above 768px: 3 cards per row
 * - 481px–768px: 2 cards per row
 * - 480px and below: 1 card per row
 *
 * Scope:
 * Styles are scoped to .resource-search-app so they do not
 * interfere with shared Bootstrap or site-wide card styles.
 * ==========================================================
 */


/* ==========================================================
   Resource Search Container
   ========================================================== */

.resource-search-app {
    margin: 1.5rem 0;
    padding: 1.25rem;

    background: linear-gradient(180deg,
            #ffffff 0%,
            #f8fbfe 100%);

    border: 1px solid #d8e2ea;
    border-radius: 16px;

    box-shadow: 0 12px 28px rgb(6 28 96 / 8%);
}


/* ==========================================================
   Search Controls
   ========================================================== */

.resource-search-app .resource-search-controls {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
}

.resource-search-app .resource-search-box {
    position: relative;

    flex: 1 1 320px;

    width: 100%;
}

.resource-search-app .resource-filter-select-wrap {
    position: relative;

    flex: 0 0 auto;

    width: 100%;
}


/* ==========================================================
   Search / Select Icons
   ========================================================== */

.resource-search-app .resource-search-box::before,
.resource-search-app .resource-filter-select-wrap::after {
    position: absolute;
    top: -0.75rem;
    right: 1rem;
    bottom: 0;

    z-index: 2;

    display: flex;
    align-items: center;
    justify-content: center;

    color: #007c8a;

    font-family: "Font Awesome 6 Free";
    font-weight: 900;

    pointer-events: none;
}

.resource-search-app .resource-search-box::before {
    content: "\f002";
}


/*
 * Optional custom arrow for the responsive filter select.
 * Leave disabled if the browser's native select arrow is used.
 */
/*
.resource-search-app .resource-filter-select-wrap::after {
    content: "\f078";
}
*/


/* ==========================================================
   Search Input / Filter Select
   ========================================================== */

.resource-search-app .resource-search-box .form-control,
.resource-search-app .resource-filter-select {
    width: 100%;
    min-height: 50px;

    padding: 0.75rem 2.85rem 0.75rem 1rem;

    box-sizing: border-box;

    background: #ffffff;
    color: #243746;

    border: 1px solid #8fa8bd;
    border-radius: 12px;

    font-weight: 700;

    box-shadow: 0 4px 12px rgb(6 28 96 / 6%);
}

.resource-search-app .resource-filter-select {
    appearance: none;
    -webkit-appearance: none;
}

.resource-search-app .resource-search-box .form-control:hover,
.resource-search-app .resource-filter-select:hover {
    border-color: #005a9c;
}

.resource-search-app .resource-search-box .form-control:focus,
.resource-search-app .resource-filter-select:focus {
    border-color: #005a9c;

    outline: 0;

    box-shadow:
        0 0 0 0.22rem rgb(0 90 156 / 22%),
        0 6px 16px rgb(6 28 96 / 8%);
}

.resource-search-app .resource-search-box .form-control::placeholder {
    color: #5f6f7f;
    opacity: 1;
}


/* Filter select is shown only at tablet/mobile sizes. */

.resource-search-app .resource-filter-select-wrap {
    display: none;
}


/* ==========================================================
   Category Filter Buttons
   ==========================================================
   Blue treatment used for the resource filter controls.
   Active filters use a solid blue background, while default
   filters use a white background with blue text and border.
   ========================================================== */

.resource-search-app .resource-filter-buttons {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.45rem;

    margin: 0 0 1rem;
    padding: 0.9rem 0 1rem;

    border-top: 1px solid rgb(6 28 96 / 10%);
    border-bottom: 1px solid rgb(6 28 96 / 10%);
}


/* Default filter button */
.resource-search-app .resource-filter-btn {
    padding: 0.42rem 0.75rem;

    background: #ffffff;
    color: #005a9c;

    border: 1px solid rgb(0 90 156 / 34%);
    border-radius: 999px;

    font-size: 0.8rem;
    font-weight: 800;
    line-height: 1.25;

    cursor: pointer;

    box-shadow: 0 2px 8px rgb(0 90 156 / 8%);

    transition:
        background-color 0.2s ease,
        color 0.2s ease,
        border-color 0.2s ease,
        box-shadow 0.2s ease;
}


/* Hover / keyboard focus */
.resource-search-app .resource-filter-btn:hover,
.resource-search-app .resource-filter-btn:focus {
    background: rgb(0 90 156 / 8%);
    color: #003f6f;

    border-color: #005a9c;

    box-shadow: 0 4px 12px rgb(0 90 156 / 16%);

    outline: 0;
}


/* Accessible keyboard focus indicator */
.resource-search-app .resource-filter-btn:focus-visible {
    outline: 3px solid #061c60;
    outline-offset: 2px;
}


/* Active filter */
.resource-search-app .resource-filter-btn.active {
    background: #005a9c;
    color: #ffffff;

    border-color: #005a9c;

    box-shadow: 0 4px 14px rgb(0 90 156 / 24%);
}


/* Active filter hover / focus */
.resource-search-app .resource-filter-btn.active:hover,
.resource-search-app .resource-filter-btn.active:focus {
    background: #003f6f;
    color: #ffffff;

    border-color: #003f6f;

    box-shadow: 0 5px 16px rgb(0 63 111 / 24%);
}  


/* ==========================================================
   Search Toolbar
   ========================================================== */

.resource-search-app .resource-search-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;

    margin-bottom: 1rem;
}


/* ==========================================================
   Resource Count
   ========================================================== */

.resource-search-app .resource-count {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;

    flex: 0 0 auto;

    width: fit-content;

    margin: 0 0 1rem;
    padding: 0.42rem 0.8rem;

    background: #eef6fb;
    color: #24465f;

    border: 1px solid rgb(0 90 156 / 18%);
    border-radius: 999px;

    font-size: 0.88rem;
    font-weight: 700;
    line-height: 1;
}

.resource-search-app .resource-count::before {
    content: "\f0c5";

    color: var(--dph-blue);

    font-family: "Font Awesome 6 Free";
    font-weight: 900;
}


/* ==========================================================
   Resource Results Grid
   ==========================================================
   Generated card columns:
 *
 * .col-12
 * .col-sm-6
 * .col-md-4
 *
 * Desktop uses Bootstrap's normal 3-column layout.
 * At 768px and below, .col-md-4 is overridden so the cards
 * behave like .col-md-6 and display 2 per row.
 * ========================================================== */

.resource-search-app #resourceResults>[class*="col-"] {
    display: flex;
}


/* ==========================================================
   Resource Card
   ==========================================================
   Higher specificity is intentional because these cards also
   inherit Bootstrap and site-wide .card styles.
   ========================================================== */

.resource-search-app .resource-card {
    position: relative;

    display: flex;
    flex-direction: column;

    width: 100%;
    height: 100%;

    margin: 0;

    overflow: visible;

    background: #ffffff;

    border: 1px solid rgb(6 28 96 / 12%) !important;
    border-radius: 14px !important;

    box-shadow: 0 8px 20px rgb(6 28 96 / 8%) !important;

    transition:
        border-color 0.2s ease,
        box-shadow 0.2s ease;
}

.resource-search-app .resource-card:hover {
    border-color: rgb(0 124 138 / 25%) !important;

    box-shadow:
        0 10px 24px rgb(6 28 96 / 11%) !important;
}


/* ==========================================================
   Resource Card Hero / Image Area
   ==========================================================
   Fixed height keeps all card images, titles, tags, and
   dates aligned regardless of content length.
   ========================================================== */

.resource-search-app .resource-card .card-img-top-background {
    position: relative;

    display: flex;
    align-items: stretch;

    width: 100%;
    height: 210px;
    min-height: 210px;

    padding: 0;

    overflow: hidden;

    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;

    border: 0;
    border-radius: 13px 13px 0 0;
}


/*
 * The hero element also contains Bootstrap's .card-body.
 * Override generic body behavior so the hero keeps a fixed
 * height and does not grow based on content.
 */
.resource-search-app .resource-card .card-img-top-background.card-body {
    display: flex;

    flex: 0 0 210px;

    width: 100%;
    height: 210px;

    padding: 0;

    background-color: transparent;

    border-radius: 13px 13px 0 0;
}


/* ==========================================================
   Resource Card Footer Body
   ========================================================== */

.resource-search-app .resource-card>.card-body:not(.card-img-top-background) {
    position: relative;

    display: flex;
    flex: 1 1 auto;
    flex-direction: column;

    min-height: 70px;

    padding: 1rem;

    overflow: visible;

    background: #ffffff;

    border-radius: 0 0 13px 13px;
}


/* ==========================================================
   Fallback Card Backgrounds
   ========================================================== */

.resource-search-app .resource-card-background-additional {
    background:
        radial-gradient(circle at top right,
            rgb(0 124 138 / 18%) 0%,
            transparent 45%),
        radial-gradient(circle at bottom left,
            rgb(0 90 156 / 14%) 0%,
            transparent 40%),
        linear-gradient(135deg,
            #f7fbfc 0%,
            #edf7f8 45%,
            #e5f2f4 100%) !important;

    border-bottom: 1px solid rgb(0 124 138 / 12%);
}

.resource-search-app .resource-card-background-default {
    background:
        linear-gradient(135deg,
            #005a9c 0%,
            #4a98d9 100%) !important;
}

.resource-search-app .resource-card-background-additional::before {
    content: "\f15c";

    position: absolute;
    inset: 0;

    display: flex;
    align-items: center;
    justify-content: center;

    color: rgb(0 124 138 / 10%);

    font-family: "Font Awesome 6 Free";
    font-size: 4rem;
    font-weight: 900;

    pointer-events: none;
}


/* ==========================================================
   Card Overlay
   ==========================================================
   Overlay fills the entire hero so title placement is the
   same on every card.
   ========================================================== */

.resource-search-app .resource-card .card-img-top-title {
    position: absolute;
    inset: 0;

    z-index: 1;

    display: flex;
    align-items: center;
    justify-content: center;

    width: 100%;
    height: 100%;

    margin: 0;
    padding: 3rem 1rem 2.5rem;

    background: linear-gradient(180deg,
            rgb(0 0 0 / 10%) 0%,
            rgb(0 0 0 / 28%) 45%,
            rgb(0 0 0 / 72%) 100%);

    border-radius: 0;

    text-align: center;
}


/* ==========================================================
   Resource Type Tag
   ==========================================================
   Anchored directly to the hero so every tag appears at the
   same vertical position.
   ========================================================== */

.resource-search-app .resource-card-label {
    position: absolute;
    top: 0.75rem;
    left: 0.75rem;

    display: inline-flex;
    align-items: center;
    gap: 0.4rem;

    width: fit-content;
    max-width: calc(100% - 1.5rem);

    margin: 0;
    padding: 0.35rem 0.7rem;

    overflow: hidden;

    background: rgb(255 255 255 / 95%);
    color: #005a9c !important;

    border: 1px solid rgb(255 255 255 / 85%);
    border-radius: 999px;

    font-size: 0.73rem;
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: 0.02em;

    text-overflow: ellipsis;
    white-space: nowrap;

    box-shadow: 0 2px 8px rgb(0 0 0 / 12%);
}

.resource-search-app .resource-card-label i,
.resource-search-app .resource-card-label .far,
.resource-search-app .resource-card-label .fa {
    flex: 0 0 auto;

    color: #ffd166;

    font-size: 0.72rem;
}


/* ==========================================================
   Resource Card Title
   ==========================================================
   Title remains centered in the same area on every card.
   ========================================================== */

.resource-search-app .resource-card .card-img-top-title h3 {
    display: -webkit-box;

    width: 100%;
    max-width: 95%;

    margin: 0;
    padding: 0;

    overflow: hidden;

    color: #ffffff !important;

    font-size: 1rem;
    font-weight: 700;
    line-height: 1.4;

    text-align: center;
    text-wrap: balance;

    -webkit-box-orient: vertical;
    -webkit-line-clamp: 4;
}


/* ==========================================================
   Resource Date
   ==========================================================
   Date stays fixed at the bottom-left of the image area.
   ========================================================== */

.resource-search-app .resource-card-date {
    position: absolute;
    bottom: 0.75rem;
    left: 0.75rem;

    display: inline-flex;
    align-items: center;
    gap: 0.35rem;

    margin: 0;

    color: #ffffff !important;

    font-size: 0.76rem;
    font-weight: 700;
    line-height: 1.2;

    opacity: 0.95;
}

.resource-search-app .resource-card-date span {
    color: var(--dph-orange);
}


/* ==========================================================
   Resource Card Footer
   ========================================================== */

.resource-search-app .resource-card-footer {
    position: relative;

    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.5rem;

    width: 100%;
    min-height: 38px;

    margin: 0;

    overflow: visible;
}

.resource-search-app .resource-language-links {
    display: flex;
    align-items: center;
    justify-content: flex-end;

    width: auto;

    margin-left: auto;
}


/* ==========================================================
   Resource Action Button
   ========================================================== */

.resource-search-app .resource-action-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;

    min-height: 36px;

    padding: 0.35rem 0.85rem;

    background: #005a9c !important;
    background-image: none !important;

    color: #ffffff !important;

    border: 1px solid #005a9c !important;
    border-radius: 8px;

    font-size: 0.8rem;
    font-weight: 800;
    line-height: 1;

    text-decoration: none !important;
    white-space: nowrap;

    box-shadow: 0 3px 10px rgb(0 90 156 / 14%);

    transition:
        background-color 0.2s ease,
        border-color 0.2s ease,
        box-shadow 0.2s ease;
}

.resource-search-app .resource-action-btn:hover,
.resource-search-app .resource-action-btn:focus {
    background: #003f6f !important;

    color: #ffffff !important;

    border-color: #003f6f !important;

    text-decoration: none !important;

    outline: 0;
}

.resource-search-app .resource-action-btn:focus-visible {
    outline: 3px solid var(--dph-orange);
    outline-offset: 2px;
}


/* ==========================================================
   External Resource Button Variant
   ========================================================== */

.resource-search-app .resource-action-btn--external {
    background: #24465f !important;

    border-color: #24465f !important;
}

.resource-search-app .resource-action-btn--external:hover,
.resource-search-app .resource-action-btn--external:focus {
    background: #162f42 !important;

    border-color: #162f42 !important;
}


/* ==========================================================
   Language Dropdown
   ========================================================== */

.resource-search-app .resource-language-custom {
    position: relative;

    width: auto;
    max-width: 100%;
}

.resource-search-app .resource-language-trigger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;

    width: auto;
    min-height: 36px;

    padding: 0.35rem 0.75rem;

    background: #005a9c;

    color: #ffffff;

    border: 1px solid #005a9c;
    border-radius: 8px;

    font-size: 0.8rem;
    font-weight: 800;
    line-height: 1;

    cursor: pointer;

    box-shadow: 0 3px 10px rgb(0 90 156 / 14%);

    transition:
        background-color 0.2s ease,
        border-color 0.2s ease,
        box-shadow 0.2s ease;
}

.resource-search-app .resource-language-trigger:hover,
.resource-search-app .resource-language-trigger:focus {
    background: #003f6f;

    border-color: #003f6f;

    outline: 0;
}

.resource-search-app .resource-language-trigger:focus-visible {
    outline: 3px solid var(--dph-orange);
    outline-offset: 2px;
}

.resource-search-app .resource-language-trigger i {
    font-size: 0.75rem;

    transition: transform 0.2s ease;
}

.resource-search-app .resource-language-custom.is-open .resource-language-trigger i {
    transform: rotate(180deg);
}


/* ==========================================================
   Language Menu
   ========================================================== */

.resource-search-app .resource-language-menu {
    position: absolute;
    right: 0;
    bottom: calc(100% + 0.45rem);

    z-index: 40;

    display: none;

    width: max-content;
    min-width: 190px;
    max-width: 240px;

    padding: 0.35rem;

    background: #ffffff;

    border: 1px solid rgb(0 90 156 / 16%);
    border-radius: 12px;

    box-shadow: 0 12px 28px rgb(6 28 96 / 22%);
}

.resource-search-app .resource-language-custom.is-open .resource-language-menu {
    display: grid;
    gap: 0.2rem;
}

.resource-search-app .resource-language-option {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 0.5rem;

    padding: 0.6rem 0.7rem;

    color: #24465f !important;

    border-radius: 9px;

    font-size: 0.82rem;
    font-weight: 800;
    line-height: 1.2;

    text-decoration: none !important;
    white-space: nowrap;
}

.resource-search-app .resource-language-option:hover,
.resource-search-app .resource-language-option:focus {
    background: #eef6fb;

    color: #005a9c !important;

    outline: 0;
}

.resource-search-app .resource-language-option:focus-visible {
    outline: 2px solid #005a9c;
    outline-offset: -2px;
}

.resource-search-app .resource-language-option i {
    order: -1;

    color: #005a9c;

    font-size: 0.85rem;
}


/* ==========================================================
   No Results Message
   ========================================================== */

.resource-search-app .resource-no-results {
    width: 100%;

    margin: 0;
    padding: 1rem;

    background: #fff8e6;

    color: #4a3200;

    border: 1px solid #b7791f;
    border-radius: 10px;

    font-weight: 700;
}


/* ==========================================================
   Pagination
   ========================================================== */

.resource-search-app .resource-pagination-wrap {
    display: flex;
    justify-content: center;

    margin-top: 1rem;
}

.resource-search-app .resource-pagination-wrap .pagination {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;

    margin: 0;
    padding: 0.35rem;

    list-style: none;

    background: #ffffff;

    border: 1px solid rgb(0 90 156 / 10%);
    border-radius: 999px;
}

.resource-search-app .resource-pagination-wrap .page-item {
    display: flex;
}

.resource-search-app .resource-pagination-wrap .page-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-width: 34px;
    height: 34px;

    padding: 0 0.55rem;

    background: transparent;

    color: #005a9c;

    border: 1px solid transparent;
    border-radius: 999px;

    font-size: 0.82rem;
    font-weight: 700;
    line-height: 1;

    transition:
        background-color 0.2s ease,
        border-color 0.2s ease,
        color 0.2s ease,
        transform 0.2s ease,
        box-shadow 0.2s ease;
}


/* ==========================================================
   Pagination Arrow Buttons
   ========================================================== */

.resource-search-app .resource-pagination-wrap .page-link-icon {
    width: 36px;
    height: 36px;

    padding: 0;

    background: #ffffff;

    color: #005a9c;

    border: 1px solid rgb(0 90 156 / 18%);

    box-shadow: 0 2px 8px rgb(6 28 96 / 6%);
}

.resource-search-app .resource-pagination-wrap .page-item:not(.disabled) .page-link:hover,
.resource-search-app .resource-pagination-wrap .page-item:not(.disabled) .page-link:focus {
    background: #005a9c;

    color: #ffffff;

    border-color: #005a9c;

    box-shadow: 0 6px 14px rgb(0 90 156 / 20%);

    transform: translateY(-1px);

    cursor: pointer;

    outline: 0;
}

.resource-search-app .resource-pagination-wrap .page-item:not(.disabled) .page-link:focus-visible {
    outline: 3px solid var(--dph-orange);
    outline-offset: 2px;
}


/* ==========================================================
   Pagination Status
   ========================================================== */

.resource-search-app .resource-pagination-wrap .page-item-status {
    margin: 0 0.6rem;
}

.resource-search-app .resource-pagination-wrap .page-item-status .page-link {
    gap: 0.35rem;

    min-width: 145px;
    height: 36px;

    padding: 0 0.95rem;

    background: #f8fbfe;

    color: #24465f;

    border: 1px solid rgb(0 90 156 / 12%);
    border-radius: 999px;

    font-size: 0.88rem;
    font-weight: 700;

    white-space: nowrap;

    cursor: default;
}

.resource-search-app .resource-pagination-wrap .page-item-status strong {
    color: #005a9c;

    font-weight: 800;
}


/* ==========================================================
   Disabled Pagination
   ========================================================== */

.resource-search-app .resource-pagination-wrap .page-item.disabled .page-link {
    background: #f5f7fa;

    color: #9aa7b2;

    border-color: rgb(0 90 156 / 10%);

    opacity: 0.55;

    cursor: not-allowed;
    pointer-events: auto;

    box-shadow: none;

    transform: none;
}

.resource-search-app .resource-pagination-wrap .page-item.disabled .page-link:hover,
.resource-search-app .resource-pagination-wrap .page-item.disabled .page-link:focus {
    background: #f5f7fa;

    color: #9aa7b2;

    border-color: rgb(0 90 156 / 10%);

    box-shadow: none;

    transform: none;

    cursor: not-allowed;
}


/* ==========================================================
   Responsive — 768px and Below
   ==========================================================
   On this specific resource page, Bootstrap .col-md-4 should
   behave like .col-md-6 once the viewport reaches 768px.
 *
 * Result:
 * - 2 cards per row
 * - 50% width per card
 * ========================================================== */

@media only screen and (max-width: 768px) {

    .resource-search-app {
        padding: 1rem;

        border-radius: 14px;
    }


    /* ------------------------------------------------------
       Resource Grid — 2 Cards Per Row
       ------------------------------------------------------ */

    .resource-search-app #resourceResults>.col-md-4 {
        flex: 0 0 50% !important;

        width: 50% !important;
        max-width: 50% !important;
    }


    /* ------------------------------------------------------
       Search Controls
       ------------------------------------------------------ */

    .resource-search-app .resource-count {
        order: 3;
    }

    .resource-search-app .resource-filter-select-wrap {
        display: block;

        margin-top: 0.75rem;
    }

    .resource-search-app .resource-filter-buttons {
        display: none;
    }

    .resource-search-app .resource-search-box .form-control,
    .resource-search-app .resource-filter-select {
        min-height: 48px;

        margin-bottom: 0 !important;

        font-size: 0.95rem;
    }


    /* ------------------------------------------------------
       Resource Card Hero
       ------------------------------------------------------ */

    .resource-search-app .resource-card .card-img-top-background,
    .resource-search-app .resource-card .card-img-top-background.card-body {
        height: 190px;
        min-height: 190px;
    }

    .resource-search-app .resource-card .card-img-top-background.card-body {
        flex-basis: 190px;
    }

    .resource-search-app .resource-card .card-img-top-title {
        padding:
            2.8rem 0.85rem 2.35rem;
    }

    .resource-search-app .resource-card .card-img-top-title h3 {
        font-size: 0.95rem;
    }

    .resource-search-app .resource-card-label {
        top: 0.65rem;
        left: 0.65rem;
    }

    .resource-search-app .resource-card-date {
        bottom: 0.65rem;
        left: 0.65rem;

        font-size: 0.72rem;
    }

    #resourceResults .col-4 {
        width: 50% !important;
    }
}


/* ==========================================================
   Responsive — 480px and Below
   ==========================================================
   Cards stack into a single column on small screens.
   ========================================================== */

@media only screen and (max-width: 480px) {

    .resource-search-app {
        margin: 1rem 0;
        padding: 0.8rem;

        border-radius: 12px;
    }


    /* ------------------------------------------------------
       Resource Grid — 1 Card Per Row
       ------------------------------------------------------ */

    .resource-search-app #resourceResults>.col-md-4 {
        flex: 0 0 100% !important;

        width: 100% !important;
        max-width: 100% !important;
    }


    /* ------------------------------------------------------
       Search Controls
       ------------------------------------------------------ */

    .resource-search-app .resource-search-box::before,
    .resource-search-app .resource-filter-select-wrap::after {
        right: 0.85rem;
    }

    .resource-search-app .resource-search-box .form-control,
    .resource-search-app .resource-filter-select {
        min-height: 46px;

        padding:
            0.65rem 2.45rem 0.65rem 0.85rem;

        border-radius: 10px;

        font-size: 0.92rem;
    }

    .resource-search-app .resource-count {
        display: flex;
        justify-content: center;

        width: auto;
        max-width: 100%;

        box-sizing: border-box;

        border-radius: 10px;

        text-align: center;
    }


    /* ------------------------------------------------------
       Resource Card Hero
       ------------------------------------------------------ */

    .resource-search-app .resource-card .card-img-top-background,
    .resource-search-app .resource-card .card-img-top-background.card-body {
        height: 180px;
        min-height: 180px;
    }

    .resource-search-app .resource-card .card-img-top-background.card-body {
        flex-basis: 180px;
    }

    .resource-search-app .resource-card .card-img-top-title {
        padding:
            2.7rem 0.8rem 2.25rem;
    }

    .resource-search-app .resource-card .card-img-top-title h3 {
        max-width: 100%;

        font-size: 0.95rem;

        -webkit-line-clamp: 3;
    }


    /* ------------------------------------------------------
       Resource Actions
       ------------------------------------------------------ */

    .resource-search-app .resource-language-trigger {
        min-height: 34px;

        font-size: 0.75rem;
    }

    .resource-search-app .resource-language-menu {
        right: 0;

        min-width: 175px;
        max-width: 220px;
    }

    .resource-search-app .resource-action-btn {
        min-height: 34px;

        padding-inline: 0.65rem;

        font-size: 0.75rem;
    }


    /* ------------------------------------------------------
       Pagination
       ------------------------------------------------------ */

    .resource-search-app .resource-pagination-wrap .pagination {
        width: 100%;

        justify-content: space-between;

        border-radius: 14px;
    }

    .resource-search-app .resource-pagination-wrap .page-item-status {
        flex: 1;

        margin: 0 0.35rem;
    }

    .resource-search-app .resource-pagination-wrap .page-item-status .page-link {
        justify-content: center;

        width: 100%;
        min-width: 0;
    }

     #resourceResults .col-4 {
        width: 100% !important;
    }
}


/* ==========================================================
   Reduced Motion
   ========================================================== */

@media (prefers-reduced-motion: reduce) {

    .resource-search-app .resource-card,
    .resource-search-app .resource-filter-btn,
    .resource-search-app .resource-action-btn,
    .resource-search-app .resource-language-trigger,
    .resource-search-app .resource-language-trigger i,
    .resource-search-app .resource-pagination-wrap .page-link {
        transition: none;
    }
}