/*
 * 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 (--core-hero-image,
 * posta inline por CoreLayouts::hero_style()) 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 Apresentação → Hero dos Layouts
   (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 {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: var(--core-hero-scrim);
}

/* --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;
}

.core-layout-hero__title {
    margin: 0;
    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. */
.core-layout-subnav-band {
    padding-block: var(--core-spacing-sm, 0.75rem);
    margin-bottom: var(--core-block-margin, 1.5rem);
    border-bottom: var(--core-border-width, 1px) solid var(--core-color-gray-light, #e5e7eb);
}

.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__tool:focus,
.core-layout-subnav .core-layout-subnav__arrow,
.core-layout-subnav .core-layout-subnav__arrow:focus {
    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;
    text-decoration: none;
    color: var(--core-color-primary, #2c5f8d);
    background: transparent;
    border: var(--core-btn-border-width, var(--core-border-width, 1px)) solid var(--core-color-primary, #2c5f8d);
    border-radius: var(--core-border-radius-full, 9999px);
    box-shadow: none;
    cursor: pointer;
}

.core-layout-subnav .core-layout-subnav__tool:hover,
.core-layout-subnav .core-layout-subnav__tool:focus-visible,
.core-layout-subnav .core-layout-subnav__tool[aria-expanded="true"],
.core-layout-subnav .core-layout-subnav__arrow:not(:disabled):hover,
.core-layout-subnav .core-layout-subnav__arrow:not(:disabled):focus-visible {
    color: var(--core-color-white, #fff);
    background: var(--core-color-primary, #2c5f8d);
    border-color: var(--core-color-primary, #2c5f8d);
}

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

/* 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;
}

/* 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;
}

.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;
}

/* Tipo das pills da barra = cores do CoreButtons (Apresentação → Hero dos
   Layouts → core_subnav_pill_type; classe posta por CoreLayouts::subnav(),
   outline-dark por omissão). A página atual fica sempre distinta: preenchida
   nos Outline, em contorno sobre branco nos Primary/Secondary. Com prefixo
   "nav." para vencer as regras base das pills em adsicore.css (0,3,3).
   Contraste (WCAG 1.4.3): o fundo branco dos Primary/Secondary atuais e
   do hover Outline Light garante o texto na cor principal legível; o
   Outline Dark assenta no fundo da faixa (claro). Substitui a antiga regra
   de fundo branco das pills cinzentas (#1e73be sobre #f4f4f4 = 4.49:1). */
nav.core-layout-subnav--pills-outline-dark .adsi-subnav-grid > ul > li > a {
    background: transparent;
    color: var(--core-color-primary, #2c5f8d);
    border-color: var(--core-color-primary, #2c5f8d);
}

nav.core-layout-subnav--pills-outline-dark .adsi-subnav-grid > ul > li > a:hover,
nav.core-layout-subnav--pills-outline-dark .adsi-subnav-grid > ul > li > a:focus-visible,
nav.core-layout-subnav--pills-outline-dark .adsi-subnav-grid > ul > li.current-page > a {
    background: var(--core-color-primary, #2c5f8d);
    color: var(--core-color-white, #fff);
    border-color: var(--core-color-primary, #2c5f8d);
}

nav.core-layout-subnav--pills-outline-light .adsi-subnav-grid > ul > li > a {
    background: transparent;
    color: var(--core-color-white, #fff);
    border-color: var(--core-color-white, #fff);
}

nav.core-layout-subnav--pills-outline-light .adsi-subnav-grid > ul > li > a:hover,
nav.core-layout-subnav--pills-outline-light .adsi-subnav-grid > ul > li > a:focus-visible,
nav.core-layout-subnav--pills-outline-light .adsi-subnav-grid > ul > li.current-page > a {
    background: var(--core-color-white, #fff);
    color: var(--core-color-primary, #2c5f8d);
    border-color: var(--core-color-white, #fff);
}

nav.core-layout-subnav--pills-primary .adsi-subnav-grid > ul > li > a {
    background: var(--core-color-primary, #2c5f8d);
    color: var(--core-color-white, #fff);
    border-color: var(--core-color-primary, #2c5f8d);
}

nav.core-layout-subnav--pills-primary .adsi-subnav-grid > ul > li > a:hover,
nav.core-layout-subnav--pills-primary .adsi-subnav-grid > ul > li > a:focus-visible {
    background: color-mix(in srgb, var(--core-color-primary, #2c5f8d) 85%, black);
    border-color: color-mix(in srgb, var(--core-color-primary, #2c5f8d) 85%, black);
    color: var(--core-color-white, #fff);
}

nav.core-layout-subnav--pills-primary .adsi-subnav-grid > ul > li.current-page > a {
    background: var(--core-color-white, #fff);
    color: var(--core-color-primary, #2c5f8d);
    border-color: var(--core-color-primary, #2c5f8d);
}

nav.core-layout-subnav--pills-secondary .adsi-subnav-grid > ul > li > a {
    background: var(--core-color-secondary, #b8860b);
    color: var(--core-color-white, #fff);
    border-color: var(--core-color-secondary, #b8860b);
}

nav.core-layout-subnav--pills-secondary .adsi-subnav-grid > ul > li > a:hover,
nav.core-layout-subnav--pills-secondary .adsi-subnav-grid > ul > li > a:focus-visible {
    background: color-mix(in srgb, var(--core-color-secondary, #b8860b) 85%, black);
    border-color: color-mix(in srgb, var(--core-color-secondary, #b8860b) 85%, black);
    color: var(--core-color-white, #fff);
}

nav.core-layout-subnav--pills-secondary .adsi-subnav-grid > ul > li.current-page > a {
    background: var(--core-color-white, #fff);
    color: color-mix(in srgb, var(--core-color-secondary, #b8860b) 70%, black);
    border-color: var(--core-color-secondary, #b8860b);
}

/* Ferramentas (regressar, pesquisa, ☰) e setas seguem o mesmo tipo das
   pills; "ativo" (painel aberto, aria-expanded) = destaque da página atual.
   Forma: sempre círculo (só ícone, alvo 44px). :focus incluído porque a
   regra base acima também o lista (0,3,0). Setas inativas: só opacidade. */

nav.core-layout-subnav--pills-outline-dark .core-layout-subnav__tool,
nav.core-layout-subnav--pills-outline-dark .core-layout-subnav__tool:focus,
nav.core-layout-subnav--pills-outline-dark .core-layout-subnav__arrow,
nav.core-layout-subnav--pills-outline-dark .core-layout-subnav__arrow:focus {
    background: transparent;
    color: var(--core-color-primary, #2c5f8d);
    border-color: var(--core-color-primary, #2c5f8d);
}

nav.core-layout-subnav--pills-outline-dark .core-layout-subnav__tool:hover,
nav.core-layout-subnav--pills-outline-dark .core-layout-subnav__tool:focus-visible,
nav.core-layout-subnav--pills-outline-dark .core-layout-subnav__arrow:not(:disabled):hover,
nav.core-layout-subnav--pills-outline-dark .core-layout-subnav__arrow:not(:disabled):focus-visible {
    background: var(--core-color-primary, #2c5f8d);
    color: var(--core-color-white, #fff);
    border-color: var(--core-color-primary, #2c5f8d);
}

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

nav.core-layout-subnav--pills-outline-light .core-layout-subnav__tool,
nav.core-layout-subnav--pills-outline-light .core-layout-subnav__tool:focus,
nav.core-layout-subnav--pills-outline-light .core-layout-subnav__arrow,
nav.core-layout-subnav--pills-outline-light .core-layout-subnav__arrow:focus {
    background: transparent;
    color: var(--core-color-white, #fff);
    border-color: var(--core-color-white, #fff);
}

nav.core-layout-subnav--pills-outline-light .core-layout-subnav__tool:hover,
nav.core-layout-subnav--pills-outline-light .core-layout-subnav__tool:focus-visible,
nav.core-layout-subnav--pills-outline-light .core-layout-subnav__arrow:not(:disabled):hover,
nav.core-layout-subnav--pills-outline-light .core-layout-subnav__arrow:not(:disabled):focus-visible {
    background: var(--core-color-white, #fff);
    color: var(--core-color-primary, #2c5f8d);
    border-color: var(--core-color-white, #fff);
}

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

nav.core-layout-subnav--pills-primary .core-layout-subnav__tool,
nav.core-layout-subnav--pills-primary .core-layout-subnav__tool:focus,
nav.core-layout-subnav--pills-primary .core-layout-subnav__arrow,
nav.core-layout-subnav--pills-primary .core-layout-subnav__arrow:focus {
    background: var(--core-color-primary, #2c5f8d);
    color: var(--core-color-white, #fff);
    border-color: var(--core-color-primary, #2c5f8d);
}

nav.core-layout-subnav--pills-primary .core-layout-subnav__tool:hover,
nav.core-layout-subnav--pills-primary .core-layout-subnav__tool:focus-visible,
nav.core-layout-subnav--pills-primary .core-layout-subnav__arrow:not(:disabled):hover,
nav.core-layout-subnav--pills-primary .core-layout-subnav__arrow:not(:disabled):focus-visible {
    background: color-mix(in srgb, var(--core-color-primary, #2c5f8d) 85%, black);
    color: var(--core-color-white, #fff);
    border-color: color-mix(in srgb, var(--core-color-primary, #2c5f8d) 85%, black);
}

nav.core-layout-subnav--pills-primary .core-layout-subnav__tool[aria-expanded="true"] {
    background: var(--core-color-white, #fff);
    color: var(--core-color-primary, #2c5f8d);
    border-color: var(--core-color-primary, #2c5f8d);
}

nav.core-layout-subnav--pills-secondary .core-layout-subnav__tool,
nav.core-layout-subnav--pills-secondary .core-layout-subnav__tool:focus,
nav.core-layout-subnav--pills-secondary .core-layout-subnav__arrow,
nav.core-layout-subnav--pills-secondary .core-layout-subnav__arrow:focus {
    background: var(--core-color-secondary, #b8860b);
    color: var(--core-color-white, #fff);
    border-color: var(--core-color-secondary, #b8860b);
}

nav.core-layout-subnav--pills-secondary .core-layout-subnav__tool:hover,
nav.core-layout-subnav--pills-secondary .core-layout-subnav__tool:focus-visible,
nav.core-layout-subnav--pills-secondary .core-layout-subnav__arrow:not(:disabled):hover,
nav.core-layout-subnav--pills-secondary .core-layout-subnav__arrow:not(:disabled):focus-visible {
    background: color-mix(in srgb, var(--core-color-secondary, #b8860b) 85%, black);
    color: var(--core-color-white, #fff);
    border-color: color-mix(in srgb, var(--core-color-secondary, #b8860b) 85%, black);
}

nav.core-layout-subnav--pills-secondary .core-layout-subnav__tool[aria-expanded="true"] {
    background: var(--core-color-white, #fff);
    color: color-mix(in srgb, var(--core-color-secondary, #b8860b) 70%, black);
    border-color: var(--core-color-secondary, #b8860b);
}

.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;
}

.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-border-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);
}