/* Resource Center Styles */

.shadowcard {
    box-shadow: 0px 65px 52px 0px rgba(108, 73, 172, 0.07), 0px 6px 6px 0px rgba(108, 73, 172, 0.04), 0px 4px 4px 0px rgba(108, 73, 172, 0.03), 0px -4px 14px 0px rgba(108, 73, 172, 0.07);
    margin-top: 5px;
}

.resources-hero {
    background-size: auto 450px;
    background-position: top center;
    background-repeat: no-repeat;
}

.resource-hero-image {
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
    width: 100%;
    height: 450px;
    object-fit: cover!important;
    object-position: bottom center!important;
}

.probox {
    border-radius: 40px!important;
    border: 1px solid rgba(81, 74, 216, 0.30)!important;
    background: #FFF!important;
}

.reset-search-form {
    padding: 0!important;
}

div.asl_w .probox .promagnifier .innericon svg {
    fill: rgba(81, 74, 216, 0.30)!important;
}

.probox * {
    font-size: 16px!important;
    color: rgba(8, 14, 63, 0.40)!important;
}

.form-select {
    border: none!important;
    border-radius: 0;
}

.filterrow {
    background: #FFF;
    box-shadow: 0px 28px 22px 0px rgba(108, 73, 172, 0.05), 0px 14px 12px 0px rgba(108, 73, 172, 0.04), 0px 4px 4px 0px rgba(108, 73, 172, 0.03), 0px 0px 8px 0px rgba(108, 73, 172, 0.07)!important;
    z-index: 1!important;
}

.card-body {
    padding: 0!important;
}

.card-body-inner {
    padding: 40px 40px;
    min-height: 525px!important;
}

.card-body-inner .trust-btn {
    bottom: 75px;
    position: absolute;
}

.card-img-top {
    width: 100%!important;
    aspect-ratio: 1200 / 720;
    object-fit: cover;
    object-position: center center;
    display: block;
    height: auto;
    background: #070E43;
    margin-bottom: 0;
}

@supports not (aspect-ratio: 1200 / 720) {
    .card-img-top {
        height: auto;
        max-width: 100%;
    }
    .card-img-top::before {
        content: '';
        display: block;
        padding-top: 60%;
    }
}

.card {
    border-radius: 12px!important;
    box-shadow: 0px 28px 22px 0px rgba(108, 73, 172, 0.05), 0px 4px 4px 0px rgba(108, 73, 172, 0.03), 0px -4px 14px 0px rgba(108, 73, 172, 0.07);
    border: none!important;
    transition: all 0.6s cubic-bezier(0.76, 0, 0.24, 1);
}

.card-text {
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    max-height: 6em;
}

.card-body {
    padding-left: 40px!important;
    padding-right: 40px!important;
    padding-bottom: 40px!important;
    min-height: 635px!important;
}

/* Removed - allows rounded corners on cards */

.card:hover {
    transform: scale(.975);
    transition: all 0.2s ease;
}

.readtime {
    position: absolute;
    bottom: 40px;
    left: 40px;
}

.probox *, .probox {
    /* Font removed - inherits from theme */
}

.wpdreams_asl_results {
    border-radius: 5px!important;
    margin-top: 200px!important; 
    right: 10dvw!important; 
    width: 100vw!important;
    max-width: 835px!important;
    z-index: 0!important;
    box-shadow: 0px 65px 52px 0px rgba(108, 73, 172, 0.07), 0px 6px 6px 0px rgba(108, 73, 172, 0.04), 0px 4px 4px 0px rgba(108, 73, 172, 0.03), 0px -4px 14px 0px rgba(108, 73, 172, 0.07)!important;
}

.wpdreams_asl_results * {
    color: #080E3F!important;
    /* Font removed - inherits from theme */
}

.asl_res_url {
    font-weight:700!important;
    font-size: 16px!important;
}

.top-featured-resource:hover {
    transform: scale(.99)!important;
    transition: all 0.2s ease;
}

.top-featured-resource {
    transition: all 0.2s ease;
}

.featured-resource-image {
    max-width: 100% !important;
    background-size: cover !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
    background-color: #070E43 !important;
}

/* Pagination Styles */
.custom-pagination {
    list-style: none;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    padding: 0;
}

.custom-pagination *:not(i, .fas::before, .custom-pagination .page-link.prev) {
    color: #5522dd!important;
}

.custom-pagination li {
    display: inline-block;
    line-height: 1em!important;
}

.custom-pagination .page-link {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 36px;
    height: 36px;
    text-decoration: none;
    border-radius: 50%!important;
    font-weight: bold;
    border: 2px solid transparent;
    transition: all 0.3s ease-in-out;
    color: #5522dd!important;
}

.custom-pagination .page-link:hover {
    background-color: rgba(0, 0, 0, 0.1);
}

.custom-pagination .active a {
    background-color: #ECEBFF;
    border-color: #ECEBFF;
}

.custom-pagination .prev,
.custom-pagination .next {
    font-size: 20px;
}

.page-link.prev, .page-link.next {
    color: #080E3F!important;
}

/* Resource Date Styles */
.resource-date {
    position: static;
    margin-bottom: 10px;
}

.resource-date * {
    color: #514BD8!important;
    text-transform: uppercase;
    letter-spacing: 2px; 
    font-weight: 600;
}

.readtime {
    bottom: 30px;
}

/* Mobile Styles */
@media screen and (max-width: 991px) {
    .resources-hero {
        padding: 20px;
    }
}

@media screen and (max-width: 990px) {
    .resources-hero {
        background-image: url('/wp-content/uploads/2025/04/tm-resources-mobile-bg-1.webp')!important;
        background-size: cover!important;
    }
    
    .resource-hero-image {
        display: none!important;
    }
    
    .top-featured-resource .featured-resource-image {
        display: flex;
        order:1!important;
    }
    
    .resources-grid-container {
        padding: 0!important;
    }
    
    .resources-grid-container select {
        appearance: none;
        -webkit-appearance: none;
        -moz-appearance: none;
        background: url('/wp-content/uploads/2025/04/dark-caret.svg') no-repeat right 1rem center;
        background-size: 24px;
        padding-right: 2em;
        color: #080E3F;
        font-size: 20px!important;
        font-style: normal;
        font-weight: 600;
        line-height: 110%;
        text-transform: capitalize;
    }
    
    .resources-grid-container select,
    .resources-grid-container .font-20 select,
    .resources-grid-container .font-20 * select {
        font-size: 20px !important;
    }
    
    .filterrow {
        margin-top: 0!important;
    }
    
    .filterrow .col-md-2 {
        border-bottom: 1px solid rgba(81, 74, 216, 0.10);
    }
    
    .card-title {
        color: #080E3F;
        font-size: 24px!important;
        font-style: normal;
        font-weight: 600;
        line-height: 116%;
    }
    
    .card-body {
        min-height: unset!important;
        padding-bottom: 75px!important;
    }
    
    .card-text {
        display: none!important;
    }
    
    .resources-grid-container .container:not(.filterrow .container) {
        background-image: url('/wp-content/uploads/2025/04/resource-grid-bg-mobile.jpg');
        background-size: 100% auto!important;
        background-repeat: no-repeat;
        background-position: top right!important;
    }
    
    .card .card-img-top {
        background-color: var(--darkblue)!important;
        object-fit: contain!important;
    }
}




/* Hide elements on resources page */
.footer-testi,
.ac-wp-resource-center,
#demo {
    display: none !important;
}

/* Tag Styles */
.resource-tag {
    color: #080E3F;
    display: inline-block;
    z-index: 10;
}

.tag-upcoming {
    background: rgba(188, 184, 255, 0.20);
}

.tag-on-demand {
    background: rgba(188, 184, 255, 0.20);
}

.tag-in-person {
    background: rgba(188, 184, 255, 0.20);
} 

/* Hide searchform a and button */
.searchform a,
.searchform button {
    display: none !important;
}

/* Add left and right padding to filter bar and grid */
.filterrow {
    padding-left: 16px;
    padding-right: 16px;
}
.resources-grid-container {
    padding-left: 16px;
    padding-right: 16px;
}

/* Change card shadow color to #5522dd */
.card,
.top-featured-resource {
    box-shadow: 0 4px 24px 0 #5522dd33 !important;
} 

.card-img-top {
    position: relative!important;
    clip-path: unset!important;
    -webkit-mask-image: unset!important;
    border-bottom: 2px solid #e6e6e6;
}

.card-body .ascential-btn {
    text-align: center;
    display: inline-block!important;
    width: unset;
}

/* Consistent card font sizes and families across breakpoints */
.card-body .card-title {
    min-height: 200px;
    color: #5522dd!important;
    font-size: 24px !important;
    line-height: 1.2 !important;
    font-family: inherit !important;
}

.card-body h4 {
    font-size: 16px !important;
    font-family: inherit !important;
}

.card-body p {
    font-size: 16px !important;
    font-family: inherit !important;
}

.card-body h5 {
    font-size: 14px !important;
    font-family: inherit !important;
}

.card-body-inner, .card-body {
    min-height: unset!important;
    padding-bottom: 0;
}

/* Mobile-specific card improvements */
@media screen and (max-width: 991px) {
    .card {
        border-radius: 12px!important;
        margin-bottom: 1rem!important; /* Reduced from default Bootstrap spacing */
    }
    
    .card-img-top {
        border-radius: 12px 12px 0 0!important; /* Rounded top corners for image */
    }
    
    .card-body {
        padding: 20px!important; /* Reduced padding for mobile */
        min-height: unset!important;
    }
    
    /* Tighter spacing in card grid */
    .resources-grid-container .row > [class*="col-"] {
        margin-bottom: 1rem!important;
        padding-bottom: 0!important;
    }
} 

