/**
 * Homepage v3 Polish — Phase 8 P8.H2 (O8-O14).
 *
 * Layered on top of `homepage.css` + `anime.css` + `episode.css` + `video.css`.
 * Only enqueued on `is_front_page()` / homepage template.
 *
 * Goals (per home-page audit 2026-05-25):
 *   O8  — Section header: accent stripe + "View all →" CTA.
 *   O9  — Card hover: lift + thumbnail zoom + shadow.
 *   O10 — Skeleton loader for lazy cards.
 *   O11 — Unified card meta (badge ep + sub-type + title clamp + meta row).
 *   O12 — Responsive section spacing (clamp).
 *   O13 — Hero CTA + gradient overlay polish.
 *   O14 — Responsive auto-fill grid (overrides fixed columns under specific bp).
 */

/* ---------------------------------------------------------------------------
 * O12 — Section vertical rhythm
 * ------------------------------------------------------------------------ */
.homepage .home-section {
	margin: 0;
	padding-block: clamp(40px, 6vw, 72px);
}
.homepage .home-section + .home-section {
	padding-top: 0;
}

/* ---------------------------------------------------------------------------
 * O8 — Section header polish
 * ------------------------------------------------------------------------ */
.homepage .home-section .section-header {
	display: flex;
	align-items: center;
	gap: 16px;
	margin-bottom: 22px;
	padding-left: 14px;
	position: relative;
	border-bottom: 0;
}
.homepage .home-section .section-header::before {
	content: "";
	position: absolute;
	left: 0;
	top: 50%;
	transform: translateY(-50%);
	width: 4px;
	height: 22px;
	border-radius: 2px;
	background: var(--animehub-primary, #ff6b35);
}
.homepage .home-section .section-header .section-title,
.homepage .home-section .section-header h2,
.homepage .home-section .section-header h3 {
	margin: 0;
	font-size: clamp(18px, 1.6vw, 22px);
	font-weight: 700;
	letter-spacing: 0.01em;
	color: #f5f5f7;
	line-height: 1.2;
}
.homepage .home-section .section-header .section-link,
.homepage .home-section .section-header a[href]:last-child {
	margin-left: auto;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 13px;
	font-weight: 600;
	color: #9aa0a6;
	text-decoration: none;
	padding: 6px 10px;
	border-radius: 6px;
	transition: color 0.15s ease, background 0.15s ease;
}
.homepage .home-section .section-header .section-link::after,
.homepage .home-section .section-header a[href]:last-child::after {
	content: "→";
	font-size: 14px;
	transition: transform 0.2s ease;
}
.homepage .home-section .section-header .section-link:hover,
.homepage .home-section .section-header a[href]:last-child:hover {
	color: var(--animehub-primary, #ff6b35);
	background: rgba(255, 107, 53, 0.08);
}
.homepage .home-section .section-header .section-link:hover::after,
.homepage .home-section .section-header a[href]:last-child:hover::after {
	transform: translateX(3px);
}

/* ---------------------------------------------------------------------------
 * O9 — Card hover lift + thumbnail zoom
 * ------------------------------------------------------------------------ */
.homepage .home-section .card,
.homepage .home-section .anime-card,
.homepage .home-section .episode-card,
.homepage .home-section .video-card {
	transition: transform 0.18s cubic-bezier(0.2, 0.7, 0.2, 1),
		box-shadow 0.2s ease;
	will-change: transform;
}
.homepage .home-section .card:hover,
.homepage .home-section .anime-card:hover,
.homepage .home-section .episode-card:hover,
.homepage .home-section .video-card:hover {
	transform: translateY(-3px);
	box-shadow: 0 16px 32px -16px rgba(0, 0, 0, 0.55),
		0 4px 14px -8px rgba(255, 107, 53, 0.25);
}
.homepage .home-section .card .card-thumbnail img,
.homepage .home-section .anime-card .anime-card__thumb img,
.homepage .home-section .anime-card .card-thumbnail img,
.homepage .home-section .episode-card .episode-card__thumb img,
.homepage .home-section .episode-card .card-thumbnail img,
.homepage .home-section .video-card .video-card__thumb img,
.homepage .home-section .video-card .card-thumbnail img {
	transition: transform 0.35s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.homepage .home-section .card:hover .card-thumbnail img,
.homepage .home-section .anime-card:hover .anime-card__thumb img,
.homepage .home-section .anime-card:hover .card-thumbnail img,
.homepage .home-section .episode-card:hover .episode-card__thumb img,
.homepage .home-section .episode-card:hover .card-thumbnail img,
.homepage .home-section .video-card:hover .video-card__thumb img,
.homepage .home-section .video-card:hover .card-thumbnail img {
	transform: scale(1.05);
}

/* Thumbnail wrapper needs overflow:hidden to clip the zoom. */
.homepage .home-section .card-thumbnail,
.homepage .home-section .anime-card__thumb,
.homepage .home-section .episode-card__thumb,
.homepage .home-section .video-card__thumb {
	overflow: hidden;
	position: relative;
}

/* ---------------------------------------------------------------------------
 * O10 — Skeleton loader for lazy images
 * ------------------------------------------------------------------------ */
.homepage .home-section img[loading="lazy"]:not(.is-loaded) {
	background: linear-gradient(90deg, #1f1f23 0%, #2a2a30 50%, #1f1f23 100%);
	background-size: 200% 100%;
	animation: ah-skeleton-pulse 1.4s ease-in-out infinite;
}
@keyframes ah-skeleton-pulse {
	0%   { background-position: 200% 0; }
	100% { background-position: -200% 0; }
}
/* When the image actually loads, the browser fills its content and the
 * background is hidden behind it — but to also stop the animation we add
 * the .is-loaded class via the lazy-load JS (existing). */

/* ---------------------------------------------------------------------------
 * O11 — Card meta unification (title clamp + meta row)
 * ------------------------------------------------------------------------ */
.homepage .home-section .card-title,
.homepage .home-section .anime-card__title,
.homepage .home-section .episode-card__title,
.homepage .home-section .video-card__title {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	text-overflow: ellipsis;
	min-height: 2.6em;
	line-height: 1.3;
	font-size: 13px;
	font-weight: 600;
	color: #e8e8ed;
	margin: 8px 0 4px;
}

.homepage .home-section .card-meta,
.homepage .home-section .anime-card__meta,
.homepage .home-section .episode-card__meta,
.homepage .home-section .video-card__meta {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 11px;
	color: #8a8a93;
	font-weight: 500;
}
.homepage .home-section .card-meta > * + *::before,
.homepage .home-section .anime-card__meta > * + *::before,
.homepage .home-section .episode-card__meta > * + *::before,
.homepage .home-section .video-card__meta > * + *::before {
	content: "·";
	margin-right: 6px;
	opacity: 0.5;
}

/* Badge polish — episode number / sub-type / version */
.homepage .home-section .card-badge,
.homepage .home-section .episode-card__version,
.homepage .home-section .episode-card__number {
	display: inline-flex;
	align-items: center;
	padding: 2px 7px;
	border-radius: 4px;
	font-size: 10px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	line-height: 1.4;
}

/* ---------------------------------------------------------------------------
 * O13 — Hero CTA + gradient overlay polish
 * ------------------------------------------------------------------------ */
.hero-slide__content {
	background: linear-gradient(180deg,
		rgba(10, 10, 12, 0.4) 0%,
		rgba(10, 10, 12, 0.65) 60%,
		rgba(10, 10, 12, 0.92) 100%);
}
.hero-slide__actions .btn {
	min-height: 44px;
	padding: 10px 22px;
	font-size: 14px;
	font-weight: 600;
	border-radius: 8px;
	letter-spacing: 0.02em;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	transition: transform 0.15s ease, box-shadow 0.2s ease, background 0.15s ease;
}
.hero-slide__actions .btn--primary {
	background: var(--animehub-primary, #ff6b35);
	color: #fff;
	box-shadow: 0 6px 24px -8px rgba(255, 107, 53, 0.55);
}
.hero-slide__actions .btn--primary:hover {
	transform: translateY(-2px);
	box-shadow: 0 10px 30px -8px rgba(255, 107, 53, 0.7);
	background: #ff7d50;
}
.hero-slide__actions .btn--secondary {
	background: rgba(255, 255, 255, 0.1);
	color: #fff;
	border: 1px solid rgba(255, 255, 255, 0.18);
	backdrop-filter: blur(6px);
}
.hero-slide__actions .btn--secondary:hover {
	background: rgba(255, 255, 255, 0.18);
	transform: translateY(-2px);
}
.hero-slide__title {
	font-size: clamp(24px, 3.5vw, 42px);
	font-weight: 800;
	letter-spacing: -0.01em;
	line-height: 1.1;
}
.hero-dots .hero-dot {
	width: 8px;
	height: 8px;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.35);
	border: 0;
	cursor: pointer;
	transition: background 0.15s ease, width 0.15s ease;
}
.hero-dots .hero-dot:hover { background: rgba(255, 255, 255, 0.6); }
.hero-dots .hero-dot.active {
	width: 28px;
	background: var(--animehub-primary, #ff6b35);
}

/* ---------------------------------------------------------------------------
 * O13b — Hero prev/next visibility hardening.
 *
 * Observed bug (2026-05-25): the buttons rendered as ~30 px circles with a
 * single-pixel white dot inside. That means SOMETHING in the cascade is
 * shrinking the button + SVG well below the values declared in homepage.css.
 *
 * Defensive fix: hoist size/color rules with high enough specificity (and
 * `!important` on a handful of size props) so they win regardless of later
 * media-query overrides.
 */
.hero-section .hero-prev,
.hero-section .hero-next {
	width: 52px !important;
	height: 52px !important;
	min-width: 52px !important;
	min-height: 52px !important;
	padding: 0 !important;
	color: #fff;
	background: rgba(0, 0, 0, 0.6);
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
	border: 1px solid rgba(255, 255, 255, 0.28);
	box-shadow: 0 6px 24px -8px rgba(0, 0, 0, 0.6);
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
}

.hero-section .hero-prev svg,
.hero-section .hero-next svg {
	display: block !important;
	width: 28px !important;
	height: 28px !important;
	color: #fff !important;
	stroke: #fff !important;
	stroke-width: 2.4 !important;
	stroke-linecap: round;
	stroke-linejoin: round;
	fill: none !important;
	overflow: visible;
	filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.7));
	pointer-events: none;
}

/* Some UA stylesheets give <polyline> a default `fill: black`. The parent
 * `fill="none"` SHOULD inherit, but make it explicit to be safe. */
.hero-section .hero-prev svg polyline,
.hero-section .hero-next svg polyline,
.hero-section .hero-prev svg path,
.hero-section .hero-next svg path {
	fill: none !important;
	stroke: #fff !important;
	stroke-width: 2.4 !important;
	vector-effect: non-scaling-stroke;
}

/* Mobile sizes */
@media (max-width: 768px) {
	.hero-section .hero-prev,
	.hero-section .hero-next {
		width: 44px !important;
		height: 44px !important;
		min-width: 44px !important;
		min-height: 44px !important;
	}
	.hero-section .hero-prev svg,
	.hero-section .hero-next svg {
		width: 22px !important;
		height: 22px !important;
	}
}

/* ---------------------------------------------------------------------------
 * O18 — Focus ring on interactive cards/buttons (accessibility hint)
 * ------------------------------------------------------------------------ */
.homepage .home-section a:focus-visible,
.homepage .home-section button:focus-visible,
.hero-slider .btn:focus-visible,
.hero-slider .hero-dot:focus-visible,
.hero-slider .hero-prev:focus-visible,
.hero-slider .hero-next:focus-visible {
	outline: 2px solid var(--animehub-primary, #ff6b35);
	outline-offset: 3px;
	border-radius: 6px;
}