/* ---------------------------------------------------------------------------
   drawsstudio.com static export - layout fixes
   Not a change of design: these undo a CSS collision in the Movedo theme that
   was already breaking the live site.

   theme-style.css : .grve-image-hover img      { max-width: none; width: 100% }
   elements.css    : .grve-image-auto-width img { width: auto }   <- loads later

   Net effect was width:auto + max-width:none, so images rendered at their full
   natural size. Made much worse because this site's WebP "thumbnails" are
   mislabelled - a file named *-1920x1280.webp is really 3000x2000 - so slides
   blew out to 3000px wide inside a 1170px carousel, leaving the tall empty
   bands and clipped images.
   --------------------------------------------------------------------------- */

.grve-slider-element img,
.grve-carousel-wrapper img,
.grve-image-auto-width img,
.grve-media img {
    max-width: 100% !important;
    height: auto !important;
    margin-left: auto;
    margin-right: auto;
}

/* Slides are shown one at a time (Movedo inits owl with items:1), so a slide
   image should fill the slide rather than sit at its natural size. */
.grve-slider .grve-slider-element .grve-slider-item img {
    width: 100% !important;
}

/* Belt and braces: nothing in the page may exceed the viewport. */
img, video, iframe, table, pre {
    max-width: 100%;
}

/* ---------------------------------------------------------------------------
   Mobile: hero heading was being cut off.

   Movedo's "advanced parallax" puts the hero CONTENT inside a position:fixed
   window sized to the background image's aspect ratio. At 425px wide that
   window is only ~285px tall while the wrapped h1 needs ~529px, so the
   headline was clipped mid-word ("...ILLUSTRATIONS &" with "GRAPHICS
   SERVICES" missing entirely) and the next section painted over the rest.

   Below 768px we drop the parallax, let the section grow to fit its content,
   and stretch the background to cover it. Desktop is untouched.
   --------------------------------------------------------------------------- */

@media (max-width: 767px) {
    #grve-feature-section.grve-fullscreen,
    #grve-feature-section.grve-bg-advanced-parallax {
        height: auto !important;
        min-height: 0 !important;
    }

    #grve-feature-section .grve-parallax-wrapper {
        position: relative !important;
        top: auto !important;
        left: auto !important;
        height: auto !important;
        width: 100% !important;
        transform: none !important;
    }

    #grve-feature-section .grve-wrapper {
        height: auto !important;
        min-height: 0 !important;
    }

    #grve-feature-section .grve-content {
        height: auto !important;
        min-height: 0 !important;
        padding-top: 56px !important;
        padding-bottom: 56px !important;
    }

    #grve-feature-section .grve-background-wrapper,
    #grve-feature-section .grve-bg-image,
    #grve-feature-section .grve-pattern,
    #grve-feature-section .grve-bg-overlay {
        height: 100% !important;
        top: 0 !important;
    }

    #grve-feature-section .grve-bg-image {
        background-size: cover !important;
        background-position: center right !important;
    }
}