/**
 * Canal PB — Componentes do portal editorial.
 */

/* =====================================================================
   1. Título de seção
   ===================================================================== */

/* Barra vermelha à esquerda + versalete, conforme a referência. */
.cpb-section-title {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--cpb-space-md);
	margin: 0 0 var(--cpb-space-lg);
	padding-left: var(--cpb-space-md);
	border-left: 4px solid var(--cpb-primary);
}

.cpb-section-title__text {
	font-family: var(--cpb-font-heading);
	font-size: var(--cpb-fs-headline-md);
	font-weight: var(--cpb-fw-bold);
	line-height: var(--cpb-lh-headline-md);
	letter-spacing: var(--cpb-track-head);
	color: var(--cpb-text-strong);
	text-transform: uppercase;
}

.cpb-section-title__note {
	margin-left: auto;
	color: var(--cpb-muted);
	font-size: var(--cpb-fs-body-sm);
	font-weight: var(--cpb-fw-regular);
	text-transform: none;
	letter-spacing: normal;
}

/* Link "Ver todas as reportagens →" */
.cpb-more-link {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	color: var(--cpb-primary);
	font-family: var(--cpb-font-heading);
	font-size: var(--cpb-fs-label-md);
	font-weight: var(--cpb-fw-bold);
	letter-spacing: var(--cpb-track-wide);
	text-transform: uppercase;
	white-space: nowrap;
}

.cpb-more-link:hover {
	color: var(--cpb-primary-vivid);
}

.cpb-more-link__arrow {
	transition: transform var(--cpb-motion-duration) var(--cpb-motion-ease);
}

.cpb-more-link:hover .cpb-more-link__arrow {
	transform: translateX(3px);
}

/* =====================================================================
   2. Ficha de editoria (chip)
   ===================================================================== */

.cpb-chip {
	display: inline-flex;
	align-items: center;
	gap: 0.3rem;
	padding: 0.2rem 0.4rem;
	border-radius: var(--cpb-radius-sm);
	color: #fff;
	font-family: var(--cpb-font-heading);
	font-size: var(--cpb-fs-label-sm);
	font-weight: var(--cpb-fw-bold);
	line-height: var(--cpb-lh-label-sm);
	letter-spacing: var(--cpb-track-wide);
	text-transform: uppercase;
	white-space: nowrap;
}

.cpb-chip--sm {
	font-size: 0.625rem;
	padding: 0.15rem 0.35rem;
}

.cpb-chip--ghost {
	background-color: transparent;
	color: var(--cpb-primary);
	box-shadow: inset 0 0 0 1px currentColor;
}

a.cpb-chip:hover {
	filter: brightness(1.15);
	color: #fff;
}

/* =====================================================================
   3. Metadados de artigo
   ===================================================================== */

.cpb-meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.35rem;
	color: var(--cpb-muted);
	font-size: var(--cpb-fs-body-sm);
	line-height: var(--cpb-lh-body-sm);
}

.cpb-meta__sep {
	color: var(--cpb-border-strong);
}

.cpb-meta__views,
.cpb-meta__time {
	font-variant-numeric: tabular-nums;
}

.cpb-meta--dark {
	color: rgba(255, 255, 255, 0.72);
}

.cpb-meta--dark .cpb-meta__sep {
	color: rgba(255, 255, 255, 0.4);
}

/* "Atualizado a cada 1 hora" */
.cpb-live-note {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	color: var(--cpb-muted);
	font-size: var(--cpb-fs-body-sm);
}

.cpb-live-note__dot {
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background-color: var(--cpb-primary);
}

/* =====================================================================
   4. Botões
   ===================================================================== */

.cpb-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.4rem;
	padding: 0.6rem 1.25rem;
	border: 1px solid transparent;
	border-radius: var(--cpb-radius-base);
	font-family: var(--cpb-font-heading);
	font-size: var(--cpb-fs-label-md);
	font-weight: var(--cpb-fw-bold);
	letter-spacing: var(--cpb-track-wide);
	line-height: var(--cpb-lh-label-md);
	text-transform: uppercase;
	cursor: pointer;
	transition: background-color var(--cpb-motion-duration) var(--cpb-motion-ease),
		color var(--cpb-motion-duration) var(--cpb-motion-ease),
		border-color var(--cpb-motion-duration) var(--cpb-motion-ease),
		transform var(--cpb-motion-duration) var(--cpb-motion-ease);
}

.cpb-btn--primary {
	background-color: var(--cpb-primary);
	color: #fff;
}

.cpb-btn--primary:hover {
	background-color: var(--cpb-primary-vivid);
	color: #fff;
	transform: translateY(-1px);
}

.cpb-btn--dark {
	background-color: var(--cpb-dark);
	color: #fff;
}

.cpb-btn--dark:hover {
	background-color: var(--cpb-dark-charcoal);
	color: #fff;
}

.cpb-btn--ghost {
	background-color: transparent;
	border-color: var(--cpb-text);
	color: var(--cpb-text);
}

.cpb-btn--ghost:hover {
	background-color: var(--cpb-dark);
	color: #fff;
}

.cpb-btn--block {
	display: flex;
	width: 100%;
}

/* "Continuar lendo →" */
.cpb-readmore {
	display: inline-flex;
	align-items: center;
	gap: 0.3rem;
	color: var(--cpb-primary);
	font-family: var(--cpb-font-heading);
	font-size: var(--cpb-fs-label-md);
	font-weight: var(--cpb-fw-bold);
	letter-spacing: var(--cpb-track-wide);
	text-transform: uppercase;
}

.cpb-readmore:hover {
	color: var(--cpb-primary-vivid);
}

/* =====================================================================
   5. Hero
   ===================================================================== */

/* --- Manchete principal: foto sangrada com gradiente inferior --- */
.cpb-hero {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	min-height: 440px;
	overflow: hidden;
	background-color: #262626;
	border-radius: var(--cpb-radius-lg);
	box-shadow: var(--cpb-shadow-card);
	isolation: isolate;
}

.cpb-hero__media {
	position: absolute;
	inset: 0;
	z-index: -2;
}

.cpb-hero__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 600ms var(--cpb-motion-ease);
}

.cpb-hero:hover .cpb-hero__media img {
	transform: scale(1.03);
}

/* Escurece a base para garantir legibilidade do título sobre qualquer foto. */
.cpb-hero__shade {
	position: absolute;
	inset: 0;
	z-index: -1;
	background-image: linear-gradient(180deg, rgba(0, 0, 0, 0) 35%, rgba(17, 17, 17, 0.95) 100%);
}

.cpb-hero__body {
	padding: var(--cpb-space-lg);
	color: #fff;
}

.cpb-hero__chips {
	display: flex;
	flex-wrap: wrap;
	gap: 0.35rem;
	margin-bottom: var(--cpb-space-sm);
}

.cpb-hero__title {
	margin: 0 0 var(--cpb-space-sm);
	color: #fff;
	font-size: var(--cpb-fs-headline-xl);
	line-height: var(--cpb-lh-headline-xl);
	letter-spacing: var(--cpb-track-xl);
	text-wrap: balance;
}

.cpb-hero:hover .cpb-hero__title {
	color: #fff;
}

.cpb-hero__excerpt {
	max-width: 60ch;
	margin: 0 0 var(--cpb-space-sm);
	color: rgba(255, 255, 255, 0.82);
	font-size: var(--cpb-fs-body-md);
	line-height: var(--cpb-lh-body-md);
	display: -webkit-box;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* --- Manchetes secundárias: mesma linguagem, escala reduzida --- */
.cpb-hero-sub {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	min-height: 208px;
	overflow: hidden;
	background-color: #262626;
	border-radius: var(--cpb-radius-lg);
	isolation: isolate;
}

.cpb-hero-sub__media {
	position: absolute;
	inset: 0;
	z-index: -2;
}

.cpb-hero-sub__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.cpb-hero-sub__shade {
	position: absolute;
	inset: 0;
	z-index: -1;
	background-image: linear-gradient(180deg, rgba(0, 0, 0, 0) 30%, rgba(17, 17, 17, 0.95) 100%);
}

.cpb-hero-sub__body {
	display: flex;
	flex-direction: column;
	gap: 0.4rem;
	padding: var(--cpb-space-md);
	color: #fff;
}

.cpb-hero-sub__title {
	margin: 0;
	color: #fff;
	font-size: var(--cpb-fs-headline-sm);
	line-height: var(--cpb-lh-headline-sm);
	letter-spacing: var(--cpb-track-head);
}

.cpb-hero-sub:hover .cpb-hero-sub__title {
	color: #fff;
}

.cpb-hero-sub:hover .cpb-hero-sub__media img {
	transform: scale(1.03);
}

.cpb-hero-sub__media img {
	transition: transform 600ms var(--cpb-motion-ease);
}

/* =====================================================================
   6. Cartões
   ===================================================================== */

.cpb-card {
	display: flex;
	flex-direction: column;
	background-color: var(--cpb-surface);
	border: 1px solid var(--cpb-border);
	border-radius: var(--cpb-radius-lg);
	box-shadow: var(--cpb-shadow-card);
	transition: box-shadow var(--cpb-motion-duration) var(--cpb-motion-ease),
		transform var(--cpb-motion-duration) var(--cpb-motion-ease);
}

.cpb-card:hover {
	box-shadow: var(--cpb-shadow-float);
	transform: translateY(-2px);
}

.cpb-card__thumb {
	position: relative;
	display: block;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	background-color: var(--cpb-surface-mid);
	border-radius: var(--cpb-radius-lg) var(--cpb-radius-lg) 0 0;
}

.cpb-card__thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 600ms var(--cpb-motion-ease);
}

.cpb-card:hover .cpb-card__thumb img {
	transform: scale(1.04);
}

/* Ficha sobreposta no canto da foto */
.cpb-card__chip {
	position: absolute;
	top: var(--cpb-space-sm);
	left: var(--cpb-space-sm);
	z-index: 2;
	width: fit-content;
	max-width: calc(100% - var(--cpb-space-md));
}

/* Cartão sem imagem: placeholder na cor do container */
.cpb-card__thumb--empty {
	display: grid;
	place-items: center;
	background: linear-gradient(135deg, var(--cpb-surface-mid) 0%, var(--cpb-surface-high) 100%);
}

.cpb-card__thumb--empty::after {
	content: attr(data-initials);
	font-family: var(--cpb-font-heading);
	font-size: 2rem;
	font-weight: var(--cpb-fw-black);
	color: var(--cpb-border-strong);
	letter-spacing: var(--cpb-track-lg);
}

.cpb-card__body {
	display: flex;
	flex-direction: column;
	gap: var(--cpb-space-sm);
	flex: 1;
	padding: var(--cpb-space-md);
}

.cpb-card__title {
	margin: 0;
	font-size: var(--cpb-fs-headline-sm);
	line-height: var(--cpb-lh-headline-sm);
	letter-spacing: var(--cpb-track-head);
	color: var(--cpb-text-strong);
}

.cpb-card__title a:hover {
	color: var(--cpb-primary);
}

.cpb-card:hover .cpb-card__title {
	color: var(--cpb-primary);
}

/* Estende a área clicável do título a todo o cartão, sem duplicar a âncora. */
.cpb-card__title a::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
}

.cpb-card {
	position: relative;
}

.cpb-card__excerpt {
	margin: 0;
	color: var(--cpb-muted);
	font-size: var(--cpb-fs-body-sm);
	line-height: var(--cpb-lh-body-sm);
	display: -webkit-box;
	-webkit-line-clamp: 3;
	line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.cpb-card__byline {
	display: flex;
	align-items: center;
	gap: 0.4rem;
	color: var(--cpb-muted);
	font-size: var(--cpb-fs-body-sm);
}

.cpb-card__byline strong {
	color: var(--cpb-text);
	font-weight: var(--cpb-fw-semi);
}

.cpb-card__footer {
	margin-top: auto;
	padding-top: var(--cpb-space-sm);
}

/* --- Cartão horizontal (ranking, vídeos relacionados) --- */
.cpb-card-horizontal {
	position: relative;
	display: flex;
	align-items: flex-start;
	/* Sem isto, o conteúdo mínimo (thumb 100px + título longo) estoura a
	   coluna em que o cartão está e a página ganha rolagem lateral. */
	min-width: 0;
	gap: var(--cpb-space-sm);
	background-color: var(--cpb-surface);
	border: 1px solid var(--cpb-border);
	border-radius: var(--cpb-radius-lg);
	padding: var(--cpb-space-sm);
	transition: border-color var(--cpb-motion-duration) var(--cpb-motion-ease);
}

.cpb-card-horizontal:hover {
	border-color: var(--cpb-border-strong);
}

.cpb-card-horizontal:hover .cpb-card-horizontal__title {
	color: var(--cpb-primary);
}

.cpb-card-horizontal__thumb {
	flex-shrink: 0;
	width: 100px;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	background-color: var(--cpb-surface-mid);
	border-radius: var(--cpb-radius-base);
}

.cpb-card-horizontal__thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.cpb-card-horizontal__body {
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
}

.cpb-card-horizontal__title {
	font-family: var(--cpb-font-heading);
	font-size: var(--cpb-fs-body-md);
	font-weight: var(--cpb-fw-semi);
	line-height: var(--cpb-lh-body-md);
	color: var(--cpb-text-strong);
	display: -webkit-box;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* =====================================================================
   7. Faixa de streaming
   ===================================================================== */

.cpb-stream-bar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--cpb-space-lg);
	margin: var(--cpb-space-xl) 0;
	padding: var(--cpb-space-md) var(--cpb-space-lg);
	background: linear-gradient(135deg, var(--cpb-dark) 0%, var(--cpb-dark-charcoal) 100%);
	border: 1px solid var(--cpb-border-inverse);
	border-top: 4px solid var(--cpb-primary);
	border-radius: var(--cpb-radius-lg);
	color: var(--cpb-inverse-muted);
}

.cpb-stream-bar__brand {
	display: flex;
	align-items: center;
	gap: var(--cpb-space-sm);
	flex-shrink: 0;
}

.cpb-stream-bar__monogram {
	display: grid;
	place-items: center;
	width: 2.5rem;
	height: 2.5rem;
	background-color: var(--cpb-primary);
	border-radius: var(--cpb-radius-base);
	color: #fff;
	font-family: var(--cpb-font-heading);
	font-size: var(--cpb-fs-label-md);
	font-weight: var(--cpb-fw-black);
	letter-spacing: var(--cpb-track-md);
}

.cpb-stream-bar__title {
	margin: 0;
	color: #fff;
	font-family: var(--cpb-font-heading);
	font-size: var(--cpb-fs-headline-sm);
	font-weight: var(--cpb-fw-bold);
	letter-spacing: var(--cpb-track-head);
	text-transform: uppercase;
}

.cpb-stream-bar__text {
	margin: 0;
	font-size: var(--cpb-fs-body-sm);
}

.cpb-stream-bar__cta {
	margin-left: auto;
	flex-shrink: 0;
}

.cpb-stream-bar__episodes {
	display: flex;
	gap: var(--cpb-space-sm);
	flex: 1 1 260px;
	min-width: 0;
}

.cpb-stream-bar__episodes li {
	flex: 1;
	min-width: 0;
	padding: 0.5rem 0.6rem;
	background-color: rgba(255, 255, 255, 0.05);
	border-radius: var(--cpb-radius-base);
	font-size: var(--cpb-fs-label-sm);
	color: var(--cpb-inverse-muted);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

@media (max-width: 767px) {
	.cpb-stream-bar__episodes {
		display: none;
	}

	.cpb-stream-bar__cta {
		width: 100%;
	}
}

/* =====================================================================
   8. Player de transmissão ao vivo
   ===================================================================== */

.cpb-player {
	padding: var(--cpb-space-lg);
	background-color: var(--cpb-dark);
	border: 1px solid var(--cpb-border-inverse);
	border-top: 4px solid var(--cpb-primary);
	border-radius: var(--cpb-radius-xl);
	box-shadow: var(--cpb-shadow-dark);
	color: var(--cpb-inverse-muted);
}

.cpb-player__title {
	display: flex;
	align-items: center;
	gap: var(--cpb-space-sm);
	margin: 0 0 var(--cpb-space-md);
	color: #fff;
	font-family: var(--cpb-font-heading);
	font-size: var(--cpb-fs-headline-sm);
	font-weight: var(--cpb-fw-bold);
	letter-spacing: var(--cpb-track-head);
	text-transform: uppercase;
}

.cpb-player__badge {
	margin-left: auto;
	padding: 0.2rem 0.5rem;
	background-color: var(--cpb-primary);
	border-radius: var(--cpb-radius-sm);
	color: #fff;
	font-family: var(--cpb-font-heading);
	font-size: var(--cpb-fs-label-sm);
	font-weight: var(--cpb-fw-bold);
	letter-spacing: var(--cpb-track-wide);
	text-transform: uppercase;
	white-space: nowrap;
}

.cpb-player__stage {
	position: relative;
	display: grid;
	place-items: center;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	background-color: #000;
	border-radius: var(--cpb-radius-lg);
}

.cpb-player__stage img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: 0.75;
}

.cpb-player__play {
	position: absolute;
	display: grid;
	place-items: center;
	width: 4rem;
	height: 4rem;
	padding-left: 0.25rem;
	background-color: var(--cpb-primary);
	border-radius: 50%;
	color: #fff;
	transition: background-color var(--cpb-motion-duration) var(--cpb-motion-ease),
		transform var(--cpb-motion-duration) var(--cpb-motion-ease);
}

.cpb-player__play:hover {
	background-color: var(--cpb-primary-vivid);
	transform: scale(1.06);
}

.cpb-player__play svg {
	width: 1.5rem;
	height: 1.5rem;
	fill: currentColor;
}

.cpb-player__caption {
	margin: var(--cpb-space-md) 0 var(--cpb-space-sm);
	color: #fff;
	font-family: var(--cpb-font-heading);
	font-size: var(--cpb-fs-headline-sm);
	font-weight: var(--cpb-fw-semi);
	line-height: var(--cpb-lh-headline-sm);
}

.cpb-player__related {
	display: grid;
	gap: var(--cpb-space-sm);
	margin-top: var(--cpb-space-md);
	padding-top: var(--cpb-space-md);
	border-top: 1px solid var(--cpb-border-inverse);
}

.cpb-player__related a {
	display: flex;
	align-items: flex-start;
	gap: 0.4rem;
	color: var(--cpb-inverse-muted);
	font-size: var(--cpb-fs-body-sm);
	line-height: var(--cpb-lh-body-sm);
}

.cpb-player__related a::before {
	content: "";
	flex-shrink: 0;
	width: 5px;
	height: 5px;
	margin-top: 0.5rem;
	background-color: var(--cpb-primary);
	border-radius: 1px;
}

.cpb-player__related a:hover {
	color: var(--cpb-primary-vivid);
}

/* =====================================================================
   8.1 Playlist de vídeos
   ===================================================================== */

.cpb-playlist {
	padding: var(--cpb-space-lg);
	background-color: var(--cpb-dark);
	border: 1px solid var(--cpb-border-inverse);
	border-top: 4px solid var(--cpb-primary);
	border-radius: var(--cpb-radius-xl);
	box-shadow: var(--cpb-shadow-dark);
	color: var(--cpb-inverse-muted);
}

.cpb-playlist__grid {
	display: grid;
	grid-template-columns: 1fr 280px;
	gap: var(--cpb-space-lg);
	align-items: start;
}

.cpb-playlist__stage {
	aspect-ratio: 16 / 9;
	overflow: hidden;
	background-color: #000;
	border-radius: var(--cpb-radius-lg);
}

.cpb-playlist__stage iframe {
	width: 100%;
	height: 100%;
	border: 0;
}

.cpb-playlist__current-title {
	margin: var(--cpb-space-md) 0 0;
	color: #fff;
	font-family: var(--cpb-font-heading);
	font-size: var(--cpb-fs-headline-sm);
	font-weight: var(--cpb-fw-semi);
	line-height: var(--cpb-lh-headline-sm);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.cpb-playlist__list {
	display: grid;
	gap: var(--cpb-space-xs);
}

.cpb-playlist__item {
	display: flex;
	align-items: center;
	gap: var(--cpb-space-sm);
	width: 100%;
	padding: var(--cpb-space-sm);
	background-color: rgba(255, 255, 255, 0.05);
	border: 1px solid transparent;
	border-radius: var(--cpb-radius-base);
	color: var(--cpb-inverse-muted);
	font-size: var(--cpb-fs-body-sm);
	line-height: var(--cpb-lh-body-sm);
	text-align: left;
	cursor: pointer;
	transition: background-color var(--cpb-motion-duration) var(--cpb-motion-ease),
		border-color var(--cpb-motion-duration) var(--cpb-motion-ease),
		color var(--cpb-motion-duration) var(--cpb-motion-ease);
}

.cpb-playlist__item:hover {
	background-color: rgba(255, 255, 255, 0.1);
	border-color: var(--cpb-primary);
	color: var(--cpb-primary-vivid);
}

.cpb-playlist__item[aria-pressed="true"] {
	background-color: rgba(213, 0, 0, 0.15);
	border-color: var(--cpb-primary);
	color: var(--cpb-primary-vivid);
}

.cpb-playlist__number {
	flex-shrink: 0;
	display: grid;
	place-items: center;
	width: 1.5rem;
	height: 1.5rem;
	background-color: var(--cpb-primary);
	border-radius: var(--cpb-radius-sm);
	color: #fff;
	font-family: var(--cpb-font-heading);
	font-size: var(--cpb-fs-label-sm);
	font-weight: var(--cpb-fw-bold);
	font-variant-numeric: tabular-nums;
}

.cpb-playlist__item[aria-pressed="true"] .cpb-playlist__number {
	background-color: var(--cpb-primary-vivid);
}

.cpb-playlist__item-content {
	display: flex;
	flex-direction: column;
	gap: 0.15rem;
	min-width: 0;
}

.cpb-playlist__item-title {
	display: block;
	color: inherit;
	font-family: var(--cpb-font-heading);
	font-size: var(--cpb-fs-body-sm);
	font-weight: var(--cpb-fw-semi);
	line-height: 1.2;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.cpb-playlist__item-meta {
	display: inline-flex;
	align-items: center;
	gap: 0.25rem;
	color: var(--cpb-muted);
	font-size: var(--cpb-fs-label-sm);
}

.cpb-playlist__item:hover .cpb-playlist__item-meta {
	color: var(--cpb-primary-vivid);
}

@media (max-width: 767px) {
	.cpb-playlist__grid {
		grid-template-columns: 1fr;
	}

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

	.cpb-playlist__item {
		flex-direction: column;
		align-items: flex-start;
		gap: 0.25rem;
	}

	.cpb-playlist__item-content {
		width: 100%;
	}
}

@media (max-width: 480px) {
	.cpb-playlist__list {
		grid-template-columns: 1fr;
	}
}

/* =====================================================================
   9. Blocos da rail lateral
   ===================================================================== */

.cpb-widget {
	margin-bottom: var(--cpb-space-lg);
	padding: var(--cpb-space-md);
	background-color: var(--cpb-surface);
	border: 1px solid var(--cpb-border);
	border-radius: var(--cpb-radius-lg);
	box-shadow: var(--cpb-shadow-card);
}

.cpb-widget__title {
	display: flex;
	align-items: center;
	gap: var(--cpb-space-sm);
	margin: 0 0 var(--cpb-space-md);
	padding-left: var(--cpb-space-sm);
	border-left: 3px solid var(--cpb-primary);
	color: var(--cpb-text-strong);
	font-family: var(--cpb-font-heading);
	font-size: var(--cpb-fs-label-md);
	font-weight: var(--cpb-fw-bold);
	letter-spacing: var(--cpb-track-wide);
	text-transform: uppercase;
}

.cpb-widget__title a {
	margin-left: auto;
	color: var(--cpb-muted);
	font-size: var(--cpb-fs-label-sm);
	letter-spacing: var(--cpb-track-md);
}

.cpb-widget__title a:hover {
	color: var(--cpb-primary);
}

/* --- Ranking de mais lidas --- */
.cpb-ranking {
	display: grid;
	gap: var(--cpb-space-sm);
	counter-reset: cpb-rank;
}

.cpb-ranking__item {
	position: relative;
	display: flex;
	align-items: flex-start;
	gap: var(--cpb-space-sm);
	padding-bottom: var(--cpb-space-sm);
	border-bottom: 1px solid var(--cpb-border);
}

.cpb-ranking__item:last-child {
	padding-bottom: 0;
	border-bottom: 0;
}

/* Numeração em bloco vermelho, alinhada à esquerda como na referência. */
.cpb-ranking__num {
	flex-shrink: 0;
	display: grid;
	place-items: center;
	width: 1.5rem;
	height: 1.5rem;
	background-color: var(--cpb-primary);
	border-radius: var(--cpb-radius-sm);
	color: #fff;
	font-family: var(--cpb-font-heading);
	font-size: var(--cpb-fs-label-sm);
	font-weight: var(--cpb-fw-bold);
	font-variant-numeric: tabular-nums;
}

.cpb-ranking__body {
	min-width: 0;
}

.cpb-ranking__title {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	color: var(--cpb-text-strong);
	font-family: var(--cpb-font-heading);
	font-size: var(--cpb-fs-body-md);
	font-weight: var(--cpb-fw-semi);
	line-height: var(--cpb-lh-body-md);
}

.cpb-ranking__item:hover .cpb-ranking__title {
	color: var(--cpb-primary);
}

.cpb-ranking__meta {
	display: block;
	margin-top: 0.15rem;
	color: var(--cpb-muted);
	font-size: var(--cpb-fs-body-sm);
	font-variant-numeric: tabular-nums;
}

/* --- Newsletter --- */
.cpb-newsletter {
	background: linear-gradient(135deg, var(--cpb-dark) 0%, var(--cpb-dark-charcoal) 100%);
	border-color: var(--cpb-border-inverse);
	color: var(--cpb-inverse-muted);
}

.cpb-newsletter .cpb-widget__title {
	color: #fff;
}

.cpb-newsletter__desc {
	margin: 0 0 var(--cpb-space-md);
	color: var(--cpb-inverse-muted);
	font-size: var(--cpb-fs-body-sm);
	line-height: var(--cpb-lh-body-sm);
}

.cpb-newsletter__form {
	display: flex;
	flex-direction: column;
	gap: var(--cpb-space-sm);
}

.cpb-newsletter__form input[type="email"] {
	background-color: rgba(255, 255, 255, 0.06);
	border-color: var(--cpb-border-inverse);
	color: #fff;
}

.cpb-newsletter__form input[type="email"]::placeholder {
	color: rgba(255, 255, 255, 0.45);
}

.cpb-newsletter__form input[type="email"]:focus {
	border-color: var(--cpb-primary);
}

/* --- Siga o portal: contadores --- */
.cpb-social-stats {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--cpb-space-sm);
	margin-top: var(--cpb-space-md);
}

.cpb-social-stat {
	padding: var(--cpb-space-sm);
	background-color: var(--cpb-surface-low);
	border-radius: var(--cpb-radius-base);
	text-align: center;
}

.cpb-social-stat strong {
	display: block;
	color: var(--cpb-primary);
	font-family: var(--cpb-font-heading);
	font-size: var(--cpb-fs-headline-sm);
	font-weight: var(--cpb-fw-black);
	line-height: 1.1;
	font-variant-numeric: tabular-nums;
}

.cpb-social-stat span {
	color: var(--cpb-muted);
	font-size: var(--cpb-fs-label-sm);
	letter-spacing: var(--cpb-track-md);
	text-transform: uppercase;
}

.cpb-social-icons {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem;
	margin-top: var(--cpb-space-md);
}

.cpb-social-icons a {
	display: grid;
	place-items: center;
	width: 2rem;
	height: 2rem;
	background-color: var(--cpb-surface-low);
	border-radius: var(--cpb-radius-base);
	color: var(--cpb-text);
	transition: background-color var(--cpb-motion-duration) var(--cpb-motion-ease),
		color var(--cpb-motion-duration) var(--cpb-motion-ease);
}

.cpb-social-icons a:hover {
	background-color: var(--cpb-primary);
	color: #fff;
}

.cpb-social-icons svg {
	width: 0.95rem;
	height: 0.95rem;
	fill: currentColor;
}

/* --- Opinião e articulistas --- */
.cpb-columnists {
	display: grid;
	gap: var(--cpb-space-sm);
}

.cpb-columnist {
	display: flex;
	align-items: center;
	gap: var(--cpb-space-sm);
}

.cpb-columnist__avatar {
	flex-shrink: 0;
	width: 2.25rem;
	height: 2.25rem;
	border-radius: 50%;
	object-fit: cover;
	background-color: var(--cpb-surface-mid);
}

.cpb-columnist__name {
	display: block;
	color: var(--cpb-text-strong);
	font-family: var(--cpb-font-heading);
	font-size: var(--cpb-fs-body-md);
	font-weight: var(--cpb-fw-semi);
	line-height: 1.2;
}

.cpb-columnist__role {
	color: var(--cpb-muted);
	font-size: var(--cpb-fs-body-sm);
	line-height: 1.2;
}

.cpb-columnist:hover .cpb-columnist__name {
	color: var(--cpb-primary);
}

/* --- Tópicos em alta --- */
.cpb-topics {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem;
}

.cpb-topic {
	padding: 0.3rem 0.55rem;
	background-color: var(--cpb-surface-low);
	border: 1px solid var(--cpb-border);
	border-radius: var(--cpb-radius-base);
	color: var(--cpb-text);
	font-family: var(--cpb-font-heading);
	font-size: var(--cpb-fs-label-sm);
	font-weight: var(--cpb-fw-semi);
	letter-spacing: var(--cpb-track-md);
}

.cpb-topic:hover {
	border-color: var(--cpb-primary);
	background-color: var(--cpb-primary);
	color: #fff;
}

/* =====================================================================
   10. Feed de últimas notícias
   ===================================================================== */

.cpb-feed {
	display: grid;
	gap: var(--cpb-space-lg);
}

.cpb-feed__item {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 1fr) 220px;
	gap: var(--cpb-space-lg);
	padding-bottom: var(--cpb-space-lg);
	border-bottom: 1px solid var(--cpb-border);
}

.cpb-feed__item:last-child {
	padding-bottom: 0;
	border-bottom: 0;
}

.cpb-feed__thumb {
	order: 2;
	aspect-ratio: 16 / 10;
	overflow: hidden;
	background-color: var(--cpb-surface-mid);
	border-radius: var(--cpb-radius-base);
}

.cpb-feed__thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 600ms var(--cpb-motion-ease);
}

.cpb-feed__item:hover .cpb-feed__thumb img {
	transform: scale(1.04);
}

.cpb-feed__body {
	order: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: var(--cpb-space-sm);
}

.cpb-feed__title {
	margin: 0;
	font-size: var(--cpb-fs-headline-md);
	line-height: var(--cpb-lh-headline-md);
	letter-spacing: var(--cpb-track-head);
	color: var(--cpb-text-strong);
}

.cpb-feed__item:hover .cpb-feed__title {
	color: var(--cpb-primary);
}

/* Estende o clique do título para o item inteiro do feed. */
.cpb-feed__title a::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
}

.cpb-feed__excerpt {
	margin: 0;
	color: var(--cpb-muted);
	font-size: var(--cpb-fs-body-md);
	line-height: var(--cpb-lh-body-md);
	display: -webkit-box;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.cpb-feed__chips {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--cpb-space-sm);
}

@media (max-width: 639px) {
	.cpb-feed__item {
		grid-template-columns: 108px minmax(0, 1fr);
		gap: var(--cpb-space-sm);
		padding-bottom: var(--cpb-space-md);
	}

	.cpb-feed__title {
		font-size: var(--cpb-fs-headline-sm);
		line-height: var(--cpb-lh-headline-sm);
	}

	.cpb-feed__excerpt {
		display: none;
	}
}

/* --- Manchete da listagem: o primeiro artigo ganha imagem grande --- */
.cpb-listing-lead {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: var(--cpb-space-md);
	padding-bottom: var(--cpb-space-lg);
	border-bottom: 1px solid var(--cpb-border);
}

.cpb-listing-lead__media {
	position: relative;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	background-color: var(--cpb-surface-mid);
	border-radius: var(--cpb-radius-lg);
}

.cpb-listing-lead__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.cpb-listing-lead__chip {
	position: absolute;
	top: var(--cpb-space-sm);
	left: var(--cpb-space-sm);
	z-index: 1;
}

.cpb-listing-lead__title {
	margin: 0 0 var(--cpb-space-sm);
	font-size: var(--cpb-fs-headline-lg);
	line-height: var(--cpb-lh-headline-lg);
	letter-spacing: var(--cpb-track-lg);
}

.cpb-listing-lead__title a:hover {
	color: var(--cpb-primary);
}

/* =====================================================================
   11. Cabeçalho de arquivo / página
   ===================================================================== */

.cpb-page-head {
	margin-bottom: var(--cpb-space-lg);
	padding-bottom: var(--cpb-space-md);
	border-bottom: 1px solid var(--cpb-border);
}

.cpb-page-head__title {
	margin: 0;
	font-size: var(--cpb-fs-headline-lg);
	line-height: var(--cpb-lh-headline-lg);
	letter-spacing: var(--cpb-track-lg);
	text-transform: uppercase;
}

.cpb-page-head__meta {
	margin: var(--cpb-space-xs) 0 0;
	color: var(--cpb-muted);
	font-size: var(--cpb-fs-body-sm);
}

.cpb-page-head__desc {
	margin: var(--cpb-space-sm) 0 0;
	color: var(--cpb-text);
	font-size: var(--cpb-fs-body-md);
	line-height: var(--cpb-lh-body-md);
}

/* =====================================================================
   12. Paginação
   ===================================================================== */

.cpb-pagination {
	display: flex;
	justify-content: center;
	margin-top: var(--cpb-space-xl);
}

.cpb-pagination .nav-links {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--cpb-space-xs);
}

.cpb-pagination .page-numbers {
	display: inline-grid;
	place-items: center;
	min-width: 2.25rem;
	height: 2.25rem;
	padding-inline: 0.5rem;
	background-color: var(--cpb-surface);
	border: 1px solid var(--cpb-border);
	border-radius: var(--cpb-radius-base);
	color: var(--cpb-text);
	font-family: var(--cpb-font-heading);
	font-size: var(--cpb-fs-body-sm);
	font-weight: var(--cpb-fw-bold);
	font-variant-numeric: tabular-nums;
	transition: background-color var(--cpb-motion-duration) var(--cpb-motion-ease),
		color var(--cpb-motion-duration) var(--cpb-motion-ease),
		border-color var(--cpb-motion-duration) var(--cpb-motion-ease);
}

.cpb-pagination .page-numbers:hover {
	border-color: var(--cpb-primary);
	color: var(--cpb-primary);
}

.cpb-pagination .page-numbers.current {
	background-color: var(--cpb-primary);
	border-color: var(--cpb-primary);
	color: #fff;
}

.cpb-pagination .page-numbers.dots {
	background: none;
	border-color: transparent;
	color: var(--cpb-muted);
}

.cpb-pagination .prev,
.cpb-pagination .next {
	gap: 0.35rem;
}

/* =====================================================================
   13. Post único
   ===================================================================== */

.cpb-single {
	max-width: var(--cpb-content);
	margin-inline: auto;
}

.cpb-single__header {
	margin-bottom: var(--cpb-space-lg);
}

.cpb-single__chips {
	display: flex;
	flex-wrap: wrap;
	gap: var(--cpb-space-sm);
	margin-bottom: var(--cpb-space-sm);
}

.cpb-single__title {
	margin: 0 0 var(--cpb-space-md);
	font-size: var(--cpb-fs-headline-xl);
	line-height: var(--cpb-lh-headline-xl);
	letter-spacing: var(--cpb-track-xl);
	text-wrap: balance;
}

.cpb-single__excerpt {
	margin: 0 0 var(--cpb-space-md);
	color: var(--cpb-muted);
	font-size: var(--cpb-fs-body-lg);
	line-height: var(--cpb-lh-body-lg);
}

.cpb-single__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--cpb-space-sm);
	padding-block: var(--cpb-space-sm);
	border-top: 1px solid var(--cpb-border);
	border-bottom: 1px solid var(--cpb-border);
}

.cpb-single__media {
	margin: 0 0 var(--cpb-space-lg);
}

.cpb-single__media img {
	width: 100%;
	border-radius: var(--cpb-radius-lg);
}

.cpb-single__caption {
	margin-top: var(--cpb-space-sm);
	color: var(--cpb-muted);
	font-size: var(--cpb-fs-body-sm);
}

.cpb-single__footer {
	margin-top: var(--cpb-space-xl);
	padding-top: var(--cpb-space-lg);
	border-top: 1px solid var(--cpb-border);
}

.cpb-share {
	display: flex;
	align-items: center;
	gap: var(--cpb-space-sm);
	margin-top: var(--cpb-space-lg);
}

.cpb-share__label {
	color: var(--cpb-muted);
	font-family: var(--cpb-font-heading);
	font-size: var(--cpb-fs-label-md);
	font-weight: var(--cpb-fw-bold);
	letter-spacing: var(--cpb-track-wide);
	text-transform: uppercase;
}

/* =====================================================================
   14. Buscas e estado vazio
   ===================================================================== */

.cpb-search-form {
	display: flex;
	align-items: stretch;
	gap: var(--cpb-space-xs);
}

.cpb-search-form__field {
	position: relative;
	flex: 1;
	min-width: 0;
}

.cpb-search-form__field input[type="search"] {
	height: 100%;
	padding-left: 2.25rem;
}

.cpb-search-form__icon {
	position: absolute;
	top: 50%;
	left: 0.7rem;
	transform: translateY(-50%);
	width: 0.95rem;
	height: 0.95rem;
	color: var(--cpb-muted);
	fill: currentColor;
	pointer-events: none;
}

.cpb-empty {
	padding: var(--cpb-space-xl) var(--cpb-space-lg);
	text-align: center;
	background-color: var(--cpb-surface);
	border: 1px dashed var(--cpb-border-strong);
	border-radius: var(--cpb-radius-lg);
}

.cpb-empty__title {
	margin: 0 0 var(--cpb-space-sm);
	font-size: var(--cpb-fs-headline-md);
}

.cpb-empty__text {
	margin: 0 auto var(--cpb-space-lg);
	max-width: 46ch;
	color: var(--cpb-muted);
}

.cpb-empty__actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--cpb-space-sm);
}

.cpb-404 {
	max-width: 34rem;
	margin-inline: auto;
	padding: var(--cpb-space-xl) 0;
	text-align: center;
}

.cpb-404__code {
	display: block;
	color: var(--cpb-primary);
	font-family: var(--cpb-font-heading);
	font-size: 4.5rem;
	font-weight: var(--cpb-fw-black);
	line-height: 1;
	letter-spacing: var(--cpb-track-xl);
}

.cpb-404__title {
	margin: var(--cpb-space-md) 0 var(--cpb-space-sm);
	font-size: var(--cpb-fs-headline-lg);
	text-transform: uppercase;
	letter-spacing: var(--cpb-track-lg);
}

.cpb-404__text {
	margin: 0 auto var(--cpb-space-lg);
	color: var(--cpb-muted);
}

/* =====================================================================
   15. Comentários
   ===================================================================== */

.cpb-comments {
	max-width: var(--cpb-content);
	margin: var(--cpb-space-xl) auto 0;
	padding-top: var(--cpb-space-lg);
	border-top: 1px solid var(--cpb-border);
}

.cpb-comments__title {
	margin-bottom: var(--cpb-space-md);
	font-size: var(--cpb-fs-headline-sm);
	text-transform: uppercase;
	letter-spacing: var(--cpb-track-head);
}

/* =====================================================================
   16. Utilitários
   ===================================================================== */

/* Versalete usado acima dos títulos de página. */
.cpb-eyebrow {
	display: block;
	margin-bottom: var(--cpb-space-xs);
	color: var(--cpb-primary);
	font-family: var(--cpb-font-heading);
	font-size: var(--cpb-fs-label-md);
	font-weight: var(--cpb-fw-bold);
	letter-spacing: var(--cpb-track-wide);
	text-transform: uppercase;
}

.cpb-mb-md {
	margin-bottom: var(--cpb-space-md);
}

.cpb-icon-btn {
	display: inline-grid;
	place-items: center;
	width: 2.25rem;
	height: 2.25rem;
	background-color: var(--cpb-surface);
	border: 1px solid var(--cpb-border);
	border-radius: var(--cpb-radius-base);
	color: var(--cpb-text);
	transition: border-color var(--cpb-motion-duration) var(--cpb-motion-ease),
		color var(--cpb-motion-duration) var(--cpb-motion-ease);
}

.cpb-icon-btn:hover {
	border-color: var(--cpb-primary);
	color: var(--cpb-primary);
}

.cpb-icon-btn svg {
	width: 0.95rem;
	height: 0.95rem;
	fill: currentColor;
}

.cpb-newsletter__title {
	margin: 0 0 var(--cpb-space-sm);
	font-family: var(--cpb-font-heading);
	font-size: var(--cpb-fs-headline-sm);
	font-weight: var(--cpb-fw-bold);
	line-height: var(--cpb-lh-headline-sm);
	color: #fff;
}

.cpb-newsletter__notice {
	margin: var(--cpb-space-sm) 0 0;
	color: var(--cpb-primary-vivid);
	font-size: var(--cpb-fs-body-sm);
}

/* Cartão fixado ganha um acento vermelho para destacar da lista. */
.cpb-card--sticky .cpb-card__thumb::after {
	content: "";
	position: absolute;
	inset: 0;
	border: 2px solid var(--cpb-primary);
	border-radius: var(--cpb-radius-lg) var(--cpb-radius-lg) 0 0;
	pointer-events: none;
}

/* Coluna de manchetes secundárias do hero. */
.cpb-hero-sub-stack {
	display: grid;
	gap: var(--cpb-space-lg);
	height: 100%;
}

@media (min-width: 1024px) {
	.cpb-hero-sub-stack {
		grid-template-rows: 1fr 1fr;
	}
}

@media (max-width: 767px) {
	.cpb-listing-lead__title {
		font-size: var(--cpb-fs-headline-lg-mobile);
		line-height: var(--cpb-lh-headline-lg-mobile);
	}
}

.cpb-mt-lg {
	margin-top: var(--cpb-space-lg);
}

/* O widget Heading do Elementor traz margem própria (32px 0 16px). Dentro dos
   componentes do tema quem controla o ritmo é o gap do container, então ela é
   zerada aqui — 3 classes para vencer `.elementor-widget-heading .elementor-heading-title`. */
.cpb-card__body .elementor-heading-title,
.cpb-feed__body .elementor-heading-title,
.cpb-hero__body .elementor-heading-title,
.cpb-player__caption,
.cpb-page-head .elementor-heading-title {
	margin: 0;
}
/* ==========================================================================
   Modelos do Elementor
   ========================================================================== */

/* Loop Item / cartão editorial. O container do Elementor é a caixa; aqui
   ficam só o respiro interno, o clamp da manchete e o realce no hover. */
.cpb-loop-card {
	height: 100%;
	transition: border-color var(--cpb-motion-duration) var(--cpb-motion-ease),
		box-shadow var(--cpb-motion-duration) var(--cpb-motion-ease),
		transform var(--cpb-motion-duration) var(--cpb-motion-ease);
}

.cpb-loop-card:hover {
	border-color: var(--cpb-border-strong);
	box-shadow: var(--cpb-shadow-float);
	transform: translateY(-2px);
}

.cpb-loop-card:hover .elementor-heading-title {
	color: var(--cpb-primary);
}

.cpb-loop-card .elementor-heading-title {
	transition: color var(--cpb-motion-duration) var(--cpb-motion-ease);
}

.cpb-loop-card__excerpt p {
	margin: 0;
}

/* O widget Text Editor do Elementor entrega <p> com margem própria. */
.cpb-loop-card__excerpt > p:last-child {
	margin-bottom: 0;
}

/* Bloco de relacionadas: a grade cuide do respiro entre os cartões. */
.cpb-related .e-loop-item {
	height: 100%;
}

/* O cartão precisa ser o contexto de posicionamento da ficha sobreposta: com a
   imagem e a ficha como irmãs, o `position:absolute` da ficha escapava para um
   ancestral e a barra preenchia a largura toda do cartão. */
.cpb-card__media {
	position: relative;
}

/* ==========================================================================
   Ajustes por largura dos componentes
   ==========================================================================

   Estas regras ficam no fim de propósito: `components.css` é enfileirado
   depois de `layout.css`, então é aqui que uma regra de componente vence o
   que foi definido na camada de layout com a mesma especificidade. */

/* O logo e os quatro botões somam mais que a tela estreita. O botão de
   newsletter é o único dispensável — a mesma ação vive no rodapé. */
@media (max-width: 767px) {
	.cpb-masthead__newsletter {
		display: none;
	}

	.cpb-utility__date {
		font-size: var(--cpb-fs-label-sm);
	}

	.cpb-masthead__inner {
		gap: var(--cpb-space-sm);
	}
}

/* Data, temperatura e ticker não cabem juntos. A cidade já aparece no ticker
   e no rodapé, então ela sai primeiro. */
@media (max-width: 639px) {
	.cpb-utility__weather {
		display: none;
	}

	.cpb-utility__inner {
		gap: var(--cpb-space-sm);
	}

	/* Sem espaço para data, clima e ticker, fica o ticker: é ele que traz a
	   manchete do dia, e a data é redundante com a manchete. */
	.cpb-utility__date {
		display: none;
	}

	.cpb-utility__ticker {
		flex: 1 1 100%;
		min-width: 0;
	}
}

/* A marca da faixa de streaming não pode encolher: com `nowrap` nos itens, ela
   empurrava a página inteira para fora da tela no mobile. */
.cpb-stream-bar__brand {
	min-width: 0;
}

.cpb-stream-bar__title,
.cpb-stream-bar__text {
	min-width: 0;
	overflow-wrap: anywhere;
}

@media (max-width: 767px) {
	/* A faixa empilha: com a marca, a lista de episódios e o botão disputando a
	   mesma linha, nenhum deles cabia sem esticar a página. */
	.cpb-stream-bar {
		flex-direction: column;
		align-items: stretch;
		gap: var(--cpb-space-md);
	}

	.cpb-stream-bar__brand {
		flex: 0 1 auto;
		width: 100%;
	}

	.cpb-stream-bar__title {
		font-size: var(--cpb-fs-headline-sm);
	}
}

@media (max-width: 639px) {
	/* A contagem de matérias ao lado do título é ruído em tela estreita. */
	.cpb-section-title__note {
		display: none;
	}

	/* A data por extenso é longa demais; corta com reticências. */
	.cpb-utility__date {
		min-width: 0;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}
}

/* --- Correções de estouro horizontal --------------------------------------

   Itens flex com `flex-shrink: 0` mantêm a largura do conteúdo mesmo quando o
   pai é menor; em tela estreita isso estoura a página e cria a barra de
   rolagem lateral. */

@media (max-width: 767px) {
	.cpb-utility__date {
		flex: 0 1 auto;
	}

	/* Título e "ver todas" não cabem na mesma linha: o link desce. */
	.cpb-section-title {
		flex-wrap: wrap;
	}

	.cpb-section-title__text {
		min-width: 0;
	}
}

@media (max-width: 639px) {
	.cpb-card-horizontal__thumb {
		width: 88px;
		flex: 0 0 88px;
	}

	.cpb-card-horizontal__body {
		min-width: 0;
	}
}

/* O formulário de busca da página de resultados ocupa a coluna toda, sem o
   `max-width` estreito que o painel suspenso do masthead usa. */
.cpb-search-block {
	max-width: 44rem;
	margin-bottom: var(--cpb-space-md);
}

/* ==========================================================================
   Loop Items do Elementor
   ==========================================================================

   O container do Elementor é flex, então a grade de 12 colunas do tema não se
   aplica a ele — o `.cpb-grid-12` fica inerte e as porcentagens somadas ao
   gap estouram a linha. Estas regras recompõem o 8+4 com flex. */

.elementor .cpb-grid-12.cpb-section {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	align-items: flex-start;
	gap: var(--cpb-space-xl);
}

.elementor .cpb-grid-12.cpb-section > .cpb-col-8 {
	flex: 1 1 0;
	min-width: 0;
}

.elementor .cpb-grid-12.cpb-section > .cpb-col-4 {
	flex: 0 0 32%;
}

@media (max-width: 1023px) {
	.elementor .cpb-grid-12.cpb-section > .cpb-col-4 {
		flex: 1 1 100%;
	}
}

/* A miniatura do cartão precisa de proporção fixa: sem imagem, o bloco vazio
   esticava na altura da linha inteira da grade. */
.cpb-loop-card .cpb-card__thumb {
	aspect-ratio: 16 / 9;
	width: 100%;
}

.cpb-loop-card .cpb-card__thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* No item compacto a miniatura tem largura fixa e altura proporcional. */
.cpb-card-horizontal .cpb-card-horizontal__thumb {
	flex: 0 0 96px;
	width: 96px;
	aspect-ratio: 4 / 3;
	overflow: hidden;
}

.cpb-card-horizontal .cpb-card-horizontal__thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Miniatura do item compacto: largura fixa e proporção 4:3, para que o
   placeholder sem imagem não estique na altura do cartão. */
.cpb-card-horizontal__thumb {
	display: block;
	flex: 0 0 96px;
	width: 96px;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	border-radius: var(--cpb-radius-base);
	background-color: var(--cpb-surface-mid);
}

.cpb-card-horizontal__thumb img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.cpb-card-horizontal__thumb--empty::before {
	content: attr(data-initials);
	display: grid;
	place-items: center;
	width: 100%;
	height: 100%;
	font-family: var(--cpb-font-heading);
	font-size: var(--cpb-fs-headline-sm);
	font-weight: var(--cpb-fw-bold);
	color: var(--cpb-inverse-muted);
}