/**
 * Mindcommerce — Home por modelos (D-14)
 *
 * Estilos das seções da página inicial. Somente tokens (check-tokens P4).
 * Carregado apenas na página inicial.
 *
 * @package mindcommerce
 */

/* =============================================================================
   ESTRUTURA
   ============================================================================= */
.mc-home {
	display: flex;
	flex-direction: column;
	gap: var(--space-2xl);
	padding-bottom: var(--space-3xl);
}

.mc-home-widget + .mc-home-widget {
	margin-top: var(--space-lg);
}

.mc-home-section__title {
	margin: 0 0 var(--space-lg);
	font-size: var(--text-h2);
	font-weight: var(--font-weight-bold);
	line-height: var(--line-height-h2);
	letter-spacing: var(--letter-spacing-h2);
	color: var(--color-text-primary);
}

/* =============================================================================
   BANNER PRINCIPAL — banner grande + 2 promoções laterais
   ============================================================================= */
.mc-hero {
	display: grid;
	gap: var(--space-lg);
}

.mc-hero__main,
.mc-hero__promo {
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: var(--space-md);
	border-radius: var(--radius-lg);
}

.mc-hero__main {
	padding: var(--space-2xl) var(--space-xl);
	background: var(--color-primary);
	color: var(--color-on-primary);
}

.mc-hero__main h2 {
	margin: 0;
	font-size: var(--text-display);
	font-weight: var(--font-weight-extrabold);
	line-height: var(--line-height-display);
	letter-spacing: var(--letter-spacing-display);
	color: var(--color-on-primary);
}

.mc-hero__main p {
	margin: 0;
	font-size: var(--text-body-lg);
	color: var(--color-text-inverse-muted);
}

.mc-hero__main .button,
.mc-hero__promo .button,
.mc-banner .button {
	align-self: flex-start;
}

.mc-hero__side {
	display: grid;
	gap: var(--space-lg);
}

.mc-hero__promo {
	padding: var(--space-xl);
	background: var(--color-bg-page);
	color: var(--color-text-primary);
}

.mc-hero__promo h3 {
	margin: 0;
	font-size: var(--text-h2);
	font-weight: var(--font-weight-bold);
	color: var(--color-text-primary);
}

@media (min-width: 1024px) {
	.mc-hero {
		grid-template-columns: 2fr 1fr;
	}

	.mc-hero__main {
		padding: var(--space-4xl) var(--space-3xl);
	}
}

/* =============================================================================
   ATALHOS — blocos escuros (Ofertas, Mais vendidos, …)
   ============================================================================= */
.mc-tiles {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--space-md);
	margin: 0;
	padding: 0;
	list-style: none;
}

.mc-tiles a {
	display: flex;
	flex-direction: column;
	justify-content: center;
	min-height: var(--button-height-lg);
	height: 100%;
	padding: var(--space-lg);
	background: var(--color-primary-hover);
	color: var(--color-on-primary);
	border-radius: var(--radius-md);
	text-align: center;
	text-decoration: none;
	font-size: var(--text-body-lg);
	font-weight: var(--font-weight-bold);
	line-height: var(--line-height-h3);
	transition: background var(--transition-fast);
}

.mc-tiles a small {
	font-size: var(--text-caption);
	font-weight: var(--font-weight-regular);
	color: var(--color-text-inverse-muted);
}

.mc-tiles a:hover,
.mc-tiles a:focus-visible {
	background: var(--color-primary);
}

@media (min-width: 768px) {
	.mc-tiles {
		grid-template-columns: repeat(4, 1fr);
	}
}

@media (min-width: 1024px) {
	.mc-tiles {
		grid-template-columns: repeat(8, 1fr);
	}

	.mc-tiles a {
		padding: var(--space-md);
	}
}

/* =============================================================================
   BANNER INTERMEDIÁRIO
   ============================================================================= */
.mc-banner {
	display: flex;
	flex-direction: column;
	gap: var(--space-md);
	padding: var(--space-2xl) var(--space-xl);
	background: var(--color-secondary);
	color: var(--color-on-primary);
	border-radius: var(--radius-lg);
}

.mc-banner h2 {
	margin: 0;
	font-size: var(--text-h1);
	font-weight: var(--font-weight-extrabold);
	line-height: var(--line-height-h1);
	color: var(--color-on-primary);
}

.mc-banner p {
	margin: 0;
	color: var(--color-text-inverse-muted);
}

/* =============================================================================
   MARCAS
   ============================================================================= */
.mc-brands {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--space-md);
	margin: 0;
	padding: 0;
	list-style: none;
}

.mc-brands li img {
	display: block;
	max-width: 100%;
	height: auto;
	max-height: var(--button-height-lg);
	object-fit: contain;
}

.mc-brands li {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: var(--button-height-lg);
	padding: var(--space-md);
	border: var(--border-width) solid var(--color-border-default);
	border-radius: var(--radius-md);
	color: var(--color-text-secondary);
	font-weight: var(--font-weight-semibold);
}

@media (min-width: 768px) {
	.mc-brands {
		grid-template-columns: repeat(3, 1fr);
	}
}

@media (min-width: 1024px) {
	.mc-brands {
		grid-template-columns: repeat(6, 1fr);
	}
}

/* =============================================================================
   TEXTO INSTITUCIONAL (SEO)
   ============================================================================= */
.mc-seo {
	max-width: 70ch;
	color: var(--color-text-secondary);
}

.mc-seo h2 {
	font-size: var(--text-h2);
	color: var(--color-text-primary);
}

/* =============================================================================
   CATEGORIAS — miniaturas compactas (4 por linha no celular, 8 no desktop)
   ============================================================================= */
.mc-home-section--categories ul.products {
	display: grid; /* o Shoptimizer usa flex no desktop */
	grid-template-columns: repeat(4, minmax(0, 1fr)); /* minmax(0,…): colunas iguais, sem crescer pela palavra mais longa */
	gap: var(--space-sm);
	margin: 0;
	padding: 0;
}

.mc-home-section--categories ul.products li.product {
	display: flex;
	width: auto;
	margin: 0;
	padding: 0; /* o WooCommerce põe padding no item; o cartão ocupa a célula toda */
	float: none;
	text-align: center;
}

/* Cartão: foto quadrada + faixa escura com o nome (D-28) */
.mc-home-section--categories ul.products li.product a {
	display: flex;
	flex-direction: column;
	width: 100%;
	overflow: hidden;
	border-radius: var(--radius-md);
	background: var(--color-primary-hover);
	text-decoration: none;
}

.mc-home-section--categories ul.products li.product img {
	display: block;
	width: 100%;
	margin: 0;
	aspect-ratio: 1 / 1;
	object-fit: cover;
}

/* Faixa do nome com altura de 2 linhas: as bordas ficam alinhadas entre os cartões */
.mc-home-section--categories .woocommerce-loop-category__title {
	display: flex;
	flex: 1;
	align-items: center;
	justify-content: center;
	min-height: calc(2lh + 2 * var(--space-sm));
	margin: 0;
	padding: var(--space-sm);
	font-size: var(--text-caption);
	font-weight: var(--font-weight-semibold);
	text-transform: uppercase;
	letter-spacing: var(--letter-spacing-caption);
	line-height: var(--line-height-body-sm);
	overflow-wrap: anywhere;
	color: var(--color-on-primary);
}

.mc-home-section--categories .woocommerce-loop-category__title .count {
	display: none;
}

@media (min-width: 768px) {
	.mc-home-section--categories .woocommerce-loop-category__title {
		font-size: var(--text-body-sm);
	}
}

@media (min-width: 1024px) {
	.mc-home-section--categories ul.products {
		grid-template-columns: repeat(8, minmax(0, 1fr));
	}
}

/* =============================================================================
   VITRINE COM ABAS — abas só com CSS (radio + label), sem JavaScript
   Até 6 abas: a N-ésima aba mostra o N-ésimo painel.
   ============================================================================= */
.mc-tabs > input {
	position: absolute;
	opacity: 0;
	pointer-events: none;
}

.mc-tabs__list {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-sm);
	margin-bottom: var(--space-lg);
}

.mc-tabs__list label {
	display: inline-flex;
	align-items: center;
	min-height: var(--tap-target-min);
	padding: 0 var(--space-lg);
	border: var(--border-width) solid var(--color-border-strong);
	border-radius: var(--radius-pill);
	font-size: var(--text-body-sm);
	font-weight: var(--font-weight-semibold);
	color: var(--color-text-primary);
	cursor: pointer;
	transition: background var(--transition-fast), color var(--transition-fast);
}

.mc-tabs__panel {
	display: none;
}

.mc-tabs > input:nth-of-type(1):checked ~ .mc-tabs__list label:nth-of-type(1),
.mc-tabs > input:nth-of-type(2):checked ~ .mc-tabs__list label:nth-of-type(2),
.mc-tabs > input:nth-of-type(3):checked ~ .mc-tabs__list label:nth-of-type(3),
.mc-tabs > input:nth-of-type(4):checked ~ .mc-tabs__list label:nth-of-type(4),
.mc-tabs > input:nth-of-type(5):checked ~ .mc-tabs__list label:nth-of-type(5),
.mc-tabs > input:nth-of-type(6):checked ~ .mc-tabs__list label:nth-of-type(6) {
	background: var(--color-primary);
	border-color: var(--color-primary);
	color: var(--color-on-primary);
}

.mc-tabs > input:nth-of-type(1):checked ~ .mc-tabs__panels .mc-tabs__panel:nth-of-type(1),
.mc-tabs > input:nth-of-type(2):checked ~ .mc-tabs__panels .mc-tabs__panel:nth-of-type(2),
.mc-tabs > input:nth-of-type(3):checked ~ .mc-tabs__panels .mc-tabs__panel:nth-of-type(3),
.mc-tabs > input:nth-of-type(4):checked ~ .mc-tabs__panels .mc-tabs__panel:nth-of-type(4),
.mc-tabs > input:nth-of-type(5):checked ~ .mc-tabs__panels .mc-tabs__panel:nth-of-type(5),
.mc-tabs > input:nth-of-type(6):checked ~ .mc-tabs__panels .mc-tabs__panel:nth-of-type(6) {
	display: block;
}

.mc-tabs > input:focus-visible ~ .mc-tabs__list {
	outline: var(--focus-ring-width) solid var(--color-border-focus);
	outline-offset: var(--focus-ring-offset);
}

.mc-tabs__empty {
	margin: 0;
	padding: var(--space-xl);
	background: var(--color-bg-subtle);
	border-radius: var(--radius-md);
	color: var(--color-text-secondary);
	text-align: center;
}

/* =============================================================================
   COMPRE POR SEGMENTO — blocos com imagem de fundo e rótulo
   ============================================================================= */
.mc-segments {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--space-md);
	margin: 0;
	padding: 0;
	list-style: none;
}

.mc-segments a {
	display: flex;
	align-items: flex-end;
	aspect-ratio: 3 / 4;
	padding: var(--space-md);
	background: var(--color-primary-hover) center / cover no-repeat;
	border-radius: var(--radius-md);
	color: var(--color-on-primary);
	font-weight: var(--font-weight-bold);
	text-decoration: none;
	text-transform: uppercase;
	font-size: var(--text-body-sm);
	letter-spacing: var(--letter-spacing-caption);
}

@media (min-width: 768px) {
	.mc-segments {
		grid-template-columns: repeat(3, 1fr);
	}
}

@media (min-width: 1024px) {
	.mc-segments {
		grid-template-columns: repeat(6, 1fr);
	}
}

/* =============================================================================
   AVALIAÇÕES DA LOJA — números + depoimentos
   ============================================================================= */
.mc-reviews__stats,
.mc-reviews__list {
	display: grid;
	gap: var(--space-md);
	margin: 0;
	padding: 0;
	list-style: none;
}

.mc-reviews__stats li {
	padding: var(--space-lg);
	background: var(--color-bg-subtle);
	border-radius: var(--radius-md);
	text-align: center;
}

.mc-reviews__stats strong {
	display: block;
	font-size: var(--text-h2);
	font-weight: var(--font-weight-extrabold);
	color: var(--color-text-primary);
}

.mc-reviews__list {
	margin-top: var(--space-md);
}

.mc-reviews__list li {
	padding: var(--space-lg);
	border: var(--border-width) solid var(--color-border-default);
	border-radius: var(--radius-md);
	color: var(--color-text-secondary);
}

.mc-reviews__list .mc-stars {
	color: var(--color-rating-star);
	letter-spacing: var(--letter-spacing-badge);
}

@media (min-width: 768px) {
	.mc-reviews__stats {
		grid-template-columns: repeat(3, 1fr);
	}

	.mc-reviews__list {
		grid-template-columns: repeat(3, 1fr);
	}
}

/* =============================================================================
   FAIXA DE CADASTRO (newsletter/conta)
   ============================================================================= */
.mc-signup {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--space-md);
	padding: var(--space-xl);
	background: var(--color-secondary);
	color: var(--color-on-primary);
	border-radius: var(--radius-lg);
}

.mc-signup h2 {
	margin: 0;
	font-size: var(--text-h2);
	font-weight: var(--font-weight-extrabold);
	color: var(--color-on-primary);
}

.mc-signup p {
	margin: 0;
	color: var(--color-text-inverse-muted);
}

@media (min-width: 1024px) {
	.mc-signup {
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
	}
}

/* =============================================================================
   FOTOS NAS SEÇÕES (D-28) — banner, banner intermediário e "Compre por segmento"
   A foto é um <img class="mc-media"> (carregamento prioritário no banner,
   preguiçoso nas demais) sob uma película na cor da marca; o texto fica por cima.
   Sem foto, as seções seguem como blocos de cor (nada muda).
   ============================================================================= */
.mc-hero__main:has(.mc-media),
.mc-hero__promo:has(.mc-media),
.mc-banner:has(.mc-media),
.mc-segments a:has(.mc-media) {
	position: relative;
	overflow: hidden;
	isolation: isolate;
}

.mc-media {
	position: absolute;
	inset: 0;
	z-index: -1;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.mc-hero__main:has(.mc-media)::after,
.mc-banner:has(.mc-media)::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: linear-gradient(
		90deg,
		color-mix(in srgb, var(--color-primary-hover) 94%, transparent) 0%,
		color-mix(in srgb, var(--color-primary-hover) 70%, transparent) 45%,
		transparent 100%
	);
}

/* Banner intermediário: película mais leve e altura própria para a foto aparecer */
.mc-banner:has(.mc-media) {
	min-height: calc(var(--space-4xl) * 3);
	justify-content: center;
}

.mc-banner:has(.mc-media)::after {
	background: linear-gradient(
		90deg,
		color-mix(in srgb, var(--color-primary-hover) 88%, transparent) 0%,
		color-mix(in srgb, var(--color-primary-hover) 45%, transparent) 55%,
		transparent 100%
	);
}

.mc-segments a:has(.mc-media)::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: linear-gradient(
		0deg,
		color-mix(in srgb, var(--color-primary-hover) 90%, transparent) 0%,
		transparent 55%
	);
}

.mc-hero__main:has(.mc-media) {
	min-height: calc(var(--space-4xl) * 4);
}

.mc-hero__main:has(.mc-media) > :not(.mc-media) {
	max-width: 32rem;
}

/* =============================================================================
   HOME EM BLOCOS (D-29)
   Fundo da página cinza-claro e cada seção de conteúdo em um bloco branco de
   cantos arredondados. Banner, atalhos, banner intermediário e faixa de cadastro
   já têm fundo próprio e ficam direto sobre o fundo.
   ============================================================================= */
body.home {
	background-color: var(--color-bg-subtle);
}

.mc-home {
	gap: var(--space-lg);
	padding-top: var(--space-lg);
}

.mc-home-section--categories,
.mc-home-section--showcase-tabs,
.mc-home-section--showcase-1,
.mc-home-section--showcase-2,
.mc-home-section--showcase-3,
.mc-home-section--brands,
.mc-home-section--segments,
.mc-home-section--reviews,
.mc-home-section--faq,
.mc-home-section--seo,
.mc-home-section--contact {
	padding: var(--space-lg);
	background: var(--color-bg-page);
	border-radius: var(--radius-lg);
}

@media (min-width: 1024px) {
	.mc-home-section--categories,
	.mc-home-section--showcase-tabs,
	.mc-home-section--showcase-1,
	.mc-home-section--showcase-2,
	.mc-home-section--showcase-3,
	.mc-home-section--brands,
	.mc-home-section--segments,
	.mc-home-section--reviews,
	.mc-home-section--faq,
	.mc-home-section--seo,
	.mc-home-section--contact {
		padding: var(--space-xl);
	}
}

/* Cartões laterais do banner (D-29): fundo claro com a foto à direita e texto escuro */
.mc-hero__promo:has(.mc-media)::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: linear-gradient(
		90deg,
		color-mix(in srgb, var(--color-bg-page) 96%, transparent) 0%,
		color-mix(in srgb, var(--color-bg-page) 80%, transparent) 50%,
		transparent 100%
	);
}

.mc-hero__promo:has(.mc-media) > :not(.mc-media) {
	max-width: 60%;
}