/*
 * Componentes e estilos de bloco ATV (marcador de título, botões core, cartões, contextos escuros).
 * Tokens: theme.json → --wp--preset--* / --wp--custom--*; nomes HDS remapeados em hds-theme.css.
 * Ver docs/design-system.md.
 */

/* ---- Marcador de título (marker-1.png de atv.pt, recriado em SVG) -------
   Decorativo: pseudo-elemento com content:"" (não é lido por leitores de ecrã).
   Escala com o tamanho da letra; recolorível via --atv-marker-color;
   propriedades lógicas para RTL; em forced-colors usa CanvasText. */
.atv-marker,
.is-style-atv-marker,
.is-style-atv-eyebrow {
	--atv-marker-height: var(--wp--custom--marker--height, 0.375em);
	--atv-marker-ratio: var(--wp--custom--marker--ratio, 5.75);
	--atv-marker-color: var(--wp--custom--marker--color, var(--atv-green, #7abf42));
	--atv-marker-gap: var(--wp--custom--marker--gap, 0.5em);
}

.atv-marker::before,
.is-style-atv-marker::before,
.is-style-atv-eyebrow::before {
	content: "";
	display: block;
	height: var(--atv-marker-height);
	width: calc(var(--atv-marker-height) * var(--atv-marker-ratio));
	margin-block: 0 var(--atv-marker-gap);
	margin-inline: 0 auto;
	background-color: var(--atv-marker-color);
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 673 117'%3E%3Cpolyline fill='none' stroke='%23000' stroke-width='30' stroke-linecap='round' stroke-linejoin='round' points='53,95 124,22 195,95 266,22 337,95 408,22 479,95 550,22 621,95'/%3E%3C/svg%3E") no-repeat center / contain;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 673 117'%3E%3Cpolyline fill='none' stroke='%23000' stroke-width='30' stroke-linecap='round' stroke-linejoin='round' points='53,95 124,22 195,95 266,22 337,95 408,22 479,95 550,22 621,95'/%3E%3C/svg%3E") no-repeat center / contain;
}

/* Alinhamento segue o texto do título. */
.atv-marker.has-text-align-center::before,
.is-style-atv-marker.has-text-align-center::before,
.is-style-atv-eyebrow.has-text-align-center::before,
.atv-marker--center::before {
	margin-inline: auto;
}

.atv-marker.has-text-align-right::before,
.is-style-atv-marker.has-text-align-right::before,
.is-style-atv-eyebrow.has-text-align-right::before,
.atv-marker--end::before {
	margin-inline: auto 0;
}

/* Em fundos escuros o marcador mantém-se lima (8,4:1 em scrim; 4,89:1 em navy). */
.atv-on-dark .atv-marker,
.atv-on-dark .is-style-atv-marker,
.atv-on-dark .is-style-atv-eyebrow {
	--atv-marker-color: var(--atv-green);
}

/* Marcador abaixo do título (variante). */
.atv-marker--below::before {
	display: none;
}

.atv-marker--below::after {
	content: "";
	display: block;
	height: var(--atv-marker-height);
	width: calc(var(--atv-marker-height) * var(--atv-marker-ratio));
	margin-block: var(--atv-marker-gap) 0;
	margin-inline: 0 auto;
	background-color: var(--atv-marker-color);
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 673 117'%3E%3Cpolyline fill='none' stroke='%23000' stroke-width='30' stroke-linecap='round' stroke-linejoin='round' points='53,95 124,22 195,95 266,22 337,95 408,22 479,95 550,22 621,95'/%3E%3C/svg%3E") no-repeat center / contain;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 673 117'%3E%3Cpolyline fill='none' stroke='%23000' stroke-width='30' stroke-linecap='round' stroke-linejoin='round' points='53,95 124,22 195,95 266,22 337,95 408,22 479,95 550,22 621,95'/%3E%3C/svg%3E") no-repeat center / contain;
}

@media (forced-colors: active) {
	.atv-marker::before,
	.is-style-atv-marker::before,
	.is-style-atv-eyebrow::before,
	.atv-marker--below::after {
		background-color: CanvasText;
		forced-color-adjust: none;
	}
}

/* Secção com cabeçalho centrado como em atv.pt (eyebrow + título + marcador). */
.atv-section__title.atv-marker {
	--atv-marker-height: 0.4em;
}

/* ---- Botões core (paridade com .hds-button) ----------------------------
   theme.json define cores/tipografia; aqui vão tamanho, foco e variantes. */
.wp-block-button__link,
.wp-element-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--spacing-2-xs);
	min-height: 48px;
	min-width: 48px;
	padding: calc(var(--spacing-xs) - 2px) calc(var(--spacing-l) - 2px);
	line-height: var(--lineheight-l);
	cursor: pointer;
	transition:
		background-color var(--atv-motion-fast) var(--atv-motion-ease),
		border-color var(--atv-motion-fast) var(--atv-motion-ease),
		color var(--atv-motion-fast) var(--atv-motion-ease);
}

.wp-block-button__link:focus-visible,
.wp-element-button:focus-visible {
	outline: var(--atv-focus-width, 3px) solid var(--color-focus-outline);
	outline-offset: var(--atv-focus-offset, 2px);
}

.wp-block-button__link[aria-disabled="true"],
.wp-element-button:disabled {
	background-color: var(--color-black-20);
	border-color: var(--color-black-20);
	color: var(--atv-navy);
	cursor: not-allowed;
}

/* Secundário / outline */
.wp-block-button.is-style-atv-secondary .wp-block-button__link,
.wp-block-button.is-style-outline .wp-block-button__link {
	background-color: transparent;
	border-color: var(--atv-green-text);
	color: var(--atv-green-text);
}

.wp-block-button.is-style-atv-secondary .wp-block-button__link:hover,
.wp-block-button.is-style-outline .wp-block-button__link:hover {
	background-color: var(--atv-green-light);
	border-color: var(--atv-green-ink);
	color: var(--atv-green-ink);
}

.wp-block-button.is-style-atv-secondary .wp-block-button__link:active,
.wp-block-button.is-style-outline .wp-block-button__link:active {
	background-color: var(--atv-green-tint);
}

/* Em fundo escuro: contorno/texto branco */
.wp-block-button.is-style-atv-on-dark .wp-block-button__link {
	background-color: transparent;
	border-color: var(--color-white);
	color: var(--color-white);
}

.wp-block-button.is-style-atv-on-dark .wp-block-button__link:hover {
	background-color: rgba(255, 255, 255, 0.12);
	border-color: var(--color-white);
	color: var(--color-white);
}

.wp-block-button.is-style-atv-on-dark .wp-block-button__link:focus-visible {
	outline-color: var(--atv-focus-dark);
}

.wp-block-button.is-style-atv-small .wp-block-button__link {
	min-height: 44px;
	padding: calc(var(--spacing-2-xs) - 2px) calc(var(--spacing-m) - 2px);
	font-size: var(--fontsize-body-s);
}

/* ---- Ligações no conteúdo --------------------------------------------- */
/* Only plain text links (no class) in prose get the green underline. Component links (tiles, cards, tags, buttons,
   hds-link lists, sibling nav, documents) carry a class and keep their own style. :where() keeps this at (0,1,1), so
   any component rule wins without specificity tricks. */
:where(.atv-prose, .atv-news-body, .entry-content) a:not([class]) {
	color: var(--atv-green-text);
	text-decoration: underline;
	text-underline-offset: 0.15em;
	text-decoration-thickness: 1px;
}

:where(.atv-prose, .atv-news-body, .entry-content) a:not([class]):hover {
	color: var(--atv-green-ink);
	text-decoration-thickness: 2px;
}

/* ---- Grupos / bandas ---------------------------------------------------- */
.wp-block-group.is-style-atv-band {
	background-color: var(--color-black-5);
	padding-block: var(--spacing-layout-l);
}

.wp-block-group.is-style-atv-band-green {
	background-color: var(--atv-green-light);
	padding-block: var(--spacing-layout-l);
}

.wp-block-group.is-style-atv-band-dark,
.atv-on-dark {
	background-color: var(--atv-navy);
	color: var(--color-white);
}

.wp-block-group.is-style-atv-band-dark {
	padding-block: var(--spacing-layout-l);
}

.atv-on-dark :is(h1, h2, h3, h4, h5, h6),
.wp-block-group.is-style-atv-band-dark :is(h1, h2, h3, h4, h5, h6) {
	color: var(--color-white);
}

.atv-on-dark a:not(.hds-button):not(.wp-block-button__link),
.wp-block-group.is-style-atv-band-dark a:not(.hds-button):not(.wp-block-button__link) {
	color: var(--color-white);
}

.atv-on-dark .atv-eyebrow,
.atv-on-dark .atv-meta,
.wp-block-group.is-style-atv-band-dark .atv-eyebrow {
	color: var(--atv-green-tint); /* 8,5:1 em navy */
}

/* ---- Cartões -------------------------------------------------------------- */
.atv-card,
.hds-card.atv-card {
	display: flex;
	flex-direction: column;
	background: var(--color-white);
	border: 1px solid var(--color-black-20);
	border-radius: var(--atv-radius-m);
	overflow: hidden;
	color: var(--atv-navy);
	text-decoration: none;
	transition: box-shadow var(--atv-motion-base) var(--atv-motion-ease), transform var(--atv-motion-base) var(--atv-motion-ease);
}

a.atv-card:hover,
a.hds-card:hover {
	box-shadow: var(--box-shadow-m);
}

a.atv-card:focus-visible,
a.hds-card:focus-visible {
	outline: var(--atv-focus-width, 3px) solid var(--color-focus-outline);
	outline-offset: var(--atv-focus-offset, 2px);
}

/* ---- Separador ----------------------------------------------------------- */
.wp-block-separator,
hr.atv-rule {
	border: 0;
	border-top: 1px solid var(--color-black-10);
	margin-block: var(--spacing-l);
}

.wp-block-separator.is-style-atv-marker-rule {
	border: 0;
	height: 0.5rem;
	width: 2.875rem;
	margin-inline: 0;
	background-color: var(--atv-green);
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 673 117'%3E%3Cpolyline fill='none' stroke='%23000' stroke-width='30' stroke-linecap='round' stroke-linejoin='round' points='53,95 124,22 195,95 266,22 337,95 408,22 479,95 550,22 621,95'/%3E%3C/svg%3E") no-repeat center / contain;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 673 117'%3E%3Cpolyline fill='none' stroke='%23000' stroke-width='30' stroke-linecap='round' stroke-linejoin='round' points='53,95 124,22 195,95 266,22 337,95 408,22 479,95 550,22 621,95'/%3E%3C/svg%3E") no-repeat center / contain;
}

.wp-block-separator.is-style-atv-marker-rule.aligncenter {
	margin-inline: auto;
}

/* ---- Listas ---------------------------------------------------------------- */
.wp-block-list.is-style-atv-check {
	list-style: none;
	padding-inline-start: 0;
}

.wp-block-list.is-style-atv-check > li {
	position: relative;
	padding-inline-start: 1.75em;
}

.wp-block-list.is-style-atv-check > li::before {
	content: "";
	position: absolute;
	inset-inline-start: 0;
	top: 0.45em;
	width: 0.9em;
	height: 0.5em;
	border-inline-start: 3px solid var(--atv-green-text);
	border-bottom: 3px solid var(--atv-green-text);
	transform: rotate(-45deg);
}

@media (forced-colors: active) {
	.wp-block-list.is-style-atv-check > li::before {
		border-color: CanvasText;
	}
}

@media (prefers-reduced-motion: reduce) {
	.hds-button,
	.wp-block-button__link,
	.wp-element-button,
	.atv-card,
	.hds-card {
		transition: none;
	}
}

/* ---- Ícones HDS --------------------------------------------------------- */
/* The vendor .hds-icon sizes itself from --icon-size, which only the hds-icon--size-* modifiers (or an hds-link
   ancestor) define: without one the icon is 0×0. Fall back to the small size (24px) so no icon ever disappears. */
.hds-icon {
	width: var(--icon-size, var(--spacing-layout-xs));
	height: var(--icon-size, var(--spacing-layout-xs));
}

/* ---- Imagem de recurso (sem foto) --------------------------------------- */
/* atv_placeholder_image(): tint + ATV marker in whatever media box holds it (news cards: 16:9). */
.atv-placeholder-media {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	min-height: 100%;
	background-color: var(--atv-green-light);
}

.atv-placeholder-media .atv-placeholder-media__mark {
	display: block;
	width: 38%;
	max-width: 10rem;
	height: auto;
	object-fit: contain;
}