/**
 * Clube News Destaque — estilo da caixa de destaque com abas (estilo portal).
 * Cor de destaque vem da variável inline --cnd-accent no .cnd-box.
 */

.cnd-box {
	--cnd-accent: #c20000;
	max-width: 440px;
	margin: 0 0 20px;
	font-family: inherit;
	color: #1a1a1a;
}

/* ---- Barra de abas (segmented control) ---- */
.cnd-tabs {
	display: flex;
	gap: 4px;
	background: #e8e9ec;
	border-radius: 8px;
	padding: 4px;
	margin: 0 0 10px;
}
/* Reset "blindado": o <button> da aba é terreno de disputa com o tema, que
   costuma pintar button:hover com o próprio accent (ficava vermelho) e usar
   padding maior (deixava a barra 5-7px mais alta). !important nas propriedades
   de pintura/caixa garante o nosso visual em qualquer tema. */
.cnd-box .cnd-tab {
	-webkit-appearance: none !important;
	appearance: none !important;
	flex: 1 1 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 7px;
	width: auto;
	margin: 0 !important;
	border: 0 !important;
	border-radius: 6px !important;
	background: transparent !important;
	color: #4a4a4a !important;
	/* Longhand de propósito: `font: 700 13px/1.1 inherit` é INVÁLIDO (inherit não
	   é família válida no shorthand) e era descartado inteiro — por isso o negrito
	   não pegava em alguns temas. */
	font-family: inherit !important;
	font-size: 13px !important;
	font-weight: 700 !important;
	line-height: 1.1 !important;
	letter-spacing: .01em;
	padding: 9px 12px !important;
	min-height: 0 !important;
	height: auto !important;
	box-shadow: none !important;
	text-transform: none !important;
	text-shadow: none !important;
	cursor: pointer;
	transition: background .15s, color .15s, box-shadow .15s;
}
.cnd-box .cnd-tab:hover,
.cnd-box .cnd-tab:focus {
	background: transparent !important;
	color: #1a1a1a !important;
	box-shadow: none !important;
	outline: none;
}
.cnd-box .cnd-tab.is-active,
.cnd-box .cnd-tab.is-active:hover,
.cnd-box .cnd-tab.is-active:focus {
	background: #fff !important;
	color: #111 !important;
	box-shadow: 0 1px 3px rgba(0, 0, 0, .14) !important;
}
/* O ponto só existe na aba ATIVA. As demais abas não têm bolinha. */
.cnd-tab-dot {
	display: none;
	position: relative;
	width: 9px;
	height: 9px;
	border-radius: 50%;
	flex: 0 0 auto;
}
/* Aba ativa: ponto vermelho SÓLIDO (sempre vivo) + halo que pulsa em volta.
   A versão anterior apagava o próprio ponto até 30% de opacidade, então um
   print pegava ele desbotado/rosa. Agora o ponto fica cheio e o "ao vivo" é o
   anel que expande. */
.cnd-box .cnd-tab.is-active .cnd-tab-dot {
	display: block;
	background: var(--cnd-accent);
}
.cnd-box .cnd-tab.is-active .cnd-tab-dot::after {
	content: '';
	position: absolute;
	inset: 0;
	border-radius: 50%;
	background: var(--cnd-accent);
	animation: cnd-pulse 1.6s ease-out infinite;
}
@keyframes cnd-pulse {
	0%   { transform: scale(1);   opacity: .55; }
	70%  { transform: scale(2.6); opacity: 0; }
	100% { transform: scale(2.6); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
	.cnd-box .cnd-tab.is-active .cnd-tab-dot::after { animation: none; }
}

/* ---- Painéis ---- */
.cnd-panel { display: none; }
.cnd-panel.is-active { display: block; }

/* ---- Mídia 16:9 ---- */
.cnd-media {
	position: relative;
	display: block;
	width: 100%;
	aspect-ratio: 16 / 9;
	background-color: #0c0e14;
	background-size: cover;
	background-position: center;
	border-radius: 8px;
	overflow: hidden;
	text-decoration: none;
	cursor: pointer;
}
/* Fallback para temas/navegadores sem aspect-ratio. */
@supports not (aspect-ratio: 1 / 1) {
	.cnd-media { height: 0; padding-bottom: 56.25%; }
}
.cnd-media-fallback {
	position: absolute;
	inset: 0;
	background: linear-gradient(135deg, #1b1f2b, #0c0e14);
}

/* Faixa superior ("AO VIVO: ...") */
.cnd-overlay {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 10px 12px;
	background: linear-gradient(180deg, rgba(0, 0, 0, .72), rgba(0, 0, 0, 0));
	color: #fff;
	font-size: 14px;
	font-weight: 700;
	line-height: 1.25;
	z-index: 2;
	text-shadow: 0 1px 2px rgba(0, 0, 0, .5);
}
.cnd-live {
	flex: 0 0 auto;
	background: var(--cnd-accent);
	color: #fff;
	font-size: 10px;
	font-weight: 800;
	letter-spacing: .06em;
	padding: 2px 7px;
	border-radius: 4px;
	text-shadow: none;
}

/* Botão de play central */
.cnd-play {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 64px;
	height: 64px;
	z-index: 2;
	pointer-events: none;
	transition: transform .15s;
}
.cnd-play svg { width: 100%; height: 100%; display: block; }
.cnd-facade:hover .cnd-play { transform: translate(-50%, -50%) scale(1.07); }
.cnd-facade:focus-visible { outline: 3px solid var(--cnd-accent); outline-offset: 2px; }

/* Player ativo (vídeo/iframe injetado pelo JS) */
.cnd-media iframe,
.cnd-media video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
	background: #000;
}

/* ---- Título abaixo ---- */
.cnd-headline {
	display: block;
	margin: 11px 2px 0;
	font-size: 17px;
	font-weight: 800;
	line-height: 1.3;
	color: #111;
	text-decoration: none;
}
a.cnd-headline:hover { color: var(--cnd-accent); text-decoration: underline; }