/* === Blog Post Main Wrappers === */
#BlogPost-Wrapper {
    width: 90%;
    margin: 0 auto;
}

#related-blogpost-wrapper {
    width: 85%;
    margin: 0 auto;
}

#Blog-Wrapper {
    /*width: 70%;*/
    margin: 0 auto;
}

/* === Blog Social Links & Section Headers === */
#Blog-Social-Links {
    width: 50%;
    margin: 0 auto;
}

#Related-Blog-Section-Header {
    width: 70%;
    margin: 0 auto;
    padding-bottom: 1%;
    padding-top: 1%;
}

/* === Blog Search Bar === */
#blog-searchbar-container {
    padding-top: 1%;
    padding-bottom: 1%;
    width: 40%;
}

#queryInput {
    border: 1px solid #d3d3d3;
    border-radius: 2px;
}

/* === Blog More Button === */
#Blog-More-Button {
    margin-bottom: 5%;
}
#Blog-More-Button:disabled {
    background-color: grey;
    cursor: not-allowed;
    opacity: 0.6;
}

/* === Blog Result Grid === */
#Blog-Result-Grid {
    transition: height 5s, width 1s;
    overflow: hidden;
}

/* === Blog Results Grid (Card Layout) === */
#Blog-Results-Grid .related-post {
    padding: 1%;
}
#Blog-Results-Grid .row.related-blog-posts {
    margin-bottom: 0;
}

/* === Blog Banner === */
.blog-banner-container img {
    max-height: 100%;
    max-width: 100%;
}

/* === Blog Slide (Carousel/Slider) === */
.blog-slide {
    position: relative;
    text-align: center;
}
.blog-slide > div {
    position: relative;
    display: inline-block;
    line-height: 0;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: stretch;
}
.blog-slide-outer {
    width: 300px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: stretch;
}
.blog-slide-description {
    position: relative;
    padding: 10px;
    background-color: #E5E5E5;
    max-width: 300px;
    left: 12.5%;
    height: 140px;
    width: 100%;
    box-sizing: border-box;
    margin: 0;
    left: 0;
    position: relative;
}

/* === Blog Card Link (Button/Link on Card) === */
#blog-card-link {
    margin-top: auto;
    align-self: flex-end;
    position: static;
    transition: opacity 0.2s;
    position: absolute;
    bottom: 10px;
    right: 10px;
}
#blog-card-link.hidden {
    display: none;
}
.blog-slide:hover #blog-card-link,
.blog-slide:focus-within #blog-card-link {
    display: inline;
}

/* === Related Blog Posts Section === */
.related-blog-posts {
    margin-bottom: 2em;
}
.related-post {
    margin-bottom: 4em;
}
.related-blog-posts .related-img-overlay {
    display: inline-block;
    position: absolute;
    bottom: 0;
    left: 24.5%;
    width: 300px;
    height: 30%;
    margin-left: -74px;
    padding: 10px;
    color: #FFF;
    line-height: 16px;
    text-align: left;
    background-color: rgba(19, 85, 130, 0.8);
    -webkit-transition: height 0.3s ease-in;
    -o-transition: height 0.3s ease-in;
    transition: height 0.3s ease-in;
}
.related-img-overlay {
    overflow: hidden;
    position: relative;
    display: flex;
    flex-direction: column;
    height: 300px;
    min-height: 120px;
    width: 100%;
    box-sizing: border-box;
    margin: 0;
    left: 0;
    position: relative;
}
.related-blog-posts .related-img-overlay .blog-info a {
    color: #FFF;
}
.blog-info {
    z-index: 0;
}

/* === Block Grid Video Embed === */
.blockgrid-video-embed {
    position: relative;
    width: 100%;
    padding-bottom: 56.25%; /* 16:9 aspect ratio */
    height: 0;
    overflow: hidden;
}
.blockgrid-video-embed iframe {
    position: absolute;
    top: 15%;
    left: 15%;
    width: 100%;
    height: 100%;
}

/* === Block Grid Layout === */
.block-grid-row {
    padding-top: 2%;
}
.umb-block-grid__layout-item {
    display: flex;
    flex-direction: column;
}

/* === Miscellaneous === */
.container-custom {
    /* Add custom container styles here if needed */
}
#recent-blog-posts {
    margin-top: 4%;
}
#blog-grid-wrapper {
    padding-left: 10%;
}
.icon-black-to-white {
    filter: invert(1);
}