/* =============================================================
   MOBILE & TABLET LAYOUT POLISH (index.php)
   ============================================================= */

/* Global Overrides (All Screen Sizes) */
#dj-hacker .hacker-card {
    text-align: left !important;
}

@media screen and (max-width: 39.9375em) {

    /* Hero Section */
    #hero {
        padding-top: 1rem !important;
        /* Reduce large top padding on mobile */
        padding-bottom: 2rem !important;
    }

    #hero h1 {
        font-size: 2.25rem !important;
        /* Slightly smaller h1 to fit better */
        line-height: 1.1 !important;
        margin-bottom: 0.5rem !important;
    }

    #hero .larger_text2 {
        font-size: 1.1rem !important;
        /* Scale down subtitle slightly */
        line-height: 1.4 !important;
        margin-top: 0.5rem !important;
        margin-bottom: 2rem !important;
    }

    /* Buttons */
    #hero .more_space_top {
        display: flex;
        flex-direction: column;
        gap: 0.75rem;
        margin-top: 1rem !important;
    }

    #hero .more_space_top .btn {
        width: 100%;
        /* Full width buttons on mobile */
        margin: 0 !important;
        justify-content: center;
    }

    /* 3D Logo Image */
    #hero img[src="img/djs-logo.png"] {
        max-width: 75% !important;
        /* Scale down hero image so it doesn't dominate */
        margin: 2rem auto !important;
        display: block;
    }

    /* Logo Marquee */
    .logo-marquee-wrap {
        padding: 1rem 0 !important;
    }

    .logo-item img {
        height: 50px !important;
        /* Reduce logo height */
        width: auto !important;
    }

    .logo-marquee-kicker {
        margin-top: 0.5rem !important;
    }

    /* What We Build Cards */
    #solutions {
        padding-top: 3.5rem !important;
        padding-bottom: 3.5rem !important;
    }

    #solutions h2 {
        font-size: 1.85rem !important;
        line-height: 1.2 !important;
    }

    .service-col {
        margin-bottom: 1.5rem;
    }

    .service-card {
        padding: 1.75rem !important;
        border-radius: var(--radius-lg) !important;
    }

    .service-card h3 {
        font-size: 1.35rem !important;
        margin-top: 0.5rem !important;
        margin-bottom: 0.75rem !important;
    }

    .service-card p {
        font-size: 1.05rem !important;
        line-height: 1.5 !important;
    }

    /* Featured Case Study */
    #featured-case {
        padding-top: 2rem !important;
        padding-bottom: 4rem !important;
    }

    #featured-case h2 {
        font-size: 1.85rem !important;
        line-height: 1.2 !important;
    }

    /* Case Study Specific Overrides */
    #featured-case article.card h3 {
        font-size: 1.5rem !important;
        line-height: 1.25 !important;
    }

    #featured-case article.card p {
        font-size: 1.1rem !important;
        line-height: 1.5 !important;
    }

    /* Video/Image blocks inside Case Study */
    #featured-case .project-screenshot {
        height: auto !important;
        aspect-ratio: 16 / 10 !important;
        /* Enforce uniform height based on grid width */
        border-radius: 6px !important;
        overflow: hidden !important;
    }

    #featured-case .project-screenshot img {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
        object-position: top center !important;
    }

    #featured-case figure .project-screenshot {
        height: auto !important;
        width: 100% !important;
        min-height: 200px !important;
        /* Provide a reasonable minimum */
        aspect-ratio: 16/9 !important;
        /* Force a 16:9 box */
        border-radius: 8px !important;
        overflow: hidden !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    #featured-case figure .project-screenshot video {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
        /* Or contain if preferred, cover fills the 16:9 box perfectly */
        border-radius: 8px !important;
    }

    /* Footer Layout Fixes */
    .site-footer .footer-cta {
        padding-left: 1.5rem !important;
        padding-right: 1.5rem !important;
    }

    .site-footer .footer-main .cell {
        margin-bottom: 2rem;
        text-align: center;
        /* Center everything on mobile */
    }

    .site-footer .footer-main {
        padding-bottom: 3rem !important;
        /* Extra padding before the copyright line */
    }

    .site-footer .footer-main .cell:last-child {
        margin-bottom: 1rem;
    }

    .site-footer .footer-main img[src="/img/djs-logo.png"] {
        margin: 0 auto 1rem !important;
        /* Center the logo */
        display: block;
    }

    .site-footer .footer-main .footer-links {
        margin: 0;
        padding: 0;
        width: 100%;
        margin-bottom: 2rem;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 1.25rem;
    }

    .site-footer .footer-main .footer-links a {
        display: block;
        text-align: center;
        text-transform: uppercase;
        letter-spacing: 0.1em;
        font-size: 0.85rem;
        font-weight: 600;
        padding: 0.25rem 1rem;
    }

    .site-footer .footer-bottom .grid-x {
        justify-content: center;
        text-align: center;
    }

    .site-footer .footer-bottom .cell {
        width: 100% !important;
        flex: 0 0 100% !important;
        text-align: center !important;
        margin-bottom: 1rem;
    }

    .site-footer .footer-bottom .cell.text-right {
        text-align: center !important;
    }

    .site-footer .footer-bottom .back-to-top {
        display: inline-block;
        transform: translateX(-0.55rem);
        /* Shift left to center the "T" and offset the arrow icon width */
    }

    .site-footer .btn-future {
        margin-left: auto !important;
        margin-right: auto !important;
    }

    /* DJ's Labs Modal - Ensure it steps out from under the sticky header */
    #djslabs-modal-container {
        margin-top: 100px !important;
        /* Push below sticky header */
        max-height: calc(100vh - 120px) !important;
    }
}

@media screen and (min-width: 40em) and (max-width: 63.9375em) {

    /* Tablet adjustments */
    #hero h1 {
        font-size: 2.75rem !important;
    }

    #hero img[src="img/djs-logo.png"] {
        max-width: 80% !important;
        margin: 0 auto !important;
        display: block;
    }

    #hero .more_space_top {
        display: flex;
        flex-wrap: wrap;
        gap: 1rem;
    }

    .logo-item img {
        height: 60px !important;
        width: auto !important;
    }

    /* Footer Tablet Adjustments */
    .site-footer .footer-main .cell {
        margin-bottom: 2rem;
    }

    .site-footer .btn-future {
        margin-bottom: 1.5rem !important;
        display: flex;
        width: 100%;
        max-width: 300px;
        margin-left: auto !important;
        margin-right: auto !important;
    }

    #dj-hacker .hacker-toggle {
        display: flex;
        width: 100%;
        max-width: 300px;
        margin-bottom: 0;
        margin-left: auto !important;
        margin-right: auto !important;
    }
}