/* ==========================================================================
   NOTICIAS: TEXTO COMPLETO NO HOVER

   O botao "Ler mais" saiu. Quando o texto nao cabe no card (o script no
   index.phtml marca o card com .post_more), a ultima linha aparece
   esmaecida e, ao passar o mouse (ou focar com o teclado), o texto desliza
   para cima e abre por inteiro NO PROPRIO CARD: mesmo fundo, mesma arte,
   mesmas fontes e cores. O card nao muda de tamanho, entao nada na pagina
   se mexe.

   Como fica suave: o bloco de texto fica sempre preso ao pe do card
   (position absolute + bottom 0) e o que anima e so a altura maxima do
   texto (max-height), com uma curva lenta na abertura e no fechamento.
   ========================================================================== */
.news__post {
	outline: none;
}
.news__post .post__body {
	min-height: inherit;
}

.post_more .post__container {
	bottom: 0;
	left: 0;
	max-height: 100%;
	overflow: hidden;
	position: absolute;
	right: 0;
	scrollbar-color: #cba74c transparent;
	scrollbar-width: thin;
}

.post_more .post__desc {
	display: block;
	-webkit-line-clamp: unset;
	line-clamp: unset;
	/* mesmas 3 linhas que o site mostrava (line-height 1.5) */
	max-height: calc(var(--post-line-clamp, 3) * 1.5em);
	overflow: hidden;
	transition: max-height .7s cubic-bezier(.22, .61, .36, 1);
	-webkit-mask-image: linear-gradient(180deg, #000 60%, transparent 100%);
	mask-image: linear-gradient(180deg, #000 60%, transparent 100%);
}

.post_more .post__bar {
	transition: margin-top .7s cubic-bezier(.22, .61, .36, 1);
}

.post_more:hover .post__desc,
.post_more:focus-within .post__desc {
	max-height: 20em;
	-webkit-mask-image: none;
	mask-image: none;
}
/* Sem o botao, a data nao precisa do respiro todo: sobra espaco p/ texto */
.post_more:hover .post__bar,
.post_more:focus-within .post__bar {
	margin-top: .75rem;
}
/* Texto maior que o card: rola com a barra dourada fininha do site */
.post_more:hover .post__container,
.post_more:focus-within .post__container {
	overflow-y: auto;
}

/* Celular (sem hover): o texto ja aparece inteiro */
@media (hover: none) {
	.post_more .post__container {
		position: static;
		max-height: none;
	}
	.post_more .post__desc {
		max-height: none;
		-webkit-mask-image: none;
		mask-image: none;
	}
}