/**
 * home.css — estilos exclusivos da home editorial.
 *
 * Enfileirado apenas na front-page (ver inc/enqueue.php). Camada sobre o
 * Bootstrap e os tokens --ee-*. Mobile-first.
 *
 * Sumário:
 *   1. Hero (destaque principal + secundários)
 *   2. Atalhos rápidos
 *   3. Cabeçalhos de seção
 *   4. Espaços de anúncio (placeholders)
 */

/* ==========================================================================
   1. Hero
   ========================================================================== */
.ee-home-hero {
	background: linear-gradient(180deg, var(--ee-blue-light) 0%, var(--ee-bg) 100%);
}

/* No mobile, os destaques secundários ficam empilhados sob o bloco grande,
   com altura natural (o estica-para-preencher é só do desktop — ver abaixo). */

/* Desktop (>= lg): a coluna secundária acompanha a altura do principal e os
   cards crescem para preencher. No mobile isso colapsaria os cards (flex-basis
   0 sem altura de referência), por isso fica escopado ao breakpoint. */
@media (min-width: 992px) {
	.ee-hero-secondary {
		min-height: 100%;
	}

	.ee-hero-secondary .ee-card--horizontal {
		flex: 1 1 0;
	}
}

/* Destaques secundários SEM imagem: centraliza o conteúdo verticalmente. */
.ee-hero-secondary .ee-card--no-image .card-body {
	justify-content: center;
}

/* Só BADGE + TÍTULO: oculta resumo e metadados (data/leitura) nesses cards.
   O !important vence o .d-sm-block do Bootstrap (que também usa !important). */
.ee-hero-secondary .ee-card--no-image .ee-card-excerpt,
.ee-hero-secondary .ee-card--no-image .entry-meta {
	display: none !important;
}

/* Título limitado a 2 linhas (corta com reticências se for grande). */
.ee-hero-secondary .ee-card--no-image .ee-card-title {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	margin-bottom: 0;
}

/* ==========================================================================
   2. Atalhos rápidos
   ========================================================================== */
.ee-quick-links {
	background-color: var(--ee-white);
	border-bottom: 1px solid var(--ee-border);
}

.ee-quick-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--ee-space-3);
}

.ee-quick-link {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: var(--ee-space-2);
	height: 100%;
	padding: var(--ee-space-4) var(--ee-space-2);
	text-align: center;
	color: var(--ee-blue-dark);
	background-color: var(--ee-blue-light);
	border: 1px solid transparent;
	border-radius: var(--ee-radius-md);
	text-decoration: none;
	transition: transform var(--ee-transition), background-color var(--ee-transition),
		border-color var(--ee-transition);
}

.ee-quick-link:hover,
.ee-quick-link:focus {
	transform: translateY(-2px);
	background-color: var(--ee-white);
	border-color: var(--ee-blue);
	color: var(--ee-blue);
}

.ee-quick-icon {
	display: inline-flex;
	color: var(--ee-orange);
}

/* Os ícones (Bootstrap Icons, SVG 16×16) são exibidos maiores nos atalhos. */
.ee-quick-icon svg {
	width: 28px;
	height: 28px;
}

.ee-quick-label {
	font-size: 0.8125rem;
	font-weight: 600;
	line-height: 1.2;
}

/* 4 colunas no tablet, 8 no desktop (todos os atalhos numa linha). */
@media (min-width: 576px) {
	.ee-quick-grid {
		grid-template-columns: repeat(4, 1fr);
	}
}

@media (min-width: 992px) {
	.ee-quick-grid {
		grid-template-columns: repeat(8, 1fr);
	}
}

/* ==========================================================================
   3. Cabeçalhos de seção
   ========================================================================== */
.ee-home-section .ee-section-more,
.ee-home-latest .ee-section-more {
	white-space: nowrap;
}

/* Os slots de anúncio (.ee-ad-slot) são estilizados em ads.css. */

/* ==========================================================================
   4. Seção enxuta + carrossel (ex.: "Segundo destaque")
   --------------------------------------------------------------------------
   As regras de card compacto (.ee-card--compact-grid) e do carrossel mobile
   (.ee-carousel) foram movidas para cards.css, pois são reutilizadas também
   no single ("Posts relacionados"). Carregam em ambos os contextos.
   ========================================================================== */

/* ==========================================================================
   5. Destaque dividido ("Terceiro destaque"): 1 grande + 4 pequenos
   --------------------------------------------------------------------------
   Desktop (≥768px): metade esquerda = card grande; metade direita = 4 minis
   em 2 colunas. Mobile: todos viram compactos num carrossel horizontal.
   ========================================================================== */

/* Card "mini": imagem pequena à esquerda + badge + título (sem resumo/meta). */
.ee-card--mini .ee-card-title {
	margin-bottom: 0;
	/* Título levemente menor que o card grande. */
	font-size: 0.9375rem;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* Corpo do mini: ocupa o espaço restante ao lado da imagem e pode encolher. */
.ee-card--mini .card-body {
	flex: 1 1 auto;
	min-width: 0;
	justify-content: center;
	padding-left: var(--ee-space-4);
}

/* No desktop, o 1º card é o card vertical NORMAL (1/3, idêntico ao da grade de
   3 colunas); os 4 minis ocupam os 2/3 restantes em 2 colunas × 2 linhas. */
@media (min-width: 768px) {
	/* Minis com ALTURA FIXA (não esticam até o fim): comporta até 2 linhas de
	   título. A imagem (à esquerda) preenche a altura da box. */
	.ee-featured-split .ee-split-minis .ee-card--horizontal {
		width: 100%;
		height: 96px;
	}
	.ee-featured-split .ee-split-minis .ee-card--horizontal .ee-card-row {
		height: 100%;
	}
	/* Imagem padronizada: largura fixa e altura total da box (recortada). */
	.ee-featured-split .ee-split-minis .ee-card-media--horizontal {
		flex: 0 0 auto;
		width: 96px;
		height: 100%;
		min-height: 0;
		aspect-ratio: auto;
	}
	/* O card 1 acompanha EXATAMENTE a altura da coluna dos 6 minis:
	   3 linhas de 96px + 2 espaçamentos (g-3 = 1rem) = 320px. A imagem é o que
	   encolhe/cresce para o card fechar nessa altura (badge + título no rodapé). */
	.ee-featured-split .ee-split-main-row > .col {
		display: flex;
		height: calc(3 * 96px + 2 * var(--ee-space-4));
	}
	.ee-featured-split .ee-split-main-row .ee-card--vertical {
		width: 100%;
		height: 100%;
		display: flex;
		flex-direction: column;
	}
	/* Corpo do card grande mais enxuto, para a altura total casar com a
	   coluna dos 6 minis (evita o card grande sobrar embaixo). */
	.ee-featured-split .ee-split-main-row .ee-card--vertical .card-body {
		flex: 0 0 auto;
		padding: var(--ee-space-3) var(--ee-space-4);
	}
	.ee-featured-split .ee-split-main-row .ee-card--vertical .ee-card-media {
		flex: 1 1 auto;
		aspect-ratio: auto;
		min-height: 0;
	}
}

/* --- Mobile: tudo vira carrossel compacto (igual ao Segundo destaque) --- */
@media (max-width: 767.98px) {
	/* Achata a estrutura: os 5 cards viram irmãos diretos do carrossel. */
	.ee-featured-split .ee-split-aside,
	.ee-featured-split .ee-split-minis {
		display: contents;
	}

	.ee-featured-split .ee-split-row {
		display: flex;
		flex-wrap: nowrap;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
		gap: var(--ee-space-3);
	}

	.ee-featured-split .ee-split-row::-webkit-scrollbar {
		display: none;
	}

	/* Cada slide ~72% da viewport (deixa espiar o próximo). */
	.ee-featured-split .ee-split-main,
	.ee-featured-split .ee-split-minis > .col {
		flex: 0 0 72%;
		width: 72%;
		max-width: 72%;
		scroll-snap-align: start;
	}

	/* No mobile o card 1 (vertical) entra no carrossel como slide; a sua .row
	   interna não deve virar carrossel nem quebrar o slide. */
	.ee-featured-split .ee-split-main-row {
		display: block;
		height: auto;
		margin: 0;
	}
	.ee-featured-split .ee-split-main-row > .col {
		padding: 0;
		width: 100%;
		max-width: 100%;
	}
	/* "Cara" compacta: só título visível (sem resumo/meta), igual aos demais. */
	.ee-featured-split .ee-split-main .ee-card-excerpt,
	.ee-featured-split .ee-split-main .entry-meta {
		display: none !important;
	}
	.ee-featured-split .ee-split-main .ee-card-title {
		display: -webkit-box;
		-webkit-line-clamp: 2;
		line-clamp: 2;
		-webkit-box-orient: vertical;
		overflow: hidden;
	}

	/* Os minis no mobile usam imagem no topo (não à esquerda) para igualar. */
	.ee-featured-split .ee-card--mini .ee-card-row {
		flex-direction: column;
	}
	.ee-featured-split .ee-card--mini .ee-card-media--horizontal {
		width: 100%;
		aspect-ratio: 16 / 9;
		height: auto;
	}
}