/* =====================================================================
   MOBILE RESPONSIVE FIXES — Saint Paul Diocesan Jr/Sr High School site
   =====================================================================
   This file ONLY contains @media (max-width: ...) rules.
   It never touches styles above 992px, so desktop/laptop views are
   completely unaffected. Load this AFTER css/style.css.
   ===================================================================== */

/* =====================================================================
   1) TABLET & BELOW (max-width: 991.98px)
   ===================================================================== */
@media (max-width: 991.98px) {

    /* Prevent any fixed-width element from causing horizontal scroll on phones */
    html,
    body {
        overflow-x: hidden;
    }

    img,
    video {
        max-width: 100%;
        height: auto;
    }

    /* ---- Top utility bar (FACTS / Staff Login / Gmail / phone) ---- */
    .top-bar form {
        flex-wrap: wrap;
        justify-content: center !important;
        gap: 6px;
        padding: 8px 0;
    }

    .top-bar .btn-yellow {
        padding: 6px 12px;
        font-size: 12px;
    }

    .top-bar p.text-white {
        font-size: 12px;
        margin: 4px 8px !important;
    }

    /* ---- Logo & navbar ---- */
    a.navbar-brand img {
        width: 170px;
    }

    .navbar-collapse {
        background: #ffffff;
        padding: 15px;
        margin-top: 10px;
        border-radius: 10px;
        box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12);
    }

    /* Only clip/scroll once fully open — applying max-height while
       Bootstrap's .collapsing class is animating "height" makes the
       opening transition get visually capped almost instantly (it
       still animates toward the full, taller scrollHeight), while
       closing (which starts from the already-capped height) looks
       normal. That mismatch is what caused open vs close to feel
       asymmetric. */
    .navbar-collapse.show {
        max-height: 75vh;
        overflow-y: auto;
    }

    ul.navbar-nav {
        margin-top: 0;
        text-align: left;
    }

    ul.navbar-nav a {
        margin-left: 0;
        margin-right: 0;
    }

    .navbar-toggler {
        border: none;
        padding: 4px 8px;
    }

    .navbar-toggler:focus {
        box-shadow: none;
    }

    /* ---- Homepage hero (.main / .main__hero) ---- */
    .main__inner {
        padding: 170px 24px 0;
    }

    .main__hero {
        flex-direction: column;
        text-align: center;
        gap: 30px;
    }

    .main__left {
        max-width: 100%;
    }

    .main__desc {
        max-width: 100%;
        margin-left: auto;
        margin-right: auto;
    }

    .main__accent-bar,
    .main__ctas {
        justify-content: center;
    }

    .main__bullets li {
        text-align: left;
    }

    .main__circle-wrap {
        width: min(340px, 70vw);
        height: min(340px, 70vw);
        margin: 0 auto;
    }

    .main__deco {
        right: -37px;
        bottom: -17px;
    }

    .main__cards {
        grid-template-columns: repeat(2, 1fr);
        gap: 16px;
        margin-top: 28px;
    }

    /* ---- Section padding / heading sizes used across most pages ---- */
    section.about {
        padding: 2rem 0;
    }

    .section-heading h2 {
        font-size: 32px;
    }

    .section-heading h3 {
        font-size: 32px;
    }

    section.choose-wrapper h4 {
        font-size: 28px;
    }

    .choose-container {
        padding: var(--bs-gutter-x, .75rem);
    }

    .course-direction .container.choose-container {
        padding: 40px 25px 30px;
    }

    section.contact {
        padding: 50px 25px;
        background-image: none;
    }

    .banner-content h1 {
        font-size: 38px;
    }

    .course-content h3 {
        font-size: 28px;
    }

    .banner-area-two {
        margin-top: 100px;
    }

    .hero-image img {
        width: 100%;
    }

    .hero-image {
        margin-left: 0;
    }

    /* ---- Grids / lists that don't wrap by default ---- */
    ul.staff li {
        flex: 0 0 calc(33.333% - 15px);
        width: calc(33.333% - 15px);
    }

    .pw-section__highlights {
        grid-template-columns: repeat(2, 1fr);
    }

    .pw-section__mosaic-grid {
        grid-template-rows: 160px 130px 110px;
    }

    /* ---- Fixed-height images/figures ---- */
    .director-staff img {
        height: 260px;
    }

    .assumption-par {
        height: 320px;
    }

    .about-img.st-john {
        height: 360px;
    }

    figure.enroll-fig {
        height: 220px;
    }

    .hof-slider .hof-slide img {
        height: 240px;
    }

    /* ---- Fix: big fixed 100px gap above "We Know Choosing..." section ---- */
    section.choose-wrapper {
        margin-top: 40px;
    }

    /* ---- Fix: scrolling orange badge text getting cut off at screen edge ---- */
    .rfm-marquee-container {
        overflow-x: visible;
    }

    .rfm-marquee {
        min-width: auto;
        width: 100%;
        flex-wrap: wrap;
        justify-content: center;
    }

    .it-text-slider-item {
        text-align: center;
    }

    .it-text-slider-item span {
        white-space: normal;
        max-width: 85%;
    }
}


/* =====================================================================
   2) PHONES & SMALL TABLETS (max-width: 767.98px)
   ===================================================================== */
@media (max-width: 767.98px) {

    .main__inner {
        padding: 200px 18px 0;
    }

    .main__headline {
        font-size: 1.9rem;
        width: 75%;
        margin: 0 auto;
    }

    .main__cards {
        grid-template-columns: 1fr;
    }

    section.choose-wrapper h4,
    .section-heading h2,
    .section-heading h3 {
        font-size: 26px;
    }

    .banner-content h1 {
        font-size: 30px;
    }

    .calendar-header h2 {
        font-size: 1.9rem;
    }

    .calendar-header {
        padding: 25px 0;
    }

    .display-5 {
        font-size: 2.1rem;
    }

    .display-6 {
        font-size: 1.8rem;
    }

    section.plan .section-heading h3 {
        font-size: 26px;
    }

    .plan-box {
        text-align: center;
        margin-bottom: 20px;
    }

    /* ---- Footer ---- */
    .footer-lower {
        text-align: center;
    }

    .newsletter-form {
        flex-wrap: wrap;
        justify-content: center;
    }

    .newsletter-form input {
        flex: 1 1 100%;
        margin-bottom: 10px;
    }

    ul.social-icons {
        justify-content: center;
        display: flex;
        padding-left: 0;
    }

    .footer-lower .img-wrapper {
        justify-content: center;
        display: flex;
    }

    /* ---- Contact / forms ---- */
    .contact-img img {
        width: 100%;
        margin-bottom: 20px;
    }

    .form-wrapper {
        padding: 15px;
    }

    /* ---- Slider / carousel boxes ---- */
    .testimonial-box,
    .choose-box,
    article.press-item {
        padding: 20px;
        height: 100%;
        display: flex;
        flex-direction: column;
    }

    .course-content {
        width: 100%;
        padding-right: 0;
        margin-top: 20px;
        text-align: center;
    }

    .course-image {
        text-align: center;
    }

    /* ---- Grid collapses further ---- */
    ul.staff li {
        flex: 0 0 calc(50% - 15px);
        width: calc(50% - 15px);
    }

    .pw-section__highlights {
        grid-template-columns: 1fr;
    }

    .pw-section__mosaic-grid {
        grid-template-columns: 1fr;
        grid-template-rows: repeat(3, 160px);
    }

    .pw-section__cta-row {
        justify-content: center;
    }

    /* ---- Fixed-height images tighten further ---- */
    .assumption-par {
        height: 260px;
    }

    .about-img.st-john {
        height: 300px;
    }

    .st-img-about,
    .st-img-fig {
        height: 220px;
    }

    .golf-img {
        height: 260px;
    }

    .img-custom .about-img {
        height: 300px;
    }

    figure.badge-logo {
        width: 60px;
    }

    .it-text-slider-item span {
        font-size: 16px;
        margin: 0 15px;
    }

    section.plan .section-heading h3 {
        margin-bottom: 2rem;
    }

    .plan-row:before {
        display: none;
    }

    .plan-row:after {
        display: none;
    }

    section.plan {
        padding: 3rem 0;
    }

    .plan-row {
        margin-bottom: 0;
    }

    .footer-logo h2 {
        font-size: 30px;
    }

    .footer-logo h2 {
        font-size: 30px;
    }

    .btn-wrapper a {
        margin: 0;
        margin-bottom: 1rem;
        width: 100%;
    }

    section.cta {
        margin-bottom: 2rem;
    }

    .section-heading h6 {
        font-size: 16px;
    }

    .testimonial-slider {
        margin-bottom: 0 !important;
    }

    .test-margin {
        margin: 0 !important;
    }

    ul.slick-dots {}

    ul.slick-dots {
        margin: 0;
    }

    section.testimonials {
        padding: 0 0px 3rem;
    }

    .section-heading {
        text-align: center;
    }

    .footer-lower h2 {
        margin: 1rem 0;
    }

    .footer-logo {
        padding-top: 50px;
        padding-bottom: 50px;
    }
}


/* =====================================================================
   3) SMALL PHONES (max-width: 575.98px)
   ===================================================================== */
@media (max-width: 575.98px) {

    .main__inner {
        padding: 220px 14px 0;
    }

    .main__headline {
        font-size: 1.6rem;
    }

    .main__btn {
        padding: 11px 22px;
        font-size: 0.88rem;
    }

    .main__circle-wrap {
        width: min(260px, 80vw);
        height: min(260px, 80vw);
    }

    section.choose-wrapper {
        margin-top: 0;
        margin-bottom: 0;
    }

    .it-text-slider-item span {
        font-size: 14px;
        margin: 0 8px;
        max-width: 92%;
    }

    .section-heading h2,
    .section-heading h3,
    section.choose-wrapper h4 {
        font-size: 22px;
        text-align: center;
    }

    .banner-content h1 {
        font-size: 26px;
    }

    ul.staff li {
        flex: 0 0 45%;
        width: 50%;
    }

    .top-bar .btn-yellow {
        font-size: 11px;
        padding: 5px 10px;
    }

    .top-bar p.text-white {
        display: block;
        width: 100%;
        text-align: center;
        margin: 4px 0 !important;
    }

    a.navbar-brand img {
        width: 140px;
    }

    .hof-slider .hof-slide img {
        height: 200px;
    }

    .choose-upper p {
        font-size: 16px;
        text-align: center;
    }

    .choose-upper {
        margin-bottom: 0;
    }

    .inner-banner {
        padding: 8rem 0 1rem !important;
    }

    .inner-banner h1 {
        font-size: 30px;
    }

    .staff-box img {
        height: 200px;
    }

    .inner-banner ul {
        flex-wrap: wrap;
    }

    .about-img.st-john {
        margin-bottom: 15px;
    }

    .about-img {
        margin-bottom: 1rem;
    }

    .about-margin {
        margin: 0;
    }

    .sec-head-of-school-message-2-the-heart {
        padding-bottom: 0 !important;
    }

    section.identity-section.section-padding.bg-light.sec-head-of-school-message-3 {
        padding-bottom: 1rem !important;
    }

    section.about.sec-catholic-identity-mission-2-foundation-purpose {
        padding: 1.5rem 0;
    }

    section.about.section-padding.bg-light.sec-catholic-identity-mission-3-mission {
        padding: 1rem 0;
    }

    .about-img {
        margin: 0;
    }

    section.about.pt-0.sec-our-story-3-legacy-timeline .section-heading {
        padding-top: 1rem;
    }

    section.sec-our-story-3-legacy-timeline {
        padding-bottom: 1rem;
    }

    .choose-box h6 {
        text-align: center;
    }

    ul.staff {
        justify-content: center;
        gap: 10px;
    }

    .staff-box {
        display: flex;
        flex-wrap: wrap;
        flex-direction: column;
        height: 100%;
        flex: 1;
    }

    .staff-lower {
        flex: 1;
        padding: 10px !important;
    }

    .staff-lower h3 {
        line-break: anywhere;
    }

    section.about.sec-pillars-2 {
        padding: 1rem 0 !important;
    }

    section.about.sec-pillars-2 .about-img {
        margin-bottom: 1rem;
    }

    section.sec-pillars-3 h6 {
        font-size: 22px;
    }

    section.sec-welcome-to-saint-paul-3-important-dates img {
        width: 20%;
        margin: 0 auto;
    }

    section.sec-welcome-to-saint-paul-3-important-dates p {
        text-align: center;
        margin-top: 5px;
    }

    section.sec-welcome-to-saint-paul-3-important-dates h6 {
        margin-top: 1rem;
    }

    section.about.sec-why-saint-paul-3-academic-excellence .section-heading h2 {
        margin-top: 1rem;
    }

    .step {
        flex: 0 0 50%;
    }

    .step-indicator::before {
        display: none;
    }

    .step-indicator {
        overflow-x: hidden;
        flex-wrap: wrap;
    }

    section.sec-tuition-financial-aid-2-childs-future h6 {
        margin-top: 0;
    }

    section.sec-tuition-financial-aid-2-childs-future {
        margin-top: 1rem;
    }

    section.sec-tuition-financial-aid-2-childs-future h3,
    section.sec-tuition-financial-aid-2-childs-future p {
        text-align: center !important;
    }

    section.sec-enrolled-students-3-facts-family-portal .portal-box {
        margin: 0;
    }

    section.academic-course {
        padding: 2rem 0;
    }

    .academic-box h5 {
        margin-top: 1rem;
        font-size: 22px;
        text-align: center;
    }

    .academic-box p {
        margin-bottom: 1rem;
    }

    .tabs-content h3 {
        font-size: 22px;
        text-align: center;
    }

    section.content-tabs {
        padding: 2rem 0;
    }

    .academics-list-wrapper {
        display: block;
    }

    .academic-box {
        margin: 0;
    }

    section.college-board.sec-ap-courses-2 {
        padding: 2rem 0;
    }

    section.about.sec-assumption-partnership-2 p {
        margin-bottom: 1rem !important;
    }

    .about-img.junior {
        margin-bottom: 1rem !important;
    }

    ul.academics-list {
        text-align: left;
    }


    section.about p {
        margin-bottom: 1rem !important;
    }

    .about-img.golf-img {
        width: 100%;
        margin-bottom: 1rem;
    }

    section#tryout-schedule .choose-box {
        margin-bottom: 1rem;
    }

    ul.ul-theme {
        text-align: left;
    }

    section#forms {
        padding-top: 0;
    }


    section.sec-campus-store-3-explore-campus-store img {
        width: 20%;
        margin: 0 auto;
        margin-bottom: 1rem;
    }

    section.sec-campus-store-2-shop-with-us .order-1 h4 {
        margin-top: 0 !important;
    }

    section.sec-campus-store-2-shop-with-us .order-1 .choose-box {
        margin: 0 !important;
    }

    section.sec-campus-store-3-explore-campus-store {
        padding: 1rem 0 !important;
    }

    section.sec-campus-store-2-shop-with-us .row {
        margin-bottom: 0 !important;
    }

    ul.academics-list.half-li {
        display: block;
    }

    .gal-img.inner-about-img {
        width: 100%;
    }

    section.about.sec-arts-at-saint-paul-2-performance-arts .col-md-4 {
        padding-left: calc(var(--bs-gutter-x) * .5);
        padding-right: calc(var(--bs-gutter-x) * .5) !important;
    }

    section.sec-campus-ministry-2-faith-formation .inner-about-img {
        margin-bottom: 1rem;
    }


    section.sec-campus-ministry-3-team .section-heading h2 {
        font-size: 22px;
    }

    section.sec-campus-ministry-3-team .section-heading {
        margin-bottom: 2rem !important;
    }

    section.sec-national-honor-society-2 .st-img-about {
        margin-bottom: 1rem;
    }

    section.about.sec-transcript-request-2-request-your-transcript .about-img {
        margin-top: 1rem;
    }

    section.hall-of-fame-gallery.sec-hall-of-fame-3-gallery {
        padding-top: 1rem;
    }

    section.hall-of-fame-gallery.sec-hall-of-fame-3-gallery ul.slick-dots {
        padding-top: 1rem;
    }

    section.about.sec-hall-of-fame-2-honoring-our-legacy {
        padding-bottom: 0;
    }

    section.sec-contact-update-2-stay-connected .about-img {
        margin-bottom: 1rem;
    }

    .donation-box .d-flex {
        justify-content: center;
    }

    .donation-box>label {
        text-align: center !important;
        display: block;
    }
}