/* ============================================================
   SIKAT_UPDATE58_V1 - the same Hero as the Home page on the Home,
   About Us, Program and Gallery pages: the changing background photos
   (the Hero photos set in Edit Content > Home Page), one fixed size on
   every page so it never changes size when the photo changes, and no
   dark gradient over the photos.
   ============================================================ */
.uh-cover.sik-cover {
    position: relative;
    width: 100%;
    height: 450px;
    min-height: 0;
    background: #1C2B3A url('../assets/images/Cover/Cov2.jpg') center / cover no-repeat;
    display: flex;
    align-items: center;
    overflow: hidden;
    text-align: left;
    box-sizing: border-box;
}
.uh-cover.sik-cover .uh-cover-overlay { display: none !important; background: none !important; }
.uh-cover.sik-cover .uh-cover-bg-layers { position: absolute; inset: 0; z-index: 0; }
.uh-cover.sik-cover .uh-cover-bg-layer {
    position: absolute; inset: 0;
    background-size: cover; background-position: center; background-repeat: no-repeat;
    opacity: 0; transition: opacity 1.5s ease-in-out;
}
.uh-cover.sik-cover .uh-cover-bg-layer--active { opacity: 1; }
.uh-cover.sik-cover .uh-cover-content {
    position: relative; z-index: 2;
    width: 100%; max-width: 640px;
    padding: 0 5%;
    box-sizing: content-box;
}
.uh-cover.sik-cover .uh-cover-badge {
    display: inline-flex; align-items: center; justify-content: center;
    width: fit-content;
    padding: 3px 8px;
    background: #FDC409; color: #000000;
    border-radius: 10px;
    font-family: 'Montserrat', sans-serif; font-weight: 700; font-size: 15px; line-height: 100%;
    letter-spacing: -0.5px; text-transform: none;
    margin: 0 0 20px;
}
.uh-cover.sik-cover .uh-cover-title {
    font-family: 'Montserrat', sans-serif; font-weight: 700;
    font-size: 40px; line-height: 110%; letter-spacing: -1.6px;
    color: #FFFFFF; margin: 0 0 20px; max-width: 640px;
    text-shadow: 0 2px 12px rgba(0, 0, 0, 0.55), 0 1px 3px rgba(0, 0, 0, 0.45);
}
.uh-cover.sik-cover .uh-cover-text {
    font-family: 'Montserrat', sans-serif; font-weight: 500;
    font-size: 14px; line-height: 156%; letter-spacing: -0.3px;
    color: #FFFFFF; max-width: 576px; margin: 0 0 24px;
    text-shadow: 0 1px 8px rgba(0, 0, 0, 0.6), 0 1px 2px rgba(0, 0, 0, 0.5);
}
.uh-cover.sik-cover .uh-cover-text:last-child { margin-bottom: 0; }
.uh-cover.sik-cover .ab-highlight,
.uh-cover.sik-cover .gl-highlight { color: #FDD01E; font-style: normal; }

/* About Us: its three photos now sit under the Hero */
.ab-hero-photos-row { background: #FFFFFF; padding: 48px 5% 0; position: relative; z-index: 2; }
.ab-hero-photos-row .ab-hero-photos { margin: 0 auto; transform: none; max-width: 1400px; }

@media (max-width: 900px) {
    .uh-cover.sik-cover { height: 420px; }
    .uh-cover.sik-cover .uh-cover-title { font-size: 34px; }
    .ab-hero-photos-row { padding: 32px 5% 0; }
}
@media (max-width: 600px) {
    .uh-cover.sik-cover { height: auto; min-height: 440px; }
    .uh-cover.sik-cover .uh-cover-content { padding: 40px 20px; box-sizing: border-box; }
    .uh-cover.sik-cover .uh-cover-title { font-size: 28px; letter-spacing: -1px; }
    .uh-cover.sik-cover .uh-cover-text { font-size: 13px; }
    .ab-hero-photos-row { padding: 24px 20px 0; }
}

/* SIKAT_UPDATE59_V1: About Us - the three photos no longer overlap the Mission
   section, so the big space that made room for them is gone. */
.ab-hero-photos-row + .ab-mv { padding-top: 64px; }
@media (max-width: 900px) { .ab-hero-photos-row + .ab-mv { padding-top: 48px; } }
@media (max-width: 600px) { .ab-hero-photos-row + .ab-mv { padding-top: 36px; } }

/* SIKAT_UPDATE60_V1: the dark fade on the left side of the Hero is back (the
   same as the Home page had), on Home, About Us, Program and Gallery. The
   right side of the photo stays clear. */
.uh-cover.sik-cover::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background: linear-gradient(90deg, rgba(0, 0, 0, 0.85) 0%, rgba(0, 0, 0, 0.55) 35%, rgba(0, 0, 0, 0) 75%);
}
@media (max-width: 600px) {
    /* On phones the text is as wide as the screen, so the fade reaches further. */
    .uh-cover.sik-cover::before {
        background: linear-gradient(90deg, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0.55) 55%, rgba(0, 0, 0, 0.25) 100%);
    }
}