/*
 * Home page only: the songsubtext.com home measured at 1536px
 * (docs/08-reference-songsubtext.md, "Home page, measured"). No sidebar. Their sky
 * blue becomes our accent. The fonts match the reference exactly: system-ui for
 * headings and badges, Open Sans (self-hosted) for everything else. Every rule is
 * scoped to .home or body.home so no other page picks them up.
 */

@font-face {
	font-family: "Open Sans";
	src: url("../fonts/OpenSans-normal.woff2") format("woff2");
	font-weight: 300 800;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "Open Sans";
	src: url("../fonts/OpenSans-italic.woff2") format("woff2");
	font-weight: 300 800;
	font-style: italic;
	font-display: swap;
}

div.home {
	--home-heading: system-ui, -apple-system, sans-serif;
	--home-body: "Open Sans", "Segoe UI", sans-serif;
	font-family: var(--home-body);
	font-size: 17px;
	line-height: 25.5px;
}

/* The reference's #primary: a 1200px column with 15px padding (border-box), so the
   panels inside are 1170px wide. "div." keeps this off the body, which also has the
   home class. */
div.home {
	max-width: 1200px;
	margin: 0 auto;
	padding: 15px 15px 0;
}
body.home .site-foot { margin-top: 0; }

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

.home-hero {
	background: #F8FAFC;
	padding: 100px 20px;
	text-align: center;
}
.home-hero__inner {
	max-width: 860px;
	margin: 0 auto;
}
.home-hero h1 {
	margin: 0 0 25px;
	font-family: var(--home-heading);
	font-size: 35.2px;
	line-height: 42.24px;
	font-weight: 800;
	letter-spacing: -1px;
	color: #000;
}
.home-hero__deck {
	max-width: 600px;
	margin: 0 auto 30px;
	font-family: var(--home-body);
	font-size: 20px;
	line-height: 32px;
	font-weight: 400;
	color: #475569;
}

.home-search {
	display: flex;
	gap: 12px;
	max-width: 620px;
	margin: 0 auto;
}
.home-search__input {
	flex: 1;
	min-width: 0;
	height: 62px;
	padding: 16px 24px;
	border: 2px solid #CBD5E1;
	border-radius: 12px;
	background: #fff;
	color: #1E293B;
	font: 400 17.6px/26.4px var(--home-body);
}
.home-search__input::placeholder { color: #94A3B8; }
.home-search__input:focus {
	outline: none;
	border-color: var(--accent);
}
.home-search__button {
	flex: none;
	height: 62px;
	padding: 16px 32px;
	border: 0;
	border-radius: 12px;
	background: var(--accent);
	color: #fff;
	font: 700 17.6px/26.4px var(--home-body);
	cursor: pointer;
	transition: filter var(--t);
}
.home-search__button:hover { filter: brightness(1.08); }
.home-search__button:focus-visible { outline: 2px solid var(--accent-text); outline-offset: 2px; }

.home-hero__label {
	margin: 38px 0 12px;
	font-family: var(--home-body);
	font-size: 14.4px;
	line-height: 21.6px;
	font-weight: 600;
	letter-spacing: 0.5px;
	text-transform: uppercase;
	color: #64748B;
}
.home-hero__pills {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 10px;
}
.home-pill {
	display: inline-flex;
	align-items: center;
	height: 40px;
	padding: 8px 18px;
	border: 1px solid #E2E8F0;
	border-radius: 50px;
	background: #fff;
	font-family: var(--home-body);
	font-size: 14.4px;
	line-height: 21.6px;
	font-weight: 600;
	color: #334155;
	text-decoration: none;
	transition: border-color var(--t), color var(--t);
}
.home-pill:hover {
	border-color: var(--accent);
	color: var(--accent-text);
}

/* ---------- Latest ---------- */

.home-latest {
	background: #fff;
	padding: 80px 20px;
}
.home-latest__inner {
	max-width: 1130px;
	margin: 0 auto;
}
.home-latest h2 {
	margin: 0 0 40px;
	font-family: var(--home-heading);
	font-size: 35.2px;
	line-height: 42.24px;
	font-weight: 800;
	text-align: center;
	color: #0F172A;
}
.home-latest .song-grid {
	grid-template-columns: repeat(3, 1fr);
	gap: 30px;
	margin-top: 0;
}
.home-latest .song-cat-badge,
.home-latest .song-score-badge {
	font-family: var(--home-heading);
	font-size: 12px;
	line-height: 18px;
	font-weight: 700;
	letter-spacing: 0.5px;
	text-transform: uppercase;
}
.home-latest .song-card-content { gap: 0; }
.home-latest .song-card-title {
	margin: 0 0 15px;
	font-family: var(--home-heading);
	font-size: 20px;
	line-height: 26px;
	font-weight: 700;
	color: #1E293B;
}
.home-latest .song-card-artist {
	margin: 0 0 12px;
	font-family: var(--home-body);
	font-size: 15.2px;
	line-height: 22.8px;
	color: #64748B;
}
.home-latest .read-more-link {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding-top: 0;
	font-family: var(--home-body);
	font-size: 15.2px;
	line-height: 22.8px;
	font-weight: 700;
	color: var(--accent);
}
.home-latest .read-more-link::after {
	content: "";
	width: 14px;
	height: 14px;
	background: currentColor;
	-webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14M12 5l7 7-7 7"/></svg>') center / contain no-repeat;
	mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14M12 5l7 7-7 7"/></svg>') center / contain no-repeat;
	transition: transform var(--t);
}
.home-latest .song-card:hover .read-more-link::after { transform: translateX(3px); }
.home-latest .empty { text-align: center; margin: 0 auto; }

/* ---------- Pagination ---------- */

.home-pagination {
	margin-top: 50px;
	padding-top: 30px;
	border-top: 1px solid #E2E8F0;
}
.home-pagination ul {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
}
.home-pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	height: 44px;
	padding: 0 16px;
	border: 1px solid #E2E8F0;
	border-radius: 8px;
	background: #fff;
	font: 600 15.2px/1 var(--home-body);
	color: #334155;
	text-decoration: none;
	transition: border-color var(--t), color var(--t);
}
.home-pagination a.page-numbers:hover {
	border-color: var(--accent);
	color: var(--accent-text);
}
.home-pagination .page-numbers.current {
	background: var(--accent);
	border-color: var(--accent);
	color: #fff;
}
.home-pagination .page-numbers.dots { border-color: transparent; }

/* ---------- Narrow screens ---------- */

@media (max-width: 900px) {
	.home-latest .song-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
	.home-hero { padding: 56px 20px; }
	.home-latest { padding: 56px 20px; }
}
@media (max-width: 600px) {
	.home-latest .song-grid { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
	.home-search { flex-direction: column; }
	.home-search__button { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
	.home-latest .read-more-link::after,
	.home-search__button,
	.home-pill,
	.home-pagination .page-numbers { transition: none; }
	.home-latest .song-card:hover .read-more-link::after { transform: none; }
}