/* Mural de Publicações: folhas de papel fixadas em um quadro de avisos. */

.cap-mural {
	--cm-azul: var(--cor-azul-escuro, #354696);
	--cm-pino-1: var(--cor-azul-claro, #31adde);
	--cm-pino-2: var(--cor-verde, #73c679);
	--cm-pino-3: var(--cor-laranja, #fcb13c);
	--cm-pino-4: var(--cor-amarelo, #e3e036);
	font-family: var(--f-corpo, "Red Hat Text", system-ui, sans-serif);
}

.cap-mural__titulo-secao {
	margin: 0 0 1rem;
	color: var(--cm-azul);
	font-family: var(--f-titulo, "Kanit", system-ui, sans-serif);
	font-weight: 600;
}

.cap-mural__moldura {
	position: relative;
	overflow: hidden;
	padding: clamp(1.1rem, 2.6vw, 2rem);
	border-radius: var(--raio-g, 20px);
	background: linear-gradient(160deg, var(--cor-azul-escuro, #354696) 0%, var(--cor-azul-escuro-700, #28357a) 100%);
	box-shadow: var(--sombra-2, 0 8px 24px rgba(40, 53, 122, 0.14));
}

.cap-mural__quadro {
	position: relative;
}

.cap-mural__quadro {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1.6rem 1.25rem;
	margin: 0;
	padding: 0.6rem 0 0;
	list-style: none;
}

@media (min-width: 24em) {
	.cap-mural__quadro { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 64em) {
	.cap-mural__quadro { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}

.cap-mural__item {
	position: relative;
	display: flex;
	margin: 0;
	transform: rotate(var(--cm-giro, 0deg));
	transition: transform 180ms ease;
}

.cap-mural__item:nth-child(4n + 1) { --cm-giro: -1.2deg; --cm-pino: var(--cm-pino-1); }
.cap-mural__item:nth-child(4n + 2) { --cm-giro: 1deg; --cm-pino: var(--cm-pino-2); }
.cap-mural__item:nth-child(4n + 3) { --cm-giro: -0.6deg; --cm-pino: var(--cm-pino-3); }
.cap-mural__item:nth-child(4n) { --cm-giro: 1.4deg; --cm-pino: var(--cm-pino-4); }

@media (prefers-reduced-motion: no-preference) {
	.cap-mural__item:hover { transform: rotate(0deg) translateY(-4px); }
}

.cap-mural__alfinete {
	position: absolute;
	top: -0.55rem;
	left: 50%;
	z-index: 2;
	width: 1.15rem;
	height: 1.15rem;
	margin-left: -0.575rem;
	border-radius: 50%;
	background: radial-gradient(circle at 35% 30%, rgba(255, 255, 255, 0.75) 0 14%, transparent 16%), var(--cm-pino, var(--cm-pino-1));
	box-shadow: 0 3px 4px rgba(10, 15, 50, 0.5), inset 0 -2px 2px rgba(0, 0, 0, 0.2);
}

.cap-mural__folha {
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: 0.35rem;
	min-height: 11.5rem;
	padding: 1.3rem 0.9rem 0.8rem;
	border-top: 4px solid var(--cm-pino, var(--cm-pino-1));
	border-radius: 3px;
	background: #fffdf8;
	box-shadow: 0 8px 16px rgba(10, 15, 50, 0.35);
	color: var(--cm-azul);
	text-decoration: none;
}

.cap-mural__categoria {
	color: #555555;
	font-family: var(--f-titulo, "Kanit", system-ui, sans-serif);
	font-size: 0.72rem;
	font-weight: 300;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.cap-mural__nome {
	flex: 1;
	font-family: var(--f-titulo, "Kanit", system-ui, sans-serif);
	font-size: 1rem;
	font-weight: 600;
	line-height: 1.25;
	overflow-wrap: anywhere;
	display: -webkit-box;
	-webkit-line-clamp: 5;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.cap-mural__pe {
	display: flex;
	flex-direction: column;
	gap: 0.15rem;
	padding-top: 0.45rem;
	border-top: 1px dashed #c9c9d6;
	font-size: 0.82rem;
}

.cap-mural__data { color: #555555; }

.cap-mural__abrir { font-weight: 500; text-decoration: underline; text-underline-offset: 2px; }

.cap-mural__folha:hover .cap-mural__abrir { text-decoration-thickness: 2px; }

.cap-mural__folha:focus-visible {
	outline: 3px solid var(--cm-azul);
	outline-offset: 3px;
	box-shadow: 0 0 0 6px var(--cor-amarelo, #e3e036);
}

.cap-mural__fonte { margin: 0.9rem 0 0; color: #555555; font-size: 0.85rem; }

.cap-mural__fonte a { color: var(--cm-azul); }

.cap-mural__vazio { color: #555555; }

.cap-mural__sr {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

html[data-contraste="alto"] .cap-mural__moldura { border-color: #ffff00; background: #000000; box-shadow: none; }
html[data-contraste="alto"] .cap-mural__folha { background: #000000; border: 2px solid #ffff00; color: #ffff00; }
html[data-contraste="alto"] .cap-mural__categoria,
html[data-contraste="alto"] .cap-mural__data,
html[data-contraste="alto"] .cap-mural__fonte { color: #ffffff; }
html[data-contraste="alto"] .cap-mural__fonte a { color: #ffff00; }