/*
 * Mobile layout corrections — phones only.
 *
 * Everything lives inside one max-width:767.98px block, so desktop and tablet
 * rendering is byte-for-byte unchanged. Values come from measuring the live
 * pages at a 375px viewport.
 */

@media (max-width: 767.98px) {

    /* ---- Card grids: two per row instead of one ----------------------
     * col-sm-6 only applies from 576px up, so on a 375px phone these tiles
     * each took the full 345px width and stacked one per screenful.
     */
    .col-sm-6.col-md-3,
    .col-lg-3.col-md-6.col-sm-6,
    .col-md-3.col-sm-6 {
        flex: 0 0 50%;
        max-width: 50%;
        padding-left: 8px;
        padding-right: 8px;
    }

    /* The tighter column needs tighter contents, or text overflows the card. */
    .col-sm-6.col-md-3 .card-course-title,
    .col-lg-3.col-md-6.col-sm-6 .card-course-title,
    .col-sm-6.col-md-3 .card-title,
    .col-lg-3.col-md-6.col-sm-6 .card-title {
        font-size: 13px;
        line-height: 1.35;
    }

    .col-sm-6.col-md-3 .image-box,
    .col-lg-3.col-md-6.col-sm-6 .image-box {
        height: 110px;
    }

    .col-sm-6.col-md-3 .image-box img,
    .col-lg-3.col-md-6.col-sm-6 .image-box img {
        height: 100%;
        object-fit: cover;
    }

    /* ---- Stat cards (50+ Instructors, 10K+ Students, ...) -------------
     * The card body is a horizontal flex row built for a 278px desktop column.
     * In the 157px mobile card the icon ate the width and the label was left
     * with 76px, so "Live Classes" and "Video Courses" broke across two lines
     * and the cards came out ragged and different heights.
     * Stack them instead: icon on top, figure, then label - centred.
     */
    .stat-card-animated .card-body {
        flex-direction: column;
        text-align: center;
        padding: 16px 10px !important;
    }

    .stat-card-animated .card-body > :first-child {
        margin-bottom: 10px;
    }

    .stat-card-animated .card-body .ml-3 {
        margin-left: 0 !important;
        width: 100%;
        text-align: center !important;
    }

    .stat-card-animated .counter-value {
        font-size: 22px !important;
        line-height: 1.1;
    }

    .stat-card-animated .card-body p,
    .stat-card-animated .card-body span {
        font-size: 12px !important;
        line-height: 1.3;
        white-space: nowrap;
    }

    /* 30px between every tile is desktop rhythm; it strands the cards. */
    .col-sm-6.col-md-3,
    .col-lg-3.col-md-6.col-sm-6,
    .col-md-3.col-sm-6 {
        margin-bottom: 14px !important;
    }

    /* ---- Decorative imagery -------------------------------------------
     * Measured 345x439 and 345x320 - each one ate a whole screenful.
     */
    .about-img-wrapper img,
    .about-hero-img {
        /* about-hero-img carries its own max-height:320px from app.css, so this
           needs the same weight to win. */
        max-height: 160px !important;
        width: auto;
        margin-left: auto;
        margin-right: auto;
        display: block;
        object-fit: contain;
    }

    /* Course card artwork in the sliders measured 239px tall per card - most of
       a card before any text. */
    .swiper-slide .image-box {
        height: 165px !important;
    }

    .swiper-slide .image-box img {
        height: 100% !important;
        object-fit: cover;
    }

    /* Featured course cards measured 633px tall with a 239px image - one card
       filled the screen. */
    .featured-premium-img {
        height: 160px !important;
    }

    .featured-premium-img img {
        height: 100% !important;
        object-fit: cover;
    }

    .featured-premium-card {
        padding-bottom: 4px;
    }

    .featured-premium-card .card-course-title,
    .featured-premium-card h3,
    .featured-premium-card h4 {
        font-size: 15px !important;
        line-height: 1.35 !important;
    }

    /* ---- Typography: desktop sizes were being served to phones --------
     * Measured at 375px: hero h1 30px, counters 28px, section headings 24-28px.
     */
    .slider-container h1,
    .slider-hero-section2 h1 {
        font-size: 22px !important;
        line-height: 1.3 !important;
    }

    .slider-container p,
    .slider-hero-section2 p {
        font-size: 14px !important;
        line-height: 1.55 !important;
    }

    .counter-value {
        font-size: 20px !important;
    }

    .about-premium-heading {
        font-size: 19px !important;
        line-height: 1.35 !important;
    }

    .home-video-title {
        font-size: 18px !important;
        line-height: 1.35 !important;
    }

    .section-title {
        font-size: 18px !important;
    }

    .app-download-text h2 {
        font-size: 20px !important;
    }

    .app-download-text p {
        font-size: 13px !important;
    }

    /* ---- Hero banner --------------------------------------------------
     * Measured at 375px: the banner was 398px tall and 160px of that was
     * padding alone (60 top, 100 bottom), leaving a 100px empty strip under the
     * button. The gaps between headline, paragraph and button were desktop-sized
     * too. Tightened so the banner reads as a compact mobile header and the
     * content below starts within the first screenful.
     */
    .slider-container,
    .slider-hero-section2 {
        padding-top: 26px !important;
        padding-bottom: 30px !important;
    }

    .slider-container h1,
    .slider-hero-section2 h1 {
        font-size: 21px !important;
        margin-bottom: 0 !important;
    }

    .slider-container p,
    .slider-hero-section2 p {
        margin-top: 12px !important;
        font-size: 13.5px !important;
    }

    .slider-container .btn,
    .slider-hero-section2 .btn {
        margin-top: 18px !important;
        padding: 11px 20px !important;
        font-size: 13px !important;
    }

    /* ---- Vertical rhythm ---------------------------------------------
     * Section gaps were 60-80px, tuned for a desktop viewport. On a phone they
     * pushed the page to ~9450px and read as dead space between blocks.
     */
    .home-sections {
        margin-top: 28px !important;
    }

    .app-download-section {
        padding-top: 32px !important;
        padding-bottom: 32px !important;
    }

    .about-premium-section {
        padding-top: 28px !important;
        padding-bottom: 28px !important;
    }

    /* Store buttons sat side by side and overflowed; stack them full width. */
    .app-store-buttons {
        flex-direction: column;
        gap: 10px !important;
    }

    .app-store-buttons a {
        justify-content: center;
    }

    /* ---- Dead vertical space -------------------------------------------
     * Measured at 375px with nothing overlapping into any of these on
     * mobile: the footer carried a 205px top margin, the video block 94px
     * of padding on each side, and each testimonial slide a 105px top
     * margin. Together that was roughly 400px of blank screen.
     */
    .footer {
        margin-top: 32px !important;
    }

    .home-video-container {
        padding-top: 28px !important;
        padding-bottom: 28px !important;
    }

    .home-video-container .mt-50 {
        margin-top: 18px !important;
    }

    .testimonials-card {
        margin-top: 40px !important;
    }

    /* ---- Course cards ---------------------------------------------------
     * Measured at 360px: one card ran 559px tall, so a single course filled
     * most of the phone screen. Each saving below is either a row that was
     * stacked for no reason on mobile, or space held open for content that
     * is not there.
     */

    /* premium-cards.css forces object-fit:contain under 767px, so a 640x480
       thumbnail sat letterboxed inside a 304x165 box against its #f2f2f4
       background - those are the grey bars down both sides of the artwork. */
    .webinar-card .image-box img.img-cover,
    .swiper-slide .image-box img {
        object-fit: cover !important;
    }

    /* A course with no rating still rendered an empty .stars-card: 20px tall
       plus a 14px margin, which is the blank band under the course title. */
    .stars-card:not(:has(*)) {
        display: none !important;
    }

    /* Duration and start date were stacked - 113px. Side by side they cost
       about 50px and the card reads like a card instead of a list. */
    .card-meta-row {
        flex-direction: row !important;
        align-items: center !important;
        gap: 8px !important;
        padding-top: 10px !important;
        padding-bottom: 10px !important;
        margin-bottom: 12px !important;
    }

    .card-meta-row .card-meta-item {
        flex: 1 1 0;
        min-width: 0;
        gap: 6px !important;
        align-items: center !important;
    }

    .card-meta-row .card-meta-label {
        font-size: 9px !important;
        letter-spacing: 0.4px;
    }

    .card-meta-row .card-meta-value {
        font-size: 12px !important;
    }

    .card-meta-divider {
        width: 1px !important;
        height: 26px !important;
        flex: 0 0 1px;
        align-self: center;
    }

    /* Price sat on its own line above a full-width button - 89px for two
       items that fit on one line in 44px. */
    .card-price-row {
        flex-direction: row !important;
        align-items: center !important;
        gap: 10px !important;
    }

    .card-price-row .card-enroll-btn {
        width: auto !important;
        flex: 0 0 auto;
        padding: 10px 14px !important;
        white-space: nowrap;
    }

    .card-instructor {
        padding-bottom: 10px !important;
        margin-bottom: 10px !important;
    }

    .card-instructor-avatar {
        width: 36px !important;
        height: 36px !important;
        flex: 0 0 36px;
    }

    /* "View All" wrapped onto two lines because it could shrink inside the
       flex header next to a two-line section title. */
    .d-flex.justify-content-between > .btn.btn-border-white {
        white-space: nowrap;
        flex-shrink: 0;
        height: 36px;
        padding: 0 14px;
        font-size: 13px;
        align-self: flex-start;
    }

    /* ---- "Ancient Wisdom" feature tiles ---------------------------------
     * Measured 244 / 225 / 244 / 223 - the tiles in a row ended at different
     * heights because the card never filled its column. Stretching it fixes
     * the ragged bottoms; the rest is 28px padding around a 64px icon.
     */
    .about-feature-card {
        height: 100%;
        padding-top: 18px !important;
        padding-bottom: 18px !important;
    }

    .about-feature-icon {
        width: 48px !important;
        height: 48px !important;
        margin-bottom: 10px !important;
    }

    .about-feature-icon svg {
        width: 26px;
        height: 26px;
    }

    /* ---- "Why Choose Us" ------------------------------------------------
     * The decorative-art cap above also caught this section's photograph,
     * which is real content, not ornament: a 512x651 portrait rendered at
     * 126x160 with object-fit:contain, floating centred in a 330px column
     * while every line of text beside it was flush left. Measured left
     * edges were image 15px but text 15px with the image only 126px wide -
     * two different column widths reading as a broken layout.
     *
     * On mobile it becomes a full-bleed banner on the same 15px gutter as
     * the heading, paragraph and cards. object-position keeps the faces in
     * frame when the portrait is cropped to a landscape box.
     */
    .why-choose-section .about-img-wrapper {
        width: 100%;
    }

    .why-choose-section .about-img-wrapper img {
        width: 100% !important;
        max-width: 100% !important;
        height: 200px !important;
        max-height: 200px !important;
        object-fit: cover !important;
        object-position: 50% 28%;
        border-radius: 16px;
        display: block;
        margin: 0 !important;
    }

    .why-choose-section > .row > .col-md-5 {
        margin-bottom: 18px;
    }

    .why-choose-section > .row > .col-md-6 {
        margin-top: 0 !important;
    }

    /* Each benefit card carried a 28px top margin from the desktop grid. */
    .why-choose-section .row .row > [class*="col-"] {
        margin-top: 18px !important;
    }

    /* ---- One gutter for the whole page ----------------------------------
     * Measured at 360px the home page ran three competing gutters, which is
     * what reads as a ragged left edge while scrolling:
     *   Newest / Best Rated  title at 15px, cards at 27px (swiper .px-12)
     *   Featured             title at 20px (.px-1), cards at 15px, 320 wide
     *   everything else      15px
     * Both carousels now start their cards on the same 15px line as the
     * section title, at the same width as the benefit cards and the Why
     * Choose Us banner. Swiper sizes slides from the container's content
     * box at init, and this stylesheet loads in <head>, so the slides come
     * out 330px wide rather than needing an update() afterwards.
     */
    section.home-sections > .px-1 {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    .swiper-container.latest-webinars-swiper,
    .swiper-container.features-swiper-container,
    .swiper-container.testimonials-swiper {
        /* .swiper-container carries margin-left/right:auto from
           swiper-bundle.css. With the Featured carousel's narrower used
           width that resolved to 19px a side, so zeroing its padding alone
           still left the container at 292px starting at 34px. Pin width and
           both margins as well. */
        width: 100% !important;
        max-width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    /* ---- Home video block ------------------------------------------------
     * background-size:contain with background-position:0% 0% anchored the
     * still to the top left and letterboxed it, so the photo covered about
     * 240px of the 360px block and left a white strip down the right side.
     * The block also bled the full width while every other block sits on a
     * 15px gutter, and the caption was #343434 text over the photograph.
     */
    .home-video-container {
        width: auto !important;
        max-width: none !important;
        margin-left: 15px !important;
        margin-right: 15px !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        background-size: cover !important;
        background-position: center center !important;
        border-radius: 16px;
        min-height: 200px;
        overflow: hidden;
    }

    .home-video-container .home-video-title {
        color: #fff !important;
        font-size: 16px !important;
        line-height: 1.35;
        padding: 0 14px;
        text-shadow: 0 1px 6px rgba(0, 0, 0, 0.65);
    }

    /* home.blade.php has an inline `.features-swiper-container .swiper-slide
       { max-width: 320px }`, so Featured cards came out 320px against the
       other carousels' 330px - a 10px step in the right-hand edge between
       one section and the next. */
    .features-swiper-container .swiper-slide {
        max-width: 100% !important;
    }
}