/*
|--------------------------------------------------------------------------
| CGEI Shared Hero Layout
|--------------------------------------------------------------------------
| The PNG contains the fixed organisation name and tagline.
| The marble epigraph is a shared image asset positioned over the hero.
| Only the page-specific description is editable HTML.
|--------------------------------------------------------------------------
*/

/*
|--------------------------------------------------------------------------
| Hero container
|--------------------------------------------------------------------------
*/

.hero-banner,
.home-hero,
.about-hero {
    position: relative;
    display: block !important;

    width: calc(100% - 40px);
    max-width: calc(var(--content-width) - 40px);

    min-height: 0 !important;
    height: auto !important;

    margin: 0 auto;
    padding: 0;

    overflow: hidden;

    border: 0;
    border-radius: 11px;

    background: #ffffff;
}

/*
|--------------------------------------------------------------------------
| Complete hero image
|--------------------------------------------------------------------------
*/

.hero-background-image {
    position: relative;
    z-index: 1;

    display: block;

    width: 100%;
    max-width: 100%;

    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;

    margin: 0;
    padding: 0;

    object-fit: contain !important;
    object-position: center;
}

/*
|--------------------------------------------------------------------------
| Shared marble epigraph
|--------------------------------------------------------------------------
| The WebP asset must have a transparent background.
| Only the irregular marble slab should therefore be visible.
|--------------------------------------------------------------------------
*/

.hero-epigraph {
    position: absolute;

    top: 4.5%;
    left: 1.5%;

    z-index: 3;

    display: block;

    width: clamp(260px, 19%, 300px);
    height: auto;

    margin: 0;
    padding: 0;

    pointer-events: none;
}

.hero-epigraph-marble {
    display: block;

    width: 100%;
    max-width: 100%;
    height: auto;

    margin: 0;
    padding: 0;

    border: 0;

    background: transparent;

    object-fit: contain;
    object-position: left top;
}

/*
|--------------------------------------------------------------------------
| Editable description overlay
|--------------------------------------------------------------------------
*/

.hero-text-panel,
.home-hero .hero-text-panel,
.about-hero .hero-text-panel {
    position: absolute;

    top: 23%;
    left: 5.8%;

    z-index: 2;

    display: block;

    width: 46%;

    height: auto !important;
    min-height: 0 !important;

    margin: 0;
    padding: 0;

    overflow: visible;

    border: 0;

    background: transparent;

    color: #00163e;
}

/*
|--------------------------------------------------------------------------
| All hero typography
|--------------------------------------------------------------------------
*/

.hero-banner .hero-title,
.hero-banner .hero-subtitle,
.hero-banner .hero-description,
.home-hero .hero-title,
.home-hero .hero-subtitle,
.home-hero .hero-description,
.about-hero .hero-title,
.about-hero .hero-subtitle,
.about-hero .hero-description {
    color: #00163e !important;

    font-family: Georgia, "Times New Roman", serif;
}

/*
|--------------------------------------------------------------------------
| Editable hero description
|--------------------------------------------------------------------------
*/

.hero-description,
.home-hero .hero-description,
.about-hero .hero-description {
    display: block;

    width: 100%;
    max-width: 100%;

    margin: 0;
    padding: 0;

    color: #00163e !important;

    font-size: 16px;
    font-weight: 700;
    line-height: 1.45;

    text-align: justify;
    text-align-last: left;
    text-justify: inter-word;

    hyphens: none;

    overflow-wrap: normal;
    word-break: normal;
}

/*
|--------------------------------------------------------------------------
| Accessible fixed hero wording
|--------------------------------------------------------------------------
*/

.hero-accessible-heading {
    position: absolute;

    width: 1px;
    height: 1px;

    margin: -1px;
    padding: 0;

    overflow: hidden;

    border: 0;

    clip: rect(0 0 0 0);
    clip-path: inset(50%);

    white-space: nowrap;
}

.hero-accessible-heading h1,
.hero-accessible-heading p {
    margin: 0;

    color: #00163e;
}

/*
|--------------------------------------------------------------------------
| Remove obsolete hero elements
|--------------------------------------------------------------------------
*/

.hero-divider,
.hero-image-panel,
.hero-title,
.hero-subtitle {
    display: none !important;
}

/*
|--------------------------------------------------------------------------
| Standard desktop screens
|--------------------------------------------------------------------------
*/

@media (min-width: 1001px) and (max-width: 1350px) {

    .hero-epigraph {
        top: 4%;
        left: 1.5%;

        width: clamp(240px, 20%, 275px);
    }

    .hero-text-panel,
    .home-hero .hero-text-panel,
    .about-hero .hero-text-panel {
        top: 22%;
        left: 5.5%;

        width: 47%;
    }

    .hero-description,
    .home-hero .hero-description,
    .about-hero .hero-description {
        color: #00163e !important;

        font-size: 16px;
        font-weight: 700;
        line-height: 1.4;

        text-align: justify;
        text-align-last: left;
        text-justify: inter-word;
    }
}

/*
|--------------------------------------------------------------------------
| Tablet screens
|--------------------------------------------------------------------------
*/

@media (min-width: 701px) and (max-width: 1000px) {

    .hero-banner,
    .home-hero,
    .about-hero {
        width: calc(100% - 40px);

        border-radius: 9px;
    }

    .hero-epigraph {
        top: 4%;
        left: 1.5%;

        width: 220px;
    }

    .hero-text-panel,
    .home-hero .hero-text-panel,
    .about-hero .hero-text-panel {
        top: 20%;
        left: 5%;

        width: 50%;
    }

    .hero-description,
    .home-hero .hero-description,
    .about-hero .hero-description {
        color: #00163e !important;

        font-size: 16px;
        font-weight: 700;
        line-height: 1.35;

        text-align: justify;
        text-align-last: left;
        text-justify: inter-word;
    }
}

/*
|--------------------------------------------------------------------------
| Mobile screens
|--------------------------------------------------------------------------
*/

@media (max-width: 700px) {

    .hero-banner,
    .home-hero,
    .about-hero {
        width: calc(100% - 28px);

        margin-right: 14px;
        margin-left: 14px;

        border-radius: 8px;
    }

    .hero-epigraph {
        top: 4px;
        left: 6px;

        width: 150px;
    }

    .hero-text-panel,
    .home-hero .hero-text-panel,
    .about-hero .hero-text-panel {
        top: 18%;
        left: 4.5%;

        width: 58%;
    }

    .hero-description,
    .home-hero .hero-description,
    .about-hero .hero-description {
        color: #00163e !important;

        font-size: 16px;
        font-weight: 700;
        line-height: 1.3;

        text-align: justify;
        text-align-last: left;
        text-justify: inter-word;
    }
}

/*
|--------------------------------------------------------------------------
| Very narrow mobile screens
|--------------------------------------------------------------------------
*/

@media (max-width: 430px) {

    .hero-epigraph {
        top: 3px;
        left: 5px;

        width: 125px;
    }

    .hero-text-panel,
    .home-hero .hero-text-panel,
    .about-hero .hero-text-panel {
        top: 16%;
        left: 4%;

        width: 61%;
    }

    .hero-description,
    .home-hero .hero-description,
    .about-hero .hero-description {
        color: #00163e !important;

        font-size: 16px;
        font-weight: 700;
        line-height: 1.25;

        text-align: justify;
        text-align-last: left;
        text-justify: inter-word;
    }
}