/**
 * Page-level layouts: homepage, category archives, single article.
 */

.sk-page #primary,
.sk-page .site-content > .ast-container {
	max-width: none;
	padding: 0;
	margin: 0;
	width: 100%;
}

.sk-page #content .ast-container {
	display: block;
	max-width: none;
	padding: 0;
}

/* ==========================================================================
   Homepage hero
   ========================================================================== */

.sk-hero {
	position: relative;
	display: flex;
	align-items: center;
	width: 100%;
	min-height: 600px;
	overflow: hidden;
	background-color: var(--sk-ink);
}

@media (min-width: 783px) {
	.sk-hero { min-height: 700px; }
}

.sk-hero__bg { position: absolute; inset: 0; z-index: 0; }

.sk-hero__bg img { width: 100%; height: 100%; object-fit: cover; }

/*
 * Ink scrim from the left. The headline sits on ink, so the electric blue can
 * be used for the eyebrow chip at full strength (14.22:1).
 */
.sk-hero__bg::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(
		to right,
		rgb(0 22 24 / 0.94) 0%,
		rgb(0 22 24 / 0.78) 42%,
		rgb(0 22 24 / 0.25) 72%,
		rgb(0 22 24 / 0.05) 100%
	);
}

.sk-hero__inner { position: relative; z-index: 1; }

.sk-hero__content { max-width: 42rem; }

.sk-hero__title {
	margin: var(--sk-2) 0 var(--sk-3);
	font-size: var(--sk-text-3xl);
	line-height: var(--sk-text-3xl-lh);
	letter-spacing: var(--sk-tracking-tight);
	color: var(--sk-on-dark);
}

.sk-hero__text {
	margin: 0 0 var(--sk-4);
	font-size: var(--sk-text-md);
	line-height: var(--sk-text-md-lh);
	color: var(--sk-on-dark-variant);
}

.sk-hero__actions { display: flex; flex-wrap: wrap; gap: var(--sk-2); }

/* Outline button needs the on-dark treatment inside the hero. */
.sk-hero .sk-btn--secondary {
	border-color: var(--sk-electric);
	color: var(--sk-electric);
}

.sk-hero .sk-btn--secondary:hover {
	background-color: var(--sk-electric);
	color: var(--sk-ink);
}

/* ==========================================================================
   Bento grid
   ========================================================================== */

.sk-bento {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--sk-3);
}

@media (min-width: 783px) {
	.sk-bento { grid-template-columns: repeat(3, 1fr); }
	.sk-bento__feature { grid-column: span 2; }
}

.sk-bento__side { display: flex; flex-direction: column; gap: var(--sk-3); }
.sk-bento__side .sk-card { flex: 1; }

/* ==========================================================================
   Archive heroes
   ========================================================================== */

/* Variant A — centred, on ink */
.sk-archive-hero--center {
	text-align: center;
	padding-block: var(--sk-10);
	background: var(--sk-ink);
	color: var(--sk-on-dark);
}

.sk-archive-hero--center h1 { margin: 0 0 var(--sk-2); color: var(--sk-on-dark); }

.sk-archive-hero--center p {
	max-width: 40rem;
	margin: 0 auto;
	font-size: var(--sk-text-md);
	line-height: var(--sk-text-md-lh);
	color: var(--sk-on-dark-variant);
}

/* Variant B — split */
.sk-archive-hero--split {
	background: var(--sk-ink);
	color: var(--sk-on-dark);
	padding-block: var(--sk-8);
}

.sk-split { display: grid; grid-template-columns: 1fr; gap: var(--sk-6); align-items: center; }

@media (min-width: 783px) {
	.sk-split { grid-template-columns: 1fr 1fr; gap: var(--sk-8); }
}

.sk-split__title { margin: var(--sk-2) 0 var(--sk-3); color: var(--sk-on-dark); }

.sk-split__text {
	margin: 0 0 var(--sk-4);
	font-size: var(--sk-text-md);
	line-height: var(--sk-text-md-lh);
	color: var(--sk-on-dark-variant);
}

/* Variant C — boxed hero card */
.sk-archive-hero--card { padding-block: var(--sk-4); }

.sk-hero-card {
	position: relative;
	display: flex;
	align-items: center;
	min-height: 380px;
	border-radius: var(--sk-radius-lg);
	overflow: hidden;
	background-color: var(--sk-ink);
}

.sk-hero-card__bg { position: absolute; inset: 0; }
.sk-hero-card__bg img { width: 100%; height: 100%; object-fit: cover; }

.sk-hero-card__bg::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(to right, rgb(0 22 24 / 0.95) 0%, rgb(0 22 24 / 0.7) 45%, rgb(0 22 24 / 0.1) 100%);
}

.sk-hero-card__content { position: relative; z-index: 1; max-width: 34rem; padding: var(--sk-6); }

.sk-hero-card__title {
	margin: var(--sk-2) 0;
	font-size: var(--sk-text-2xl);
	line-height: var(--sk-text-2xl-lh);
	color: var(--sk-on-dark);
}

.sk-hero-card__text { margin: 0 0 var(--sk-3); color: var(--sk-on-dark-variant); }

.sk-archive-hero--card .sk-btn--secondary,
.sk-archive-hero--split .sk-btn--secondary {
	border-color: var(--sk-electric);
	color: var(--sk-electric);
}

/* ==========================================================================
   Grids
   ========================================================================== */

.sk-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
	gap: var(--sk-3);
}

.sk-grid--bento { grid-template-columns: 1fr; }

@media (min-width: 900px) {
	.sk-grid--bento { grid-template-columns: repeat(3, 1fr); }
	.sk-grid--bento > .sk-grid__lead { grid-column: span 2; }
}

.sk-quicklinks {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
	gap: var(--sk-2);
	margin-bottom: var(--sk-6);
}

.sk-quicklink {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--sk-1);
	text-align: center;
	padding: var(--sk-3) var(--sk-2);
	background-color: var(--sk-surface);
	border: var(--sk-stroke);
	border-radius: var(--sk-radius-md);
	font-family: var(--sk-font-heading);
	font-weight: 700;
	color: var(--sk-on-surface);
	transition: border-color var(--sk-transition);
}

.sk-quicklink:hover {
	border-color: var(--sk-teal-deep);
	color: var(--sk-link);
}

.sk-rows { display: flex; flex-direction: column; }

/* ==========================================================================
   Single article
   ========================================================================== */

.sk-article-hero {
	background: var(--sk-ink);
	color: var(--sk-on-dark);
	padding-block: var(--sk-8) var(--sk-10);
}

.sk-article-hero__inner { max-width: 52rem; }

.sk-article-hero h1 {
	margin: var(--sk-2) 0 var(--sk-3);
	color: var(--sk-on-dark);
	font-size: var(--sk-text-3xl);
	line-height: var(--sk-text-3xl-lh);
}

.sk-article-hero__excerpt {
	margin: 0 0 var(--sk-3);
	font-size: var(--sk-text-md);
	line-height: var(--sk-text-md-lh);
	color: var(--sk-on-dark-variant);
}

.sk-article-meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--sk-2);
	font-size: var(--sk-text-sm);
	color: var(--sk-on-dark-variant);
}

.sk-article-meta .sk-icon { color: var(--sk-electric); }

.sk-article-meta__sep { color: var(--sk-teal); }

/* Featured image pulled up so it straddles the ink panel and the white body. */
.sk-article-figure {
	margin: calc(var(--sk-8) * -1) auto var(--sk-6);
	max-width: 62rem;
	position: relative;
	z-index: 2;
}

.sk-article-figure img {
	width: 100%;
	border-radius: var(--sk-radius-lg);
	display: block;
}

.sk-article-body {
	background: var(--sk-surface);
	padding-block: var(--sk-6) var(--sk-10);
}

/* ~72 characters is the readable measure for Vietnamese body copy. */
.sk-article-body .entry-content {
	max-width: 44rem;
	margin-inline: auto;
}

.sk-article-body .entry-content > * { margin-bottom: var(--sk-3); }

.sk-article-tags {
	max-width: 44rem;
	margin: var(--sk-6) auto 0;
	display: flex;
	flex-wrap: wrap;
	gap: var(--sk-1);
	align-items: center;
}

.sk-related {
	background: var(--sk-surface-bg);
	padding-block: var(--sk-8);
	border-top: 1px solid var(--sk-outline-variant);
}

/* ==========================================================================
   Archive infinite scroll

   The numbered pagination is gone from archives; this is the control that
   replaces it. It stays visible rather than hiding behind pure auto-load —
   a scroll that never ends leaves keyboard users unable to reach the footer,
   and this keeps one real, focusable link to the next page. app.js fetches
   ahead of it, so in practice a mouse reader rarely sees it change.
   ========================================================================== */

.sk-infinite {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--sk-1);
	margin-top: var(--sk-6);
}

.sk-infinite.is-loading .sk-infinite__link {
	opacity: 0.55;
	pointer-events: none;
}

.sk-infinite__status {
	margin: 0;
	min-height: 1.45em;   /* reserved, so the grid doesn't jump when it fills */
	font-size: var(--sk-text-xs);
	line-height: var(--sk-text-xs-lh);
	color: var(--sk-on-surface-variant);
}

/* ==========================================================================
   Pagination — still used by wp_link_pages() inside multi-page articles
   ========================================================================== */

.sk-pagination { display: flex; justify-content: center; margin-top: var(--sk-6); }

.sk-pagination ul { list-style: none; display: flex; gap: 6px; padding: 0; margin: 0; }

.sk-pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 42px;
	height: 42px;
	padding: 0 12px;
	border-radius: var(--sk-radius-full);
	background-color: var(--sk-surface);
	border: var(--sk-stroke);
	color: var(--sk-ink);
	font-weight: 700;
	font-size: var(--sk-text-sm);
}

.sk-pagination .page-numbers.current {
	background-color: var(--sk-electric);
	border-color: var(--sk-ink);
	color: var(--sk-ink);
}

.sk-pagination .page-numbers:hover:not(.current) { background-color: var(--sk-electric-wash); }

/* ==========================================================================
   Reduced motion
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
	.sk-card, .sk-card__media img, .sk-quicklink, .sk-btn { transition: none !important; }
	.sk-card:hover .sk-card__media img { transform: none; }
}