@import url(common.css);
@import url(_reset.css);
@import url(_variables.css);
@import url(hamburger-overlay-2.css);

/* Variables specific to this page */

h1 { position: relative; }
h1:hover {color: var(--color-secondary)}
h4 { margin-right: 3rem;}

/* Header landing page specific */

.header-collection { background: none;}

/* Landing section viewport container */

.landing-section {
    height: 100vh;
    width: 100vw;
}

/*Background video */

.fullscreen-bg-vid {
    position: absolute; 
    top: 0;
    left: 0;
    z-index: -1; 
    overflow: hidden;
}

.fullscreen-bg-vid video {
    width: 100vw;
    height: 100vh;
    object-fit: cover; 
}

/* Hero text*/

.hero-text {
    position: absolute;
    display: flex;
    flex-direction: column;
    bottom: 0;
    left:0;
    margin: 0 3rem 3rem;
    font-family: var(--font-primary);
    color: white;
    font-size: 3rem;
}

.hero-text-bottom {
    display: flex;
    align-items: center; 
}

.additional-links {
    display: flex;
    flex-direction: column;
    margin-left: 1rem;
    gap: 1rem;
    font-size: 1.25rem;
    width: 50%;
}

.title {
    width: 56%;
    border: 4px solid var(--color-secondary);
    border-radius: 2rem;
    padding: 1rem;
}


.link-with-line {
    display: flex;
    align-items: center;
}

.line {
    display: flex;
    margin-left: 1rem;
    top: 50%; 
    width: 100%; 
    border-top: 2px solid white; 
    transform: translateY(-50%); 
}

.hero-small-link, .hero-small-link-two {
    z-index: 1; 
    white-space: nowrap;
}

.hero-small-link:hover + .line,
.hero-small-link-two:hover + .line {
    border-top-color: var(--color-secondary);  /* Change line color on hover */
}

/* END OF INITIAL VIEWPORT */

/* Main content */

.main-grid { 
    display: grid;
    margin-top: 0;
    grid-gap: 2rem;
    grid-template-columns: 1fr 1fr 33%;
    grid-template-rows: auto;
    grid-template-areas: 
    "left-column center-column right-sidebar"
    "image image mid-right-column"
    "mid-bar mid-bar mid-bar";
}

.left-column    { grid-area: left-column}
.center-column    { grid-area: center-column}
.right-sidebar    { grid-area: right-sidebar}
.image { grid-area: image}
.mid-right-column { grid-area: mid-right-column }
.mid-bar { grid-area: mid-bar}
.bigButton {grid-area: bigButton}
.bigButton2 {grid-area: bigButton2}

/* Title bar styles */

.title-bar {
    grid-template-columns: 1fr 1fr 33%;
}

.title-bar-right .medium {
    grid-column: 3;
    margin-left: 0rem;
}

.title-bar-center .medium {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 150px;
    width: 100%;
    background-color: var(--color-secondary);
}

.mid-bar {
    display: flex;
    height: 82px;
    width: 100%;
    background-color: var(--color-secondary);
}

/* Visit Section Content */

.left-column, 
.right-sidebar, 
.center-column, 
.left-sidebar {
    display: flex;
    flex-direction: column;
}

.left-column, .center-column {
    justify-content: center;
}

.right-sidebar, 
.left-sidebar {
    justify-content: space-evenly;
    color:white;
    background-color: var(--color-secondary);
}

.right-sidebar,
.left-sidebar {
    gap: 3rem;
}

.right-sidebar .sidebarSection:last-child,
.teach-col {
    margin-bottom: 0;
}

.sidebarSection:first-child {
    margin-top: 1rem;
}

.sidebarSection {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.sidebarSection hr {         /* Separator line visual only */
    border: none;
    height: 1px;
    background-color: white; 
    margin-bottom: 20px;
    width: 15rem;
}

.column-text-content p, 
.column-text-content li,
.column-text-content h4,
.column-text-content h6 {      /* General rule */
    margin-bottom: 1rem;
    margin-top: 1rem;
}

.left-column .column-text-content p,
.left-column .column-text-content li,
.left-column .column-text-content h4,
.left-column .column-text-content h6,
.teach-col .column-text-content p,
.teach-col .column-text-content li,
.teach-col .column-text-content h4,
.teach-col .column-text-content h6 {
    margin-left: 2rem;
}

.right-column-text-content p, 
.right-column-text-content h2 {    
    margin-left: 0rem;
    margin-right: 2rem;
    margin-top: 1rem;
}

.right-column-text-content {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    height: 100%;
}

.low-mid-right-column {
    margin-bottom: 2rem;
}

.image img {
    width: 100%;
    display: block; 
}

.image,
.imageCarousel {
    margin-left: 2rem;
}

.teach-col .column-text-content h4 {
    margin-top: 0;
}


/* Grid Two */

.grid2 {
    display: grid;
    grid-template-columns: 2fr 33%; 
    grid-template-rows: 1fr 3fr; 
    grid-gap: 2rem; 
    margin-right: 0rem;
    margin-top: 2rem;
    grid-template-areas: 
    "teach-col low-mid-right-column"
    "left-sidebar low-mid-right-column";
  }

.teach-col { grid-area: teach-col}
.low-mid-right-column {grid-area: low-mid-right-column}
.left-sidebar {grid-area: left-sidebar}

/* Grid Three */

.grid3 {
    display: grid;
    grid-template-columns: auto 1fr 33%; 
    grid-template-rows: auto; 
    grid-gap: 2rem; 
    margin: 2rem 0 2rem 0;
    grid-template-areas: 
    "imageCarousel carouselDescription exhibText"
  }

.imageCarousel { grid-area: imageCarousel}
.exhibText {grid-area: exhibText}
.carouselDescription {grid-area: carouselDescription}

.carouselDescription {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    background-color: #D9D9D9;
    width: 300px;
    height: auto;
}

.carousel-text-content {
    display: flex;
    flex-direction: column;
}

.carouselArrows {
    display: flex;
    justify-content: space-between; 
    align-items: center;
    margin: 0 1rem 1rem 1rem;
  }

.imageCarousel img {
    width: 100%;
    height: auto;
    display: block; 
  }

.carouselDescription p,
.carouselDescription h5 {
    margin: 1rem 1rem 0 1rem;
}

.exhibText {
    display: flex;
    flex-direction: column;
    height: auto;
}

.bigButton, 
.bigButton2 {
    display: flex;
    text-align: center;
    justify-content: center;
    align-items: center;
    border: 3px solid var(--color-secondary);
    border-radius: 10px;
    padding: 2rem;
    margin: 2rem 2rem 0 0;   
    max-height: 100px;
    font-size: 3rem;
    color: var(--color-secondary)
}

/* Grid Four */

.grid4 {
    display: grid;
    grid-template-columns: 33% 2fr; 
    grid-template-rows: auto; 
    grid-gap: 2rem; 
    margin: 2rem 0 2rem 2rem;
    grid-template-areas: 
    "suppMuseum supportImage"
  }

.suppMuseum { grid-area: suppMuseum}
.supportImage {grid-area: supportImage}


.navStuff {
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    height: 100%;
}

.suppMuseum {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.buttonWrapper {
    display: flex;
    align-items: center;
    margin-bottom: 2rem;
}

.buttonWrapper::after {
    content: '';
    display: inline-block;
    width: 100%; 
    height: 2px; 
    background-color: var(--color-secondary); 
    margin-left: 1rem;
}

.navButtonSmall {
    display: block;
    text-align: center;
    border: 2px solid var(--color-secondary);
    border-radius: 10px;
    padding: 1rem;
    margin: 0 1rem 0 0;   
    font-size: 1.5rem;
    min-width: 15rem;
    color: var(--color-secondary);
}

.supportImage img {
    width: 100%;
    height: auto;
}

.supportImage{
    margin-right: 2rem;
    margin-left: 0;
}

.navButtonSmall img {
    width: auto;
}

#start-exploring-button-layout-2 {
    display: none;
}

body {
    background-color: var(--color-secondary);
}

.wideres-container {
    width: 100%; 
    max-width: 1921px; 
    margin: 0 auto; 
    overflow: hidden; 
    background-color: white;
  }


@media (min-width: 1921px) {
    .bigButton {
        font-size: 3rem;
    }

    .image{
        display: flex;
        justify-content: center;
        align-items: center; 
    }

    .image img {
        max-width: auto;
    }
}

@media (max-width: 1837px) {
    .grid3 {
        display: grid;
        grid-template-columns: auto 33%; 
        grid-template-rows: auto; 
        grid-gap: 2rem; 
        margin: 2rem 0 2rem 0;
        grid-template-areas: 
        "imageCarousel exhibText"
        "carouselDescription exhibText"
      }

      .carouselDescription {
        margin-left: 2rem;
        display: none;
      }
}

@media (max-width: 1752px) {
    .main-grid {
        grid-template-columns: auto; 
        grid-template-areas:
            "left-column center-column right-sidebar"
            "image image mid-right-column"
            "bigButton bigButton bigButton"
            "mid-bar mid-bar mid-bar";
    }

    #start-exploring-button { /* Original "Explore together" button, contained inside mid-right-column */
        display: none;
    }

    #start-exploring-button-layout-2 {   /* This button displays outside of the mid-right-column, (100% horizontal) hence the new id and additional html line */
        display: flex;
    }

    .bigButton {
       margin: 0 2rem 0 2rem;
    }

    .grid4 {
        display: grid;
        grid-template-columns: auto; 
        grid-template-rows: auto; 
        grid-gap: 2rem; 
        margin: 2rem 0 2rem 0rem;
        grid-template-areas: 
        "suppMuseum" 
        "supportImage"
      }

      .suppMuseum,
      .supportImage .image,
      .supportImage {
        margin: 0 2rem 0 2rem;
      }

      
    .carouselArrows {
        margin-top: 1rem;
    }

    .navStuff {
        flex-direction: row;
        justify-content: space-between;
        margin-top: 1rem;
    }

    .navButtonSmall {
        margin: 0 -1rem 0 0; 
    }

    .buttonWrapper:not(:last-child) {
        flex: 1; 
    }

    .buttonWrapper {
        margin-bottom: 0rem;
    }
}


@media (max-width: 1560px) {
    .bigButton,
    .bigButton2 {
        font-size: 2.3rem!important;
    }
}

@media (max-width: 1512px) {
    .main-grid {
        grid-template-columns: 1fr 1fr 33%; 
        grid-template-areas:
            "left-column center-column right-sidebar"
            "mid-right-column mid-right-column mid-right-column"
            "image image image"
            "bigButton bigButton bigButton"
            "mid-bar mid-bar mid-bar";
    }

    .mid-right-column {
        margin-left: 2rem;
    }
    
    .image {
        margin-right: 2rem;
    }
}

@media (max-width: 1189px) {
    .specEvent {
        text-align: center;
    }
}

@media (max-width: 1150px) {
    .bigButton2,
    .bigButton {
        font-size: 1rem;
    }
}

@media (max-width: 1112px) {
    .grid3 {
        display: grid;
        grid-template-columns: auto; 
        grid-template-rows: auto; 
        grid-gap: 2rem; 
        margin: 2rem 0 2rem 0;
        grid-template-areas: 
        "exhibText"
        "imageCarousel"
        "carouselDescription" 
      }

      .exhibText {
        margin-left: 2rem;
      }

      .carouselDescription,
      .bigButton2,
      .imageCarousel {
        margin-right: 2rem;
      }


      .carouselDescription {
        display: flex;
        width: auto;
        margin-right: 2rem!important;
        padding-bottom: 2rem;
      }



}


@media (max-width: 1027px) {
    .navStuff {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 1rem;

    }

    .buttonWrapper {
        width: 100%; 
        justify-content: flex-end;
        position: relative; 
    }

    .buttonWrapper:nth-child(2)::after,
    .buttonWrapper:nth-child(4)::after {
        content: none; 
  }

    .buttonWrapper:nth-child(2)::before,
    .buttonWrapper:nth-child(4)::before {
            content: '';
            display: inline-block;
            width: 50%; 
            height: 2px; 
            background-color: var(--color-secondary); 
            margin-right: 1rem;
        }

  .navButtonSmall {
    margin: 0 0 0 0; 
}
}

@media (max-width: 950px) {
    .main-grid {
        grid-template-columns: auto; 
        grid-template-areas:
            "left-column left-column center-column"
            "right-sidebar right-sidebar right-sidebar"
            "image image image"
            "mid-right-column mid-right-column mid-right-column"
            "bigButton bigButton bigButton"
            "mid-bar mid-bar mid-bar";
    }

    .mid-bar {
        display: none;
    }

    .grid2 {
        display: grid;
        grid-template-columns: auto;
        grid-template-rows: auto auto auto; 
        grid-gap: 2rem; 
        margin-right: 0rem;
        margin-top: 2rem;
        grid-template-areas: 
        "left-sidebar left-sidebar"
        "teach-col teach-col"
        "low-mid-right-column low-mid-right-column"; 
      }

    .low-mid-right-column {
        margin: 0 0 2rem 2rem;
    }

    .left-column .column-text-content p,
    .left-column .column-text-content li,
    .left-column .column-text-content h4,
    .left-column .column-text-content h6,
    .teach-col .column-text-content p,
    .teach-col .column-text-content li,
    .teach-col .column-text-content h4,
    .teach-col .column-text-content h6 {
        margin: 1rem 2rem 0 2rem;
    }

    .teach-col .column-text-content h4,
    .left-sidebar{
        margin-top: -2rem;
    }

    .mid-right-column .right-column-text-content h2,
    .suppMuseum .column-text-content h4 {
        margin-top: -1rem;
    }

    .right-column-text-content p, 
    .right-column-text-content h2 {    
        margin-right: 2rem;
    }

    .right-column-text-content {
        display: flex;
        flex-direction: column;
        flex-grow: 1;
        height: 100%;
    }

    .left-sidebar .sidebarSection {
        margin-bottom: 1.5rem;
    }

    .left-sidebar {
        margin-bottom: 2rem;
    }

    .title-bar {
        grid-template-columns: auto;
        justify-content: center;
    }

    .title-bar h3 {
        margin-left: 0;
    }
    
    .title-bar-right .medium {
        grid-column: 2;
        margin-left: 0rem;
    }

    .center-column {
        margin-right: 2rem;
    }
}

@media (max-width: 1024px) and (max-height: 600px) and (orientation: landscape) {
    h1 {
        font-size: 10vh;
    }

    h2:not(.explore-exclude) {
        font-size: 5vh;
    }

    .title {
        width: 50%;
        margin-bottom: 2rem;
        margin-top: 1rem;
    }

    .hero-text {
        margin-bottom: 0;
    }

}

@media (max-width: 756px) {
    
h1 {
    text-align: center;
    font-size: 13vw;
}

h2 {
    font-size: 7vw;
}

h3 {
    text-align: center;
}

.hero-text {
    margin: 0 2rem 5rem 2rem;
}

.hero-text-bottom {
    flex-direction: column;
    text-align: center;
}

.additional-links {
    display: flex;
    flex-direction: column;
    margin-left: 0rem;
    gap: 1rem;
    font-size: 1.25rem;
    width: 97%;
}

.title {
    width: 80%;
    margin-bottom: 2rem;
    margin-top: 1rem;
}

.main-grid {
    grid-template-columns: auto; 
    grid-template-areas:
        "left-column left-column left-column"
        "center-column center-column center-column"
        "right-sidebar right-sidebar right-sidebar"
        "image image image"
        "mid-right-column mid-right-column mid-right-column"
        "bigButton bigButton bigButton"
        "mid-bar mid-bar mid-bar";
}

.center-column {
    margin: 0 2rem 0 2rem;
}

.center-column .column-text-content {
    margin-top: -1rem;
}
}

@media (max-width: 665px) {
    .hamburger-overlay-2 {
        width: 100%;
    }
}

@media (max-width: 589px) {
    .navStuff {
        display: flex;
        flex-direction: column;
    }
}