/* ==========================================================================
   Superfonik for Schools — page-specific / mobile-first styles
   Requires superfonik_base.css (fonts, resets, button, responsive helpers).
   Pattern: superfonik_forschools.css (base) -> _tablet -> _desktop
   ========================================================================== */

/* ==========================================================================
   HERO SECTION
   ========================================================================== */
.superfonik-school-hero-section {
    background-color: #1C4FE3;
    background-image: url(/images/superfonik/image_bg_galaxy.svg);
    background-size: cover;
    background-position: top center;
    background-repeat: no-repeat;
    color: #ffffff;
    position: relative;
    overflow: hidden;
}

/* Header / top bar -------------------------------------------------------- */
.superfonik-school-hero-section .superfonik-school-header-content {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 14px 0 8px;
    position: relative;
    background: rgb(255 255 255 / 8%);
}

.superfonik-school-hero-section .superfonik-school-header-content .superfonik-button-container {
    display: none;
}

.superfonik-school-hero-section .superfonik-school-logo-lockup {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.superfonik-school-hero-section .superfonik-school-logo {
    width: 158px;
    display: block;
}

.superfonik-school-hero-section .superfonik-school-for-schools-label {
    font-family: 'CCWhatchamacallit Condensed';
    font-size: 26px;
    line-height: 35px;
    letter-spacing: 0%;
    text-transform: uppercase;
    margin-left: -5px;
}

.superfonik-school-hero-section .superfonik-school-header-content .superfonik-button-container {
    margin: 0;
}

.superfonik-school-hero-section .superfonik-school-hero-content .superfonik-school-ios-only-text {
    font-size: 12.35px;
    line-height: 24.01px;
    margin-top: 10px;
}

/* Hero content ------------------------------------------------------------ */
.superfonik-school-hero-section .superfonik-school-hero-content {
    text-align: center;
    margin: 0 auto;
    margin-top: 23px;
    margin-bottom: 40px;
    max-width: 315px;
    position: relative;
}

.superfonik-school-hero-section .superfonik-school-hero-character {
    width: 175px;
    height: auto;
    display: block;
    margin: 0 auto;
    margin-bottom: 25px;
}

.superfonik-school-hero-section .superfonik-school-hero-content h1 {
    margin: 0 auto 20px;
    font-size: 40px;
    line-height: 130%;
    text-align: center;
}

.superfonik-school-hero-section .superfonik-school-hero-content .superfonik-school-hero-content-text {
    font-size: 20px;
    line-height: 30px;
    margin-bottom: 25px;
}

/* Hero pink moon */
.superfonik-school-hero-section .superfonik-school-hero-moon {
    width: 2025px;
    height: 104px;
    position: relative;
    left: 50%;
    transform: translateX(-50%);
}

/* Hero Video ---------------------------------------------------------- */
.superfonik-school-hero-tilted-video {
    position: relative;
    margin: auto;
    margin-top: -75px;
    z-index: 2;
    max-width: 375px;
}

.superfonik-school-gameboard-tablet {
    width: 350px;
    margin: 0 auto;
    position: relative;
    z-index: 1;
}

/* Frame variant visibility, scoped to this section so it follows the page's
   own 768/1366 breakpoints (not the global 600/1366 helpers). */
.superfonik-school-hero-tilted-video .mobile-only { display: block; }
.superfonik-school-hero-tilted-video .tablet-only,
.superfonik-school-hero-tilted-video .desktop-only { display: none; }

/* Scroll-triggered video, sits inside the tablet screen area.
   rotate() matches the tablet frame's tilt — tune the angle (and top/left/
   width) so the video lines up flush with the on-screen artwork. */
.superfonik-school-video {
    position: absolute;
    left: 50%;
    top: 38%;
    transform: translate(-50%, -50%) rotate(-3deg);
    width: 300px;
    height: 210px;
    object-fit: cover;
    border-radius: 12px;
    z-index: 1;
    border: solid #231F20 1.2px;
}

.superfonik-school-video-cover {
    position: absolute;
    left: 50%;
    top: 38%;
    transform: translate(-50%, -50%) rotate(-3deg);
    width: 300px;
    object-fit: cover;
    border-radius: 12px;
    z-index: 2;
    pointer-events: none;
}

.superfonik-school-video-stat {
    position: absolute;
    width: 275px;
    height: auto;
    right: -5px;
    bottom: -30px;
    z-index: 2;
}

/* ==========================================================================
   SETUP SECTION ("Easy set-up for independent or group learning")
   ========================================================================== */
.superfonik-school-setup-section {
    text-align: center;
    max-width: 340px;
    margin: auto;
    margin-top: 85px;
}

.superfonik-school-setup-title {
    font-size: 40px;
    text-align: center;
    margin: 0 auto;
    margin-bottom: 40px;
}

.superfonik-school-setup-grid {
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    gap: 50px;
}

.superfonik-school-setup-item {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.superfonik-school-setup-item-image {
    display: flex;
    align-items: flex-end;
    justify-content: center;
}

.superfonik-school-setup-item-image img {
    width: 306px;
}

.superfonik-school-setup-item h3 {
    font-size: 30px;
    text-align: center;
    margin-bottom: 15px;
}

.superfonik-school-setup-item p {
    font-size: 20px;
    line-height: 35px;
    text-align: center;
    margin: 0 auto;
    max-width: 320px;
}

/* ==========================================================================
   PROGRESS SECTION ("Adaptive learning that keeps kids progressing")
   ========================================================================== */
.superfonik-school-progress-section {
    text-align: center;
    margin-top: 170px;
   
}

.superfonik-school-progress-image {
    width: 312px;
    margin: auto;
}

.superfonik-school-progress-title {
    font-size: 40px;
    text-align: center;
    margin: auto;
    margin-bottom: 20px;
    margin-top: 20px;
    max-width: 315px;
}

.superfonik-school-progress-text {
    font-size: 20px;
    line-height: 30px;
    max-width: 312px;
    margin: auto;
}

/* ==========================================================================
   TUTORIAL SECTION ("Interactive phonics")
   ========================================================================== */
.superfonik-school-tutorial-section {
    text-align: center;
    margin-top: 170px;
}

.superfonik-school-tutorial-image img {
    width: 315px;
    margin: auto;
}

.superfonik-school-tutorial-title {
    font-size: 40px;
    text-align: center;
    margin-bottom: 20px;
    margin-top: 24px;
}

.superfonik-school-tutorial-text {
    font-size: 20px;
    line-height: 30px;
    max-width: 312px;
    margin: auto;
}

/* ==========================================================================
   TESTIMONIALS SECTION ("Parents and teachers love Superfonik")
   ========================================================================== */
.superfonik-school-testimonials-section {
    text-align: center;
    margin-top: 170px;
}

.superfonik-school-testimonials-title {
    margin: auto;
    font-size: 40px;
    text-align: center;
    max-width: 320px;
    margin-bottom: 40px;
}

.superfonik-school-testimonials-slider {
    width: 100%;
    margin: auto;
    cursor: grab;
}

.superfonik-school-testimonial-item {
    width: 280px;
    background-color: #FFF5E5;
    box-shadow: 7px 7px 0px 0px #A4A4A480;
    border: solid 3px #000000;
    border-radius: 20px;
    padding: 34px;
    margin: 15px;

}

.superfonik-school-testimonial-item-content {
    display: flex;
    flex-direction: column;
    min-height: 495px;
}

.superfonik-school-testimonial-star-rating {
    width: 164px;
    height: auto;
}

.superfonik-school-testimonial-item .superfonik-school-testimonial-text {
    text-align: left;
    width: 100%;
    flex: 1;
    margin: 20px 0;
    font-size: 20px;
    line-height: 35px;
}

.superfonik-school-testimonial-author-container {
    display: flex;
    align-items: center;
    gap: 10px;
}

.superfonik-school-testimonial-avatar {
    width: 42px;
    height: 42px;
}

.superfonik-school-testimonial-author {
    font-family: 'CCWhatchamacallit Condensed';
    font-stretch: condensed;
    font-weight: 400;
    font-size: 24px;
    line-height: 30px;
    margin: 0;
}

/* ==========================================================================
   EXPERTS SECTION ("Informed by literacy experts at:")
   ========================================================================== */
.superfonik-school-experts-section {
    text-align: center;
    max-width: 295px;
    margin: auto;
    margin-top: 170px;
}

.superfonik-school-experts-text-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;
}

.superfonik-school-experts-heart {
    width: 48px;
}

.superfonik-school-experts-text {
    font-size: 26px;
    line-height: 35px;
    margin: 0;
}

.superfonik-school-experts-logos {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin-top: 25px;
}

.superfonik-school-expert-logo {
    width: 188px;
}

.superfonik-school-expert-plus {
    font-family: 'SagoMini Rounded Bold';
    font-weight: bold;
    font-size: 26px;
    line-height: 35px;
}


/* ==========================================================================
   FOOTER (copyright strip)
   ========================================================================== */

.superfonik-form-section {
    margin-top: 170px;
}