/*
 * Sabia Essa? - article.css
 * Pagina de materia, coluna lateral, tabelas e fichas tecnicas.
 */

.sabia-essa-article {
	min-width: 0;
}

.sabia-essa-article__header {
	margin-bottom: var(--wp--preset--spacing--40);
}

.sabia-essa-article__title {
	margin: 0.35rem 0 0;
	font-size: clamp(1.75rem, 4.2vw, 2.6rem);
	font-weight: 800;
	line-height: 1.12;
	letter-spacing: -0.02em;
	overflow-wrap: break-word;
	text-wrap: balance;
}

.sabia-essa-article__deck {
	margin: 0.75rem 0 0;
	max-width: 62ch;
	color: var(--wp--preset--color--muted);
	font-size: clamp(1.0625rem, 1.6vw, 1.25rem);
	line-height: 1.5;
}

.sabia-essa-byline {
	display: flex;
	align-items: center;
	gap: 0.65rem;
	flex-wrap: wrap;
	margin-top: var(--wp--preset--spacing--30);
	padding-top: var(--wp--preset--spacing--20);
	border-top: 1px solid var(--wp--preset--color--border);
	font-size: var(--wp--preset--font-size--small);
}

.sabia-essa-byline__avatar img {
	display: block;
	border-radius: 50%;
	width: 40px;
	height: 40px;
	object-fit: cover;
}

.sabia-essa-byline__names {
	display: flex;
	flex-direction: column;
	gap: 0.1rem;
}

.sabia-essa-byline__name {
	font-weight: 700;
}

/*
 * Datas editoriais: uma linha por evento. "Publicado em" sempre; "Atualizado
 * em" apenas quando houver atualizacao editorial registrada.
 */
.sabia-essa-byline__dates {
	color: var(--wp--preset--color--muted);
	display: flex;
	flex-direction: column;
	gap: 0.15rem;
}

.sabia-essa-byline__date {
	display: block;
}

.sabia-essa-byline__reviewer {
	color: var(--wp--preset--color--muted);
	display: block;
	margin-top: 0.15rem;
}

/* Compartilhamento */

.sabia-essa-share {
	display: flex;
	align-items: center;
	gap: 0.4rem;
	flex-wrap: wrap;
}

.sabia-essa-share__link,
.sabia-essa-share__copy {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.4rem;
	min-width: 44px;
	min-height: 44px;
	padding-inline: 0.7rem;
	font-size: 0.8125rem;
	font-weight: 700;
	text-decoration: none;
	color: var(--wp--preset--color--contrast);
	background: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--se-radius);
	cursor: pointer;
}

.sabia-essa-share__link:hover,
.sabia-essa-share__copy:hover {
	background: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--accent-ink);
	border-color: var(--wp--preset--color--accent);
	text-decoration: none;
}

.sabia-essa-share--compact .sabia-essa-share__label {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
}

.sabia-essa-share__status {
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--muted);
}

/* Midia principal */

.sabia-essa-article__figure {
	margin: 0 0 var(--wp--preset--spacing--40);
}

.sabia-essa-article__figure .sabia-essa-image {
	border-radius: var(--se-radius);
}

.sabia-essa-article__figcaption {
	display: flex;
	flex-wrap: wrap;
	gap: 0.35rem 0.6rem;
	margin-top: 0.5rem;
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.45;
}

/* Corpo */

.sabia-essa-content {
	font-size: 1.0625rem;
	line-height: 1.75;
}

.sabia-essa-content > * {
	margin-block: 1.25em;
}

.sabia-essa-content > h2 {
	margin-top: 2em;
	font-size: clamp(1.3rem, 2.4vw, 1.6rem);
}

.sabia-essa-content > h3 {
	margin-top: 1.6em;
	font-size: clamp(1.1rem, 2vw, 1.3rem);
}

.sabia-essa-content a {
	text-decoration: underline;
	text-decoration-color: var(--wp--preset--color--accent);
	text-decoration-thickness: 2px;
	text-underline-offset: 3px;
}

.sabia-essa-content ul,
.sabia-essa-content ol {
	padding-inline-start: 1.35rem;
}

.sabia-essa-content li + li {
	margin-top: 0.5rem;
}

.sabia-essa-content figure {
	margin-inline: 0;
}

.sabia-essa-content figcaption {
	margin-top: 0.5rem;
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.45;
}

/* Tabelas e fichas tecnicas */

.sabia-essa-content .wp-block-table,
.sabia-essa-tablewrap {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--se-radius);
}

.sabia-essa-content table {
	width: 100%;
	border-collapse: collapse;
	font-size: 0.9375rem;
}

.sabia-essa-content th,
.sabia-essa-content td {
	padding: 0.6rem 0.75rem;
	text-align: left;
	border-bottom: 1px solid var(--wp--preset--color--border);
	vertical-align: top;
}

.sabia-essa-content thead th {
	position: sticky;
	top: 0;
	background: var(--wp--preset--color--surface-strong);
	font-size: 0.8125rem;
	text-transform: uppercase;
	letter-spacing: 0.04em;
}

.sabia-essa-content tbody tr:nth-child(even) {
	background: var(--wp--preset--color--surface);
}

.sabia-essa-content caption {
	caption-side: top;
	padding: 0.6rem 0.75rem;
	font-weight: 700;
	text-align: left;
	background: var(--wp--preset--color--surface);
}

/* Caixa de destaque (estilo de bloco) */

.wp-block-group.is-style-sabia-essa-callout {
	padding: var(--wp--preset--spacing--40);
	background: var(--wp--preset--color--surface);
	border-left: 4px solid var(--wp--preset--color--accent);
	border-radius: var(--se-radius);
}

.wp-block-group.is-style-sabia-essa-callout > :first-child {
	margin-top: 0;
}

.wp-block-group.is-style-sabia-essa-callout > :last-child {
	margin-bottom: 0;
}

/* Fontes, notas e correcoes */

.sabia-essa-sources,
.sabia-essa-notice {
	margin-block: var(--wp--preset--spacing--40);
	padding: var(--wp--preset--spacing--30);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--se-radius);
	background: var(--wp--preset--color--surface);
	font-size: var(--wp--preset--font-size--small);
}

.sabia-essa-sources h2,
.sabia-essa-notice h2 {
	margin: 0 0 0.5rem;
	font-size: 0.8125rem;
	text-transform: uppercase;
	letter-spacing: 0.07em;
}

.sabia-essa-sources ul {
	margin: 0;
	padding-inline-start: 1.1rem;
}

.sabia-essa-notice--correction {
	border-left: 4px solid var(--wp--preset--color--accent);
}

/*
 * Cartao do autor: as regras vivem em assets/css/author.css, carregado tanto
 * na materia quanto na pagina do autor. Nao duplique nada aqui.
 */

/*
 * Instagram usa altura dinamica definida pelo script oficial. Nao reserve
 * proporcao nem esconda overflow: apenas mantenha o iframe centralizado.
 */
.sabia-essa-content iframe.instagram-media,
.sabia-essa-content iframe[src*="instagram.com/"] {
	display: block;
	margin-inline: auto !important;
}

/*
 * Player nativo do YouTube.
 *
 * Uma unica caixa 16:9 atende tanto o bloco core/embed quanto o iframe
 * demonstrativo salvo em core/html. O pseudo-elemento do WordPress e
 * neutralizado para que ele nao reserve uma segunda altura quando seu CSS
 * especifico tambem estiver carregado.
 */
.sabia-essa-content .wp-block-embed.is-provider-youtube.wp-has-aspect-ratio > .wp-block-embed__wrapper {
	position: relative;
	width: 100%;
	aspect-ratio: 16 / 9;
	overflow: hidden;
}

.sabia-essa-content .wp-block-embed.is-provider-youtube.wp-has-aspect-ratio > .wp-block-embed__wrapper::before {
	display: none;
	content: none;
	padding: 0;
}

.sabia-essa-content .wp-block-embed.is-provider-youtube.wp-has-aspect-ratio > .wp-block-embed__wrapper > iframe {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	border: 0;
}

/* Coluna lateral */

.sabia-essa-aside {
	display: grid;
	gap: var(--wp--preset--spacing--50);
	align-content: start;
	min-width: 0;
}

@media (min-width: 1024px) {
	.sabia-essa-aside__sticky {
		position: sticky;
		top: calc(var(--se-header-h) + 1rem);
	}
}

.sabia-essa-aside .sabia-essa-section {
	margin-block: 0;
}

/* Leia tambem dentro do corpo */

.sabia-essa-inline-related {
	margin-block: var(--wp--preset--spacing--50);
	padding: var(--wp--preset--spacing--40);
	border-left: 4px solid var(--wp--preset--color--accent);
	background: var(--wp--preset--color--surface);
	border-radius: var(--se-radius);
}

.sabia-essa-inline-related__grid {
	display: grid;
	gap: var(--wp--preset--spacing--30);
	grid-template-columns: minmax(0, 1fr);
	align-items: start;
}

@media (min-width: 600px) {
	.sabia-essa-inline-related__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: var(--wp--preset--spacing--30) var(--wp--preset--spacing--40);
	}
}

.sabia-essa-inline-related__item .sabia-essa-card__media {
	flex: 0 0 96px;
	width: 96px;
}

@media (min-width: 600px) {
	.sabia-essa-inline-related__item .sabia-essa-card__media {
		flex-basis: 128px;
		width: 128px;
	}
}

.sabia-essa-inline-related__item .sabia-essa-card__title {
	font-size: 1rem;
	line-height: 1.35;
}

.sabia-essa-inline-related__item .sabia-essa-card__title a {
	text-decoration: none;
}

.sabia-essa-inline-related__item .sabia-essa-card__title a:hover,
.sabia-essa-inline-related__item .sabia-essa-card__title a:focus-visible {
	text-decoration: underline;
	text-decoration-color: var(--wp--preset--color--accent);
	text-decoration-thickness: 3px;
	text-underline-offset: 3px;
}

.sabia-essa-inline-related__ad,
.sabia-essa-inline-related__ad .sabia-essa-ad {
	min-width: 0;
	margin: 0;
}

/* Veja tambem no fim da materia */

.sabia-essa-readalso {
	margin-block: var(--wp--preset--spacing--50);
	margin-bottom: 0;
	padding: var(--wp--preset--spacing--40);
	border-top: 3px solid var(--wp--preset--color--accent);
	background: var(--wp--preset--color--surface);
	border-radius: var(--se-radius);
}

/*
 * Celular: uma coluna. A partir de 600px, grade de duas colunas que acomoda os
 * quatro itens em duas linhas. `align-items: start` mantem os cartoes alinhados
 * pelo topo mesmo quando um titulo ocupa mais linhas que o outro.
 */
.sabia-essa-readalso__grid {
	display: grid;
	gap: var(--wp--preset--spacing--30);
	grid-template-columns: minmax(0, 1fr);
	align-items: start;
}

@media (min-width: 600px) {
	.sabia-essa-readalso__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: var(--wp--preset--spacing--30) var(--wp--preset--spacing--40);
	}
}

.sabia-essa-readalso__item .sabia-essa-card__media {
	flex: 0 0 96px;
	width: 96px;
}

@media (min-width: 600px) {
	.sabia-essa-readalso__item .sabia-essa-card__media {
		flex-basis: 128px;
		width: 128px;
	}
}

.sabia-essa-readalso__item .sabia-essa-card__title {
	font-size: 1rem;
	line-height: 1.35;
}

.sabia-essa-readalso__item .sabia-essa-card__title a {
	text-decoration: none;
}

.sabia-essa-readalso__item .sabia-essa-card__title a:hover {
	text-decoration: underline;
	text-decoration-color: var(--wp--preset--color--accent);
	text-decoration-thickness: 3px;
	text-underline-offset: 3px;
}

/* Paginas institucionais */

.sabia-essa-page__title {
	margin-bottom: var(--wp--preset--spacing--30);
}