/* Page-specific styles for Index page */
* {
    max-width: 100%;
}

/* Hero video styling */
.hero-section video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
    max-width: 100vw;
}

/* Ideas grid styling */
.ideas-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 2rem;
    margin-top: 2rem;
}

.ideas-grid-item {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    align-items: center;
}

.ideas-grid-item img {
    width: 100%;
    object-fit: cover;
    aspect-ratio: 3/2;
}

@media (max-width: 600px){
    .ideas-grid-item img {
        height: 32vh;
    }
}

/* Mobile breakpoint for ideas grid */
@media (max-width: 1200px) {
    .ideas-grid {
        grid-template-columns: 1fr;
    }
}


#news-carousel .carousel-item .column {
    height: 500px;
}
#news-carousel .carousel-item .column .date {
    padding:0;
    margin:0;
    flex-grow:0;
}
/* Responsive carousel images */
@media (max-width: 1200px) {
    #news-carousel img {
        max-width: 100%;
        height: 300px;
        justify-self: center;
    }
}

@media (max-width: 480px) {
    #news-carousel img {
        height: 250px;
        width: 250px;
    }
}

.hero-section {
    height: 100vh!important;
    position: absolute!important;
    top: 0;
    left: 0;
    right:0;
    z-index: -1;
    overflow-x:hidden;
}

.spacer{
    height: calc(100vh - var(--header-height)) !important;
}

header #navbar {
    background-color: unset; !important;
    z-index: 1;
}
header #navbar a {
    color: var(--light-color); !important;
}
header #navbar a:hover {
    border-bottom-color: var(--light-color); !important;
}

.vertical-bar {
    background: white !important;
}

#altLogo {
    display: unset !important;
}

#logo {
    display: none !important;
}

section {
    margin-top: 8rem;
}

@media (max-width: 768px) {
    section {
        margin-top: 4rem;
    }
}

.row div {
    align-self: center;
}

.row img {
    min-width: 600px;
    min-height: 480px;
}

@media (max-width: 768px) {
    .row img {
        width: 100%;
        height: auto;
        min-width: unset;
        min-height: unset;
    }
}

.responsive-image-grid {
    display: grid;
    grid-template-columns: 6fr 5fr;
    grid-template-areas:
            "title image"
            "body image"
            "cta image";
    column-gap: 2rem;
}

@media (max-width: 1200px) {
    .responsive-image-grid {
        grid-template-areas:
        "title title"
        "body image"
        "cta image";
    }
}

@media (max-width: 600px) {
    .responsive-image-grid {
        grid-template-columns: 1fr;
        grid-template-areas:
        "title"
        "image"
        "body"
        "cta";
    }
}

@media (max-width: 600px) {
    .responsive-image-grid img {
        max-width: 90%;
        margin: 0 auto;
    }
}


.responsive-image-grid > h1 { grid-area: title; }
.responsive-image-grid > div, .responsive-image-grid > p { 
    grid-area: body; 
    max-width: 850px;
}
.responsive-image-grid > a.button { grid-area: cta; }

.responsive-image-grid > img {
    grid-area: image;
    justify-self: end;
    align-self: center;
    width: 100%;
    aspect-ratio: 7 / 6;
    object-fit: cover;
}

.news-carousel-grid {
    display: grid;
    grid-template-areas:
    ". text image ."
    "prev text image next"
    ". date image .";
}


.news-carousel-grid > h3 {
    display: none;
}

.news-carousel-grid .carousel-prev { grid-area: prev; }
.news-carousel-grid .carousel-next { grid-area: next; }
.news-carousel-grid .content {
    grid-area: text; 
    align-self: self-start;
}
.news-carousel-grid .date { grid-area: date; }

.news-carousel-grid img {
    grid-area: image;
    width: 350px;
    height: 350px;
    object-fit: cover;
    max-width: 500px;
    flex-shrink: 0;
    min-width: unset;
    min-height: unset;
}

.news-carousel-grid :not(img){
    margin-right: 2em;
}
@media (max-width: 1200px) {
    .news-carousel-grid {
        grid-template-areas:
        ". title ."
        "prev image next"
        "prev text next"
        ". date .";
    }

    .news-carousel-grid h3 {
        display: unset;
        grid-area: title;
    }
    .news-carousel-grid .content h3 {
        display: none;
    }
    .news-carousel-grid :not(img){
        margin-right: 0;
    }
}