/* //////////////////////////////////////////// */
/* ///////////////// PLATFORM ///////////////// */
/* //////////////////////////////////////////// */

.divider.platform {
    width: 150px;
    height: 3px;
    background: var(--primary-600);
    border-radius: 3px;
}

.divider.platform.hero {
    margin-top: 42px;
}

.hero-section .hero-img.platform-hero-img {
    border-radius: 22px;
    box-shadow: var(--shadow-md);
    margin-top: 12px;
    /* max-height: 220px; */
}

.platform-hero-background {
    width: 100%;
    height: unset !important;
    position: absolute;
    top: unset !important;
    bottom: 60%;
    z-index: -1;
}

.hero-section .wrapper .headline.platform {
    transition: all ease 0.3s;
    margin-top: 12px;
}


.hero-section.platform > .hero-img-wrapper {
    position: relative;
}

.hero-img-wrapper {
    position: relative;
    width: 100%;
    max-width: 600px;      /* size control */
    margin: 0 auto;
    border-radius: 22px;
    overflow: hidden;
  }
  
  /* Creates the height (16:9) */
  .hero-img-wrapper::before {
    content: "";
    display: block;
    padding-top: 56.25%;   /* 9/16 = 0.5625 */
  }
  
  .hero-img-wrapper iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
  }

.hero-img-play-btn {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -45%);
    transition: all ease 0.3s;
}

.hero-img-play-btn:hover {
    transform: translate(-50%, -47%) scale(1.01);
}

.hero-img-play-btn > .play-btn {
    width: 64px;
    height: 64px;
    border-radius: 100%;
    background: rgba(255,255,255,0.35);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    box-shadow: var(--shadow-md);
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.hero-img-play-btn > .play-btn > svg {
    transform: translateX(2px) scale(1.3);
}

.metrics-section.rcp.platform {
    margin-top: 64px;
    padding-top: 60px; 
    padding-bottom: 50px; 
}

.case-study-section {
    width: 100%;
    max-width: 345px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 28px;

    margin: 0px auto 100px auto;

}

.case-study-section .case-studies-wrapper {
    display: flex;
    flex-direction: column;
    margin-top: 32px;
    gap: 28px;
}

.case-study-section img {
    box-shadow: var(--shadow-lg);
    border: 8px solid #FFF;
    cursor: pointer;

    transition: all ease 0.3s;
}

.case-study-section > div.case-studies-wrapper > img:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-xl);
}


.compliance-section {
    width: 100%;
    max-width: 345px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 28px;

    margin: 0px auto 100px auto;

    border: 2px solid var(--primary-600);
    border-radius: 18px;
    padding: 38px;
}

.compliance-section .text-block {
    flex-shrink: 0;
    width: 100%;
    max-width: 1000px;
    text-align: center;
    font-family: Montserrat;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 18px;
    letter-spacing: -0.16px;
}

.text-sweep {
    position: relative;
    display: inline-block;
    white-space: nowrap;
}

.text-sweep span {
    display: inline-block;
    animation-duration: 0.6s;
    animation-fill-mode: forwards;
    color: var(--primary-600);
    /* width: 170px;
    text-align: left; */
}


@keyframes sweepIn {
    from { -webkit-clip-path: inset(0 100% 0 0); clip-path: inset(0 100% 0 0); opacity: 0; }
    to   { -webkit-clip-path: inset(0 0 0 0);   clip-path: inset(0 0 0 0);   opacity: 1; }
  }
  
  @keyframes sweepOut {
    from { -webkit-clip-path: inset(0 0 0 0);   clip-path: inset(0 0 0 0);   opacity: 1; }
    to   { -webkit-clip-path: inset(0 100% 0 0); clip-path: inset(0 100% 0 0); opacity: 0; }
  }

@media (min-width: 550px) {
    /* PLATFORM HERO - Start */
    .platform-hero-background {
        bottom: 46%;
    }
    /* PLATFORM HERO - End */
}

@media (min-width: 834px) {
    /* PLATFORM HERO - Start */

    .hero-section.platform {
        margin-bottom: 24px;
    }
    .hero-section.platform .hero-background.platform-hero-background {
        content: url('https://recallhq.com/assets/images/platform_background_834.svg');
        height: 100%;
    }
    .hero-section.platform .hero-img.platform-hero-img {
        content: url('https://recallhq.com/assets/images/platform_video_thumbnail_834.png');
    }

    .hero-section.platform .wrapper {
        flex-direction: column;
        align-items: center;
    }

    .hero-img-wrapper img {
        max-width: unset;
    }

    .hero-img-play-btn > .play-btn {
        transform: scale(1.5);
    }

    .hero-section.platform .text-group {
        max-width: 80%;
    }

    /* PLATFORM HERO - End */


    /* PLATFORM Metrics - Start */

    .metrics-section.platform .metrics-background.platform {
        content: url('https://recallhq.com/assets/images/rcp_metrics_background_tablet_834.png');
        height: 124%;
    }

    .metrics-section.platform .wrapper {
        padding-top: 40px;
    }

    /* PLATFORM Metrics - End */

    /* CASE STUDIES - Start */

    .case-study-section {
        max-width: 80%;
    }

    .case-study-section .case-studies-wrapper {
        flex-direction: row;
    }

    .case-study-section .card-subhead {
        font-size: 18px;
        line-height: 1.2;
    }

    /* CASE STUDIES - End */


    /* COMPLIANCE - Start */

    .compliance-section {
        max-width: 80%;
    }

    .compliance-section .text-block {
        font-size: 18px;
        line-height: 1.2;
    }
    
    /* COMPLIANCE - End */

}

@media (min-width: 1000px) {

    /* PLATFORM HERO - Start */

    .hero-section.platform .hero-background.platform-hero-background {
        content: url('https://recallhq.com/assets/images/platform_background_1000.svg');
        height: 100%;
    }

    .hero-section.platform .hero-img.platform-hero-img {
        content: url('https://recallhq.com/assets/images/platform_video_thumbnail_834.png');
        /* max-width: unset !important; */
        /* width: unset !important; */
    }

    .hero-section.platform .hero-img-wrapper {
        max-width: 80%;
    }

    .headline.platform.text-dark {
        max-width: 1000px;
    }

    /* PLATFORM HERO - End */


    .section.case-study-section .card-subhead {
        max-width: 700px;
    }

}

@media (min-width: 1400px) {

        /* PLATFORM HERO - Start */
        .platform-hero-background {
            bottom: 50%;
        }
        .hero-section.platform .hero-background.platform-hero-background {
            content: url('https://recallhq.com/assets/images/platform_background_1400.svg');
            height: 100%;
        }

        .hero-section.platform .hero-img.platform-hero-img {
            content: url('https://recallhq.com/assets/images/platform_video_thumbnail_834.png');
            /* max-width: unset !important; */
            /* width: unset !important; */
        }

        .hero-section.platform .hero-img-wrapper {
            max-width: 90%;
        }
    
        /* PLATFORM HERO - End */

        /* PLATFORM Metrics - Start */
  
        .metrics-section.rcp.platform .metrics-background.platform {
            content: url('https://recallhq.com/assets/images/rcp_metrics_background_desktop_1440.png');
            height: 120%;
            transform: translateY(0px);
        }

        /* PLATFORM Metrics - End */

        /* COMPLIANCE - Start */

        .compliance-section {
            width: 60%;
            max-width: 1000px;
        }
        
        /* COMPLIANCE - End */

}

@media (min-width: 1700px) {
    .metrics-section.rcp.platform .metrics-background.platform {
        content: url('https://recallhq.com/assets/images/rcp_metrics_background_desktop_1600.png');
        height: 134%;
        transform: translateY(0px);
    }

    .platform-hero-background {
        /* bottom: unset; */
        top: -15% !important;
    }
}



/* Case study Modal */

.case-study-modal {
    position: fixed;
    inset: 0;
    display: none;
    z-index: 9999;
  }
  
  .case-study-modal.active {
    display: block;
  }
  
  .case-study-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.75);
  }
  
  .case-study-modal-content {
    position: relative;
    width: 100%;
    height: 100%;
    background: #000;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  
  .case-study-modal-content iframe {
    width: 100%;
    height: 100%;
    border: none;
  }
  
  .case-study-modal-close {
    position: absolute;
    top: 12px;
    right: 14px;
    z-index: 2;    
    padding: 0px 8px;
  
    font-size: 40px;
    line-height: 1;
    background: rgba(0,0,0,0.20);
    border: none;
    border-radius: 2px;
    color: var(--grey-400);
    cursor: pointer;
  }


  /* Video modal */

  /* Modal shell */
.video-modal {
    position: fixed;
    inset: 0;
    z-index: 99999;
    display: none;
  }
  
  .video-modal.active {
    display: flex;
    align-items: center;
    justify-content: center;
  }
  
  /* Grey semi-transparent backdrop */
  .video-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.65);
  }
  
  /* Modal card */
  .video-modal-content {
    position: relative;
    z-index: 1;
  
    width: 90%;
    max-width: 1200px;          /* controls overall size */
    background: #000;
    border-radius: 18px;
    box-shadow: 0 20px 60px rgba(0,0,0,0.4);
    overflow: hidden;
  }
  
  /* 16:9 aspect ratio */
  .video-frame-wrapper {
    position: relative;
    width: 100%;
  }
  
  .video-frame-wrapper::before {
    content: "";
    display: block;
    padding-top: 56.25%;       /* 16:9 */
  }
  
  /* iframe fills modal */
  .video-frame-wrapper iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
  }
  
  /* Close button */
  .video-modal-close {
    position: absolute;
    top: 10px;
    right: 14px;
    z-index: 2;
  
    font-size: 30px;
    line-height: 1;
    background: rgba(0,0,0,0.5);
    border: none;
    color: #fff;
    border-radius: 50%;
    width: 36px;
    height: 36px;
    cursor: pointer;
  }

  .video-frame-wrapper,
    .video-frame-wrapper iframe {
    pointer-events: auto !important;
    }
  
  /* Slightly larger on desktop */
  @media (min-width: 1024px) {
    .video-modal-content {
      max-width: 1200px;
    }
  }