/* This file overides css that is stored in the cms.  The long term goal is to get the css out of the cms and into the files system */

/* Blog page */

/* ---------- Desktop Styles (unchanged) ---------- */


.blog-posts {
    display: grid !important;
    grid-template-columns: 1fr 1fr 1fr;
}

.blog-post {
    width: auto !important;
}


/* ---------- Mobile-Only Styles (phones <768px) ---------- */
@media only screen and (max-width: 767px) {
    /* Stack blog posts vertically */
    .blog-posts {
        grid-template-columns: 1fr;
    }
}

/* ========================= */

/* EARLY DETECTION SECTION */

/* ========================= */

.wrapper:has(.early-section) {
    max-width: none;
}

.grid:has(.early-section) {
    display: block;
}

.early-section {
    position: relative !important;
    right: auto !important;
    left: auto !important;
    width: auto !important;
    margin-right: initial !important;
    margin-left: initial !important;
    
}

.early-card {
    width: auto !important;
}

/* ========================= */

/* CTA SECTION */

/* ========================= */

.cta-section{
    position: relative !important;
    right: auto !important;
    left: auto !important;
    width: auto !important;
    margin-right: initial !important;
    margin-left: initial !important;
}


/* MOBILE */
@media (max-width:768px){
    .cta-section{
        padding:60px 20px;
    }

    .hero-left, .hero-right {
        width: auto !important;
    }

}