/* =========================================================================
   COMPONENTE — FEATURE (row + tile)
   ========================================================================= */

/* -------------------------------------------------------------------------
   Row — linha numerada
   ---------------------------------------------------------------------- */

.moinho-feature-row {
	display: grid;
	gap: var(--moinho-space-sm) var(--moinho-space-lg);
	align-items: start;
	grid-template-columns: auto minmax(0, 1fr);
	padding-block: var(--moinho-space-lg);
	border-block-start: var(--moinho-border-width) solid var(--moinho-surface-border);
}

/* Só a última linha ganha borda inferior, para a lista fechar sem hairline
   em cada item. */
.moinho-feature-row:last-child {
	border-block-end: var(--moinho-border-width) solid var(--moinho-surface-border);
}

@media (min-width: 64rem) {
	.moinho-feature-row {
		grid-template-columns: auto minmax(0, 1.1fr) minmax(0, 0.9fr);
		align-items: center;
	}
}

.moinho-feature-row__numero {
	font-family: var(--moinho-font-display);
	font-size: var(--moinho-role-body-lg-size);
	font-weight: var(--moinho-weight-black);
	line-height: 1;
	letter-spacing: var(--moinho-tracking-tight);
	color: var(--moinho-color-primary-readable);
	font-variant-numeric: tabular-nums;
	/* Alinha o numeral com a primeira linha do título. */
	padding-block-start: 0.12em;
}

.moinho-feature-row .moinho-feature-row__titulo {
	font-size: var(--moinho-role-h3-size);
	margin-block-end: var(--moinho-space-3xs);
}

.moinho-feature-row__titulo a {
	color: inherit;
	text-decoration: none;
}

.moinho-feature-row__titulo a:hover {
	color: var(--moinho-color-primary-readable);
}

.moinho-feature-row__texto {
	margin: 0;
	color: var(--moinho-surface-fg-muted);
	max-inline-size: 44ch;
}

.moinho-feature-row__itens {
	display: flex;
	flex-wrap: wrap;
	gap: var(--moinho-space-3xs) var(--moinho-space-2xs);
	list-style: none;
	margin: 0;
	padding: 0;
	grid-column: 2 / -1;
}

@media (min-width: 64rem) {
	.moinho-feature-row__itens {
		grid-column: auto;
		justify-content: flex-end;
	}
}

.moinho-feature-row__itens li {
	margin: 0;
	padding: 0.45em 0.9em;
	font-size: var(--moinho-role-label-size);
	font-weight: var(--moinho-weight-medium);
	color: var(--moinho-surface-fg-muted);
	background-color: var(--moinho-color-surface);
	border-radius: var(--moinho-radius-pill);
}

/* Linha inteira reage ao hover, sem virar card. */
@media (hover: hover) {
	.moinho-feature-row {
		transition: background-color var(--moinho-duration-normal) var(--moinho-ease-default);
	}

	.moinho-feature-row:hover {
		background-color: var(--moinho-color-primary-soft);
	}

	.moinho-feature-row:hover .moinho-feature-row__itens li {
		background-color: var(--moinho-color-background);
	}
}

/* -------------------------------------------------------------------------
   Tile — célula de bento
   ---------------------------------------------------------------------- */

.moinho-feature-tile {
	display: flex;
	flex-direction: column;
	gap: var(--moinho-space-2xs);
	padding: var(--moinho-space-lg);

	background-color: var(--moinho-color-surface);
	border-radius: var(--moinho-card-radius);
	block-size: 100%;
}

.moinho-feature-tile__icone {
	display: grid;
	place-items: center;
	inline-size: 3rem;
	block-size: 3rem;
	margin-block-end: var(--moinho-space-sm);

	color: var(--moinho-color-primary-readable);
	background-color: var(--moinho-color-background);
	border-radius: var(--moinho-radius-circle);
}

.moinho-feature-tile__icone .moinho-icon {
	--moinho-icon-size: 1.375rem;
	fill: none;
	stroke: currentColor;
}

.moinho-feature-tile .moinho-feature-tile__titulo {
	font-size: var(--moinho-role-h4-size);
}

.moinho-feature-tile__texto {
	margin: 0;
	color: var(--moinho-surface-fg-muted);
	max-inline-size: 42ch;
}

/* A célula em destaque carrega a cor da marca. É o que dá ritmo ao bento
   sem precisar de imagem em cada tile. */
.moinho-feature-tile--destaque {
	background-color: var(--moinho-color-primary);
	color: var(--moinho-color-text-on-brand);
}

.moinho-feature-tile--destaque .moinho-feature-tile__titulo,
.moinho-feature-tile--destaque .moinho-feature-tile__texto {
	color: var(--moinho-color-text-on-brand);
}

.moinho-feature-tile--destaque .moinho-feature-tile__texto {
	opacity: 0.82;
}

.moinho-feature-tile--destaque .moinho-feature-tile__icone {
	background-color: rgb(255 255 255 / 0.16);
	color: var(--moinho-color-text-on-brand);
}

.moinho-feature-tile--destaque .moinho-feature-tile__titulo {
	font-size: var(--moinho-role-h3-size);
}

@media (min-width: 48rem) {
	.moinho-feature-tile--largo { grid-column: span 2; }
	.moinho-feature-tile--alto { grid-row: span 2; }
}