/* ==========================================================
   GRUPO JAMO
   Grelha comum para heroes das páginas institucionais
   ========================================================== */

:root {
    --jamo-hero-left: 5.3vw;
    --jamo-hero-content-top: 31vh;
}


/* ----------------------------------------------------------
   O hero é sempre a referência do posicionamento
   ---------------------------------------------------------- */

.group-hero,
.news-hero,
.rh-hero,
.contact-hero {
    position: relative !important;
}


/* ----------------------------------------------------------
   Todos os conteúdos começam exatamente na mesma grelha
   ---------------------------------------------------------- */

.group-hero-content,
.news-hero-content,
.rh-hero-content,
.contact-hero-content {
    position: absolute !important;

    top: var(--jamo-hero-content-top) !important;
    bottom: auto !important;

    left: var(--jamo-hero-left) !important;
    right: auto !important;

    margin: 0 !important;

    transform: none !important;

    z-index: 5 !important;
}


/* ----------------------------------------------------------
   Largura comum do bloco
   Não altera o tamanho dos títulos.
   ---------------------------------------------------------- */

.group-hero-content,
.news-hero-content,
.rh-hero-content,
.contact-hero-content {
    width: min(900px, 82vw) !important;
    max-width: 900px !important;
}


/* ----------------------------------------------------------
   Eyebrow → título
   Mesma distância visual em todas as páginas
   ---------------------------------------------------------- */

.group-hero-content > p:first-child,
.news-hero-content > p:first-child,
.rh-hero-content > .eyebrow,
.contact-hero-content > .eyebrow {
    margin-top: 0 !important;
    margin-bottom: 22px !important;
}


/* ----------------------------------------------------------
   Título → texto
   ---------------------------------------------------------- */

.group-hero-content h1,
.news-hero-content h1,
.rh-hero-content h1,
.contact-hero-content h1 {
    margin-top: 0 !important;
}


/* ----------------------------------------------------------
   Desktop baixo
   ---------------------------------------------------------- */

@media (max-height: 760px) and (min-width: 901px) {

    :root {
        --jamo-hero-content-top: 27vh;
    }

}


/* ----------------------------------------------------------
   Tablet
   ---------------------------------------------------------- */

@media (max-width: 900px) {

    :root {
        --jamo-hero-left: 28px;
        --jamo-hero-content-top: 28vh;
    }

    .group-hero-content,
    .news-hero-content,
    .rh-hero-content,
    .contact-hero-content {
        width: calc(100% - 56px) !important;
        max-width: none !important;
    }

}


/* ----------------------------------------------------------
   Mobile
   ---------------------------------------------------------- */

@media (max-width: 600px) {

    :root {
        --jamo-hero-left: 22px;
        --jamo-hero-content-top: 25vh;
    }

    .group-hero-content,
    .news-hero-content,
    .rh-hero-content,
    .contact-hero-content {
        width: calc(100% - 44px) !important;
    }

}


/* ==========================================================
   GRUPO JAMO — HERO A 100% DA JANELA
   ========================================================== */

.group-page .group-hero {
    min-height: 100vh !important;
    min-height: 100svh !important;
    height: 100vh !important;

    overflow: hidden !important;
}


/* imagem sempre a cobrir toda a área */

.group-page .group-hero > img {
    position: absolute !important;

    inset: 0 !important;

    width: 100% !important;
    height: 100% !important;

    object-fit: cover !important;
    object-position: center !important;

    z-index: 0 !important;
}


/* overlay ocupa igualmente todo o hero */

.group-page .group-hero-overlay {
    position: absolute !important;

    inset: 0 !important;

    width: 100% !important;
    height: 100% !important;

    z-index: 1 !important;
}


/* conteúdo com mais folga inferior */

.group-page .group-hero-content {
    top: 28vh !important;

    width: min(900px, 82vw) !important;

    padding-bottom: 10vh !important;
}


/* título ligeiramente mais controlado em altura */

.group-page .group-hero-content h1 {
    margin-bottom: 28px !important;

    line-height: .90 !important;
}


/* texto de apoio sem colar ao fundo */

.group-page .group-hero-content > span {
    display: block !important;

    max-width: 720px !important;

    margin-top: 0 !important;

    line-height: 1.55 !important;
}


/* indicador subtil de continuação */

.group-page .group-hero::after {
    content: "";

    position: absolute;

    left: 50%;
    bottom: 28px;

    width: 1px;
    height: 38px;

    background: rgba(255,255,255,.55);

    z-index: 5;

    transform: translateX(-50%);
}


.group-page .group-hero::before {
    content: "";

    position: absolute;

    left: 50%;
    bottom: 18px;

    width: 10px;
    height: 10px;

    border: 1px solid rgba(255,255,255,.75);
    border-radius: 50%;

    z-index: 6;

    transform: translateX(-50%);
}


/* ecrãs desktop mais baixos */

@media (max-height: 760px) and (min-width: 901px) {

    .group-page .group-hero-content {
        top: 24vh !important;
    }

}


/* tablet */

@media (max-width: 900px) {

    .group-page .group-hero {
        min-height: 100svh !important;
        height: auto !important;
    }

    .group-page .group-hero-content {
        top: 25vh !important;

        width: calc(100% - 56px) !important;

        padding-bottom: 12vh !important;
    }

}


/* mobile */

@media (max-width: 600px) {

    .group-page .group-hero-content {
        top: 22vh !important;

        width: calc(100% - 44px) !important;

        padding-bottom: 11vh !important;
    }

    .group-page .group-hero::after,
    .group-page .group-hero::before {
        display: none !important;
    }

}