/*
 * Publicações — Catálogo de Livros (node 116:3) + Podcast Ao Mar! (node
 * 117:2). Cores pixel-sampled em 2026-08-09, todas já existentes.
 */

/* Ações da página de detalhe (single-publicacao.php) — Spotify + YouTube
   lado a lado quando os dois existirem (Podcast), 2026-08-22. */
.ibdmar-article__actions {
	display: flex;
	gap: var(--sp-16);
	flex-wrap: wrap;
	margin-top: var(--sp-24);
}

/* Livros */

.ibdmar-books-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: var(--sp-24);
	margin-top: var(--sp-24);
}

.ibdmar-book-card {
	display: flex;
	flex-direction: column;
	height: 100%;
	border: 1px solid var(--color-border-default);
	border-radius: 12px;
	overflow: hidden;
	background: var(--color-surface-primary);
}

.ibdmar-book-card__media {
	display: block;
}

.ibdmar-book-card__media img,
.ibdmar-book-card__placeholder {
	/* 2026-09-17: era height:300px fixo — achatava a capa (proporção real de
	   livro, ~2:3) numa faixa baixa e larga, cortando título/autor da capa.
	   Ajustado pra 3:4 (card mais compacto, pedido do Ranyer) com
	   object-position:bottom — corta só uma fatia do topo (a parte
	   decorativa da foto, sem texto) e mantém título/autor/logo (que ficam
	   na metade de baixo da capa) sempre visíveis inteiros.
	   2026-09-28: testada a capa inteira (moldura); o Ranyer preferiu este
	   enquadramento, que continua sendo o do Catálogo. */
	display: block;
	width: 100%;
	aspect-ratio: 3 / 4;
	object-fit: cover;
	object-position: center bottom;
	background: var(--color-brand-primary-light);
}

.ibdmar-book-card__body {
	display: flex;
	flex-direction: column;
	flex: 1;
	padding: var(--sp-16);
}

.ibdmar-book-card__title {
	margin: 0 0 var(--sp-4);
	font: var(--text-h5);
	color: var(--color-text-heading);
}

.ibdmar-book-card__autor {
	margin: 0 0 var(--sp-8);
	font: var(--text-caption);
	color: var(--color-text-tertiary);
}

.ibdmar-book-card__desc {
	margin: 0 0 var(--sp-16);
	font: var(--text-caption);
	color: var(--color-text-secondary);
}

.ibdmar-book-card__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sp-8);
	/* Fica sempre colado no rodapé do card, mesmo quando a descrição de um
	   volume é mais curta que a de outro (ex.: Vol. 2 não tem descrição) —
	   sem isso os botões "Comprar" ficavam em alturas diferentes de card pra
	   card na mesma fileira. */
	margin-top: auto;
	padding-top: var(--sp-8);
}

/* Podcast */

.ibdmar-episodes-list {
	display: flex;
	flex-direction: column;
	gap: var(--sp-16);
	margin-top: var(--sp-24);
}

.ibdmar-episode-row {
	display: flex;
	gap: var(--sp-24);
	padding: var(--sp-24);
	border-radius: 12px;
	background: var(--color-background-subtle);
}

.ibdmar-episode-row__thumb {
	position: relative;
	flex-shrink: 0;
	display: flex;
	/* Play no canto inferior direito (era no centro): com a capa inteira à
	   mostra, o centro é onde ficam o rosto e o nome do convidado. */
	align-items: flex-end;
	justify-content: flex-end;
	padding: var(--sp-8);
	width: 150px;
	height: 150px;
	border-radius: 8px;
	background: var(--color-brand-primary-light);
	overflow: hidden;
}

/* Moldura de imagem inteira (inc/moldura.php) atrás do botão de play.
   'thumbnail' (150x150, cortado) deu lugar a um tamanho sem corte. */
.ibdmar-episode-row__moldura {
	position: absolute;
	inset: 0;
}

.ibdmar-episode-row__play {
	position: relative;
	z-index: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: var(--color-surface-primary);
	color: var(--color-secondary);
	box-shadow: 0 2px 8px rgba(16, 40, 61, 0.28);
}

.ibdmar-episode-row__ep {
	margin: 0 0 var(--sp-4);
	font: var(--text-caption);
	font-weight: 700;
	color: var(--color-secondary);
	text-transform: uppercase;
}

.ibdmar-episode-row__title {
	margin: 0 0 var(--sp-8);
	font: var(--text-h5);
}

.ibdmar-episode-row__title a {
	color: var(--color-text-heading);
	text-decoration: none;
}

.ibdmar-episode-row__convidado {
	margin: 0 0 var(--sp-16);
	color: var(--color-text-secondary);
}

.ibdmar-episode-row__links {
	display: flex;
	gap: var(--sp-8);
}

.ibdmar-episode-row__links .ibdmar-chip,
.ibdmar-episode-row__links a.ibdmar-chip {
	background: var(--color-surface-primary);
}

@media (max-width: 1279px) {
	.ibdmar-books-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 767px) {
	.ibdmar-books-grid {
		grid-template-columns: 1fr;
	}

	.ibdmar-episode-row {
		flex-direction: column;
	}

	/* Quadrada como as capas, com largura limitada: 34 episódios com capa
	   da largura da tela deixariam a lista longa demais no celular. */
	.ibdmar-episode-row__thumb {
		width: min(100%, 220px);
		height: auto;
		aspect-ratio: 1 / 1;
	}
}