/*
 * ADSI Core — Layouts de detalhe (inc/CoreLayouts.php)
 *
 * Só é carregado quando o layout resolvido declara 'css' => true.
 * O <body> recebe .core-layout-{slug} e .core-layout-{parent|child}.
 */

/* ── Hero (layouts com 'hero' => true, ex: "principal") ─────────────
 * Faixa full-width com a imagem destacada de fundo (<img> impresso por
 * render_hero(), ou --core-hero-image inline nos temas que só aplicam
 * hero_style() à sua barra) e título + data em overlay,
 * alinhados ao fundo. O conteúdo interno usa a largura máxima das áreas de
 * conteúdo: no template do plugin via .core-layout-hero__inner; num tema
 * com barra de título própria (Enfold: .title_container > .container) é o
 * container do tema que a define — o adaptador do tema só acrescenta as
 * classes/estilo e ajusta as cores.
 *
 * Contraste (WCAG AA): o scrim nunca desce abaixo de 55% de preto, o que
 * garante ≥ 4.5:1 para texto branco mesmo sobre uma imagem toda branca. */
.core-layout-hero {
    --core-hero-scrim: linear-gradient(to top, rgb(0 0 0 / 0.78), rgb(0 0 0 / 0.55));
    position: relative;
    isolation: isolate;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    min-height: var(--core-hero-min-height, clamp(14rem, 32vw, 26rem));
    background-color: var(--core-hero-bg, #1f2937);
    background-image: var(--core-hero-image, none);
    background-position: var(--core-hero-position, center);
    background-size: cover;
    background-repeat: no-repeat;
    color: var(--core-hero-color, #fff);
    margin-bottom: var(--core-block-margin, 1.5rem);
}

/* Altura por contexto (classes do <body> postas por CoreLayouts): o arquivo
   é a porta de entrada da secção — hero alto; a página principal de um
   serviço é um nível abaixo — hero compacto, o conteúdo sobe. Definido no
   <body> (herdado), por isso vale também para a barra de título do tema
   (Enfold). Configurável em Componentes → Hero
   (CoreGlobaisCss, body.core-layout-…); um child theme sobrepõe com a
   mesma variável. */
.core-layout-archive {
    --core-hero-min-height: clamp(16rem, 36vw, 28rem);
}

.core-layout-parent {
    --core-hero-min-height: clamp(9rem, 18vw, 14rem);
}

/* Sub-página: separador da página principal — ainda mais baixo. */
.core-layout-child {
    --core-hero-min-height: clamp(7rem, 12vw, 10rem);
}

.core-layout-hero.has-image::before,
.core-layout-hero.has-scrim::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: var(--core-hero-scrim);
}

/* Imagem do hero como <img> (CoreLayouts::render_hero(): srcset + LCP) —
   por baixo do scrim (::before, z-index -1) e do texto. (0,2,0) e
   dimensões explícitas porque os temas dão a todas as img
   height:auto/max-width:100% (Astra). Foco: Componentes → Hero ou a tab
   Hero do módulo (--core-hero-position). */
.core-layout-hero > .core-layout-hero__img {
    position: absolute;
    inset: 0;
    z-index: -2;
    width: 100%;
    height: 100%;
    max-width: none;
    margin: 0;
    object-fit: cover;
    object-position: var(--core-hero-position, center);
    border-radius: 0;
}

/* --core-hero-max-width: só o adaptador do Astra o define (ajustado ao seu
   site-content-width) — nos restantes casos (ex: rotas de Eventos que
   saltam o CoreThemeCompat, como o calendário/arquivo de passados) cai no
   fallback. Em vez de um valor fixo, usa a largura real do site
   (--core-container-max, definida globalmente pelo CoreGlobaisCss) — mantém
   o hero genérico alinhado com o resto do conteúdo em qualquer tema, sem
   precisar de um adaptador dedicado só para a largura. 1200px é o último
   recurso, só se nem essa variável existir. */
.core-layout-hero__inner {
    width: min(100% - 2rem, var(--core-hero-max-width, var(--core-container-max, 1200px)));
    margin-inline: auto;
    padding-block: var(--core-gap, 1.5rem);
}

.core-layout-hero__meta {
    margin: 0 0 0.5rem;
    color: inherit;
}

/* Tamanho = escala de títulos do core (--core-h1-size, Apresentação →
   Títulos), como .core-h1-title. Dupla classe (0,2,0) porque o tema também
   dimensiona .entry-title (Astra: CSS dinâmico, 0,1,0) e carrega depois. */
.core-layout-hero .core-layout-hero__title {
    margin: 0;
    font-size: var(--core-h1-size, 2.25rem);
    color: var(--core-hero-title-color, inherit);
}

/* Meta depois do título ("Posição da meta" = depois, Core - Compatibilidade). */
.core-layout-hero__title + .core-layout-hero__meta {
    margin: 0.5rem 0 0;
}

.core-layout-hero__description {
    margin: 0.5rem 0 0;
    color: inherit;
}

.core-layout-hero__description > :last-child {
    margin-bottom: 0;
}

/* Alinhamento do hero (chaves opcionais de layout 'hero_align', ex: eventos).
   Vertical no próprio hero (que já é um flex column); horizontal por
   text-align, herdado por .core-layout-hero__inner e os seus filhos. */
.core-layout-hero.is-top {
    justify-content: flex-start;
}

.core-layout-hero.is-middle {
    justify-content: center;
}

.core-layout-hero.is-bottom {
    justify-content: flex-end;
}

.core-layout-hero.is-left {
    text-align: left;
}

.core-layout-hero.is-center {
    text-align: center;
}

.core-layout-hero.is-right {
    text-align: right;
}

.core-layout-hero a {
    color: inherit;
}

.core-layout-apresentacao {
    margin-bottom: var(--core-block-margin, 1.5rem);
}

.core-layout-apresentacao > :last-child {
    margin-bottom: 0;
}

/* ── Barra logo a seguir ao hero (CoreLayouts::subnav) ────────────────
 * [regressar] [pesquisar] | pills das sub-páginas.
 * As ferramentas ficam fixas à esquerda; só as pills (reaproveitadas de
 * [subpage_nav], adsicore.css .subpage-nav-outside) fazem scroll horizontal
 * numa linha quando não cabem. Os itens são links, por isso Tab percorre-os
 * e o browser faz scroll até ao focado — sem JS. O padding vertical da <ul>
 * evita que o contorno de foco seja cortado pelo overflow. */
/* Aparência da faixa: Componentes → Hero → "Barra de navegação" (global,
   CoreGlobaisCss) ou a tab Hero do módulo (inline no style da faixa).
   Os valores por omissão são os de antes. O espaço vertical soma o padding
   da faixa e o do .core-layout-hero__inner lá dentro; com "Espaço
   vertical" definido, fica só o da faixa (--core-subnav-inner-padding-block: 0). */
.core-layout-subnav-band {
    padding-block: var(--core-subnav-padding-block, var(--core-spacing-sm, 0.75rem));
    margin-bottom: var(--core-subnav-margin-bottom, var(--core-block-margin, 1.5rem));
    background: var(--core-subnav-bg, transparent);
    border-bottom: var(--core-border-width, 1px) solid var(--core-subnav-border-color, var(--core-color-gray-light, #e5e7eb));
}

.core-layout-subnav-band > .core-layout-hero__inner {
    padding-block: var(--core-subnav-inner-padding-block, var(--core-gap, 1.5rem));
}

.core-layout-hero + .core-layout-subnav-band {
    margin-top: calc(-1 * var(--core-block-margin, 1.5rem));
}

.core-layout-subnav__bar {
    position: relative;
    display: flex;
    align-items: center;
    gap: var(--core-spacing-sm, 8px);
}

.core-layout-subnav__tools {
    display: flex;
    flex: 0 0 auto;
    gap: var(--core-spacing-xs, 6px);
}

.core-layout-subnav__tools:not(:last-child) {
    padding-right: var(--core-spacing-sm, 8px);
    border-right: var(--core-border-width, 1px) solid var(--core-color-gray, #ccc);
}

/* Botões só com ícone (ferramentas + setas): alvo de 44px (WCAG 2.5.5),
   nome acessível no aria-label. Mesmo contorno das pills, preenchido quando
   ativo. Seletores com .core-layout-subnav à frente (0,2,0+) porque alguns
   temas estilizam button/button:focus/button:hover globalmente (Astra:
   button:focus (0,1,1) pinta o fundo e tira o contorno de foco). */
.core-layout-subnav .core-layout-subnav__tool,
.core-layout-subnav .core-layout-subnav__arrow {
    /* Cores, bordo, hover e sublinhado: classes de CoreButtons postas por
       CoreLayouts::subnav() (core-button core-button--{tipo} + hover global).
       Aqui só a forma: círculo de 44px só com ícone. */
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    margin: 0;
    padding: 0;
    font-size: 1rem;
    line-height: 1;
    border-radius: var(--core-border-radius-full, 9999px);
    cursor: pointer;
}

/* Ferramenta aberta (pesquisa, ☰): variante oposta ao tipo, como a página atual. */
.core-layout-subnav :is(.core-button--primary, .core-button--secondary)[aria-expanded="true"] {
    background: transparent;
    color: var(--core-btn-color, var(--core-color-primary, #2c5f8d));
    border-color: var(--core-btn-color, var(--core-color-primary, #2c5f8d));
}

.core-layout-subnav :is(.core-button--outline-dark, .core-button--outline-light)[aria-expanded="true"] {
    background: var(--core-btn-color, var(--core-color-primary, #2c5f8d));
    color: var(--core-color-white, #fff);
    border-color: var(--core-btn-color, var(--core-color-primary, #2c5f8d));
}

.core-layout-subnav .core-button:focus-visible {
    outline: 2px solid var(--core-btn-color, var(--core-color-primary, #2c5f8d));
    outline-offset: 2px;
}

/* Hover "gradiente": as barras do ☰ ficam por cima do ::before. */
.core-layout-subnav .button-hover-gradient .core-layout-subnav__nav-toggle-bar {
    position: relative;
    z-index: 1;
}

/* Navegação: [‹] pills [›]. As setas são acrescentadas por
   core-layouts.js (sem JS, só scroll nativo/swipe): visíveis sempre que a
   linha não cabe, inativas no lado em que já não há mais itens. */
.core-layout-subnav__nav {
    display: flex;
    flex: 1 1 auto;
    align-items: center;
    gap: var(--core-spacing-xs, 6px);
    min-width: 0;
}

.core-layout-subnav__nav > .adsi-subnav-grid-outside {
    flex: 1 1 auto;
    min-width: 0;
}

/* 'nav_align' => 'end': empurra as pills para a direita da barra (espaço
   vazio à esquerda), em vez do alinhamento à esquerda por omissão — só faz
   sentido com um número fixo de itens (nav_mode 'collapse'), nunca com
   scroll/setas, onde o espaço à esquerda pareceria "mais itens escondidos". */
.core-layout-subnav__nav--align-end .adsi-subnav-grid > ul {
    justify-content: flex-end;
}

.core-layout-subnav .core-layout-subnav__arrow[hidden] {
    display: none;
}

/* Seta sem mais itens desse lado: visível mas inativa (disabled — fora do
   requisito de contraste, WCAG 1.4.3/1.4.11). */
.core-layout-subnav .core-layout-subnav__arrow:disabled {
    opacity: 0.35;
    cursor: default;
    transform: none;
    box-shadow: none;
}

.core-layout-subnav .core-layout-subnav__arrow:disabled::before {
    opacity: 0;
}

/* Esbatimento na ponta onde ainda há itens — pista visual de "há mais". */
.core-layout-subnav__nav.has-more-end .adsi-subnav-grid > ul {
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 2.5rem), transparent);
    mask-image: linear-gradient(to right, #000 calc(100% - 2.5rem), transparent);
}

.core-layout-subnav__nav.has-more-start .adsi-subnav-grid > ul {
    -webkit-mask-image: linear-gradient(to left, #000 calc(100% - 2.5rem), transparent);
    mask-image: linear-gradient(to left, #000 calc(100% - 2.5rem), transparent);
}

.core-layout-subnav__nav.has-more-start.has-more-end .adsi-subnav-grid > ul {
    -webkit-mask-image: linear-gradient(to right, transparent, #000 2.5rem, #000 calc(100% - 2.5rem), transparent);
    mask-image: linear-gradient(to right, transparent, #000 2.5rem, #000 calc(100% - 2.5rem), transparent);
}

/* 3 classes (em vez de 2) de propósito: adsicore.css enfileira-se depois de
   core-layouts.css (prioridade 100 vs 10 em wp_enqueue_scripts) e a sua regra
   ".subpage-nav-outside .adsi-subnav-grid" (margin-bottom 32px, pensada para
   [subpage_nav] solto no conteúdo) tem a mesma especificidade — sem isto
   ganhava por ordem de carregamento, mesmo depois deste reset. */
.core-layout-subnav .core-layout-subnav__bar .adsi-subnav-grid-outside,
.core-layout-subnav .core-layout-subnav__bar .adsi-subnav-grid {
    margin: 0;
}

/* Padding também: temas que espaçam o [subpage_nav] solto no conteúdo
   (cm-sabugal, style.css do tema filho: ".adsi-subnav-grid-outside
   { padding: 50px 0 }") inchavam a barra para ~130px. */
.core-layout-subnav .core-layout-subnav__bar .adsi-subnav-grid-outside {
    padding: 0;
}

.core-layout-subnav .adsi-subnav-grid > ul {
    display: flex;
    flex-wrap: nowrap;
    gap: var(--core-spacing-sm, 8px);
    margin: 0;
    padding: 4px 2px;
    list-style: none;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x proximity;
    /* Ao navegar por Tab, o browser só desloca o item focado até à borda —
       ficaria dentro da zona esbatida (mask-image, 2.5rem), com o texto e o
       contorno de foco sem contraste (WCAG 1.4.3 / 2.4.11). Esta margem
       deixa-o sempre fora do esbatimento. */
    scroll-padding-inline: 2.75rem;
    scrollbar-width: thin;
}

/* Com as setas ‹ › (core-layouts.js marca o <nav> com data-core-arrows), a
   barra de scroll é redundante: as setas e o esbatimento já indicam que há
   mais pills. O scroll continua (swipe, trackpad, Tab). Sem JS fica a barra
   — é a única pista de que a linha continua. */
.core-layout-subnav__nav[data-core-arrows] .adsi-subnav-grid > ul {
    scrollbar-width: none;
}

.core-layout-subnav__nav[data-core-arrows] .adsi-subnav-grid > ul::-webkit-scrollbar {
    display: none;
}

/* Pills da barra = links com classes de CoreButtons (CoreLayouts::subnav_buttonize_items()):
   cores do tipo (Componentes → Pílulas; vazio = tipo dos Botões), raio
   --core-btn-radius, tamanho/tipografia/bordo/sublinhado/hover de Componentes →
   Botões. Página atual = variante oposta (preenchida nos Outline, contorno nos
   restantes). Estas regras (0,4,3) só repõem o que o tema e a regra base das
   pills em adsicore.css (para [subpage_nav] solto) impõem a <a> genéricos —
   ex.: tema filho cm-sabugal ".adsi-subnav-grid > ul li a" (padding 20px, raio 5px). */
.core-layout-subnav .adsi-subnav-grid > ul > li > a.core-button {
    width: auto;
    height: auto;
    min-height: 44px;
    border-radius: var(--core-btn-radius, 0.375rem);
}

.core-layout-subnav .adsi-subnav-grid > ul > li > a.core-button--md {
    padding: 0.625rem 1.25rem;
}

.core-layout-subnav .adsi-subnav-grid > ul > li > a.core-button--lg {
    padding: 0.875rem 1.75rem;
}

.core-layout-subnav .adsi-subnav-grid > ul > li {
    flex: 0 0 auto;
    margin: 0;
    padding: 0;
    scroll-snap-align: start;
}

.core-layout-subnav .adsi-subnav-grid > ul > li > a {
    white-space: nowrap;
}

/* Painel de pesquisa: por baixo da barra, largura toda. Fechado = 'inert'
   (CoreToggle) + display:none. */
.core-layout-subnav__search {
    padding-top: var(--core-spacing-sm, 0.75rem);
}

.core-layout-subnav__search:not(.is-open) {
    display: none;
}

/* ── Faixa da pesquisa "sempre visível" (CoreLayouts::search_band()) ──
 * Por baixo da linha da barra, a toda a largura, com o conteúdo na largura
 * do site. A barra perde a margem de baixo (passa para esta faixa). O
 * formulário perde o cartão próprio (design "Painel" do [usearch] / dos
 * Eventos): a faixa já é o painel. */
.core-layout-subnav-band.has-search-band {
    margin-bottom: 0;
}

.core-layout-search-band {
    padding-block: var(--core-subnav-search-padding-block, var(--core-spacing-md, 1.25rem));
    margin-bottom: var(--core-subnav-margin-bottom, var(--core-block-margin, 1.5rem));
    background: var(--core-subnav-search-bg, #f8f9fa);
    border-bottom: var(--core-border-width, 1px) solid var(--core-subnav-border-color, var(--core-color-gray-light, #e5e7eb));
}

.core-layout-hero + .core-layout-search-band {
    margin-top: calc(-1 * var(--core-block-margin, 1.5rem));
}

.core-layout-search-band > .core-layout-hero__inner {
    padding-block: 0;
}

.core-layout-search-band :is(.usearch.usearch--material, .eventos-top-search.eventos-search--material) {
    padding: 0;
    background: none;
    border: 0;
    border-radius: 0;
    box-shadow: none;
}

.core-layout-search-band :is(.usearch, .eventos-search, form) {
    margin: 0;
}

/* Botão alinhado com os campos (não com campo + etiqueta) e da mesma altura. */
.core-layout-search-band .eventos-search--inline .eventos-search__actions {
    align-self: flex-end;
}

.core-layout-search-band .eventos-search--inline .eventos-search__submit {
    height: auto;
    min-height: var(--usearch-height, 3rem);
}

/* Pesquisa fixa dentro do <nav> (temas que só usam subnav()):
   sem barra por cima (sem regressar nem pílulas), não precisa do espaço. */
.core-layout-subnav__search--fixed:first-child {
    padding-top: 0;
}

.core-layout-subnav__search .usearch {
    margin: 0;
}

/* ── Navegação colapsável (subnav 'nav_mode' => 'collapse') ───────────
 * Para um número fixo e pequeno de itens (ex: Agenda/Calendário/Arquivo em
 * eventos), em vez do scroll horizontal + setas pensado para pills
 * dinâmicas: em ecrãs estreitos esconde a lista por trás de um botão
 * hambúrguer (core-layouts.js liga o abrir/fechar). Em ecrãs largos a lista
 * fica visível como as pills normais — o botão nunca aparece.
 *
 * ".core-layout-subnav__tool" (2 classes, acima) já põe display:inline-flex
 * neste botão (é também um .core-layout-subnav__tool) — por isso o reset
 * aqui precisa da mesma especificidade (".core-layout-subnav
 * .core-layout-subnav__nav-toggle"), não "display:none" isolado. */
.core-layout-subnav .core-layout-subnav__nav-toggle {
    display: none;
}

@media (max-width: 767px) {
    .core-layout-subnav .core-layout-subnav__nav-toggle {
        display: inline-flex;
    }

    .core-layout-subnav__nav-toggle-bar {
        display: block;
        width: 18px;
        height: 2px;
        margin: 2px 0;
        background: currentColor;
        border-radius: 1px;
    }

    .core-layout-subnav__nav--collapse {
        display: none;
        position: absolute;
        inset-inline: 0;
        top: 100%;
        z-index: 20;
        padding: var(--core-spacing-sm, 0.75rem);
        background: var(--core-color-white, #fff);
        border: var(--core-border-width, 1px) solid var(--core-color-gray-light, #e5e7eb);
        border-radius: var(--core-radius, 8px);
        box-shadow: 0 8px 16px rgb(0 0 0 / 0.12);
    }

    .core-layout-subnav__nav--collapse.is-open {
        display: block;
    }

    .core-layout-subnav__nav--collapse .adsi-subnav-grid > ul {
        flex-direction: column;
        overflow: visible;
    }

    .core-layout-subnav__nav--collapse .adsi-subnav-grid > ul > li > a {
        display: block;
        white-space: normal;
    }
}

/* ── Contactos + horários lado a lado ─────────────────── */
.core-layout-info {
    display: grid;
    gap: var(--core-gap, 1.5rem);
    margin-block: var(--core-block-margin, 1.5rem);
}

.core-layout-info > * {
    margin: 0;
}

@media (min-width: 768px) {
    .core-layout-info:has(> :nth-child(2)) {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* ── Sub-página (layout "separador") ───────────────────── */
.core-layout-separador .subpage-nav-wrapper {
    margin-bottom: var(--core-block-margin, 1.5rem);
}

/* nav_mode 'icons' (CoreLayouts::subnav()): no telemóvel as pills ficam só com
   o ícone — mesmo modo compacto dos botões nos rodapés dos carrosséis
   (adsicore.css, .core-button--compact): texto fora da vista mas continua a
   ser o nome acessível do link; alvo de 44px (WCAG 2.5.5). O ícone de
   telemóvel (.core-button__icon--compact) está escondido fora disto. */
@media (max-width: 767px) {
    .core-layout-subnav .core-layout-subnav__nav--icons .adsi-subnav-grid > ul > li > a.core-button {
        width: 44px;
        min-width: 44px;
        height: 44px;
        min-height: 44px;
        padding: 0;
        gap: 0;
    }

    .core-layout-subnav__nav--icons .core-button .core-button__text {
        position: absolute !important;
        width: 1px;
        height: 1px;
        padding: 0;
        margin: -1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
        border: 0;
    }

    .core-layout-subnav__nav--icons .core-button .core-button__icon--compact {
        display: inline-block;
    }
}