/* MEF Materiais & Downloads — bloco injetado após o conteúdo do post no
   feed do FluentCommunity. Prefixo mef-material- em tudo (nunca toca em
   classes/estilos do FluentCommunity). Sem 100vw, sem margem negativa: usa
   só a largura real do container do post (display: block padrão).

   Responsivo por flex-wrap, sem @media: o FluentCommunity roda numa SPA
   com template próprio (fluent-community-frame.php) e, se essa página não
   tiver <meta name="viewport">, o navegador do celular renderiza tudo numa
   largura "desktop" e só encolhe visualmente a tela — nesse caso nenhuma
   media query por largura de VIEWPORT dispara, mesmo a tela parecendo
   estreita (foi o que aconteceu em teste real). flex-wrap reage à largura
   real do próprio bloco, não da tela, então funciona nos dois casos. */

.mef-material-block {
	box-sizing: border-box;
	max-width: 100%;
	/* margem maior no topo: separa de verdade do título do post (que fica
	   logo acima, dentro de .feed_body), em vez de colar nele. */
	margin: 18px 0 0;
	padding: 14px 16px;
	border: 1px solid rgba(120, 120, 140, 0.25);
	border-radius: 10px;
	background: rgba(120, 120, 140, 0.06);
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	text-align: center;
	gap: 10px;
	overflow-wrap: break-word;
}

.mef-material-block * {
	box-sizing: border-box;
	max-width: 100%;
}

.mef-material-badge {
	display: inline-flex;
	align-items: center;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.03em;
	text-transform: uppercase;
	padding: 4px 10px;
	border-radius: 999px;
	white-space: nowrap;
}

.mef-material-badge--free {
	background: #1f9d55;
	color: #fff;
}

.mef-material-badge--paid {
	background: #6d4de6;
	color: #fff;
	text-transform: none;
	letter-spacing: normal;
}

.mef-material-badge--unavailable {
	background: rgba(120, 120, 140, 0.35);
	color: inherit;
}

/* Sempre depois do badge+botão (ordem no HTML) — quando não cabe na
   mesma linha, quebra pra linha de baixo sozinho (flex-basis: 100%). */
.mef-material-title {
	font-weight: 600;
	font-size: 14px;
	flex: 1 1 100%;
	margin-top: 2px;
}

/* Botão sólido padrão pros dois tipos — o do "Pago" vem de dentro do
   shortcode oficial do FluentCart (marcação própria deles, às vezes um
   link puro sem estilo de botão), então aqui é forçado a parecer igual
   ao do "Grátis" em vez de herdar o estilo cru do link. Fica sempre logo
   depois do badge (mesmo gap do flex container), sem empurrar pra ponta
   — é o layout que ficou melhor no "Pago" e agora vale pros dois. */
.mef-material-cta,
.mef-material-cta-wrap :where(a, button) {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	white-space: nowrap;
	padding: 8px 16px !important;
	border-radius: 8px !important;
	font-weight: 600 !important;
	font-size: 13px !important;
	line-height: 1.4 !important;
	text-decoration: none !important;
	border: none !important;
}

.mef-material-cta--free {
	/* span informativo, sem link — o download já acontece pelo anexo
	   nativo do post, não por este bloco. */
	background: #1f9d55;
	color: #fff;
	cursor: default;
}

.mef-material-block--paid .mef-material-cta-wrap :where(a, button) {
	background: #6d4de6 !important;
	color: #fff !important;
	cursor: pointer;
}

.mef-material-block--paid .mef-material-cta-wrap :where(a, button):hover {
	background: #5a3ecc !important;
	color: #fff !important;
}