/*
 * Estilos compartilhados por páginas internas (Instituto e as que vierem a
 * seguir no Sprint 5): Subpage Hero + padrões de seção reutilizáveis.
 * Cores pixel-sampled em 2026-08-09 no node 263:2 — todas bateram com
 * tokens já existentes, nenhuma nova.
 */

/* Chips de filtro (Notícias por editoria, Eventos por ano) */

.ibdmar-chip-filters {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sp-8);
	margin-bottom: var(--sp-32);
}

.ibdmar-chip {
	display: inline-flex;
	align-items: center;
	padding: var(--sp-8) var(--sp-16);
	border-radius: 999px;
	border: 1px solid var(--color-border-default);
	background: var(--color-surface-primary);
	color: var(--color-text-heading);
	font: var(--text-caption);
	text-decoration: none;
	white-space: nowrap;
}

.ibdmar-chip:hover {
	border-color: var(--color-secondary);
	color: var(--color-secondary);
}

.ibdmar-chip.is-active {
	background: var(--color-secondary);
	border-color: var(--color-secondary);
	color: var(--color-text-inverse);
}

/* Subpage Hero */

.ibdmar-subpage-hero {
	/* 2026-09-05: min-height baixado de 520 pra 360px (menos esticamento das
	   fotos nativas de 290px) e overlay de 0.28 pra 0.14.
	   2026-09-16: as 5 fotos mais usadas (padrão, Notícias, Associados, Rede,
	   Publicações) foram trocadas por fotos novas, nítidas e vivas (pedido da
	   Letícia) — e o overlay uniforme virou gradiente esquerda→direita, mesma
	   técnica aplicada no Hero da Home no mesmo dia: só a faixa onde o texto
	   (breadcrumb + título) fica precisa de contraste, o resto da foto fica
	   sem véu escuro por cima. */
	background-image: linear-gradient(90deg, rgba(16, 40, 61, 0.6) 0%, rgba(16, 40, 61, 0.4) 25%, rgba(16, 40, 61, 0.1) 45%, rgba(16, 40, 61, 0) 60%), var(--ibdmar-hero-bg);
	background-color: var(--color-brand-primary);
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}

/* 2026-09-29 (performance): a MESMA foto em WebP, quando existe
   ("<nome>.webp" ao lado do JPG — ver ibdmar_hero_bg_style() em
   inc/enqueue.php). O hero é a maior imagem de cada página e trava a
   primeira pintura; em WebP ele cai pela metade sem diferença visível
   (Home 2,4 MB → 1,5 MB).

   Por que @supports e não trocar a linha acima: image-set() não existe em
   Safari < 17 nem em navegadores antigos. Se a declaração fosse única e o
   navegador não entendesse a função, a propriedade inteira seria descartada
   e o hero ficaria SEM foto nenhuma. Dentro do @supports, quem não suporta
   simplesmente ignora o bloco e continua com o JPG declarado acima.

   O var() tem fallback duplo (…-set, …-bg) de propósito: se um dia um hero
   novo entrar sem que o PHP defina a variável, a regra ainda resolve para o
   JPG em vez de zerar o fundo. */
@supports (background-image: image-set(url("x.webp") type("image/webp"))) {
	.ibdmar-subpage-hero {
		background-image: linear-gradient(90deg, rgba(16, 40, 61, 0.6) 0%, rgba(16, 40, 61, 0.4) 25%, rgba(16, 40, 61, 0.1) 45%, rgba(16, 40, 61, 0) 60%), var(--ibdmar-hero-bg-set, var(--ibdmar-hero-bg));
	}

	/* 2026-09-29: a mesma foto reduzida para 1920px de largura
	   ("<nome>-desktop.webp"). Até aqui só havia duas pontas — a versão de
	   celular (abaixo de 768px) e o arquivo de 3000–3840px para todo o
	   resto. Ou seja: um notebook comum de 1366 ou 1920px baixava a foto
	   inteira em 4K para mostrar, no máximo, 1920 pixels dela.

	   Quando 1920px basta: a foto ocupa a largura da tela, então o que ela
	   precisa ter é (largura da janela × densidade da tela) pixels reais.
	     · janela de até 1920px numa tela comum  → 1920 × 1 = 1920 ✓
	     · janela de até  960px numa tela retina →  960 × 2 = 1920 ✓
	   Fora desses dois casos (monitor grande, notebook retina de 1440px),
	   a regra não vale e o navegador segue com o arquivo grande declarado
	   logo acima — que continua sendo o melhor que temos.

	   As duas condições estão separadas por vírgula porque a segunda não
	   depende de max-resolution, que só existe no Safari 16 pra cima. Num
	   Safari antigo a primeira condição simplesmente não casa e a foto
	   grande é usada: pesado, mas correto — nunca o contrário. */
	@media (min-width: 768px) and (max-width: 1920px) and (max-resolution: 1.5dppx),
		(min-width: 768px) and (max-width: 960px) {
		.ibdmar-subpage-hero {
			background-image: linear-gradient(90deg, rgba(16, 40, 61, 0.6) 0%, rgba(16, 40, 61, 0.4) 25%, rgba(16, 40, 61, 0.1) 45%, rgba(16, 40, 61, 0) 60%), var(--ibdmar-hero-bg-desktop, var(--ibdmar-hero-bg-set, var(--ibdmar-hero-bg)));
		}
	}
}

.ibdmar-subpage-hero__inner {
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: var(--sp-16);
	min-height: 360px;
	padding-block: var(--sp-32);
}

.ibdmar-breadcrumb {
	display: flex;
	align-items: center;
	gap: var(--sp-8);
	font: var(--text-caption);
	color: rgba(255, 255, 255, 0.85);
	/* 2026-09-16: mesma sombra leve do Hero da Home, pro texto não sumir nas
	   fotos novas mais claras/coloridas. */
	text-shadow: 0 2px 8px rgba(16, 40, 61, 0.55);
}

.ibdmar-breadcrumb a {
	color: rgba(255, 255, 255, 0.85);
	text-decoration: none;
	/* 2026-09-24 (áreas de toque): o link tinha só ~18px de altura (a altura
	   do texto), difícil de acertar com o dedo. padding-block aumenta a área
	   clicável pra ~42px e o margin-block negativo desconta o mesmo valor —
	   o link fica maior pro toque sem empurrar nada do layout. Mesmo truque
	   usado nos outros links pequenos do tema (rodapé, "Esqueci minha senha",
	   breadcrumb do artigo). */
	display: inline-block;
	padding-block: 12px;
	margin-block: -12px;
}

.ibdmar-breadcrumb a:hover {
	color: var(--color-text-inverse);
}

.ibdmar-breadcrumb__current {
	color: var(--color-text-inverse);
}

.ibdmar-subpage-hero__title {
	margin: 0;
	font: var(--text-h1);
	color: var(--color-text-inverse);
	text-shadow: 0 2px 10px rgba(16, 40, 61, 0.55);
}

/* Cabeçalho de seção genérico (título centralizado, não itálico — diferente
   do título de seção da Home) */

.ibdmar-page-section {
	padding-block: var(--sp-48);
}

.ibdmar-page-section__title {
	text-align: center;
	margin: 0 0 var(--sp-24);
	font: var(--text-h2);
	color: var(--color-text-heading);
}

.ibdmar-page-section__lead {
	max-width: 900px;
	margin-inline: auto;
	text-align: center;
	color: var(--color-text-secondary);
}

.ibdmar-page-section__lead p {
	margin: 0 0 var(--sp-16);
}

/* Corpo de texto substancial (Quem Somos/Nossa História/Nossa Missão do
   Instituto — vários parágrafos reais, não um blurb de 1 frase como Rede/
   Estatuto usam com __lead). Bate com o Figma (node 263:67/263:100):
   largura cheia do container, alinhado à esquerda, sem centralizar — o
   __lead centralizado/900px ficava "desorganizado" pra texto desse
   tamanho (achado 2026-08-28, revisão pedida pelo Ranyer/equipe do
   Instituto). */
.ibdmar-page-section__body {
	font: var(--text-body-large);
	color: var(--color-text-secondary);
}

.ibdmar-page-section__body p {
	margin: 0 0 var(--sp-16);
}

.ibdmar-page-section__body p:last-child {
	margin-bottom: 0;
}

.ibdmar-page-section--subtle {
	background: var(--color-background-subtle);
}

/* Página Legal (Política de Privacidade, Termos de Uso) — corpo de texto
   simples, largura de leitura confortável, alinhado à esquerda. */
.ibdmar-legal-content {
	max-width: 780px;
	margin-inline: auto;
}

/* Corpo de conteúdo (the_content()) reutilizável fora de Notícias — já existia
   duplicado em noticias.css; aqui fica disponível a qualquer template que
   carregue subpage.css (Eventos, Publicações, etc.), sem repetir o load. */
.ibdmar-article__content {
	color: var(--color-text-secondary);
}

.ibdmar-article__content p {
	margin-bottom: var(--sp-16);
	font: var(--text-body-large);
}

.ibdmar-article__content blockquote {
	margin: var(--sp-32) 0;
	padding: var(--sp-24);
	border-radius: 8px;
	background: var(--color-background-subtle);
	font: var(--text-h5);
	font-style: italic;
	color: var(--color-text-heading);
}

.ibdmar-article__content blockquote p {
	margin: 0;
	font: inherit;
}

/* Diretoria */

.ibdmar-people-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: var(--sp-24);
	margin-top: var(--sp-24);
}

.ibdmar-people-card {
	border: 1px solid var(--color-border-default);
	border-radius: 12px;
	overflow: hidden;
	background: var(--color-surface-primary);
}

/* Com foto, é a moldura de imagem inteira (inc/moldura.php); sem foto, o
   <span> vazio de sempre. */
/* 3:2 pelo padrão de imagem do site (era 220px fixos, ~342x220). */
.ibdmar-people-card__photo {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 3 / 2;
	background: var(--color-brand-primary-light);
}

.ibdmar-people-card__body {
	padding: var(--sp-16);
}

.ibdmar-people-card__name {
	margin: 0 0 var(--sp-4);
	font: var(--text-body-emphasis);
	color: var(--color-text-heading);
}

.ibdmar-people-card__role {
	margin: 0;
	font: var(--text-caption);
	color: var(--color-secondary);
}

.ibdmar-people-card__lattes {
	display: inline-block;
	margin-top: var(--sp-8);
	font: var(--text-caption);
	color: var(--color-text-tertiary);
	text-decoration: none;
}

.ibdmar-people-card__lattes:hover {
	color: var(--color-secondary);
}

/* Conselho Fiscal — mesmo cartão da Diretoria (.ibdmar-people-grid/__card),
   reaproveitado; só precisa do espaçamento entre as duas sub-seções, que
   antes vinha de um style="margin-top" solto no HTML (2026-08-28). */

.ibdmar-institucional-subsection {
	margin-top: var(--sp-48);
}

/* Pilares (reaproveita o card de 3 colunas também usado nos memoriais) */

.ibdmar-pilares-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--sp-24);
	margin-top: var(--sp-24);
}

.ibdmar-pilar-card {
	text-align: center;
	padding: var(--sp-24);
}

.ibdmar-pilar-card__icon {
	display: block;
	margin: 0 auto var(--sp-16);
	color: var(--color-secondary);
}

.ibdmar-pilar-card__title {
	margin: 0 0 var(--sp-8);
	font: var(--text-h5);
	color: var(--color-text-heading);
}

.ibdmar-pilar-card__desc {
	margin: 0;
	color: var(--color-text-secondary);
	font: var(--text-body-default);
}

/* Fale Conosco */

.ibdmar-contact-grid {
	display: grid;
	grid-template-columns: 1.5fr 1fr;
	gap: var(--sp-48);
	margin-top: var(--sp-24);
}

.ibdmar-contact-form__title {
	margin: 0 0 var(--sp-16);
	font: var(--text-h4);
	color: var(--color-text-heading);
}

.ibdmar-contact-form .ibdmar-footer__field {
	margin-bottom: var(--sp-16);
}

.ibdmar-contact-form__status {
	margin: 0 0 var(--sp-16);
	padding: var(--sp-8) var(--sp-16);
	border-radius: 6px;
	font: var(--text-caption);
}

.ibdmar-contact-form__status--success {
	background: color-mix(in srgb, var(--color-feedback-success) 12%, white);
	color: var(--color-feedback-success);
}

.ibdmar-contact-form__status--error {
	background: color-mix(in srgb, var(--color-feedback-error) 12%, white);
	color: var(--color-feedback-error);
}

.ibdmar-contact-form .ibdmar-footer__field label {
	display: block;
	margin-bottom: var(--sp-8);
	font: var(--text-body-emphasis);
	color: var(--color-text-heading);
}

.ibdmar-contact-form .ibdmar-footer__field input,
.ibdmar-contact-form .ibdmar-footer__field textarea {
	width: 100%;
	padding: var(--sp-16);
	border-radius: 6px;
	border: 1px solid var(--color-border-default);
	background: var(--color-surface-primary);
	color: var(--color-text-primary);
	font: var(--text-body-default);
	font-family: inherit;
}

.ibdmar-contact-form textarea {
	resize: vertical;
	min-height: 120px;
}

.ibdmar-contact-info {
	display: flex;
	flex-direction: column;
	gap: var(--sp-16);
}

.ibdmar-contact-info__card {
	display: flex;
	gap: var(--sp-16);
	padding: var(--sp-16);
	border-radius: 8px;
	background: var(--color-background-subtle);
}

.ibdmar-contact-info__card svg {
	flex-shrink: 0;
	color: var(--color-secondary);
	margin-top: 2px;
}

.ibdmar-contact-info__card strong {
	display: block;
	margin-bottom: var(--sp-4);
	color: var(--color-text-heading);
}

.ibdmar-contact-info__card p {
	margin: 0;
	color: var(--color-text-secondary);
}

/* Mapa do Fale Conosco (componente .ibdmar-mapa, base.css): ocupa o resto
   da coluna ao lado do formulário, com altura mínima para ser legível. */
.ibdmar-contact-info__map {
	flex: 1;
	min-height: 240px;
	aspect-ratio: auto;
}

/* Apoios Permanentes */

.ibdmar-support-grid {
	display: grid;
	grid-template-columns: repeat(6, 1fr);
	gap: var(--sp-16);
	margin-top: var(--sp-24);
}

.ibdmar-support-card {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--sp-8);
	padding: var(--sp-16);
	border: 1px solid var(--color-border-default);
	border-radius: 8px;
	text-align: center;
}

.ibdmar-support-card__logo {
	width: 100%;
	height: 70px;
	object-fit: contain;
	background: var(--color-background-subtle);
	border-radius: 4px;
}

.ibdmar-support-card__name {
	font: var(--text-body-emphasis);
	color: var(--color-text-heading);
}

/* Parceiros (page-parceiros.php) — mesmo card já validado da Rede
   Internacional (.ibdmar-rede-*, node Figma 459:3521: avatar circular +
   nome + descrição + link "Visitar site ↗"), só sem o campo país. Ver nota
   no topo de page-parceiros.php sobre por que isso foi ajustado. */

.ibdmar-partner-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: var(--sp-24);
	margin-top: var(--sp-24);
}

.ibdmar-partner-card {
	padding: var(--sp-24);
	border-radius: 12px;
	background: var(--color-surface-primary);
}

.ibdmar-partner-card__top {
	display: flex;
	align-items: flex-start;
	gap: var(--sp-16);
	margin-bottom: var(--sp-16);
}

.ibdmar-partner-card__avatar {
	flex-shrink: 0;
	width: 48px;
	height: 48px;
	border-radius: 50%;
	object-fit: cover;
	background: var(--color-brand-primary-light);
}

.ibdmar-partner-card__name {
	margin: 0;
	font: var(--text-body-emphasis);
	color: var(--color-text-heading);
}

.ibdmar-partner-card__desc {
	margin: 0 0 var(--sp-16);
	color: var(--color-text-secondary);
}

.ibdmar-partner-card__link {
	font: var(--text-caption);
	font-weight: 700;
	color: var(--color-secondary);
	text-decoration: none;
}

.ibdmar-partner-card__link:hover {
	text-decoration: underline;
}

/* CTA de rodapé de página (ex.: Instituto → Estatuto, Memoriais → Instituto) */

.ibdmar-page-cta {
	background: var(--color-secondary);
	padding-block: var(--sp-48);
	text-align: center;
	color: var(--color-text-inverse);
}

/* Separador quando 2 CTAs iguais ficam empilhados (ex.: Instituto → Parceiros
   + Instituto → Estatuto) — sem isso os dois blocos da mesma cor se fundem
   visualmente num só. */
.ibdmar-page-cta + .ibdmar-page-cta {
	border-top: 1px solid rgba(255, 255, 255, 0.15);
}

.ibdmar-page-cta__eyebrow {
	margin: 0 0 var(--sp-8);
	font: var(--text-caption);
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: rgba(255, 255, 255, 0.85);
}

.ibdmar-page-cta__title {
	margin: 0 0 var(--sp-8);
	font: var(--text-h2);
	color: var(--color-text-inverse);
}

.ibdmar-page-cta__desc {
	margin: 0 0 var(--sp-24);
	color: rgba(255, 255, 255, 0.85);
	max-width: 560px;
	margin-inline: auto;
}

.ibdmar-page-cta .ibdmar-btn {
	background: var(--color-surface-primary);
	color: var(--color-text-heading);
}

.ibdmar-page-cta .ibdmar-btn:hover {
	background: var(--color-background-subtle);
}

@media (max-width: 1279px) {
	.ibdmar-people-grid {
		grid-template-columns: repeat(2, 1fr);
	}

	.ibdmar-support-grid {
		grid-template-columns: repeat(3, 1fr);
	}

	.ibdmar-partner-grid {
		grid-template-columns: repeat(2, 1fr);
	}

	.ibdmar-contact-grid {
		grid-template-columns: 1fr;
	}
}

/* Login (node 460:305 "Associados · Login") */

.ibdmar-login-card {
	max-width: 420px;
	margin: 0 auto;
	padding: var(--sp-48) var(--sp-32);
	border: 1px solid var(--color-border-default);
	border-radius: 12px;
	background: var(--color-surface-primary);
}

.ibdmar-login-card__title {
	margin: 0 0 var(--sp-8);
	font: var(--text-h4);
	color: var(--color-text-heading);
}

.ibdmar-login-card__subtitle {
	margin: 0 0 var(--sp-24);
	color: var(--color-text-secondary);
	font: var(--text-body-default);
}

.ibdmar-login-card__form .ibdmar-footer__field {
	margin-bottom: var(--sp-24);
}

.ibdmar-login-card__form .ibdmar-footer__field label {
	display: block;
	margin-bottom: var(--sp-8);
	font: var(--text-body-emphasis);
	color: var(--color-text-heading);
}

.ibdmar-login-card__form .ibdmar-footer__field input {
	width: 100%;
	padding: var(--sp-16);
	border-radius: 6px;
	border: 1px solid var(--color-border-default);
	background: var(--color-surface-primary);
	color: var(--color-text-primary);
	font: var(--text-body-default);
	font-family: inherit;
}

.ibdmar-login-card__password-wrap {
	position: relative;
}

.ibdmar-login-card__password-wrap input {
	padding-right: 48px;
}

/* 2026-09-24 (áreas de toque): o botão tinha o tamanho do ícone (18×18px).
   Agora é um quadrado de 44×44px (mínimo recomendado pela WCAG 2.5.5)
   encostado na borda direita do campo, com o ícone centralizado. */
.ibdmar-login-card__password-toggle {
	position: absolute;
	top: 50%;
	right: 0;
	transform: translateY(-50%);
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	background: none;
	border: none;
	padding: 0;
	cursor: pointer;
	color: var(--color-text-tertiary);
}

.ibdmar-login-card__password-toggle:hover {
	color: var(--color-text-primary);
}

.ibdmar-login-card__forgot {
	display: block;
	/* Área de toque: ~42px de altura sem mudar o espaçamento (ver
	   .ibdmar-breadcrumb a). Os 12px de padding de baixo + margem de
	   24px - 12px mantêm os mesmos 24px de antes até o botão Entrar. */
	padding-block: 12px;
	margin-top: -12px;
	margin-bottom: calc(var(--sp-24) - 12px);
	font: var(--text-caption);
	color: var(--color-interactive-link);
	text-decoration: none;
}

.ibdmar-login-card__forgot:hover {
	text-decoration: underline;
}

.ibdmar-login-card__submit {
	width: 100%;
	text-align: center;
}

.ibdmar-cadastro-terms {
	display: flex;
	align-items: flex-start;
	gap: var(--sp-8);
	/* 2026-09-24 (áreas de toque): a linha do <label> (tocar no texto também
	   marca a caixa) ganha ~42px de altura tocável; padding + margens
	   negativas mantêm o mesmo espaçamento de antes (24px embaixo). */
	padding-block: 12px;
	margin-top: -12px;
	margin-bottom: calc(var(--sp-24) - 12px);
	font: var(--text-caption);
	color: var(--color-text-secondary);
	cursor: pointer;
}

/* Checkbox padrão do navegador tem 13×13px; aumentado pra 20×20px. */
.ibdmar-cadastro-terms input {
	flex-shrink: 0;
	width: 20px;
	height: 20px;
	margin: 0;
	accent-color: var(--color-secondary);
	cursor: pointer;
}

.ibdmar-cadastro-terms a {
	color: var(--color-interactive-link);
}

/* Minha Área — dashboard real do associado logado. */

.ibdmar-minha-area {
	max-width: 720px;
	margin: 0 auto;
}

.ibdmar-minha-area__top {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: var(--sp-16);
	margin-bottom: var(--sp-24);
}

.ibdmar-minha-area__nome {
	margin: 0 0 var(--sp-8);
	font: var(--text-h3);
	color: var(--color-text-heading);
}

.ibdmar-minha-area__meta {
	margin: 0;
	color: var(--color-text-secondary);
	font: var(--text-body-default);
}

.ibdmar-status-badge {
	flex-shrink: 0;
	padding: var(--sp-8) var(--sp-16);
	border-radius: 999px;
	font: var(--text-caption);
	font-weight: 600;
	white-space: nowrap;
}

.ibdmar-status-badge--ativa {
	background: rgba(30, 122, 63, 0.12);
	color: var(--color-feedback-success);
}

.ibdmar-status-badge--em-analise {
	background: rgba(20, 94, 110, 0.12);
	color: var(--color-feedback-information);
}

.ibdmar-status-badge--pendente {
	background: rgba(178, 106, 0, 0.12);
	color: var(--color-feedback-warning);
}

.ibdmar-status-badge--inativa {
	background: rgba(179, 38, 30, 0.12);
	color: var(--color-feedback-error);
}

.ibdmar-minha-area__grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--sp-24);
	margin: var(--sp-32) 0;
	padding-top: var(--sp-32);
	border-top: 1px solid var(--color-border-default);
}

.ibdmar-minha-area__label {
	margin: 0 0 var(--sp-4);
	font: var(--text-caption);
	color: var(--color-text-tertiary);
}

.ibdmar-minha-area__value {
	margin: 0;
	font: var(--text-body-emphasis);
	color: var(--color-text-heading);
}

/* Minha Área — direitos do titular (LGPD Art. 18). Mesmo recuo e mesma
   divisória da grade de dados acima, para a seção ler como continuação do
   cartão e não como um bloco solto. */

.ibdmar-minha-area__privacidade {
	margin-top: var(--sp-32);
	padding-top: var(--sp-32);
	border-top: 1px solid var(--color-border-default);
}

.ibdmar-minha-area__privacidade-titulo {
	margin: 0 0 var(--sp-8);
	font: var(--text-body-emphasis);
	color: var(--color-text-heading);
}

.ibdmar-minha-area__privacidade-intro {
	margin: 0 0 var(--sp-24);
	color: var(--color-text-secondary);
	font: var(--text-body-default);
}

/* O campo e o botão lado a lado no desktop, com o botão alinhado à base do
   campo (align-items: flex-end) — sem isso ele sobe para a altura do label. */
.ibdmar-minha-area__privacidade-form {
	display: flex;
	align-items: flex-end;
	gap: var(--sp-16);
	flex-wrap: wrap;
}

.ibdmar-minha-area__privacidade-form .ibdmar-footer__field {
	flex: 1 1 220px;
	margin: 0;
}

.ibdmar-minha-area__privacidade-nota {
	margin: var(--sp-16) 0 0;
	color: var(--color-text-tertiary);
	font: var(--text-caption);
}

.ibdmar-minha-area__privacidade-acoes {
	display: flex;
	align-items: center;
	gap: var(--sp-24);
	flex-wrap: wrap;
	margin-top: var(--sp-24);
}

/* Botão de texto, não de ação primária: pedir exclusão é irreversível para o
   associado, então não deve competir visualmente com "Baixar meus dados". */
.ibdmar-minha-area__privacidade-excluir {
	padding: 0;
	border: 0;
	background: none;
	color: var(--color-feedback-error);
	font: var(--text-caption);
	text-decoration: underline;
	cursor: pointer;
}

.ibdmar-minha-area__privacidade-excluir:hover,
.ibdmar-minha-area__privacidade-excluir:focus-visible {
	text-decoration: none;
}

@media (max-width: 767px) {
	.ibdmar-minha-area__privacidade-form .ibdmar-footer__field {
		flex-basis: 100%;
	}

	.ibdmar-minha-area__privacidade-form .ibdmar-btn,
	.ibdmar-minha-area__privacidade-acoes .ibdmar-btn {
		width: 100%;
		text-align: center;
	}

	/* Empilhado no celular: o link de exclusão fica embaixo do botão, com
	   respiro, para não ser tocado por engano. */
	.ibdmar-minha-area__privacidade-acoes {
		align-items: flex-start;
		gap: var(--sp-16);
	}
}

.ibdmar-minha-area__logout {
	display: inline-block;
	margin-top: var(--sp-16);
	color: var(--color-interactive-link);
	font: var(--text-caption);
}

@media (max-width: 767px) {
	.ibdmar-minha-area__grid {
		grid-template-columns: 1fr;
	}
}

.ibdmar-login-card__signup {
	margin: var(--sp-24) 0 0;
	text-align: center;
	color: var(--color-text-secondary);
	font: var(--text-caption);
}

.ibdmar-login-card__signup a {
	color: var(--color-interactive-link);
	text-decoration: none;
}

.ibdmar-login-card__signup a:hover {
	text-decoration: underline;
}

@media (max-width: 767px) {
	/* Mesmo padrão do Hero da Home no mobile (ver home.css) — antes desta
	   mudança (2026-08-27) o hero de página interna não tinha nenhuma
	   variação de altura por breakpoint. */
	/* 2026-09-23 (melhoria mobile): 320→240px — com o header, o hero de
	   320px empurrava todo o conteúdo real da página pra fora da primeira
	   tela do celular. */
	.ibdmar-subpage-hero__inner {
		min-height: 240px;
	}

	/* No desktop o véu escuro é um gradiente só na metade esquerda (onde fica
	   o texto). No celular o texto ocupa a largura inteira, então breadcrumb
	   e título caíam por cima da parte clara da foto (areia, espuma) e ficavam
	   ilegíveis — aqui o véu cobre a foto toda, mais forte embaixo.
	   A foto usada aqui é a versão leve pra celular (-mobile.webp), quando
	   existe — ver ibdmar_hero_bg_style() em inc/enqueue.php. */
	.ibdmar-subpage-hero {
		background-image: linear-gradient(0deg, rgba(16, 40, 61, 0.7) 0%, rgba(16, 40, 61, 0.35) 100%), var(--ibdmar-hero-bg-mobile, var(--ibdmar-hero-bg));
	}

	/* Filtros por categoria/ano: com 9 chips quebrando linha eles ocupavam
	   6 linhas no celular. Viram uma faixa única com rolagem horizontal,
	   encostada nas bordas da tela (margem negativa = padding do container)
	   pra ficar claro que dá pra deslizar. */
	.ibdmar-chip-filters,
	.ibdmar-chip-filters--center {
		flex-wrap: nowrap;
		justify-content: flex-start;
		overflow-x: auto;
		margin-inline: calc(-1 * var(--sp-24));
		padding-inline: var(--sp-24);
		padding-bottom: var(--sp-4);
		scrollbar-width: none;
		-webkit-overflow-scrolling: touch;
	}

	.ibdmar-chip-filters::-webkit-scrollbar {
		display: none;
	}

	.ibdmar-chip {
		flex-shrink: 0;
		min-height: 40px;
	}

	.ibdmar-people-grid,
	.ibdmar-pilares-grid {
		grid-template-columns: 1fr;
	}

	.ibdmar-support-grid {
		grid-template-columns: repeat(2, 1fr);
	}

	.ibdmar-partner-grid {
		grid-template-columns: 1fr;
	}
}