/* ==========================================================================
   BOSSMAN home hero — "Beyond The Skyline"
   --------------------------------------------------------------------------
   Pixel-matched to the approved 1600x900 reference design.

   Desktop (992px+): the background artwork and every text size/offset are
   expressed in vw, taken directly from the reference (1600px wide), so the
   banner keeps the reference proportions at every screen width:
       1vw = 16px of the reference.

   Tablet / mobile (991px and below): text stacks on top, a dedicated crop of
   the same artwork (towers + wireframe) sits underneath.

   Loaded after responsive.css. Everything is scoped to .hero-skyline so the
   theme's shared .hero-section / .section-title rules on other pages are
   untouched. No clamp() is used.

   Assets:
     upload/home/bossman-hero-bg.webp          1920x1080 (16:9, desktop)
     upload/home/bossman-hero-bg-mobile.webp    880x900  (tablet / mobile)
   ========================================================================== */

.hero-section.hero-skyline {
    background-color: #ffffff;
}


/* Background layer (re-uses the theme's absolutely positioned .bg-shape). */

.hero-section.hero-skyline .hero-skyline-bg {
    background-color: #ffffff;
    background-image: url("../../upload/home/bossman-hero-bg.webp?v=3");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: right center;
    pointer-events: none;
}

.hero-section.hero-skyline .hero-content {
    position: relative;
    z-index: 2;
}


/* Letter tails (g, p, y) must never be cut on any browser/OS.
   hero-rotator.css clips the rotator with overflow:hidden for the word-swap
   animation; here the clip area is widened with clip-path so tails get an
   extra ~0.45em below the box (and a little room on the other sides),
   while the box itself keeps its layout size. */

.hero-section.hero-skyline .word-rotator {
    overflow: visible;
    -webkit-clip-path: inset(-0.15em -0.3em -0.45em -0.3em);
    clip-path: inset(-0.15em -0.3em -0.45em -0.3em);
}


/* Reference shows a crisp red phrase, no glow. */

.hero-section.hero-skyline .word-rotator-item,
.hero-section.hero-skyline .word-rotator-item.is-active,
.hero-section.hero-skyline .word-rotator-item.is-leaving {
    text-shadow: none;
}


/* ==========================================================================
   DESKTOP & LAPTOP (992px+) — reference proportions
   ========================================================================== */

@media only screen and (min-width: 992px) {

    /* 900 / 1600 = 56.25vw: same 16:9 frame as the reference, so the whole
       composition (white header band, tower top, plaza) is always visible. */
    .hero-section.hero-skyline {
        min-height: 56.25vw;
        padding-top: 9vw;
        /* label top: 160px of 1600 */
        padding-bottom: 3vw;
    }

    .hero-section.hero-skyline .hero-wrap {
        padding-top: 0;
    }

    /* Text column: wide enough for "Engineering For" on one line. */
    .hero-section.hero-skyline .hero-wrap>.col-lg-6 {
        width: 62%;
    }

    /* --- label pill: "BEYOND THE SKYLINE" (x 30-280, y 160-206) --- */
    .hero-section.hero-skyline .section-heading .sub-heading {
        font-size: 12px;
        line-height: 1.2;
        letter-spacing: 0;
        padding: 0.63vw 1.3vw 0.63vw 2.5vw;
        margin-bottom: 1.04vw;
        left: -0.94vw;
        /* pill sits 15px left of the heading */
        background-color: rgba(255, 255, 255, 0.8);
        border: 1px solid rgba(25, 25, 25, 0.16);
    }

    .hero-section.hero-skyline .section-heading .sub-heading:before {
        width: 0.72vw;
        height: 0.72vw;
        left: 1.25vw;
    }

    /* --- heading: "Engineering For" spans 53.3vw, red phrase on 2 lines --- */
    .hero-section.hero-skyline .hero-wrap .hero-content .section-heading .section-title {
        font-size: 85px;
        line-height: 0.89;
        /* between "Engineering For" (53.3vw) and "Facade Solutions" (58.7vw):
           line 1 stays on one line, the red phrase breaks into two lines
           exactly like the reference. */
        width: 46vw;
        max-width: none;
        margin-bottom: 0;

    }

    /* The rotator clips its words (overflow:hidden) for the swap effect.
       Two lines at line-height .89 = 1.78em, but the tails of g / p / y
       hang ~.25em lower, so the clip box is 2.04em tall and the extra
       height is handed back with a negative margin: letters are never cut
       and the paragraph stays exactly where it was. */
    .hero-section.hero-skyline .word-rotator {
        margin-top: 0.3vw;
        min-height: 2.04em;
        margin-bottom: 0;
    }

    /* --- paragraph (x 45-600, 3 lines, 32px line pitch) --- */
    .hero-section.hero-skyline .hero-wrap .hero-content.hero-content-4 .section-heading p {
        font-size: 1.35vw;
        line-height: 1.48;
        font-weight: 400;
        color: #222222;
        max-width: 36vw;
        margin-top: 0;
        margin-bottom: 2.3vw;
    }
}


/* Container is fluid below 1820px; give the text the reference's 2.8vw
   left inset (45px of 1600) instead of the bare 12px gutter. */

@media only screen and (min-width: 992px) and (max-width: 1819px) {
    .hero-section.hero-skyline .hero-content {
        padding-left: calc(2.8vw - 12px);
    }
}


/* ==========================================================================
   TABLET & MOBILE (991px and below)
   Text on top, building underneath (never behind the text).
   ========================================================================== */

@media only screen and (max-width: 991px) {
    .hero-section.hero-skyline {
        min-height: 0;
        padding-bottom: 585px;
        /* 640px image minus its white top fade */
    }

    .hero-section.hero-skyline .hero-skyline-bg {
        background-image: url("../../upload/home/bossman-hero-bg-mobile.webp?v=3");
        background-size: auto 640px;
        background-position: right bottom;
    }

    .hero-section.hero-skyline .hero-content {
        margin-bottom: 0;
    }

    .hero-section.hero-skyline .hero-wrap .hero-content .section-heading .section-title {
        font-size: 9vw;
        line-height: 0.92;
        /* "Engineering For" (62vw) fits, "Facade Solutions" (68vw) breaks:
           every red phrase is 2 lines, so the rotator never leaves a gap. */
        width: 65vw;
        max-width: 100%;
    }

    .hero-section.hero-skyline .hero-wrap .hero-content.hero-content-4 .section-heading p {
        margin-top: 18px;
    }

    /* same descender-safe clip box as desktop (line-height .92 here) */
    .hero-section.hero-skyline .word-rotator {
        margin-top: 4px;
        min-height: 2.22em;
        margin-bottom: -0.32em;
    }
}


/* Tablet: clear the header (logo + Get A Quote) before the label pill. */

@media only screen and (min-width: 768px) and (max-width: 991px) {
    .hero-section.hero-skyline .hero-wrap {
        padding-top: 130px;
    }
}

@media only screen and (max-width: 767px) {
    .hero-section.hero-skyline {
        /* image is 880x900 (1.023 x width); its top ~9% fades to white */
        padding-bottom: 94vw;
    }

    .hero-section.hero-skyline .hero-skyline-bg {
        background-size: 100% auto;
        background-position: center bottom;
    }

    .hero-section.hero-skyline .hero-wrap .hero-content .section-heading .section-title {
        font-size: 12vw;
        width: 87vw;
        /* 83vw line 1 fits, 91vw red phrase breaks */
    }

    .hero-section.hero-skyline .hero-wrap .hero-content.hero-content-4 .section-heading p {
        margin-bottom: 32px;
    }
}