/**
 * "Leia mais" (mobile) — estilos do recolhimento do conteúdo do post.
 *
 * Toda a UI só existe no mobile (o JS injeta os elementos apenas em telas
 * estreitas). Ainda assim, os estilos ficam sob @media para garantir que o
 * desktop nunca seja afetado.
 */

@media (max-width: 782px) {

	/* Botão "Leia mais" — logo após o primeiro parágrafo, acima do véu. */
	.single-post .entry-content .irm-readmore-btn {
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 6px;
		width: 100%;
		margin: 14px 0 6px;
		font-family: var(--title-font, "Barlow", arial, helvetica, sans-serif);
		font-weight: 700;
		font-size: 15px;
		line-height: 1;
		color: #0091cf;
		background: #fff;
		border: 1px solid #dbe6ee;
		border-radius: 999px;
		padding: 12px 24px;
		box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
		cursor: pointer;
		transition: background 0.15s ease, transform 0.12s ease;
	}

	.single-post .entry-content .irm-readmore-btn[hidden] {
		display: none;
	}

	.single-post .entry-content .irm-readmore-btn svg {
		display: block;
	}

	.single-post .entry-content .irm-readmore-btn:hover {
		background: #f2f8fc;
	}

	.single-post .entry-content .irm-readmore-btn:active {
		transform: scale(0.98);
	}

	.single-post .entry-content .irm-readmore-btn:focus-visible {
		outline: 2px solid #0091cf;
		outline-offset: 2px;
	}

	/* Restante do conteúdo, recolhido atrás de um véu translúcido. */
	.single-post .entry-content .irm-more {
		position: relative;
	}

	.single-post .entry-content .irm-more.irm-collapsed {
		overflow: hidden;
	}

	/* Véu de leve transparência: o texto atrás fica visível, cada vez mais
	   apagado — deixando explícito que há mais conteúdo. */
	.single-post .entry-content .irm-more.irm-collapsed::after {
		content: "";
		position: absolute;
		inset: 0;
		pointer-events: none;
		background: linear-gradient(
			to bottom,
			rgba(255, 255, 255, 0.25) 0%,
			rgba(255, 255, 255, 0.7) 55%,
			rgba(255, 255, 255, 0.96) 100%
		);
	}
}