/*
Theme Name: Homeseek Coming Soon
Theme URI: https://www.homeseek.in
Author: Homeseek Realtors
Author URI: https://www.homeseek.in
Description: A single-page "Launching Soon" theme for Homeseek Realtors. Automatically serves the correctly optimized banner image (mobile, tablet, or desktop) based on the visitor's screen size.
Version: 1.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: homeseek-coming-soon
*/

html, body {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.hs-coming-soon {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100vw;
    height: 100vh;

    /* Default (desktop) backdrop matches the banner's own sky-to-road tones,
       so any letterboxing blends in instead of looking like a hard crop. */
    background: linear-gradient(to bottom, #f7f6f2 0%, #19160f 100%);
}

.hs-coming-soon picture,
.hs-coming-soon img {
    display: block;
    /* Slightly smaller than the full viewport (instead of 100%) so the
       banner has a little breathing room on every screen size and never
       looks cropped-in/zoomed no matter the device's aspect ratio. */
    max-width: 94%;
    max-height: 94%;
    width: auto;
    height: auto;
    object-fit: contain;
    object-position: center;
    margin: 0 auto;
}

/* Tablets get very slightly more room since portrait-ish viewports are
   more prone to feeling zoomed in. */
@media (max-width: 1200px) {
    .hs-coming-soon picture,
    .hs-coming-soon img {
        max-width: 92%;
        max-height: 92%;
    }
}

/* Phones: a touch more margin still, so the image sits comfortably
   inset rather than edge-to-edge. */
@media (max-width: 767px) {
    .hs-coming-soon picture,
    .hs-coming-soon img {
        max-width: 90%;
        max-height: 90%;
    }
}

/* Tablet backdrop */
@media (max-width: 1200px) {
    .hs-coming-soon {
        background: linear-gradient(to bottom, #dbe3f0 0%, #16130d 100%);
    }
}

/* Mobile backdrop */
@media (max-width: 767px) {
    .hs-coming-soon {
        background: linear-gradient(to bottom, #7ea1da 0%, #0d0c07 100%);
    }
}