/**
 * card-news.css — Card de notícia (.fbb-card--news), variantes featured/secondary.
 *
 * Confirmado no DESIGN.md: borda 2px #D2C6C6, badge de data navy,
 * título 36px (featured) / 24px (secondary), excerpt com line-height
 * distinto entre variantes (26px featured / 20px secondary — confirmado
 * via JSON, não são o mesmo estilo reaproveitado).
 */

.fbb-card--news {
	position: relative;
	border: 2px solid var( --fbb-color-card-border );
	display: flex;
	flex-direction: column;
}

.fbb-card__image-link {
	position: relative;
	display: block;
	overflow: hidden;
}

.fbb-card__image {
	width: 100%;
	object-fit: cover;
	transition: transform .35s ease;
}

.fbb-card__image-link:hover .fbb-card__image {
	transform: scale( 1.06 );
}

.fbb-card__date-badge {
	position: absolute;
	left: 0;
	bottom: 0;
	background-color: var( --fbb-color-navy );
	color: var( --fbb-color-white );
	font-family: var( --fbb-font-family );
	font-weight: var( --fbb-font-weight-extrabold );
	font-size: 16px;
	line-height: 1.2;
	padding: 8px 24px;
	text-transform: capitalize;
}

.fbb-card__body {
	padding: 24px;
	display: flex;
	flex-direction: column;
	flex: 1;
}

.fbb-card__title {
	margin: 0 0 12px;
}

.fbb-card__title a {
	font-family: var( --fbb-font-family );
	font-weight: var( --fbb-font-weight-bold );
	color: var( --fbb-color-navy );
	text-decoration: none;
}

.fbb-card__excerpt {
	font-family: var( --fbb-font-family );
	font-weight: var( --fbb-font-weight-medium );
	color: var( --fbb-color-text );
	flex: 1;
	margin: 0 0 16px;
}

.fbb-card__link {
	display: inline-block;
	align-self: flex-start;
	font-family: var( --fbb-font-family );
	font-weight: var( --fbb-font-weight-extrabold );
	font-size: 16px;
	color: var( --fbb-color-navy );
	text-decoration: none;
	border-bottom: 1px solid var( --fbb-color-navy );
	padding-bottom: 5px;
}

/* =============================================================
 * Variante FEATURED — layout em 2 colunas (imagem + texto lado a lado)
 * ============================================================= */
.fbb-card--news-featured {
	flex-direction: row;
}

.fbb-card--news-featured .fbb-card__image-link {
	flex: 0 0 50%;
}

.fbb-card--news-featured .fbb-card__image {
	height: 100%;
}

.fbb-card--news-featured .fbb-card__title a {
	font-size: 36px;
	line-height: 1.278; /* 46px sobre 36px. */
}

.fbb-card--news-featured .fbb-card__excerpt {
	font-size: 16px;
	line-height: 1.625; /* 26px sobre 16px — confirmado distinto da variante secondary. */
}

/* =============================================================
 * Variante SECONDARY — layout em 2 colunas mais compactas
 * ============================================================= */
.fbb-card--news-secondary {
	flex-direction: row;
}

.fbb-card--news-secondary .fbb-card__image-link {
	flex: 0 0 45%;
}

.fbb-card--news-secondary .fbb-card__image {
	height: 100%;
}

.fbb-card--news-secondary .fbb-card__title a {
	font-size: 24px;
	line-height: 1.167; /* 28px sobre 24px. */
}

.fbb-card--news-secondary .fbb-card__excerpt {
	font-size: 16px;
	line-height: 1.25; /* 20px sobre 16px — confirmado mais compacto que a featured. */
}

/* =============================================================
 * Responsivo — empilha imagem sobre texto em telas pequenas
 * ============================================================= */
@media ( max-width: 767px ) {
	.fbb-card--news-featured,
	.fbb-card--news-secondary {
		flex-direction: column;
	}

	.fbb-card--news-featured .fbb-card__image-link,
	.fbb-card--news-secondary .fbb-card__image-link {
		flex: none;
	}

	.fbb-card--news-featured .fbb-card__title a {
		font-size: 28px;
	}

	.fbb-card--news-secondary .fbb-card__title a {
		font-size: 20px;
	}

	.fbb-card--news-featured .fbb-card__excerpt,
	.fbb-card--news-secondary .fbb-card__excerpt {
		font-size: 14px;
	}
}

/* =============================================================
 * Sugestão de hover/scroll-reveal — ver DESIGN.md Seção 6/7 (não
 * extraído do Figma estático, aplicado como progressive enhancement).
 * ============================================================= */
.fbb-card--news {
	transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.fbb-card--news:hover {
	transform: translateY( -4px );
	box-shadow: 0 8px 24px rgba( 0, 0, 0, 0.08 );
}