/* ==========================================================================
   Sky Titan Glass — Homepage alignment & section background normalisation
   File: assets/css/sky-align.css
   Loaded AFTER assets/css/style.css so it overrides existing rules.
   Only layout (alignment / width / background) is touched. No markup logic.
   ========================================================================== */

:root {
    --stg-container: 1170px;      /* one single content width for the whole page */
    --stg-gutter: 15px;
    --stg-section-pad: 70px;

    --stg-bg-white: #ffffff;
    --stg-bg-soft: #f7fafd;       /* very light tint for alternating blocks   */
    --stg-bg-blue: #edf5fc;       /* light blue block (Why Choose Us / footer) */
    --stg-border: #e5e7eb;
    --stg-blue: #1d6abf;
}

/* --------------------------------------------------------------------------
   1. ONE CONTAINER WIDTH EVERYWHERE
   The hero used max-width:1380px / padding:0 40px while every other section
   used 1170px / 15px, which is why the hero and the Sky Elite card stuck out
   past the rest of the page (image 1, red marks).
   -------------------------------------------------------------------------- */

.container {
    max-width: var(--stg-container);
    padding-left: var(--stg-gutter);
    padding-right: var(--stg-gutter);
    margin-left: auto;
    margin-right: auto;
    box-sizing: border-box;
}

.banner-grid > .container,
.sky-home-delivery-runs > .container,
.sky-home-latest-news > .container,
.brand-wrapper > .container,
.quality-wraps > .container,
.about-wraps .container,
#nav-2.sky-home-history > .container,
.location-wraps > .container,
.why-wraps > .container,
.contact-wraps > .container,
footer > .container {
    max-width: var(--stg-container) !important;
    padding-left: var(--stg-gutter) !important;
    padding-right: var(--stg-gutter) !important;
    margin-left: auto !important;
    margin-right: auto !important;
    width: 100% !important;
    box-sizing: border-box;
}

/* --------------------------------------------------------------------------
   2. HERO ROW — hero image and Sky Elite card share the same top/bottom edge
   -------------------------------------------------------------------------- */

.banner-grid {
    background-color: var(--stg-bg-white);
    padding: 32px 0 0;
}

.banner-grid > .container {
    display: grid;
    grid-template-columns: minmax(0, 1.3fr) minmax(0, 0.7fr);
    align-items: start;
    gap: 24px;
}

/* Hero column: keep the theme's own flex layout untouched. The only reason
   it ran away before was the ResizeObserver in tpl-home.php, which is now
   removed — so no height overrides are needed or wanted here. */
.banner-grid .banner-box {
    min-width: 0;
}

/* the card carried an inline margin:20px 0 which pushed it out of line */
.banner-grid .sky-elite-access-card {
    margin: 0 !important;
    border-radius: 12px !important;
    border: 1px solid var(--stg-border) !important;
}

/* --------------------------------------------------------------------------
   3. SECTION BACKGROUNDS — consistent rhythm, matching the reference design
   -------------------------------------------------------------------------- */

.sky-home-delivery-runs,
.sky-home-latest-news,
.brand-wrapper,
.location-wraps,
#nav-2.sky-home-history {
    background-color: var(--stg-bg-white) !important;
}

.sky-home-delivery-runs {
    padding: 28px 0 0;
}

.sky-home-latest-news {
    padding: 36px 0 10px;
    margin-top: 0;
}

.brand-wrapper {
    padding: 44px 0 48px;
}

/* About / "Built to move the industry forward" block — soft tint */
.quality-wraps,
.about-wraps {
    background-color: var(--stg-bg-soft) !important;
}

.quality-wraps {
    padding: 60px 0;
}

/* Why Choose Us and the footer share one continuous light-blue band */
.why-wraps {
    background-color: var(--stg-bg-blue) !important;
    padding: 60px 0;
}

footer {
    background: var(--stg-bg-blue) !important;
    padding: 40px 0 0;
}

.contact-wraps {
    background-color: var(--stg-bg-white);
}

/* --------------------------------------------------------------------------
   4. VIDEO BLOCK — was edge-to-edge full bleed (image 1, red marks).
   Now sits inside the same content width as every other section.
   -------------------------------------------------------------------------- */

.video-wraps {
    float: none;
    width: 100%;
    max-width: var(--stg-container);
    margin: 0 auto;
    padding: 0 var(--stg-gutter);
    box-sizing: border-box;
    background: transparent;
}

.video-wraps video {
    display: block;
    width: 100%;
    max-height: 420px;
    object-fit: cover;
    border-radius: 14px;
}

/* --------------------------------------------------------------------------
   5. LOCATIONS — 4-across left an empty hole on the second row (image 2).
   3-across x 2 rows, equal height cards.
   -------------------------------------------------------------------------- */

.location-wraps {
    padding: 56px 0 60px;
}

.location-wraps .common-grid {
    align-items: start;
    gap: 48px;
}

.location-list {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
    margin-top: 28px;
    align-items: stretch;
}

.location-info {
    min-width: 0;
    height: 100%;
    display: flex;
    flex-direction: column;
    padding: 24px;
    border-radius: 16px;
    background-color: var(--stg-bg-blue);
    border: 1px solid #dbe8f6;
    box-shadow: none;
}

/* the photo in the first card made that one card twice as tall as the rest */
.location-info > img {
    display: none;
}

.location-info h3 {
    min-height: 0;
    margin: 0 0 8px;
    font-size: 20px;
}

.location-info p {
    margin: 0 0 8px;
}

.location-info p:last-child {
    margin-bottom: 0;
    margin-top: auto;
}

/* --------------------------------------------------------------------------
   6. WHY CHOOSE US — even columns and equal-height cards
   -------------------------------------------------------------------------- */

.why-wraps > .container {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
    column-gap: 40px;
    row-gap: 28px;
    align-items: start;
}

.why-wraps .column {
    min-width: 0;
}

.why-wraps .column:first-child {
    padding-top: 0;
}

.why-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
    align-items: stretch;
}

.whybox {
    min-width: 0;
    height: 100%;
    padding: 24px;
    border-radius: 16px;
    border: 1px solid #dbe8f6;
    box-shadow: none;
    background-color: var(--stg-bg-white);
}

/* --------------------------------------------------------------------------
   7. FOOTER — same grid alignment as the rest of the page
   -------------------------------------------------------------------------- */

footer .footer-row {
    margin-left: 0;
    margin-right: 0;
    gap: 30px;
}

footer .footer-column {
    min-width: 0;
}

/* --------------------------------------------------------------------------
   8. RESPONSIVE
   -------------------------------------------------------------------------- */

@media (max-width: 1199px) {
    .location-list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 991px) {
    .banner-grid > .container,
    .why-wraps > .container {
        grid-template-columns: minmax(0, 1fr);
    }

    .location-wraps .common-grid {
        grid-template-columns: minmax(0, 1fr);
        gap: 20px;
    }

}

@media (max-width: 767px) {
    .location-list,
    .why-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .quality-wraps,
    .why-wraps,
    .location-wraps {
        padding: 40px 0;
    }

    .video-wraps video {
        max-height: 240px;
    }
}

/* --------------------------------------------------------------------------
   9. PAGE SHELL — nothing paints past 1300px
   The coloured sections keep their own background, but the section box
   itself is capped at 1300px and centred, so the area outside that shell
   is always the white page background, on any monitor width.
   -------------------------------------------------------------------------- */

:root {
    --stg-shell: 1300px;
}

html,
body {
    background: #ffffff !important;
}

.banner-grid,
.sky-home-delivery-runs,
.sky-home-latest-news,
.brand-wrapper,
.aside-inline-img,
.intro-wraps,
.quality-wraps,
.about-wraps,
.about-wraps .mission-wraps,
#nav-2.sky-home-history,
.video-wraps,
.location-wraps,
.why-wraps,
.contact-wraps,
.review-wraps,
footer {
    max-width: var(--stg-shell) !important;
    width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    box-sizing: border-box;
    float: none;
}

/* the copyright strip sits inside <footer>, so it is capped with it */
footer .copyright-block {
    max-width: none;
    width: 100%;
}

/* coloured blocks keep their colour — it just stops at the shell edge */
.intro-wraps {
    background-color: var(--stg-bg-blue) !important;
    padding: 48px 0 !important;
}

.about-wraps {
    background-color: #ffffff !important;
    padding: 0 !important;
}

.about-wraps .mission-wraps {
    background-color: var(--stg-blue) !important;
    padding: 56px 0 !important;
}

.why-wraps {
    background-color: var(--stg-bg-blue) !important;
}

.quality-wraps {
    background-color: #ffffff !important;
}

footer {
    background: var(--stg-bg-blue) !important;
}

/* the video panel already sits at content width, keep it inside the shell */
.video-wraps {
    max-width: var(--stg-container) !important;
}

/* --------------------------------------------------------------------------
   10. SHELL CATCH-ALL
   The homepage sections are direct children of <body>, so cap every one of
   them regardless of class name. Anything added later is covered too.
   -------------------------------------------------------------------------- */

body > section,
body > footer,
body > div[class*="wraps"],
body > div[class*="wrapper"],
body > div.video-wraps,
body > article,
body > main > section,
body > main > footer,
body > main > div[class*="wraps"] {
    max-width: var(--stg-shell) !important;
    width: auto !important;
    margin-left: auto !important;
    margin-right: auto !important;
    float: none !important;
    box-sizing: border-box !important;
}

/* nested colour bands inherit the cap from their parent section, but pin
   them anyway in case the parent is ever unwrapped */
.about-wraps .mission-wraps,
.history-wrapper,
.review-wraps,
.contact-wraps {
    max-width: 100% !important;
}

/* --------------------------------------------------------------------------
   11. VIDEO PANEL — must win over the shell catch-all above
   Section 10 caps every body-level block at 1300px, which also caught
   .video-wraps and made it wider than every other section. Re-pin it to the
   content width here, after that rule.
   -------------------------------------------------------------------------- */

body > .video-wraps,
.video-wraps {
    max-width: var(--stg-container) !important;
    width: 100% !important;
    padding-left: var(--stg-gutter) !important;
    padding-right: var(--stg-gutter) !important;
    margin-left: auto !important;
    margin-right: auto !important;
    box-sizing: border-box !important;
}

/* --------------------------------------------------------------------------
   12. VIDEO — pin the <video> itself to the exact content box
   Every other section's visible content sits inside .container, i.e.
   1170px minus the 15px gutters = 1140px. Rather than relying on the
   wrapper's padding resolving the same way, the video element is given
   that width directly, so the two edges can't drift.
   -------------------------------------------------------------------------- */

.video-wraps {
    max-width: none !important;
    width: 100% !important;
    padding: 0 !important;
    margin: 0 auto !important;
}

.video-wraps video,
body > .video-wraps video {
    display: block !important;
    width: calc(var(--stg-container) - (var(--stg-gutter) * 2)) !important;
    max-width: calc(100% - (var(--stg-gutter) * 2)) !important;
    margin-left: auto !important;
    margin-right: auto !important;
    max-height: 420px;
    object-fit: cover;
    border-radius: 14px;
    box-sizing: border-box !important;
}

/* --------------------------------------------------------------------------
   13. HERO ROW — hero and Sky Elite card share top AND bottom edges
   Desktop / tablet only. Pure CSS: the row is a grid that stretches both
   columns to the taller one, and each column fills its cell with flex.
   No percentage heights and no JS measuring, so there is nothing that can
   feed back into itself (that loop is what grew the hero without end).

   Both boxes also carried a 20px top/bottom margin (hero: tpl-home.php
   inline <style>; card: inline style attribute) — those are what pushed the
   hero's top edge below the card's. Zeroed here.
   -------------------------------------------------------------------------- */

@media (min-width: 768px) {
    .banner-grid > .container {
        align-items: stretch !important;
    }

    .banner-grid .banner-box {
        display: flex !important;
        flex-direction: column !important;
        margin-top: 0 !important;
        margin-bottom: 0 !important;
    }

    /* left: hero fills its column, whatever height the row settles at */
    .banner-grid .banner-box:first-child .find-box {
        flex: 1 1 auto !important;
        height: auto !important;
        min-height: 0 !important;
        margin-top: 0 !important;
        margin-bottom: 0 !important;
    }

    /* right: card fills its column, with slightly tighter padding so the
       row (and so the hero) ends up a little shorter */
    .banner-grid .sky-elite-access-card {
        flex: 1 1 auto !important;
        margin: 0 !important;
        padding: 24px 26px !important;
        box-sizing: border-box !important;
    }
}