/* =====================================================================
   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);
        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: 4px;
        bottom: 4px;
    }

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

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

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

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

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

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

    .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: 150px 18px 0;
    }

    .main__headline {
        font-size: 1.9rem;
    }

    .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;
    }

    .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;
    }
}


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

    .main__inner {
        padding: 135px 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: 25px;
    }

    .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;
    }

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

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

    .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;
    }
}