/**
 * cards.css — componentes editoriais de cards.
 *
 * Camada de estilo sobre o componente .card do Bootstrap. Carregada depois de
 * main.css; usa os tokens --ee-*. Cobre as variações: vertical (grid), grande
 * (destaque), horizontal (listas) e compacta (sidebar), além do fallback de
 * imagem com gradiente.
 *
 * Sumário:
 *   1. Base comum (.ee-card) + hover
 *   2. Mídia: aspect-ratio e fallback de gradiente
 *   3. Título, resumo e meta
 *   4. Variação vertical
 *   5. Variação grande (destaque)
 *   6. Variação horizontal
 *   7. Variação compacta
 */

/* ==========================================================================
   1. Base comum + hover
   ========================================================================== */
.ee-card {
	position: relative;
	background-color: var(--ee-white);
	border: 1px solid var(--ee-border);
	border-radius: var(--ee-radius-md);
	overflow: hidden;
	transition: transform var(--ee-transition), box-shadow var(--ee-transition);
}

.ee-card:hover,
.ee-card:focus-within {
	transform: translateY(-3px);
	box-shadow: var(--ee-shadow-lg) !important;
}

/* ==========================================================================
   2. Mídia: aspect-ratio consistente e fallback
   ========================================================================== */
.ee-card-media {
	display: block;
	position: relative;
	overflow: hidden;
	background-color: var(--ee-bg-alt);
	aspect-ratio: 16 / 10;
	text-decoration: none;
}

.ee-card-media .ee-card-img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 0.4s ease;
}

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

/* Fallback de imagem: gradiente da marca + inicial */
.ee-card-fallback {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	color: rgba(255, 255, 255, 0.92);
}

.ee-card-fallback-initial {
	font-size: clamp(2rem, 1.5rem + 3vw, 3.5rem);
	font-weight: 800;
	line-height: 1;
	text-shadow: 0 2px 8px rgba(13, 71, 161, 0.35);
}

/* Quatro tonalidades do gradiente, variando por post para diferenciar a grade */
.ee-card-fallback--1 {
	background: linear-gradient(135deg, var(--ee-blue) 0%, var(--ee-blue-dark) 100%);
}

.ee-card-fallback--2 {
	background: linear-gradient(135deg, #1e88e5 0%, var(--ee-blue) 100%);
}

.ee-card-fallback--3 {
	background: linear-gradient(135deg, var(--ee-blue-dark) 0%, #283593 100%);
}

.ee-card-fallback--4 {
	background: linear-gradient(135deg, #1565c0 0%, #00838f 100%);
}

/* ==========================================================================
   3. Título, resumo e meta
   ========================================================================== */
.ee-card-title {
	margin-bottom: var(--ee-space-2);
	line-height: 1.3;
	/* Comportamento seguro com títulos longos */
	overflow-wrap: break-word;
	word-wrap: break-word;
	hyphens: auto;
}

.ee-card-title a {
	color: var(--ee-text);
}

.ee-card:hover .ee-card-title a {
	color: var(--ee-blue);
}

/* Resumo: limita a 3 linhas, com reticências */
.ee-card-excerpt {
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
	margin-bottom: var(--ee-space-3);
}

.ee-card .ee-badge {
	align-self: flex-start;
}

.ee-card .entry-meta {
	margin-top: auto;
}

.ee-card .reading-time::before {
	content: "";
}

/* ==========================================================================
   4. Variação vertical (grid)
   ========================================================================== */
.ee-card--vertical .card-body {
	padding: var(--ee-space-5);
}

/* ==========================================================================
   5. Variação grande (destaque)
   ========================================================================== */
.ee-card--large .ee-card-media--large {
	aspect-ratio: 16 / 11;
	height: 100%;
}

.ee-card--large .ee-card-title {
	line-height: 1.2;
}

@media (min-width: 992px) {
	.ee-card--large .ee-card-media--large {
		aspect-ratio: auto;
		min-height: 280px;
	}
}

/* ==========================================================================
   6. Variação horizontal (listas)
   --------------------------------------------------------------------------
   Listagem do front (1 post por linha): imagem à esquerda ocupando a ALTURA
   TOTAL do card; à direita badge + título (máx. 2 linhas) + botão "Ler
   matéria". Todos os cards têm a mesma ALTURA PADRONIZADA, dimensionada para
   comportar 2 linhas de título. A variação .ee-card--mini (home) reaproveita a
   base, mas com seu próprio dimensionamento (ver home.css).
   ========================================================================== */
.ee-card--horizontal {
	overflow: hidden;
}

/* Base da imagem horizontal (preenche a altura) — usada pelos minis da home. */
.ee-card--horizontal .ee-card-media--horizontal {
	aspect-ratio: 1 / 1;
	height: 100%;
	min-height: 100%;
}

.ee-card--horizontal .ee-card-title {
	margin-bottom: var(--ee-space-2);
}

/* ----- Listagem (cards não-mini): altura padronizada + imagem de altura cheia ----- */

/* Altura fixa do card (mobile): comporta badge + 2 linhas de título + botão. */
.ee-card--horizontal:not(.ee-card--mini) {
	height: 150px;
	/* Em coluna flex (.vstack), impede que o conteúdo estoure a largura. */
	min-width: 0;
}

.ee-card--horizontal:not(.ee-card--mini) .ee-card-row {
	height: 100%;
	min-width: 0;
}

/* Imagem: largura fixa, altura TOTAL do card (recortada para caber). */
.ee-card--horizontal:not(.ee-card--mini) .ee-card-media--horizontal {
	flex: 0 0 auto;
	width: 110px;
	height: 100%;
	min-height: 0;
	aspect-ratio: auto;
	align-self: stretch;
}

.ee-card--horizontal:not(.ee-card--mini) .card-body {
	min-width: 0;
	padding: var(--ee-space-3) var(--ee-space-4);
	/* Respiro maior entre a imagem e o conteúdo. */
	padding-left: var(--ee-space-5);
}

/* Título: no máximo 2 linhas, com reticências. */
.ee-card--horizontal:not(.ee-card--mini) .ee-card-title {
	margin-bottom: 0;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* Botão "Ler matéria" no canto inferior direito. */
.ee-card--horizontal:not(.ee-card--mini) .ee-card-actions {
	align-self: stretch;
}

/* Desktop: card e imagem um pouco maiores; mais respiro. */
@media (min-width: 768px) {
	.ee-card--horizontal:not(.ee-card--mini) {
		height: 170px;
	}

	.ee-card--horizontal:not(.ee-card--mini) .ee-card-media--horizontal {
		width: 240px;
	}

	.ee-card--horizontal:not(.ee-card--mini) .card-body {
		padding: var(--ee-space-4) var(--ee-space-5);
		padding-left: var(--ee-space-6);
	}
}

/* Mobile (até 767px): sem botão de ação e título com fonte um pouco menor. */
@media (max-width: 767.98px) {
	.ee-card--horizontal:not(.ee-card--mini) {
		/* Sem o botão, o card fica mais baixo (badge + 2 linhas de título). */
		height: 120px;
	}

	.ee-card--horizontal:not(.ee-card--mini) .ee-card-actions {
		display: none;
	}

	.ee-card--horizontal:not(.ee-card--mini) .ee-card-title {
		font-size: 0.95rem;
	}
}

/* ==========================================================================
   7. Variação compacta (sidebar / listas curtas)
   ========================================================================== */
.ee-card--compact {
	background-color: transparent;
	border: 0;
	border-radius: 0;
	padding-block: var(--ee-space-3);
	border-bottom: 1px solid var(--ee-border);
	overflow: visible;
}

.ee-card--compact:hover,
.ee-card--compact:focus-within {
	transform: none;
	box-shadow: none !important;
}

.ee-card--compact:last-child {
	border-bottom: 0;
}

.ee-card-media--compact {
	width: 72px;
	height: 72px;
	border-radius: var(--ee-radius-sm);
	overflow: hidden;
	aspect-ratio: 1 / 1;
}

.ee-card--compact .ee-card-title {
	margin-bottom: var(--ee-space-1);
	line-height: 1.25;
	/* No máximo 2 linhas no formato compacto */
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.ee-card--compact .ee-card-title a {
	font-size: 0.9375rem;
}

.ee-card-compact-body {
	min-width: 0;
}

/* ==========================================================================
   Card compacto de GRADE (.ee-card--compact-grid) + carrossel mobile
   --------------------------------------------------------------------------
   Reutilizado pelo "Segundo destaque" da home e por "Posts relacionados" no
   single. Card enxuto (imagem 16/9, só badge + título — resumo/meta ocultos no
   PHP) e, no MOBILE, a grade vira carrossel horizontal com snap (.ee-carousel).
   ========================================================================== */
.ee-card--compact-grid .ee-card-media {
	aspect-ratio: 16 / 9;
}

.ee-card--compact-grid .card-body {
	padding: var(--ee-space-4);
}

.ee-card--compact-grid .ee-card-title {
	margin-bottom: 0;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* Carrossel no MOBILE (até 767px): rolagem horizontal com snap. */
@media (max-width: 767.98px) {
	.ee-carousel {
		display: flex;
		flex-wrap: nowrap;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none; /* esconde a barra mantendo o swipe */
		margin-inline: 0;
	}

	.ee-carousel::-webkit-scrollbar {
		display: none;
	}

	/* Cada card vira um "slide" de largura fixa (~72% da viewport). */
	.ee-carousel > .col {
		flex: 0 0 72%;
		width: 72%;
		max-width: 72%;
		scroll-snap-align: start;
	}
}