/* Home do Grão Passado (carregado só na página inicial).
   Só variáveis do tema; sem hexadecimal, sem gradiente, sem sombra dura, sem borda cinza. */

/* ---------- Hero ---------- */

.dc-hero .dc-hero__titulo {
	max-width: 14ch;
	margin-block: 0 var(--wp--preset--spacing--30);
	font-size: clamp(2.5rem, 7vw + 1rem, var(--wp--preset--font-size--display));
	font-weight: 800;
	letter-spacing: -0.03em;
	line-height: 0.98;
	text-wrap: balance;
}

.dc-hero .dc-hero__subtitulo {
	max-width: 32rem;
	margin: 0;
	line-height: 1.4;
	text-wrap: pretty;
}

/* ---------- Etiqueta (pílula em DM Mono) ---------- */

.dc-etiqueta {
	display: inline-block;
	margin: 0;
	padding: 0.4rem 0.75rem;
	border-radius: 999px;
	background: color-mix(in oklch, var(--wp--preset--color--carvao) 10%, transparent);
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 500;
	letter-spacing: 0.16em;
	line-height: 1;
	text-transform: uppercase;
}

/* ---------- Três portas ---------- */

.dc-portas {
	display: grid;
	gap: var(--wp--preset--spacing--30);
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
	margin-block: var(--wp--preset--spacing--50);
}

.dc-porta {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--30);
	min-height: 15rem;
	padding: 2rem 1.75rem 1.75rem;
	border-bottom: 6px solid color-mix(in oklch, var(--wp--preset--color--carvao) 22%, transparent);
	border-radius: 40px 40px 10px 10px;
	color: var(--wp--preset--color--carvao);
	transition: transform 500ms cubic-bezier(0.32, 0.72, 0, 1);
}

/* O grupo das portas é "default" (is-layout-flow): zera a margem que o núcleo põe nos filhos. */
.dc-portas > .dc-porta { margin: 0; }

.dc-porta--ceu { background-color: var(--wp--preset--color--ceu); }
.dc-porta--menta { background-color: var(--wp--preset--color--menta); }
.dc-porta--morango { background-color: var(--wp--preset--color--morango); }

.dc-porta__titulo {
	margin: 0;
	font-size: var(--wp--preset--font-size--xx-large);
	font-weight: 800;
	letter-spacing: -0.025em;
	line-height: 1.05;
}

.dc-porta__link {
	color: inherit;
	text-decoration: none;
}

/* Link esticado: o card inteiro é clicável e continua com um só foco. */
.dc-porta__link::after {
	position: absolute;
	inset: 0;
	border-radius: inherit;
	content: "";
}

/* Um só anel de foco: o do card (:has), logo abaixo. */
.dc-porta__link:focus-visible {
	outline: none;
}

.dc-porta:has(.dc-porta__link:focus-visible) {
	outline: 3px solid var(--wp--preset--color--carvao);
	outline-offset: 4px;
}

/* Sem suporte a :has(), volta o anel no próprio link. */
@supports not selector(:has(*)) {
	.dc-porta__link:focus-visible {
		outline: 3px solid var(--wp--preset--color--carvao);
		outline-offset: 4px;
	}
}

/* Etiqueta "em breve" dentro da porta: leite a 50 % no lugar de tinta a 10 %, contraste folgado. */
.dc-porta .dc-etiqueta {
	background: color-mix(in oklch, var(--wp--preset--color--leite) 50%, transparent);
}

.dc-porta__apoio {
	margin: 0;
	font-size: var(--wp--preset--font-size--medium);
	font-weight: 500;
	line-height: 1.5;
}

.dc-porta__rodape {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-top: auto;
}

.dc-porta__seta {
	display: grid;
	width: 2.75rem;
	height: 2.75rem;
	margin-left: auto;
	border-radius: 50%;
	background: var(--wp--preset--color--carvao);
	color: var(--wp--preset--color--leite);
	place-items: center;
}

@media (hover: hover) {
	.dc-porta:hover { transform: translateY(-4px); }
}

/* Portas no celular: sem altura mínima, padding e título menores (o apoio segue em 16 px). */
@media (max-width: 40rem) {
	.dc-porta {
		min-height: 0;
		padding: 1.5rem 1.25rem 1.25rem;
	}

	.dc-porta__titulo {
		font-size: var(--wp--preset--font-size--x-large);
	}
}

/* ---------- Qual é a sua máquina? ---------- */

/* padding no lugar de margin: o núcleo zera a margem do primeiro e do último filho do grupo. */
.dc-escolha {
	margin-block: 0;
	padding-block: var(--wp--preset--spacing--50) 0;
}

.dc-escolha__titulo,
.dc-ultimos__titulo {
	margin: 0 0 var(--wp--preset--spacing--30);
	font-size: var(--wp--preset--font-size--x-large);
	font-weight: 800;
	letter-spacing: -0.02em;
	line-height: 1.1;
}

.dc-escolha__lista {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.dc-escolha__chip {
	display: inline-flex;
	align-items: center;
	gap: 0.6rem;
	padding: 0.75rem 1.25rem;
	border-radius: 999px;
	background: var(--wp--preset--color--carvao);
	color: var(--wp--preset--color--leite);
	font-weight: 600;
	text-decoration: none;
	transition: transform 500ms cubic-bezier(0.32, 0.72, 0, 1);
}

/* Vazio: <span> sem link. Não é clicável nem focável, então sem cursor de mão, sem movimento e sem anel. */
.dc-escolha__chip.is-vazio {
	cursor: default;
	border: 2px dashed color-mix(in oklch, var(--wp--preset--color--carvao) 50%, transparent);
	background: transparent;
	color: var(--wp--preset--color--carvao);
}

a.dc-escolha__chip:focus-visible {
	outline: 3px solid var(--wp--preset--color--carvao);
	outline-offset: 3px;
}

@media (hover: hover) {
	a.dc-escolha__chip:hover { transform: translateY(-2px); }
}

/* ---------- Últimos de cada frente ---------- */

.dc-ultimos {
	margin-block: 0;
	padding-block: var(--wp--preset--spacing--50) 0;
}

/* Respiro antes do rodapé: escolha e últimos dividem um grupo; o último que existir leva o padding.
   Se todos os "Últimos" sumirem (frente vazia), o atalho de máquinas é o último filho. */
.dc-ultimos:last-child,
.dc-escolha:last-child {
	padding-block-end: var(--wp--preset--spacing--50);
}

.dc-ultimos__lista {
	display: grid;
	gap: var(--wp--preset--spacing--30);
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
	margin: 0;
	padding: 0;
	list-style: none;
}

.dc-ultimos__imagem {
	display: block;
	padding: 0.5rem;
	border-radius: 1.5rem;
	background: color-mix(in oklch, var(--wp--preset--color--carvao) 5%, transparent);
}

.dc-ultimos__imagem img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 1rem;
	aspect-ratio: 4 / 3;
	object-fit: cover;
}

.dc-ultimos__lista > li {
	position: relative;
	padding-block: 1rem 1.25rem;
	border-top: 2px solid var(--wp--preset--color--carvao);
}

.dc-ultimos__item-titulo {
	margin: 0.75rem 0 0;
	font-size: var(--wp--preset--font-size--large);
	font-weight: 700;
	letter-spacing: -0.02em;
	line-height: 1.1;
}

.dc-ultimos__item-titulo a {
	color: var(--wp--preset--color--carvao);
	text-decoration: none;
}

/* Link esticado: o item inteiro é clicável. */
.dc-ultimos__item-titulo a::after {
	position: absolute;
	inset: 0;
	content: "";
}

.dc-ultimos__item-titulo a:hover {
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

.dc-ultimos__maquinas {
	margin: 0.25rem 0 0;
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--small);
}

.dc-ultimos__vazio {
	margin: 0;
	padding: 1.25rem 1.5rem;
	border: 2px dashed color-mix(in oklch, var(--wp--preset--color--carvao) 50%, transparent);
	border-radius: 1.5rem;
	background: transparent;
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--small);
	letter-spacing: 0.16em;
	text-transform: uppercase;
}

.dc-ultimos__rodape {
	margin: var(--wp--preset--spacing--30) 0 0;
}

.dc-ultimos__todos {
	display: inline-block;
	padding: 0.75rem 1.25rem;
	border-radius: 999px;
	background: transparent;
	box-shadow: inset 0 0 0 2px var(--wp--preset--color--carvao);
	color: var(--wp--preset--color--carvao);
	font-weight: 600;
	text-decoration: none;
}

.dc-ultimos__todos:focus-visible,
.dc-ultimos__item-titulo a:focus-visible {
	outline: 3px solid var(--wp--preset--color--carvao);
	outline-offset: 3px;
}

/* ---------- Sem movimento ---------- */

@media (prefers-reduced-motion: reduce) {
	.dc-porta,
	.dc-escolha__chip {
		transition: none;
	}

	.dc-porta:hover,
	.dc-escolha__chip:hover {
		transform: none;
	}
}