@import url("assets/fonts/fonts.css");

:root {
    --color-white: #FFFFFF;
    --color-blue: #12365C;
    --color-red: #F53362;

    --font-size-xlarge: clamp(52px, 12vw, 62px);
    --font-size-large: 28px;
    --font-size-normal: 22px;
    --font-size-small: 16px;
    --font-size-xsmall: 12px;

    --large-breakpoint: 1439px;
    --medium-breakpoint: 1439px;
    --small-breakpoint: 640px;
    
    --container-pad-top: 358px;
    --container-pad-left: 82px;

    --content-row-height: 280px;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: content-box;
    font-family: "Centra No2";
    color: var(--color-blue)
}

a {
    text-decoration: none;
}
/* Text Classes */

.largeHeaderText {
    font-weight: 300;
    font-size: var(--font-size-xlarge);
    line-height: 62px;
}
.subHeaderText {
    font-weight: 500;
    font-size: var(--font-size-large);
    line-height: 40px;
}
.defaultText {
    font-weight: 300;
    font-size: var(--font-size-normal);
    line-height: 32px;
}
.smallText {
    font-weight: 300;
    font-size: var(--font-size-small);
    line-height: 26px;
}
.captionText {
    font-weight: 300;
    font-size: var(--font-size-xsmall);
    line-height: 20px;
}

/* Button Classes*/

.button {
    padding: 14px 42px;
    border-radius: 60px;
    outline: none;
    border: none;
    font-weight: 500;
    font-size: var(--font-size-small);
    cursor: pointer;
}
.button--red {
    background-color: var(--color-red);
    color: var(--color-white);
}

/* Grid */

.grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto 50px auto;
    overflow: hidden;
}

/* Position Main Items */

.content, .graphic-line-wrapper, .graphic-footer {
    grid-column: 1 / 2;
}

/* BG Lines */

.graphic-line-wrapper {
    grid-row: 1 / 4;
    z-index: 1;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: end;
    justify-content: start;
}
.graphic-line-wrapper .lines {
    position: relative;
    width: 100%;
    height: 100%;
}
.graphic-line-wrapper .lines svg:first-child,  .graphic-line-wrapper .lines svg:last-child {
    position: absolute;
}
.graphic-line-wrapper .lines svg:first-child {
    top: 590px;
    right: -21px;
}
.graphic-line-wrapper .lines svg:last-child {
    right: -67px;
    top: 1264px;
}
.graphic-footer {
    width: 100%;
    height: fit-content;
}
.graphic-footer svg {
    width: 100%;
    height: auto;
}
@media screen and (min-width: 600px) {
    .graphic-line-wrapper .lines svg:first-child {
        top: 483px;
        right: 156px;
    }
    .graphic-line-wrapper .lines svg:last-child {
        right: -12px;
        top: 1474px;
    }
}
@media screen and (min-width: 874px) and (max-width: 1439px) {
    .graphic-line-wrapper .lines svg:first-child {
        top: 439px;
        right: 212px;
    }
    .graphic-line-wrapper .lines svg:last-child {
        right: 43px;
        top: 918px;
    }
}
@media screen and (min-width: 1439px) {
    .graphic-line-wrapper .lines svg:first-child {
        top: 47px;
        right: 153px;
    }
    .graphic-line-wrapper .lines svg:last-child {
        right: -11px;
        top: 436px;
    }
}
@media screen and (min-width: 1700px) {
    .graphic-line-wrapper .lines svg:first-child {
        top: 88px;
        right: 295px;
    }
    .graphic-line-wrapper .lines svg:last-child {
        right: 106px;
        top: 476px;
    }
}
@media screen and (min-width: 2000px) {
    .graphic-line-wrapper .lines svg:first-child {
        top: 88px;
        right: 382px;
    }
    .graphic-line-wrapper .lines svg:last-child {
        right: 339px;
        top: 486px;
    }
}
@media screen and (min-width: 2300px) {
    .graphic-line-wrapper .lines svg:first-child {
        top: 128px;
        right: 587px;
    }
    .graphic-line-wrapper .lines svg:last-child {
        right: 504px;
        top: 554px;
    }
}

/* Content */

.content {
    padding: 7vw 7vw 0;
    grid-row: 1 / 3;
    z-index: 3;
}

@media screen and (min-height: 830px) {
    .content {
        padding: 8vw 7vw 0;
    }
}

.content-grid {
    max-width: 100%;
    height: 100%;
    height: auto;
    display: grid;
    grid-template-columns: 100%;
    grid-auto-rows: auto;
}
@media screen and (min-width: 1439px) {
    .content-grid {
        grid-template-areas: "heading gallery"
                             "info gallery";
        row-gap: 20px;
        column-gap: 3.5vw;
    }
    .content-grid__heading {
        grid-area: heading;
    }
    .content-grid__info-container {
        grid-area: info;
    }
    .content-grid__gallery {
        grid-area: gallery;
    }
}
@media screen and (min-width: 1439px) {
    .content-grid {
        grid-template-columns: minmax(300px, 432px) 1fr;
        grid-template-rows: repeat(2, var(--content-row-height));
    }
}
@media screen and (min-width: 1650px) {
    .content {
        max-width: 1650px;
        margin: 0 auto;
    }
}
.content-grid__heading {
    display: flex;
    flex-direction: column;
    gap: 50px;
    padding-bottom: 60px;
}
@media screen and (min-width: 1439px) {
    .content-grid__heading {
        padding-bottom: 0;
    }
}
.content-grid__info-container {
    display: grid;
}
.content-grid__info {
    display: flex;
    flex-direction: column;
    gap: 24px;
    align-self: end;
    padding-bottom: 43px;
}
@media screen and (min-width: 700px) and (max-width: 1439px) {
    .content-grid__info {
        width: 70%;
    }
}

.content-grid__gallery {
    display: grid;
    grid-template-columns: auto;
    grid-template-rows: auto;
    gap: 20px;
    padding: 80px 0;
}
.content-grid__gallery .content-grid-gallery-image {
    display: grid;
    max-width: 100%;
    min-height: 100%;
}

@media screen and (min-width: 600px) {
    .content-grid__gallery {
        grid-template-columns: repeat(auto-fill, minmax(358px, 1fr));
    }
}

@media screen and (min-width: 1439px) {
    .content-grid__gallery {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: auto;
        gap: 20px;
        padding: 0;
    }
    .content-grid__gallery .content-grid-gallery-image {
        max-height: 280px;
    }
}

.content-grid-gallery-image picture, .content-grid-gallery-image .content-grid-gallery-image__caption {
    grid-column: 1 / 2;
    grid-row: 1 / 2;
}
.content-grid-gallery-image picture {
    min-height: 100%;
}
@media screen and (min-width: 1439px) {
    .content-grid-gallery-image picture {
        max-height: var(--content-row-height);
    }
}
.content-grid-gallery-image picture img {
    width: 100%;
    min-height: 100%;
    z-index: 1;
    object-fit: cover;
}
@media screen and (min-width: 1439px) {
    .content-grid-gallery-image picture img {
        min-height: none;
        max-height: var(--content-row-height);
    }
}
.content-grid-gallery-image .content-grid-gallery-image__caption {
    z-index: 2;
    align-self: end;
    background-color: rgba(18, 54, 92, 0.6);
    padding: 9px 12px;
    color: white
}
.content-grid-gallery-image__caption span {
    color: white;
    font-size: var(--font-size-xsmall);
    font-weight: 300;
}


/* Footer */

.graphic-footer {
    display: grid;
    padding-top: 40px;
    grid-row: 2 / 4;
    z-index: 2;
}
.graphic-footer svg, .graphic-footer span {
    grid-column: 1 / 2;
    grid-row: 1 / 2;
}
.graphic-footer svg {
    min-height: 200px;
}
.graphic-footer span {
    z-index: 3;
    place-self: end center;
    color: var(--color-white);
    padding-bottom: 4vh;
    background-color: var(--color-blue);
    width: 100%;
    text-align: center;
}