/*
 * Yokai Club — componentes de la pagina de inicio v0.2.0 (Etapa 2)
 * Patrones: cinta de confianza, categorias, nuevos lanzamientos.
 * Usa los tokens definidos en yokai-global.css.
 */

/* Estructura comun ---------------------------------------------------- */
.yk-section {
	padding-block: var(--yk-space-6);
}
.yk-container {
	margin-inline: auto;
	max-width: 1280px;
	padding-inline: var(--yk-space-3);
}
.yk-section__head {
	align-items: baseline;
	display: flex;
	gap: var(--yk-space-2);
	justify-content: space-between;
	margin-bottom: var(--yk-space-4);
}
.yk-section__title {
	margin: 0 0 var(--yk-space-4);
	text-transform: uppercase;
}
.yk-section__head .yk-section__title {
	margin: 0;
}
.yk-section__link {
	font-size: 14px;
	font-weight: 600;
	letter-spacing: 0.08em;
	margin: 0;
	text-transform: uppercase;
}

/* Cinta de confianza -------------------------------------------------- */
.yk-section.yk-trust {
	border-block: 1px solid var(--yk-line);
	padding-block: var(--yk-space-3);
}
.yk-trust__grid {
	display: grid;
	gap: var(--yk-space-3);
	grid-template-columns: repeat(4, 1fr);
}
.yk-section .yk-trust__grid > * {
	margin-block: 0;
}
.yk-trust__item {
	align-items: center;
	display: flex;
	gap: 12px;
}
.yk-trust__item p {
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.08em;
	line-height: 1.3;
	margin: 0;
	text-transform: uppercase;
}
.yk-trust .yk-icon {
	color: var(--yk-purple);
	flex: none;
}

/* Tarjetas de categoria ----------------------------------------------- */
.yk-cat-grid {
	display: grid;
	gap: var(--yk-space-3);
	grid-template-columns: repeat(3, 1fr);
}
.yk-section .yk-cat-grid > * {
	margin-block: 0;
}
.yk-cat-card {
	background: var(--yk-gray);
	border: 1px solid var(--yk-line);
	border-radius: var(--yk-radius);
	overflow: hidden;
	position: relative;
	transition: border-color 0.2s ease;
}
.yk-cat-card:hover {
	border-color: var(--yk-purple);
}
.yk-cat-card .wp-block-image {
	aspect-ratio: 1 / 1;
	background: var(--yk-gray);
	margin: 0;
	overflow: hidden;
}
.yk-cat-card .wp-block-image img {
	display: block;
	height: 100%;
	object-fit: cover;
	transition: transform 0.3s ease;
	width: 100%;
}
.yk-cat-card:hover .wp-block-image img {
	transform: scale(1.03);
}
.yk-cat-card__title {
	align-items: center;
	border-top: 1px solid var(--yk-line);
	display: flex;
	font-size: 16px;
	font-weight: 600;
	justify-content: space-between;
	letter-spacing: 0.08em;
	margin: 0;
	padding: var(--yk-space-2) var(--yk-space-3);
	text-transform: uppercase;
}
.yk-cat-card__title::after {
	content: "\2192";
	transition: transform 0.2s ease;
}
.yk-cat-card:hover .yk-cat-card__title::after {
	transform: translateX(4px);
}
.yk-cat-card__title a {
	color: inherit;
	text-decoration: none;
}
.yk-cat-card__title a:hover {
	color: inherit;
}
/* Toda la tarjeta es clicable con un solo enlace (el del titulo). */
.yk-cat-card__title a::after {
	content: "";
	inset: 0;
	position: absolute;
}
/* El anillo de foco se dibuja en la tarjeta completa. */
.yk-cat-card a:focus-visible {
	box-shadow: none;
	outline: none;
}
.yk-cat-card:has(a:focus-visible) {
	box-shadow: 0 0 0 5px var(--yk-black);
	outline: 2px solid var(--yk-white);
	outline-offset: 2px;
}

/* Tablet y movil ------------------------------------------------------ */
@media (max-width: 781px) {
	.yk-section {
		padding-block: var(--yk-space-5);
	}
	.yk-section.yk-trust {
		padding-block: var(--yk-space-3);
	}
	.yk-container {
		padding-inline: var(--yk-space-2);
	}
	.yk-trust__grid {
		gap: var(--yk-space-2);
		grid-template-columns: repeat(2, 1fr);
	}
	.yk-cat-grid {
		gap: var(--yk-space-2);
		grid-template-columns: 1fr;
	}
	.yk-cat-card .wp-block-image {
		aspect-ratio: 16 / 10;
	}
}