/**
 * sidebar.css — barra lateral editorial (posts e arquivos).
 *
 * Override leve sobre o Bootstrap: o empilhamento (sidebar abaixo do conteúdo
 * no mobile) já vem do grid (col-12 / col-lg-8 + col-lg-4) nos templates. Aqui
 * cuidamos do respiro entre blocos, do título com a faixa laranja da marca, dos
 * itens de lista/atalhos e do comportamento "sticky" apenas no desktop.
 *
 * Carregado DEPOIS de cards.css em single e archive (ver inc/enqueue.php).
 * Mobile-first: o base cobre o celular; o sticky entra a partir do lg (>=992px),
 * mesmo ponto em que o grid passa a ter duas colunas.
 */

/* ==========================================================================
   1. Contêiner e respiro entre blocos
   ========================================================================== */
.ee-sidebar {
	/* Garante leitura confortável no mobile: a coluna vem abaixo do conteúdo
	   (pelo grid) com um respiro extra no topo. */
	margin-top: var(--ee-space-5);
}

/* Largura fixa da coluna lateral no desktop: dimensionada para comportar um
   anúncio de 336px de largura, sem nunca encolher abaixo de 300px nem passar
   de 340px — em qualquer resolução. Substitui a fluidez do col-lg-4: a coluna
   trava nessa faixa e a <main> irmã (col-lg-8) absorve o espaço restante.

   IMPORTANTE: a coluna Bootstrap tem padding lateral (o gutter --bs-gutter-x).
   A faixa 300–340 deve valer para o CONTEÚDO (o aside/anúncio), então somamos
   o gutter à largura da coluna — senão o padding "comeria" ~48px (com g-lg-5)
   e o anúncio de 300px não caberia. */
/* --------------------------------------------------------------------------
   Layout de duas colunas (conteúdo + sidebar) só a partir de 1100px.

   Entre 992px (onde o Bootstrap ativaria col-lg-8/col-lg-4) e 1099px, o sidebar
   de largura fixa (300–340 + gutter ≈ 388px) somado ao conteúdo NÃO cabe no
   container (960px) e o conteúdo ficaria espremido. Por isso, abaixo de 1100px
   forçamos as duas colunas a 100% (empilhadas): o conteúdo ocupa a largura
   total e o sidebar desce para baixo. A partir de 1100px elas ficam lado a
   lado: sidebar fixo e conteúdo fluido (ocupando o espaço restante).
   -------------------------------------------------------------------------- */

/* 992–1099px: empilha (conteúdo em largura total, sidebar abaixo). */
@media (min-width: 992px) and (max-width: 1099.98px) {
	.row > .ee-sidebar-col,
	.row:has(> .ee-sidebar-col) > main {
		flex: 0 0 100%;
		width: 100%;
		max-width: 100%;
	}
}

/* >= 1100px: duas colunas — sidebar de largura fixa + conteúdo fluido. */
@media (min-width: 1100px) {
	.ee-sidebar-col {
		--ee-sidebar-w: clamp(300px, 24vw, 340px);
		flex: 0 0 calc(var(--ee-sidebar-w) + var(--bs-gutter-x, 1.5rem));
		width: calc(var(--ee-sidebar-w) + var(--bs-gutter-x, 1.5rem));
		max-width: calc(340px + var(--bs-gutter-x, 1.5rem));
	}

	/* Conteúdo (irmão do sidebar) vira FLUIDO: ocupa o espaço que sobra ao lado
	   do sidebar fixo — sem deixar vazio à direita. */
	.row:has(> .ee-sidebar-col) > main {
		flex: 1 1 0;
		width: auto;
		max-width: 100%;
	}
}

/* Espaço vertical generoso entre blocos da sidebar (cards e anúncios). */
.ee-sidebar > * + * {
	margin-top: var(--ee-space-4);
}

/* Mantém a coerência com o widget editorial existente (.single-widget). */
.ee-sidebar-widget {
	overflow: hidden;
}

/* Título do bloco: faixa inferior laranja da marca (igual aos widgets). */
.ee-sidebar .single-widget-title,
.ee-sidebar .widget-title {
	padding-bottom: var(--ee-space-2);
	margin-bottom: var(--ee-space-3);
	border-bottom: 2px solid var(--ee-orange);
	color: var(--ee-blue-dark);
}

/* ==========================================================================
   2. Listas compactas (mais acessados, recentes, relacionados)
   ========================================================================== */
.ee-sidebar-list > * + * {
	margin-top: var(--ee-space-3);
	padding-top: var(--ee-space-3);
	border-top: 1px solid var(--bs-border-color, #dee2e6);
}

/* ==========================================================================
   3. Atalhos editoriais (links em lista)
   ========================================================================== */
.ee-sidebar-links li + li {
	margin-top: var(--ee-space-1);
}

.ee-sidebar-link {
	display: block;
	padding: var(--ee-space-2) var(--ee-space-3);
	border-radius: var(--ee-radius-sm);
	color: var(--ee-blue-dark);
	text-decoration: none;
	font-weight: 500;
	transition: background-color 0.15s ease, color 0.15s ease;
}

.ee-sidebar-link:hover,
.ee-sidebar-link:focus {
	background-color: var(--ee-blue-light);
	color: var(--ee-blue-dark);
}

/* ==========================================================================
   4. Desktop largo (>= 1100px): coluna lateral fixa ao rolar
   --------------------------------------------------------------------------
   Só gruda quando há DUAS colunas (>= 1100px). Abaixo disso a sidebar empilha
   sob o conteúdo (largura total) e rola normalmente.
   ========================================================================== */
@media (min-width: 1100px) {
	.ee-sidebar {
		position: sticky;
		top: 96px; /* abaixo do cabeçalho fixo */
		margin-top: 0;
	}
}

/* ==========================================================================
   5. Widgets do admin (.ee-sidebar-item): elemento PURO, sem box
   --------------------------------------------------------------------------
   Diferente dos blocos editoriais próprios do tema (que têm card), os widgets
   adicionados pelo admin NÃO ganham fundo, borda ou sombra: ficam "puros" e
   centralizados. Assim, ao colocar uma imagem (ou um widget com box própria),
   não há box dentro de box. O conteúdo é centralizado horizontalmente.
   ========================================================================== */
.ee-sidebar-item {
	background: none;
	border: 0;
	box-shadow: none;
	padding: 0;
	text-align: center;
}

/* Mídia adicionada pelo admin (imagem/anúncio): responsiva e centralizada,
   sem moldura. Limita-se à largura da coluna (até 340px / 336px de anúncio). */
.ee-sidebar-item img {
	display: block;
	max-width: 100%;
	height: auto;
	margin-inline: auto;
}