/* Resources Grid Block Styles */
/* Most styles are handled by Tailwind CSS */

/* Break out of container to make full-width */
.resources-grid-block {
    position: relative;
    width: 100vw !important;
    max-width: 100vw !important;
    left: 50% !important;
    right: 50% !important;
    margin-left: -50vw !important;
    margin-right: -50vw !important;
    box-sizing: border-box;
}

/* Override Elementor container max-width when block is inside */
.e-con-inner:has(.resources-grid-block),
.elementor-container:has(.resources-grid-block),
main:has(.resources-grid-block) {
    max-width: none !important;
    overflow-x: visible !important;
}

/* Fallback for browsers without :has() support */
.resources-grid-block {
    max-width: 100vw !important;
}

/* Color scheme: light = white bg / black text, dark = black bg / white text */
.resources-grid-block--light {
    background-color: #ffffff;
    color: #111827;
}

.resources-grid-block--dark {
    background-color: #000000;
    color: #ffffff;
}

/* Resources headline - responsive font sizes */
.resources-headline {
    font-size: 20px;
    line-height: 30px;
    max-width: 100%;
}

@media (min-width: 768px) {
    .resources-headline {
        font-size: 24px;
        line-height: 36px;
        max-width: 85%;
    }
}

@media (min-width: 1024px) {
    .resources-headline {
        font-size: 30px;
        line-height: 47px;
        max-width: 75%;
    }
}

/* News card image styling */
.news-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* News card title - no underline, color follows the block's color scheme */
.resources-grid-block .news-card,
.resources-grid-block .news-card:hover,
.resources-grid-block .news-card:focus,
.resources-grid-block .news-card:visited,
.resources-grid-block .news-card h4 {
    text-decoration: none !important;
}

.resources-grid-block--light .news-card h4,
.resources-grid-block--light .news-card:hover h4,
.resources-grid-block--light .news-card:visited h4 {
    color: #111827 !important;
}

.resources-grid-block--dark .news-card h4,
.resources-grid-block--dark .news-card:hover h4,
.resources-grid-block--dark .news-card:visited h4 {
    color: #ffffff !important;
}

/* News card mobile styling - max-width and center */
@media (max-width: 767px) {
    .news-card {
        max-width: 450px;
        margin-left: auto;
        margin-right: auto;
    }
}