/* =========================================================
   MTIC HOMEPAGE BACKGROUND
   File: assets/css/pages/_homepage.css

   Uses one fixed homepage background image for the whole
   homepage viewport. Individual homepage sections should stay
   transparent unless their inner card/panel needs white.
   ========================================================= */

.mtic-page--home {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    background-color: #ffffff;
    /* One knob for all homepage section headers on mobile — change this only. */
    --mtic-home-section-heading-size-mobile: clamp(1.2rem, 4.5vw, 1.5rem);
    /* One knob for all homepage View All arrow circles on mobile. */
    --mtic-home-view-all-arrow-size-mobile: 1.75rem;
}

/* Sticky/fixed screen background image layer */
.mtic-page--home::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;

    background-image: url("../../images/home-bg.png");
    background-repeat: no-repeat;
    background-position: center top;
    background-size: cover;
    opacity: 0.35;
}

/* Keep all homepage sections above the fixed background */
.mtic-page--home > section,
.mtic-page--home > div {
    position: relative;
    z-index: 1;
    background-color: transparent;
}

/* Homepage section wrappers should not block the shared background */
.mtic-page--home .mtic-digital-services,
.mtic-page--home .mtic-highlights,
.mtic-page--home .mtic-home-services,
.mtic-page--home .mtic-home-speech,
.mtic-page--home .mtic-home-videos,
.mtic-page--home .mtic-home-social-media {
    background: transparent;
}

/* Remove highlight section's own generated background */
.mtic-page--home .mtic-highlights::before,
.mtic-page--home .mtic-highlights::after {
    display: none;
    content: none;
}

@media (max-width: 768px) {
    .mtic-page--home::before {
        background-position: top center;
        background-size: cover;
    }
}

/* Universal mobile size for teal section headers (excludes search hero). */
@media screen and (max-width: 767px) {
    .mtic-page--home .mtic-home-services__heading,
    .mtic-page--home .mtic-digital-library__title,
    .mtic-page--home .mtic-highlights__heading,
    .mtic-page--home .mtic-home-tenders__title,
    .mtic-page--home .mtic-home-videos__heading,
    .mtic-page--home .mtic-home-social-media__heading,
    .mtic-page--home .mtic-home-speech__heading {
        font-size: var(--mtic-home-section-heading-size-mobile);
    }

    /* Scale Instagram icon with text so the row stays balanced */
    .mtic-page--home .mtic-home-social-media__icon {
        width: 1.25em;
        height: 1.25em;
    }

    /* Smaller View All arrow circles (desktop stays 2.25rem). */
    .mtic-page--home .mtic-home-services__view-all-arrow,
    .mtic-page--home .mtic-digital-library__view-all-arrow,
    .mtic-page--home .mtic-highlights__view-all-arrow,
    .mtic-page--home .mtic-home-tenders__view-all-arrow,
    .mtic-page--home .mtic-home-videos__view-all-arrow {
        width: var(--mtic-home-view-all-arrow-size-mobile);
        height: var(--mtic-home-view-all-arrow-size-mobile);
    }

    .mtic-page--home .mtic-home-services__view-all-arrow svg,
    .mtic-page--home .mtic-digital-library__view-all-arrow svg,
    .mtic-page--home .mtic-highlights__view-all-arrow svg,
    .mtic-page--home .mtic-home-tenders__view-all-arrow svg,
    .mtic-page--home .mtic-home-videos__view-all-arrow svg {
        width: 14px;
        height: 14px;
    }
}