/* =========================================================
   GUIA HERO SYSTEM
   Um único sistema de proporções para páginas que possuem Hero.

   Tipos:
   .guia-hero--home
   .guia-hero--archive
   .guia-hero--single
   .guia-hero--event

   A estrutura interna continua pertencendo a cada página.
   O sistema padroniza proporção, container, tipografia e ritmo.
   ========================================================= */

:root{
    --guia-hero-height: 430px;
    --guia-hero-height-tablet: 390px;
    --guia-hero-height-mobile: 350px;
    --guia-hero-content-width: 1200px;
    --guia-hero-gutter: 40px;
    --guia-hero-title-size: clamp(42px, 4.5vw, 58px);
    --guia-hero-title-line: 0.98;
    --guia-hero-radius: 0;
}

/* Base: todas as páginas com hero */
.guia-hero{
    position:relative!important;
    width:100%!important;
    height:var(--guia-hero-height)!important;
    min-height:var(--guia-hero-height)!important;
    max-height:var(--guia-hero-height)!important;
    overflow:hidden!important;
    box-sizing:border-box!important;
    isolation:isolate;
}

.guia-hero > *{
    box-sizing:border-box;
}

.guia-hero :is(h1,h2,h3,p){
    margin-top:0;
}

.guia-hero :is(h1,h2){
    letter-spacing:-0.04em;
}

/* Imagem de fundo: mesma proporção e comportamento */
.guia-hero > .ggp-v25-hero-image,
.guia-hero > .guia-praias-hero__media,
.guia-hero > .sp-hero-bg{
    position:absolute!important;
    inset:0!important;
    width:100%!important;
    height:100%!important;
    z-index:0!important;
    overflow:hidden!important;
}

.guia-hero > .ggp-v25-hero-image img,
.guia-hero > .guia-praias-hero__media img,
.guia-hero > .sp-hero-bg img{
    width:100%!important;
    height:100%!important;
    max-width:none!important;
    object-fit:cover!important;
    object-position:center!important;
    display:block!important;
}

/* Overlay coerente */
.guia-hero > .ggp-v25-hero-overlay,
.guia-hero > .guia-praias-hero__overlay,
.guia-hero.sp-hero::after{
    position:absolute!important;
    inset:0!important;
    z-index:1!important;
}

/* Régua de conteúdo */
.guia-hero :is(.ggp-v25-hero-content,
                .guia-praias-hero__content,
                .sp-hero-content,
                .gevento-hero__container){
    position:relative;
    z-index:2;
    width:min(var(--guia-hero-content-width), calc(100% - (var(--guia-hero-gutter) * 2)))!important;
    max-width:var(--guia-hero-content-width)!important;
    margin-inline:auto!important;
    box-sizing:border-box!important;
}

/* Escala H1 única */
.guia-hero :is(.ggp-v25-hero-content h1,
                .guia-praias-hero__copy h1,
                .sp-hero-title,
                .gevento-hero__title){
    font-size:var(--guia-hero-title-size)!important;
    line-height:var(--guia-hero-title-line)!important;
    font-weight:750!important;
}

/* HOME — mesmo tamanho, conteúdo centralizado */
.guia-hero--home{
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
}

.guia-hero--home .ggp-v25-hero-content{
    padding:40px 0!important;
    text-align:center!important;
    max-width:860px!important;
}

/* ARCHIVE — mesma altura; layout pode dividir texto e ferramenta */
.guia-hero--archive{
    display:flex!important;
    align-items:flex-end!important;
}

.guia-hero--archive .guia-praias-hero__content{
    height:100%!important;
    display:flex!important;
    align-items:flex-end!important;
    padding-bottom:46px!important;
}

.guia-hero--archive .guia-praias-hero__inner{
    width:100%!important;
    display:grid!important;
    grid-template-columns:minmax(300px,.9fr) minmax(420px,1.35fr)!important;
    gap:48px!important;
    align-items:end!important;
}

.guia-hero--archive .guia-praias-hero__copy{
    max-width:520px!important;
}

.guia-hero--archive .guia-praias-hero__tools{
    max-width:none!important;
}

/* SINGLE PRAIA — mesmo hero; conteúdo encostado na base */
.guia-hero--single{
    display:flex!important;
    align-items:flex-end!important;
}

.guia-hero--single .sp-hero-content{
    padding-bottom:36px!important;
}

/* EVENT — mesmo hero; conteúdo alinhado à base */
.guia-hero--event{
    display:flex!important;
    align-items:flex-end!important;
}

.guia-hero--event .gevento-hero__container{
    padding-bottom:42px!important;
}

/* Breadcrumbs associados a single/arquivo permanecem fora do hero.
   Hero continua com a mesma caixa de 430px. */

/* HOME: botão "Ver todas as empresas" não é full width */
.ggp-v25-all-button{
    width:max-content!important;
    max-width:100%!important;
    display:inline-flex!important;
    align-items:center!important;
    justify-content:center!important;
    margin-inline:auto!important;
}

/* Responsive — mantém a mesma lógica, reduzindo apenas a proporção */
@media (max-width: 1100px){
    :root{
        --guia-hero-gutter:32px;
        --guia-hero-height:var(--guia-hero-height-tablet);
    }

    .guia-hero--archive .guia-praias-hero__inner{
        grid-template-columns:minmax(260px,.8fr) minmax(360px,1.2fr)!important;
        gap:32px!important;
    }
}

@media (max-width: 780px){
    :root{
        --guia-hero-gutter:24px;
        --guia-hero-height:var(--guia-hero-height-mobile);
        --guia-hero-title-size:clamp(34px,9vw,46px);
    }

    .guia-hero :is(.ggp-v25-hero-content,
                   .guia-praias-hero__content,
                   .sp-hero-content,
                   .gevento-hero__container){
        width:calc(100% - (var(--guia-hero-gutter) * 2))!important;
    }

    .guia-hero--home .ggp-v25-hero-content{
        padding:24px 0!important;
    }

    .guia-hero--archive{
        align-items:flex-end!important;
    }

    .guia-hero--archive .guia-praias-hero__content{
        padding-bottom:26px!important;
    }

    .guia-hero--archive .guia-praias-hero__inner{
        display:block!important;
    }

    .guia-hero--archive .guia-praias-hero__copy{
        max-width:100%!important;
    }

    .guia-hero--archive .guia-praias-hero__tools{
        margin-top:18px!important;
    }

    .guia-hero--single .sp-hero-content,
    .guia-hero--event .gevento-hero__container{
        padding-bottom:24px!important;
    }
}

@media (max-width: 520px){
    :root{
        --guia-hero-gutter:16px;
        --guia-hero-height:320px;
        --guia-hero-title-size:34px;
    }

    .guia-hero--archive .guia-praias-hero__tools{
        margin-top:14px!important;
    }

    .guia-hero--archive .guia-praias-hero__filters-wrapper{
        overflow-x:auto!important;
        scrollbar-width:none;
    }

    .guia-hero--archive .guia-praias-hero__filters-wrapper::-webkit-scrollbar{
        display:none;
    }
}