/**
 * yhstky Webtoon — assets/css/homepage-v2.css
 * Portada v2 (2026-10-04): buscador prominente del hero + chips de
 * género como enlaces. Solo se carga en la portada.
 * Responsive: 360 / 768 / 1200 sin scroll horizontal.
 */

/* Utilidad: solo lectores de pantalla. */
.yhwt-sr {
	position: absolute !important;
	width: 1px; height: 1px;
	margin: -1px; padding: 0; border: 0;
	clip: rect(0 0 0 0); clip-path: inset(50%);
	overflow: hidden; white-space: nowrap;
}

/* ── Buscador del hero ─────────────────────────────────────── */
.hero-search {
	position: relative;
	max-width: 560px;
	margin: 0 auto 26px;
}
.hero-search input[type="search"] {
	width: 100%;
	max-width: 100%;
	box-sizing: border-box;
	padding: 16px 56px 16px 24px;
	border-radius: 999px;
	border: 1px solid var(--border-strong);
	background: rgba(255, 255, 255, 0.06);
	color: var(--ink);
	font-size: 16px; /* 16px evita el zoom automático en iOS */
	font-family: var(--font-body);
	-webkit-appearance: none;
	appearance: none;
}
.hero-search input[type="search"]::placeholder {
	color: var(--faint);
	opacity: 1;
}
.hero-search input[type="search"]:focus {
	outline: 2px solid var(--gold);
	outline-offset: 2px;
	border-color: var(--gold);
	background: rgba(255, 255, 255, 0.09);
}
/* Oculta la X nativa para usar nuestro botón (coherencia visual). */
.hero-search input[type="search"]::-webkit-search-cancel-button {
	-webkit-appearance: none;
	appearance: none;
}
.hero-search button[type="submit"] {
	position: absolute;
	right: 6px;
	top: 50%;
	transform: translateY(-50%);
	width: 44px;
	height: 44px;
	border: 0;
	border-radius: 999px;
	background: var(--gradient-gold);
	color: #241236;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0;
}
.hero-search button[type="submit"]:hover {
	filter: brightness(1.08);
}
.hero-search button[type="submit"] svg {
	width: 20px;
	height: 20px;
	stroke: currentColor;
	fill: none;
	stroke-width: 2.2;
	stroke-linecap: round;
	stroke-linejoin: round;
}
.hero-search button[type="submit"]:focus-visible {
	outline: 2px solid var(--gold);
	outline-offset: 2px;
}

/* ── Chips de género como enlaces (misma apariencia que botones) */
.genre-chips a {
	display: inline-flex;
	align-items: center;
	border: 1px solid var(--border);
	background: var(--plum-900);
	color: var(--muted);
	border-radius: 999px;
	padding: 9px 18px;
	font-size: 14px;
	font-weight: 600;
	font-family: var(--font-body);
	text-decoration: none;
}
.genre-chips a:hover {
	border-color: var(--border-strong);
	color: var(--ink);
}
.genre-chips a.is-active {
	background: var(--gradient-gold);
	color: #241236;
	border-color: transparent;
}
.genre-chips a .n {
	opacity: 0.7;
	font-weight: 500;
}
.genre-chips a:focus-visible {
	outline: 2px solid var(--gold);
	outline-offset: 2px;
}

/* ── Tarjetas de capítulo: serie en minúsculas legibles ─────── */
.chapter-chip .cc-series {
	max-width: 100%;
}

/* ── 360px: el hero no debe desbordar ───────────────────────── */
@media (max-width: 400px) {
	.hero-search {
		margin-left: -4px;
		margin-right: -4px;
	}
	.hero-search input[type="search"] {
		padding: 14px 52px 14px 18px;
		font-size: 16px;
	}
}