/**
 * Convites de canal e de seção — inc/channel-invite.php.
 *
 * Três versões, e vale registrar por que as duas primeiras caíram:
 *
 *  - régua vertical à esquerda: é o desenho universal de CITAÇÃO. Dentro de uma
 *    matéria o leitor lê aquilo como "alguém disse isso";
 *  - selo arredondado grande + degradê no fundo + pílula de ação: recusado por
 *    parecer gerado por IA, e a crítica procede. Selo + degradê + pílula é o
 *    vocabulário padrão de componente de landing page automática. Acabamento
 *    genérico não é acabamento — é ausência de decisão, com mais CSS.
 *
 * O que ficou é a moldura fina com a ETIQUETA recortando a borda de cima. É um
 * desenho de pasta de arquivo: diz "isto é um aparte" com uma forma que nenhum
 * outro bloco do site usa, então ela passa a significar uma coisa só. A etiqueta
 * carrega o ícone do assunto — no turco, uma bandeirinha de verdade.
 */

.go-channel-invite {
	position: relative;
	box-sizing: border-box;
	margin-block: 26px;
	padding: 16px 16px 14px;
	/*
	 * Todo o bloco fala num tamanho abaixo do corpo do texto. Sem isto ele herda
	 * `--fs-reading-mobile`, que é maior que a base da fixture, e o aparte passa
	 * a competir com a matéria em vez de acompanhá-la.
	 */
	font-size: .93em;
	border: 1px solid var(--border, rgba(246, 247, 241, .16));
	border-radius: 10px;
	background: none;
	color: inherit;
}

/*
 * A etiqueta recorta a borda de cima.
 *
 * O `background` precisa ser o MESMO da página, não transparente: o recorte é a
 * etiqueta tapando o traço da borda por baixo. Com fundo transparente a borda
 * atravessaria o ícone e o desenho não existiria.
 */
.go-channel-invite__tag {
	position: absolute;
	inset-block-start: -11px;
	inset-inline-start: 15px;
	display: inline-flex;
	align-items: center;
	padding-inline: 7px;
	background: var(--canvas, #0b0712);
	color: var(--lime, #d8ff38);
	line-height: 0;
}

.go-channel-invite__tag > svg {
	inline-size: 22px;
	block-size: 22px;
}

/*
 * A bandeirinha turca. Retângulo vermelho com o crescente e a estrela em branco
 * por cima — proporção deitada, como bandeira, e não quadrado como ícone de app.
 * É a única cor fora da paleta em todo o tema, e cabe porque ocupa 22px: nesse
 * tamanho é insígnia, não esquema de cor.
 */
.go-channel-invite__tag--flag {
	padding: 0;
	background: none;
}

.go-channel-invite__tag--flag > svg {
	inline-size: 30px;
	block-size: 21px;
	padding-inline: 4px;
	border-radius: 3px;
	background: #e30a17;
	color: #fff;
	box-sizing: content-box;
	/* A moldura do bloco passa por trás; esta borda separa a bandeira dela. */
	outline: 3px solid var(--canvas, #0b0712);
}

.go-channel-invite__question {
	display: block;
	margin: 0;
	color: var(--text, inherit);
	font-size: 1.02em;
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: -.012em;
	text-wrap: balance;
}

.go-channel-invite__lead {
	margin: 0;
	color: var(--text-secondary, var(--text-muted, inherit));
	font-size: .92em;
	line-height: 1.5;
}

/* Linha da ação, separada por uma divisória fina em vez de espaço vazio. */
.go-channel-invite__action {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 8px 0 0;
	font-size: 1em;
	line-height: 1.35;
}

.go-channel-invite__glyph {
	flex: 0 0 auto;
	inline-size: 16px;
	block-size: 16px;
	color: var(--lime, #d8ff38);
}

.go-channel-invite__link {
	color: var(--lime, inherit);
	/*
	 * Peso normal, não 600. Em negrito e em verde o link virava o elemento mais
	 * forte da caixa — mais forte que a própria pergunta — e um aparte cujo grito
	 * é o call to action lê-se como anúncio. A cor já basta para dizer que é
	 * clicável; o negrito fica com a pergunta, que é quem ancora o bloco.
	 */
	font-weight: 400;
	text-decoration: none;
}

/*
 * A seta é só do link de AÇÃO. No bloco de seção o link vive no meio de uma
 * frase, e ali a seta produziria "produções turcas →." — seta antes do ponto
 * final, que é erro de composição, não estilo.
 */
.go-channel-invite__action .go-channel-invite__link::after {
	content: ' \2192';
	white-space: nowrap;
}

.go-channel-invite__link:hover,
.go-channel-invite__link:focus-visible {
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* =========================================================================
   Bloco de seção — fecha a matéria

   Depois dele vêm o card do autor e o "Leia também", os dois com moldura. Uma
   terceira caixa em sequência viraria empilhamento. Aqui a moldura sai e sobra
   a etiqueta em linha com a frase.
   ========================================================================= */

.go-channel-invite--section {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-block: 32px 6px;
	padding: 14px 0 0;
	border: 0;
	border-block-start: 1px solid var(--border, rgba(246, 247, 241, .14));
	border-radius: 0;
}

.go-channel-invite--section .go-channel-invite__tag {
	position: static;
	flex: 0 0 auto;
	padding-inline: 0;
	background: none;
}

.go-channel-invite--section .go-channel-invite__tag > svg {
	inline-size: 19px;
	block-size: 19px;
}

.go-channel-invite--section .go-channel-invite__tag--flag > svg {
	inline-size: 26px;
	block-size: 18px;
	outline: 0;
}

.go-channel-invite--section .go-channel-invite__link {
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
}

@media (pointer: coarse) {
	.go-channel-invite__action .go-channel-invite__link {
		padding-block: 10px;
	}

	.go-channel-invite__action {
		margin-block-start: 4px;
	}
}

@media (max-width: 767px) {
	.go-channel-invite {
		margin-block: 22px;
		padding: 15px 14px 12px;
	}

	.go-channel-invite--section {
		padding: 13px 0 0;
	}
}

@media print {
	.go-channel-invite {
		display: none;
	}
}

/* =========================================================================
   Convivência com a guarda de estabilidade de viewport

   assets/js/viewport-stability.js marca elementos largos e verge.css responde
   com `overflow-x: hidden !important` + `contain: inline-size`. Numa caixa cuja
   etiqueta sai 10px acima da borda de propósito, esse par faz duas coisas
   ruins: corta a etiqueta, e — porque `overflow-x: hidden` com `overflow-y:
   visible` computa o eixo visível para `auto` — transforma o bloco em contêiner
   de rolagem nos dois eixos. É exatamente o acidente que já aconteceu com o
   wrapper de anúncio e está documentado em go-ads-component.css.

   Aqui a guarda é neutralizada só quanto ao recorte. O trabalho real dela —
   `max-inline-size: 100%`, para nada forçar barra horizontal — continua valendo,
   e este bloco nunca é mais largo que a coluna de texto.
   ========================================================================= */

body.go-verge .go-channel-invite.go-viewport-overflow-guard,
body.go-verge .go-channel-invite.go-viewport-overflow-guard--clip {
	overflow: visible !important;
	contain: none !important;
}

/* =========================================================================
   Convivência com design-polish.min.css

   Medido na página publicada: o link do bloco computava `font-weight: 700`,
   não os 600 declarados aqui. A origem é

     body.single-post .go-article__content :where(p, li, …) a:not(.go-btn):not(…)

   em design-polish.min.css, que vale (0,4,2) contra os (0,1,0) de uma classe
   solta. O resultado era o call to action em negrito e verde — o elemento mais
   forte da caixa, mais forte que a própria pergunta. Um aparte cujo grito é o
   CTA lê-se como anúncio, e foi exatamente essa a queixa: "não se integrou bem
   à página".

   Estes seletores existem para vencer aquele, e a verbosidade é o preço: nomear
   `body`, `p` e `a` leva a (0,5,3). Sem `!important` de propósito — a
   especificidade resolve, e `!important` aqui só transferiria o problema para a
   próxima folha que precisasse ajustar isto.
   ========================================================================= */

body.single-post .go-article__content .go-channel-invite {
	/* Abaixo do corpo do texto: acompanha a leitura, não compete com ela. */
	font-size: .93em;
}

body.single-post .go-article__content .go-channel-invite p.go-channel-invite__action a.go-channel-invite__link,
body.single-post .go-article__content .go-channel-invite p.go-channel-invite__lead a.go-channel-invite__link {
	/*
	 * Peso normal. A cor já diz que é clicável; o negrito fica com a pergunta,
	 * que é quem ancora o bloco.
	 */
	font-weight: 400;
}

body.single-post .go-article__content .go-channel-invite .go-channel-invite__question {
	font-size: 1.02em;
}

body.single-post .go-article__content .go-channel-invite p.go-channel-invite__action {
	margin-block-start: 8px;
	font-size: 1em;
}