/* Individual Mechanimals Page */
/*******************************/

.mechanimals__intro {
    padding: 50px 0;
}

.mechanimals__intro-cols {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
}

.mechanimals__intro .col-1 {
    margin-bottom: 44px;
}

.mechanimals__intro .school-levels-tagline {
    font-weight: 700;
    margin-bottom: 15px;
}

.mechanimals__intro .school-levels {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    list-style-type: none;
    margin: 0;
    padding: 0;
}

.mechanimals__intro .school-levels li {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 53px;
    height: 53px;
    margin: 0;
    border-radius: 50%;
    font-weight: 700;
    text-transform: uppercase;
    background-color: #29A197;
    color: white;
}

/* edge cases */
.mechanimals__intro:has(+ .resources-panel.light) {
    padding-bottom: 0;
}

@media (min-width: 768px) {
    .mechanimals__intro {
        padding: 55px 0;
    }
}

@media (min-width: 1024px) {
    .mechanimals__intro {
        padding: 80px 0;
    }

    .mechanimals__intro-cols {
        grid-template-columns: 180px minmax(auto, 980px);
        gap: 50px;
    }

    .mechanimals__intro .col-1 {
        margin-bottom: 0;
    }

    .mechanimals__intro.no-levels .mechanimals__intro-cols {
        grid-template-columns: minmax(auto, 1160px);
        gap: 0px;
    }

    .mechanimals__intro .school-levels-tagline {
        font-weight: 700;
        margin-bottom: 45px;
    }

    .mechanimals__intro .school-levels li {
        width: 60px;
        height: 60px;
    }
}

/* Mechanimals related__pages component */
/* *************************************/

.related__pages-items {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 0px;
    list-style-type: none;
    padding: 0;
}

.related__pages-item {
    background-color: #001324;
    align-content: center;
    padding: 50px 23px 70px;
    margin: 0;
}

.related__pages-item:nth-child(even) {
    background: repeating-linear-gradient(
    35deg,
    #001324,
    #001324 40px,
    #172534 40px,
    #172534 80px
    );
}

.related__pages-item article {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 0px;
    color: white;
}

.related__pages-item .col-1 {
    display: flex;
    flex-direction: column;
    gap: 44px;
    margin-bottom: 20px;
}

.related__pages-item .col-1 > * {
    margin-bottom: 0;
}

.related__pages-item .heading {
    color: white;
}

.related__pages-item .image img {
    width: 100%;
    max-width: 100%;
    aspect-ratio: 1218 / 976;
    object-fit: cover;
}

.related__pages-item .image {
    --border-colour: #F47738;
    position: relative;
    margin-right: -23px;
}

.related__pages-item .image.yellow {
    --border-colour: #ebbf00;
}

.related__pages-item .image::before {
    display: block;
    width: 100%;
    height: 18px;
    position: absolute;
    top: 100%;
    left: 0;
    background-color: var(--border-colour);
    content: "";
    clip-path: polygon(0 0, 100% 0, 100% 100%, 20px 100%);
}

.related__pages-item .image::after {
    display: none;
    width: 18px;
    height: calc(100% + 18px);
    position: absolute;
    top: 0;
    left: 100%;
    background-color: var(--border-colour);
    content: "";
    clip-path: polygon(0 0, 100% 20px, 100% calc(100% + 18px), 0 100%);
}

@media (min-width: 768px) {
    .related__pages-item .col-1 {
        gap: 50px;
        margin-bottom: 50px;
    }

    .related__pages-item .image img {
        aspect-ratio: 756 / 349;
    }
}

@media (min-width: 769px) {

    .related__pages-item {
        padding: 55px 25px 75px;
    }

    .related__pages-item .image {
        position: relative;
        margin-right: -25px;
    }
}

@media (min-width: 1024px) {
    .related__pages-item .col-1 {
        gap: 50px;
        margin-bottom: 0;
    }

    .related__pages-item .col-1 > * {
        padding-right: 40px;
    }

    .related__pages-item {
        padding: 80px 80px 100px 60px;
    }

    .related__pages-item article {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .related__pages-item .image {
        margin-right: 0;
    }

    .related__pages-item .image img {
        aspect-ratio: 1218 / 976;
    }

    .related__pages-item .image::before {
        width: calc(100% + 18px);
        clip-path: polygon(0 0, 100% 0, 100% calc(100% + 18px), 20px 100%);
    }

    .related__pages-item .image::after {
        display: block;
    }
}

@media (min-width: 1440px) {
    .related__pages-item .col-1 > * {
        padding-right: 80px;
    }
}

/* Resources__panel component */
/* *************************************/

.resources-panel {
    padding: 50px 0;
    background-color: white;
}

.resources-panel.dark {
    background-color: #021324;
    color: white;
}

.resources-panel .panel-copy {
    margin-bottom: 20px;
}

.resources-panel .panel-copy > *:last-child {
    margin-bottom: 0;
}

.resources-panel .resources-downloads {
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin: 0;
    padding: 0;
}

.resources-panel li {
    list-style-type: none;
    padding: 0;
    margin: 0;
}

.resources-panel li a.btn {
    --angle-width: 60px;
    display: inline-flex;
    align-items: center;
    min-height: 64px;
    padding: 12px var(--angle-width) 12px 24px;
    background-color: #021324;
    background-image: none;
    color: white;
    text-decoration: none;
    position: relative;
    /* clip-path: polygon(0 0, calc(100% - var(--angle-width)) 0, 100% 100%, 0 100%); */
    isolation: isolate;
    overflow: hidden;
}

.resources-panel li a.btn .type {
    text-transform: uppercase;
}

.resources-panel li a.btn:hover,
.resources-panel li a.btn:focus-visible {
    color: #001324;
}

.resources-panel li a.btn::before {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    content: "";
    background-color: #29A197;
    clip-path: polygon(0 0, calc(100% - var(--angle-width)) 0, 100% 100%, 0 100%);
    z-index: -2;
}

.resources-panel li a.btn::after {
    display: block;
    content: "";
    width: 100%;
    height: 100%;
    background-color: #F47738;
    position: absolute;
    left: 0;
    top: 0;
    clip-path: polygon(0 0, calc(100% - var(--angle-width)) 0, 100% 100%, 0 100%);
    z-index: -1;
    translate: -100% 0;
    transition: all 0.2s ease-in;
}

.resources-panel li a.btn:hover::after,
.resources-panel li a.btn:focus-visible::after {
    translate: 0 0;
}

.resources-panel li a.btn .svg {
    display: block;
    margin-left: 25px;
}

.resources-panel li a.btn .svg svg {
    width: 18px;
    height: 18px;
}

@media (min-width: 768px) {
    .resources-panel {
        padding: 55px 0;
    }

    .resources-panel .panel-copy {
        margin-bottom: 40px;
    }

    .resources-panel li a.btn {
        min-height: 54px;
    }

    .resources-panel li a.btn .svg {
        margin-left: 30px;
    }
}

@media (min-width: 1024px) {
    .resources-panel {
        padding: 80px 0;
    }

    .resources-panel .panel-copy {
        margin-bottom: 60px;
    }

    .resources-panel .resources-downloads {
        flex-direction: row;
        flex-wrap: wrap;
        gap: 70px;
    }

    .resources-panel li a.btn {
        padding: 12px var(--angle-width) 12px 24px;
        min-height: 80px;
    }

    .resources-panel li a.btn .svg {
        margin-left: 35px;
    }

    .resources-panel li a.btn .svg svg {
        width: 24px;
        height: 24px;
    }
}

/* content-side-media component */
/********************************/
.content_side_media {
    padding: 3.125rem 0; /* 50px */
}

.content_side_media .contentWrapper {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 50px;
}

.content_side_media .contentWrapper .copy > *:last-child {
    margin-bottom: 0;
}

.content_side_media video {
    width: 100%;
    max-width: 100%;
    aspect-ratio: 504 / 220;
    object-fit: cover;
}

@media (min-width: 768px) {
    .content_side_media {
        padding: 5rem 0; /* 80px */
    }
}

@media (min-width: 1024px) {
    .content_side_media .contentWrapper {
        grid-template-columns: auto 504px;
        gap: 8vw;
    }

    .content_side_media video {
        max-width: 504px;
    }
}

/* accordion overrides */
/***********************/
.single-mechanimals-s1-s3 .ds_accordion,
.single-mechanimals-s4-s6 .ds_accordion {
    margin-bottom: 0;
}

/* MP4 Video Panel - Component */
/*******************************/

.mp4-video-panel {
    padding: 50px 0;
    background-color: white;
}

.mp4-video-panel.dark {
    background-color: #021324;
    color: white;
}

.mp4-video-panel .copy {
    margin-bottom: 20px;
}

.mp4-video-panel .copy > *:last-child {
    margin-bottom: 0;
}

@media (min-width: 768px) {

    .mp4-video-panel {
        padding: 55px 0;
    }

    .mp4-video-panel .copy {
        margin-bottom: 60px;
    }
}

@media (min-width: 1024px) {
    .mp4-video-panel {
        padding: 80px 0;
    }
}

@media (min-width: 1440px) {
    .mp4-video-panel .mp4-video-panel__inner {
        max-width: 980px;
        margin-left: 230px;
    }
}

/* ------------------ */
/* MP4 VIDEO  */
/* ------------------ */
.mp4-video-wrapper {
    position: relative;
    width: 100%;
    height: 100%;
    aspect-ratio: 980 / 625;
    overflow: hidden;
}

.mp4-video-wrapper video {
    position: relative;
    display: block;
    width: 100%;
    height: 100%; 
    object-fit: cover;
    z-index: 1;
}

/* MP4 VIDEO OVERLAY - CENTRAL PLAY BUTTON  */
.mp4-video-wrapper .video-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    pointer-events: none;
}

.mp4-video-wrapper .play-button {
    pointer-events: all;
    position: relative;
    width: 110px;
    height: 110px;
    background: rgba(255, 255, 255, 1);
    border: none;
    border-radius: 50%;
    cursor: pointer;
    transition: opacity 0.3s ease, transform 0.25s ease;
    opacity: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: none;
    z-index: 100;

    /* forces video not to shine though play button */
    -webkit-transform: translate3d(0,0,0);
    transform: translate3d(0,0,0);
    backface-visibility: hidden;
    will-change: transform, opacity;
}

.mp4-video-wrapper .play-button.is-hidden {
    opacity: 0;
    pointer-events: none;
}

.mp4-video-wrapper .play-button::before {
    content: '';
    width: 0;
    height: 0;
    border-left: 36px solid black;
    border-top: 24px solid transparent;
    border-bottom: 24px solid transparent;
    margin-left: 8px;
}

.mp4-video-wrapper .play-button:focus-visible  {
    outline: 4px solid #F47738;
    outline-offset: 0px; 
}

.mp4-video-wrapper:focus-within {
    outline: 2px solid #F47738;
    outline-offset: 4px;
}

/* Accessible breadcrumbs */
/************************ */
.breadcrumbWrapper.a11y-breadcrumb nav,
.breadcrumbWrapper.a11y-breadcrumb li,
.breadcrumbWrapper.a11y-breadcrumb li a {
    color: #001324;
    font-size: 0.875rem;
    line-height: normal;
    padding: 0;
    margin: 0;
} 

.breadcrumbWrapper.a11y-breadcrumb li a {
    text-decoration: none;
}

.breadcrumbWrapper.a11y-breadcrumb li a:hover {
    text-decoration: underline;
}

.breadcrumbWrapper.a11y-breadcrumb ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
}

.breadcrumbWrapper.a11y-breadcrumb ul li + li::before {
  content: "\f061"; /* Font Awesome arrow-right */
  font-size: 75%;
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  margin: 0 0.5rem;
}

/* New Header Banner styles */
/************************** */

.header-banner {
    max-width: 2000px;
    overflow: hidden;
    margin: 0 auto;
    background-color: #001324;
}

.header-banner__inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto auto;
    isolation: isolate;
}

.header-banner__image {
    position: relative;
    height: 405px;
    grid-column: 1;
    grid-row: 1;
    z-index: 1;
}

.header-banner.has-video .header-banner__image {
    display: none;
}

.header-banner picture,
.header-banner img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top right;
    display: block;
}

.header-banner__video {
    position: relative;
    grid-column: 1;
    grid-row: 1;
    z-index: 2;
    height: 405px;
}

.header-banner__video video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top right;
}

.header-banner__video video:hover {
    cursor: pointer;
}

.header-banner__content {
    position: relative;
    grid-column: 1;
    grid-row: 2;
    z-index: 3;
    padding: 20px 23px 20px 23px;
    background-color: #001324;
    color: white;
}

.header-banner__content {
    pointer-events: none;
}

.header-banner__content > * {
    pointer-events: auto;
    width: fit-content;
}

@media (min-width: 768px) {
    .header-banner__inner {
        grid-template-rows: auto;
    }

    .header-banner__image,
    .header-banner__video {
        height: 565px;
    }

    .header-banner__content {
        grid-column: 1;
        grid-row: 1;
        padding: 20px 50px 20px 50px;
        width: 50%;
        bottom: 40px;
        align-self: end;
    }
}

/* Full Width CTA component - overrides (temp fix here) */
.FWctaSection .FWctaWrapper .contImage.mechanimals {
    height: auto;
}

.FWctaSection .FWctaWrapper .contImage.mechanimals .img-bg {
    display: block;
    width: 100%;
    max-width: 100%;
    object-fit: cover;
}