/* PAGE
   This handles the styles for organizing the different 
   parts of the main content section of the page.
   This includes the subNav and content

   We also have the styles for the page top media content
*/

/* Style the links within the content */
.page :is(a:active, a:visited), .page a {
    color: var(--link-color);
    text-decoration: underline;
}

.page {
    display: grid;
    grid: "subNav content" 1fr
        / min-content [c1] 1fr;
    max-width: var(--page-max-width);
    margin-left: auto;
    margin-right: auto;
    box-shadow: 0 40px 80px rgba(0, 0, 0, .5);
    width: 100%;
    z-index: 0;

    grid-row-start: content-start;
    background: linear-gradient(180deg, rgba(255, 255, 255, .9) 0%, rgba(255, 255, 255) 650px, rgba(255, 255, 255, 1) 100%);
}
.page__content-wrapper {
    padding: 50px;
    grid-area: content;
    grid-column-start: c1;
}
@media screen and (max-width: 1280px) {
    .page__content-wrapper {
        padding: 15px;
    }
    /* On smaller screens we need to have room for the subnav opening button */
    .page {
        display: grid;
        grid: "subNav ." 3em
              "subNav content" 1fr
              / [c1] 1fr [c2] minmax(0, 1fr);
    }
}




.page__top-media {
    /* Start the image under the header */
    grid-row-start: img-start;
    overflow: hidden;
    position: relative;
    grid-column: 1;
    height: min-content;
    /* z-index: -1; Removed this to fix bg pause button issue Keeping here for reference if other issue pops up*/
}
.page__top-media :is(img, video) {
    mask-image: linear-gradient(to top, rgba(255, 255, 255, 0) 0px, rgba(255, 255, 255, 0.2) 50px, rgba(255, 255, 255, 1) 150px);
    width: 100%;
    z-index: -1;
    position: relative;
}
@media screen and (max-width: 1400px) {
    .page__top-media {
        display: flex;
        justify-content: center;
    }
    .page__top-media :is(img, video) {
        height: var(--media-height);
        width: unset;
        object-fit: cover;
    }
}


.bg-vid__button {
    position: absolute;
    /* Max that ensured the button is positioned in line 15px from the page max width */
    right: max(15px, calc(50% - var(--page-max-width) / 2 + 15px));
    top: var(--header-total-height);

    background-color: rgba(0,0,0,0.5);
    color: white;
    border: 0;
    padding: 10px;
    border-radius: 0 0 10px 10px;
    font-size: 15px;
    cursor: pointer;

    display: flex;
    align-items: center;
}
.bg-vid__button-icon {
    border-style: double;
    border-width: 0px 0 0px 10px;
    height: 15px;
    padding-right: 5px;
}
.bg-vid__button-icon.bg-vid--paused {
    border-style: solid;
    /* Make it a triangle pointing right */
    border-top: 0.5em solid transparent;
    border-bottom: 0.5em solid transparent;
    border-left: 1em solid white;
    height: 0;
    width: 0;
}