/* Institutional pages. Tokens only; palettes stay in visual-styles.css. */
.institutional-main { overflow-x: clip; }
.institutional-main .entry-content > * + * { margin-top: 0; }
.institutional-main > article > .page-heading { padding-top: var(--space-section); }

.page-hero { background: var(--rituais-bg-alt); padding-block: clamp(3.25rem, 8vw, 6.5rem); }
.page-hero-grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: clamp(1.5rem, 5vw, 4.5rem); align-items: center; }
.page-hero.is-text-only .page-hero-grid { grid-template-columns: minmax(0, 46rem); }
.page-hero .eyebrow:before { content: ""; display: inline-block; width: var(--rituais-rule-width); height: 1px; margin-right: .85rem; vertical-align: middle; background: var(--rituais-accent); }
.page-hero h1 { max-width: 14ch; margin: .4rem 0 1rem; font-size: clamp(2.6rem, 5vw, 4.6rem); }
.page-hero p { max-width: 38rem; margin-bottom: 1.6rem; color: var(--rituais-text-muted); font-size: 1.05rem; }
.page-hero-media img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; background: var(--rituais-surface-premium); }

.institutional-band { width: min(var(--container), calc(100% - var(--gutter) * 2)); margin-inline: auto; padding-block: var(--space-section); }
.institutional-band > * + * { margin-top: 1.25rem; }
.institutional-band h2 { margin-bottom: .8rem; }
.institutional-band h3 { margin-bottom: .55rem; }
.institutional-band p { color: var(--rituais-text-muted); }
.institutional-band a { color: var(--rituais-link); text-decoration: underline; text-underline-offset: .2em; }
.institutional-band .wp-block-columns { gap: clamp(1.25rem, 3vw, 2.5rem); }
.institutional-band .wp-block-button__link { text-decoration: none; }

.contact-details h2 { margin-bottom: 1rem; }
.contact-intro { max-width: 36rem; margin-bottom: 1.6rem; color: var(--rituais-text-muted); }
.contact-layout { display: grid; gap: clamp(1.5rem, 4vw, 3.5rem); }
.contact-layout.has-map { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); align-items: start; }
.contact-list { margin: 0; }
.contact-list > div + div { margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--rituais-border); }
.contact-list dt { color: var(--rituais-eyebrow); font-size: .72rem; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; }
.contact-list dd { margin: .25rem 0 0; }
.contact-list address { font-style: normal; }
.contact-list a, .contact-social a { color: var(--rituais-link); text-decoration: underline; text-underline-offset: .2em; }
.contact-social { display: flex; flex-wrap: wrap; gap: .4rem 1.4rem; list-style: none; margin: 1.4rem 0 0; padding: 0; }
.contact-map iframe { width: 100%; aspect-ratio: 4 / 3; min-height: 240px; border: 1px solid var(--rituais-border); background: var(--rituais-bg-alt); }

@media (max-width: 767px) {
 .page-hero-grid, .contact-layout.has-map { grid-template-columns: 1fr; }
 .page-hero h1 { font-size: clamp(2.35rem, 10vw, 3.4rem); }
 .page-hero-media img { aspect-ratio: 3 / 2; }
 .institutional-band .wp-block-columns { flex-direction: column; }
}

/* Mobile density: preserve tablet/desktop composition and editorial content. */
@media (max-width: 767px) {
 .page-hero { padding-block:2.5rem; }
 .page-hero-grid { gap:var(--rituais-mobile-gap); }
 .page-hero p { margin-bottom:1.25rem; }
}

/* --------------------------------------------------------------------------
   Página 588 — «Como utilizar o Portal».
   
   A secção de funcionalidades (bloco editorial-grid) é uma banda de largura
   total com fundo próprio, tal como o Hero. O conteúdo interior, porém,
   alinhava-se pelo padding-inline fixo da componente (clamp(1.5rem,4vw,3.5rem))
   e não pelo contentor central do tema, ficando desalinhado face ao Hero, às
   secções editoriais seguintes, ao FAQ e ao rodapé.
   
   Aqui o padding-inline reproduz exactamente a margem lateral do contentor
   central do tema — max(--gutter, (100% - var(--container)) / 2) — mantendo a
   banda com 100% da largura. O ritmo vertical do título para a descrição usa o
   mesmo valor já aplicado pelo tema nas secções editoriais.
   
   Aplica-se apenas a esta página (page-id-588); nenhuma outra página muda.
   -------------------------------------------------------------------------- */
.page-id-588 .entry-content .re-section {
  padding-inline: max( var(--gutter), calc((100% - var(--container)) / 2) );
}

.page-id-588 .entry-content .re-section h2 + p {
  margin-top: 1.25rem;
}
/* --------------------------------------------------------------------------
   Página 588 — «Como utilizar o Portal»: secção «Perguntas frequentes».
   
   O bloco de FAQ é um grupo Gutenberg sem qualquer padding-block, pelo que
   colava à secção editorial anterior e ao CTA final sem respiração vertical.
   Aqui usa-se o mesmo token institucional e o mesmo padrão já aplicado pelo
   tema à secção equivalente da página «Portal & App» (portal-app.css).
   -------------------------------------------------------------------------- */
.page-id-588 #perguntas-frequentes {
  padding-block: var(--space-section);
}