/*
 | Acrescentos nossos ao template Breezie: banner de cookies, mensagens de
 | formulário, feed de Instagram e detalhes do rodapé.
 | Ficam neste ficheiro para o CSS original do template continuar intacto e
 | poder ser substituído sem perder o nosso trabalho.
 */

:root {
    --ouh-accent: #c5a56f;
    --ouh-heading: #343935;
    --ouh-cream: #edeae5;
}

/* --- Menu principal ---
   Em ecrã largo, as entradas não partem em duas linhas ("Our Story",
   "A Nossa História"). O tema troca para o menu móvel abaixo dos 1200px
   (mobileWidth = 1199 no main.js), por isso a regra só vale acima disso. */
@media (min-width: 1200px) {
    .cs_nav .cs_nav_list > li > a {
        white-space: nowrap;
    }
}

/* O tema separa as entradas com 48px, e o menu transbordava para fora do
   ecrã à esquerda abaixo dos ~1400px — mesmo no layout original do cliente,
   e bastante mais em português (textos mais compridos). Mesmo seletor do
   tema, para ganhar só por vir depois. */
/* Atenção: cada lista reserva ~134px junto ao logótipo centrado, por isso a
   1200px sobram só ~420px por lado para as entradas. */
@media (min-width: 1200px) and (max-width: 1299.98px) {
    .cs_site_header.cs_style_1 .cs_nav .cs_nav_list > li {
        margin-right: 14px;
    }

    .cs_site_header.cs_style_1 .cs_nav .cs_nav_list > li > a {
        font-size: 15px;
    }
}

@media (min-width: 1300px) and (max-width: 1399.98px) {
    .cs_site_header.cs_style_1 .cs_nav .cs_nav_list > li {
        margin-right: 20px;
    }
}

@media (min-width: 1400px) and (max-width: 1599.98px) {
    .cs_site_header.cs_style_1 .cs_nav .cs_nav_list > li {
        margin-right: 32px;
    }
}

/* --- Cartão de apresentação da homepage ---
   O tema puxa a fotografia 30px para cima, para ficar por baixo da última
   linha do título. Foi pensado para um título fixo e curto; com títulos
   editáveis no backoffice, a última linha caía em cima da fotografia
   consoante a largura e o zoom do ecrã. */
@media (min-width: 992px) {
    .cs_card.cs_style_1 .cs_card_thumbnail {
        margin-top: 36px;
    }
}

/* --- Títulos de destaque ---
   O template usa 180px fixos (cs_fs_180). Com títulos editáveis e em quatro
   idiomas isso não serve: "O seu próximo capítulo começa aqui" ocupava três
   linhas (reparo do cliente, 2026-09-16). O tamanho passa a acompanhar a
   largura do ecrã, com um máximo abaixo dos 180px. */
.cs_hero.cs_style_1 .cs_hero_title.ouh-hero-title {
    font-size: clamp(44px, 6.6vw, 124px);
    line-height: 1.08;
    /* Reparte as palavras pelas linhas, em vez de deixar uma sozinha no fim
       ("O seu próximo capítulo começa / aqui"). Browsers antigos ignoram. */
    text-wrap: balance;
}

.cs_section_title.ouh-display {
    font-size: clamp(44px, 6vw, 110px);
    line-height: 1.05;
    text-wrap: balance;
}

/* --- Bloco de eventos da homepage: texto logo abaixo do título --- */
/* O tema dá 50px de margem interior ao .cs_card_text, pensado para o texto ao
   lado de uma imagem; aqui fica debaixo do título e tem de alinhar com ele. */
.cs_card.cs_style_5 .cs_card_text.ouh-events-text {
    margin-top: 28px;
    max-width: 640px;
    padding-left: 0;
}

.ouh-events-text p {
    margin-bottom: 18px;
}

/* --- Últimas notícias de imprensa na homepage --- */
.ouh-press-card {
    height: 100%;
    padding-top: 24px;
    border-top: 1px solid rgba(52, 57, 53, 0.2);
}

/* --- Formulário de contacto ---
   O tema desenha a grelha por posição (:nth-child(3) e (4)), contando com
   exatamente quatro blocos; o nosso tem cinco. E os campos ficam com
   `border: 0` e fundo branco sobre fundo branco — invisíveis (reparo do
   cliente, 2026-09-18). */
.cs_contact_form.ouh-contact-form {
    grid-template-columns: repeat(2, 1fr);
    gap: 28px 48px;
}

/* As regras :nth-child(3)/(4) do tema contam também o campo oculto do CSRF e
   o campo-armadilha, e acabavam a alargar o nome e o e-mail. Anuladas com a
   mesma especificidade; quem ocupa a linha toda é marcado por classe. */
.cs_contact_form.cs_style_1.ouh-contact-form .cs_input_wrapper {
    grid-column: auto;
    display: block;
}

.cs_contact_form.cs_style_1.ouh-contact-form .cs_input_wrapper.ouh-span-2,
.cs_contact_form.cs_style_1.ouh-contact-form .cs_input_wrapper.ouh-form-footer {
    grid-column: 1 / -1;
}

.cs_contact_form.cs_style_1.ouh-contact-form .cs_input_wrapper.ouh-form-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px 40px;
    flex-wrap: wrap;
}

.ouh-contact-form label {
    display: block;
}

.cs_contact_form.ouh-contact-form .cs_form_field {
    border: 1px solid rgba(52, 57, 53, 0.25);
    border-radius: 2px;
    background-color: #fff;
    padding: 16px 20px;
    transition: border-color 0.2s ease;
}

.cs_contact_form.ouh-contact-form .cs_form_field:focus {
    border-color: var(--ouh-accent);
}

@media (max-width: 767.98px) {
    .cs_contact_form.ouh-contact-form {
        grid-template-columns: 1fr;
    }

    .cs_contact_form.cs_style_1.ouh-contact-form .cs_input_wrapper.ouh-form-footer {
        flex-direction: column;
        align-items: flex-start;
    }
}

/* --- Capa das unidades ---
   A altura e o véu mais suave da capa vinham de regras que o tema só aplica
   dentro do carrossel (`.cs_single_room_slider_1 ...`). Como a capa passou a
   ser uma fotografia fixa, repetem-se aqui com os mesmos valores e as mesmas
   quebras de ecrã do tema. */
.ouh-unit-cover .cs_page_header.cs_style_1 {
    padding: 278px 0 233px;
}

.ouh-unit-cover .cs_page_header.cs_style_1::before {
    opacity: 0.25;
}

@media (max-width: 1199px) {
    .ouh-unit-cover .cs_page_header.cs_style_1 {
        padding: 240px 0 160px;
    }
}

@media (max-width: 991px) {
    .ouh-unit-cover .cs_page_header.cs_style_1 {
        padding: 160px 0 130px;
    }
}

/*
    --- Galerias (páginas e unidades): mostrar tudo ---

    O tema esconde TODOS os itens da grelha (`style.css`: `.cs_grid.cs_style_3
    .cs_gallery_item { display: none }`) e o `main.js` revela apenas os três
    primeiros, à espera do botão "load more photos" que as páginas do template
    trazem escrito à mão. As nossas galerias são geridas no backoffice e não
    têm esse botão, por isso do quarto item em diante as fotografias e os
    vídeos ficavam invisíveis na página — só apareciam depois de abrir o
    lightbox e avançar. Anulado aqui (o ouh.css carrega depois do style.css e
    tem a mesma especificidade).
*/
.cs_grid.cs_style_3 .cs_gallery_item {
    display: block;
}

/* --- Galeria das páginas: marca de vídeo --- */
.ouh-play-badge {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.9);
    pointer-events: none;
}

.ouh-play-badge::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 54%;
    transform: translate(-50%, -50%);
    border-style: solid;
    border-width: 11px 0 11px 18px;
    border-color: transparent transparent transparent var(--ouh-heading);
}

/* Vídeo sem imagem de capa: fundo da marca, para não ficar um buraco branco. */
.ouh-gallery-empty {
    background-color: var(--ouh-heading);
}

/* Ligação legal no fundo do rodapé (o .footer-bottom do tema é centrado). */
.ouh-footer-legal {
    margin: 6px 0 0;
}

.ouh-footer-legal a {
    color: inherit;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.ouh-footer-legal a:hover {
    color: var(--ouh-accent);
}

/* --- Banner de cookies --- */
.ouh-cookies {
    position: fixed;
    left: 50%;
    bottom: 20px;
    transform: translateX(-50%);
    width: min(920px, calc(100% - 32px));
    background: #fff;
    color: var(--ouh-heading);
    border-radius: 8px;
    box-shadow: 0 18px 44px rgba(52, 57, 53, 0.22);
    padding: 20px 24px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 16px;
    z-index: 9999;
    font-size: 15px;
    line-height: 1.55;
}

.ouh-cookies[hidden] {
    display: none;
}

.ouh-cookies__text {
    flex: 1 1 320px;
}

.ouh-cookies__actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.ouh-btn {
    border: 1px solid var(--ouh-accent);
    background: var(--ouh-accent);
    color: var(--ouh-heading);
    font-weight: 500;
    padding: 9px 22px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 14px;
    letter-spacing: 0.02em;
}

.ouh-btn--ghost {
    background: transparent;
    color: var(--ouh-heading);
    border-color: rgba(52, 57, 53, 0.3);
}

.ouh-btn:hover {
    opacity: 0.88;
}

/* --- Mensagens de formulário --- */
.ouh-alert {
    padding: 14px 18px;
    border-radius: 6px;
    margin-bottom: 24px;
    font-size: 16px;
}

.ouh-alert--success {
    background: var(--ouh-cream);
    border-left: 3px solid var(--ouh-accent);
}

.ouh-alert--error {
    background: #fdf1f1;
    border-left: 3px solid #c0553f;
}

.ouh-alert ul {
    margin: 0;
    padding-left: 18px;
}

/* Campo-armadilha para robôs: fora do ecrã, mas não display:none
   (alguns robôs ignoram campos escondidos dessa forma). */
.ouh-hp {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.ouh-check {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 15px;
    line-height: 1.5;
    cursor: pointer;
}

.ouh-check input {
    margin-top: 5px;
}

/* --- Instagram --- */
.ouh-instagram {
    padding: 90px 0;
    background: var(--ouh-cream);
}

.ouh-instagram__embed {
    margin-top: 20px;
}

/* --- Rodapé --- */
.footer-social {
    display: flex;
    gap: 16px;
    margin-top: 14px;
}

.footer-social a {
    font-size: 18px;
}

/* Espaço reservado quando uma unidade ainda não tem fotografia carregada */
.ouh-placeholder {
    display: block;
    width: 100%;
    aspect-ratio: 4 / 3;
    background: linear-gradient(135deg, var(--ouh-cream), #dcd6cc);
}