/**
 * Homepage and article sections, plus the in-article block patterns.
 *
 * The electric blue appears here at full strength as large *background*
 * bands. That works because everything sitting on those bands is ink text —
 * ink on #4af7ff measures 14.22:1. The same colour is never used as text on
 * white anywhere in this file.
 */

.sk-eyebrow {
	margin: 0 0 var(--sk-1);
	font-size: var(--sk-text-xs);
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--sk-link);
}

/* Shared electric band. */
.sk-lead,
.sk-trust,
.sk-post-hero {
	background: linear-gradient(105deg, #7cf0f7 0%, #9df5fa 40%, #d9fdff 100%);
}

/* ==========================================================================
   1. Lead band — featured article + weekly rail
   ========================================================================== */

.sk-lead { padding-block: var(--sk-6); }

.sk-lead__inner {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--sk-4);
	align-items: start;
}

@media (min-width: 900px) {
	.sk-lead__inner { grid-template-columns: 1.85fr 1fr; }
}

/*
 * The lead card is the one panel that sat on the electric band without a
 * stroke, so it read as a floating photo rather than part of the same system
 * as the rail beside it. It carries the standard 2px ink edge like every other
 * surface — on an ink card the stroke reads as a hard silhouette, not a border.
 */
.sk-lead__feature {
	position: relative;
	border: var(--sk-stroke);
	border-radius: var(--sk-radius-lg);
	overflow: hidden;
	background: var(--sk-ink);
	min-height: 420px;
	display: flex;
	align-items: flex-end;
}

.sk-lead__media { position: absolute; inset: 0; }

.sk-lead__media img,
.sk-lead__media .sk-card__placeholder {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.sk-lead__feature::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	background: linear-gradient(to top, rgb(0 22 24 / 0.94) 0%, rgb(0 22 24 / 0.55) 55%, rgb(0 22 24 / 0.1) 100%);
}

.sk-lead__body {
	position: relative;
	z-index: 2;
	padding: var(--sk-4);
	max-width: 42rem;
}

.sk-lead__eyebrow {
	display: flex;
	align-items: center;
	gap: var(--sk-1);
	margin: 0 0 var(--sk-2);
	flex-wrap: wrap;
}

.sk-lead__crumbs {
	font-size: var(--sk-text-xs);
	color: var(--sk-on-dark-variant);
	display: inline-flex;
	gap: 6px;
}

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

.sk-lead__title a { color: inherit; }
.sk-lead__title a:hover { color: var(--sk-electric); }

.sk-lead__excerpt {
	margin: 0 0 var(--sk-3);
	color: var(--sk-on-dark-variant);
	font-size: var(--sk-text-base);
}

.sk-lead__actions {
	display: flex;
	align-items: center;
	gap: var(--sk-2);
	margin: 0;
	flex-wrap: wrap;
}

.sk-lead__time {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: var(--sk-text-sm);
	color: var(--sk-on-dark-variant);
}

/* ---- Weekly rail --------------------------------------------------------- */

.sk-rail { display: flex; flex-direction: column; gap: var(--sk-2); }

.sk-rail__title {
	margin: 0 0 var(--sk-1);
	font-size: var(--sk-text-xs);
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--sk-ink);
}

.sk-rail__item {
	position: relative;
	display: grid;
	grid-template-columns: 76px 1fr;
	gap: var(--sk-2);
	background: var(--sk-surface);
	border: var(--sk-stroke);
	border-radius: var(--sk-radius-md);
	padding: 12px;
	transition: border-color var(--sk-transition);
}

.sk-rail__item:hover { border-color: var(--sk-teal); }

.sk-rail__media {
	border-radius: var(--sk-radius-sm);
	overflow: hidden;
	aspect-ratio: 1;
	background: var(--sk-surface-container);
}

.sk-rail__media img,
.sk-rail__media .sk-card__placeholder {
	width: 100%;
	height: 100%;
	object-fit: cover;
	min-height: 0;
	font-size: var(--sk-text-lg);
}

.sk-rail__cat {
	margin: 0 0 4px;
	font-size: var(--sk-text-xs);
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--sk-link);
}

.sk-rail__headline {
	margin: 0 0 4px;
	font-size: var(--sk-text-sm);
	line-height: 1.35;
	font-weight: 700;
}

.sk-rail__headline a { color: var(--sk-ink); }
.sk-rail__item:hover .sk-rail__headline a { color: var(--sk-link); }

.sk-rail__date { margin: 0; font-size: var(--sk-text-xs); color: var(--sk-on-surface-variant); }

/* ==========================================================================
   3. "Mới nhất" — filters + grid
   ========================================================================== */

.sk-section-head--filters { align-items: center; flex-wrap: wrap; }

.sk-filters { display: flex; flex-wrap: wrap; gap: 6px; }

.sk-filters__tab {
	padding: 8px 14px;
	border-radius: var(--sk-radius-sm);
	border: var(--sk-stroke);
	background: var(--sk-surface);
	color: var(--sk-on-surface);
	font-family: var(--sk-font-body);
	font-size: var(--sk-text-sm);
	font-weight: 600;
	cursor: pointer;
	transition: background-color var(--sk-transition), border-color var(--sk-transition);
}

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

.sk-filters__tab.is-active {
	background: var(--sk-electric);
	border-color: var(--sk-ink);
	color: var(--sk-ink);
}

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

@media (min-width: 900px) {
	.sk-grid--3 { grid-template-columns: repeat(3, 1fr); }
}

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

/* ==========================================================================
   4. Chuyên mục
   ========================================================================== */

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

@media (min-width: 1000px) {
	.sk-cats { grid-template-columns: repeat(4, 1fr); }
}

.sk-cat {
	display: block;
	padding: var(--sk-3);
	background: var(--sk-surface);
	border: var(--sk-stroke);
	border-radius: var(--sk-radius-md);
	transition: background-color var(--sk-transition);
}

.sk-cat:hover { background: var(--sk-electric-wash); }

.sk-cat__icon {
	display: inline-flex;
	font-size: var(--sk-text-xl);
	color: var(--sk-link);
	margin-bottom: var(--sk-2);
}

.sk-cat__name {
	margin: 0 0 6px;
	font-size: var(--sk-text-md);
	font-weight: 700;
	color: var(--sk-ink);
}

.sk-cat__text {
	margin: 0 0 var(--sk-2);
	font-size: var(--sk-text-sm);
	line-height: 1.5;
	color: var(--sk-on-surface-variant);
}

.sk-cat__count {
	margin: 0;
	padding-top: var(--sk-1);
	border-top: 1px solid var(--sk-outline-variant);
	font-size: var(--sk-text-xs);
	color: var(--sk-on-surface-variant);
}

/* ==========================================================================
   5. Trust band
   ========================================================================== */

.sk-trust { padding-block: var(--sk-8); }

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

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

.sk-trust__copy h2 { margin: 0 0 var(--sk-2); }
.sk-trust__copy p { margin: 0; color: var(--sk-on-surface-variant); }

.sk-trust__cards {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
	gap: var(--sk-2);
}

.sk-trust__card {
	background: var(--sk-surface);
	border: var(--sk-stroke);
	border-radius: var(--sk-radius-md);
	padding: var(--sk-2);
}

.sk-trust__icon { display: inline-flex; font-size: var(--sk-text-lg); color: var(--sk-link); margin-bottom: var(--sk-1); }

.sk-trust__card h3 { margin: 0 0 4px; font-size: var(--sk-text-sm); font-weight: 700; }
.sk-trust__card p { margin: 0; font-size: var(--sk-text-xs); line-height: 1.5; color: var(--sk-on-surface-variant); }

/* ==========================================================================
   Article — hero
   ========================================================================== */

.sk-post-hero { padding-block: var(--sk-6) 0; }

.sk-post-hero__inner {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--sk-4);
	align-items: end;
}

@media (min-width: 900px) {
	.sk-post-hero__inner { grid-template-columns: 1.15fr 1fr; gap: var(--sk-6); }
}

.sk-post-hero__copy { padding-bottom: var(--sk-6); }

.sk-crumbs {
	font-size: var(--sk-text-xs);
	color: var(--sk-on-surface-variant);
	display: flex;
	gap: 6px;
	flex-wrap: wrap;
	margin-bottom: var(--sk-2);
}

.sk-crumbs a { color: var(--sk-link); }

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

.sk-post-hero__excerpt {
	margin: 0 0 var(--sk-3);
	font-size: var(--sk-text-base);
	color: var(--sk-on-surface-variant);
	max-width: 40rem;
}

.sk-byline { display: flex; align-items: center; gap: var(--sk-2); flex-wrap: wrap; }

.sk-byline__avatar,
.sk-author__avatar {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: var(--sk-radius-sm);
	background: var(--sk-ink);
	color: var(--sk-electric);
	font-family: var(--sk-font-heading);
	font-weight: 700;
	font-size: var(--sk-text-sm);
	flex-shrink: 0;
}

.sk-byline__text { display: flex; flex-direction: column; font-size: var(--sk-text-sm); }
.sk-byline__text strong { color: var(--sk-ink); }
.sk-byline__meta { font-size: var(--sk-text-xs); color: var(--sk-on-surface-variant); }

.sk-byline__actions { display: flex; gap: 6px; margin-left: auto; }

.sk-pill {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 7px 12px;
	border-radius: var(--sk-radius-sm);
	border: var(--sk-stroke);
	background: var(--sk-surface);
	color: var(--sk-ink);
	font-size: var(--sk-text-xs);
	font-weight: 700;
}

.sk-pill:hover { background: var(--sk-ink); color: var(--sk-electric); }

.sk-post-hero__figure { margin: 0; position: relative; }

.sk-post-hero__figure img {
	width: 100%;
	height: 100%;
	max-height: 340px;
	object-fit: cover;
	border: var(--sk-stroke);
	border-bottom: 0;
	border-radius: var(--sk-radius-lg) var(--sk-radius-lg) 0 0;
	display: block;
}

.sk-post-hero__figure figcaption {
	position: absolute;
	left: 0;
	bottom: 0;
	right: 0;
	padding: 8px 12px;
	font-size: var(--sk-text-xs);
	color: var(--sk-on-dark);
	background: linear-gradient(to top, rgb(0 22 24 / 0.85), transparent);
}

/* ==========================================================================
   Article — body
   ========================================================================== */

.sk-post { background: var(--sk-surface); padding-block: var(--sk-6) var(--sk-8); }

.sk-post__inner {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--sk-4);
	align-items: start;
}

@media (min-width: 900px) {
	.sk-post__inner { grid-template-columns: 230px minmax(0, 1fr); gap: var(--sk-6); }

	/*
	 * Two things were wrong with the sticky rail.
	 *
	 * 1. It pinned at 24px from the top of the *viewport*, but the WordPress
	 *    admin bar is a 32px fixed strip sitting in that space — so for any
	 *    logged-in editor the "Trong bài viết" label and the first entry slid
	 *    underneath the black bar as soon as the page scrolled. That is the
	 *    "TOC tràn viền và bị đẩy ngược lên": the column was not escaping its
	 *    container, it was pinning behind the admin bar.
	 *
	 * 2. Nothing bounded its height. An article with a long outline makes the
	 *    rail taller than the screen, and a sticky element taller than the
	 *    viewport pins by its top edge and never scrolls — the tail (including
	 *    the share buttons) becomes unreachable. Capping the height and letting
	 *    the rail scroll on its own keeps every entry in reach no matter how
	 *    many headings the article has.
	 */
	.sk-post__side {
		position: sticky;
		top: var(--sk-3);
		max-height: calc(100vh - var(--sk-6));
		overflow-y: auto;
		overscroll-behavior: contain;
		padding-bottom: var(--sk-2);
		scrollbar-width: thin;
		scrollbar-color: var(--sk-outline-variant) transparent;
	}

	.admin-bar .sk-post__side {
		top: calc(32px + var(--sk-3));
		max-height: calc(100vh - 32px - var(--sk-6));
	}
}

/*
 * Anchor jumps from the table of contents land the heading flush against the
 * top of the window, which puts it under the admin bar for editors and leaves
 * it visually glued to the edge for everyone else.
 */
.sk-post__main .entry-content :is(h2, h3, h4) { scroll-margin-top: var(--sk-3); }

.sk-toc ul { list-style: none; margin: 0; padding: 0; }

/* Beats `.sk-toc ul` above on specificity rather than with !important. */
.sk-toc > .sk-toc__list { margin-bottom: var(--sk-4); }

/*
 * One continuous rule down the rail. Only the top level draws it — a nested
 * <ul> starts inside its parent's border, so letting the H3s draw their own
 * put a second line two pixels to the right of the first.
 */
.sk-toc__list > li { border-left: var(--sk-stroke-w) solid var(--sk-outline-variant); }
.sk-toc__sub > li { border-left: 0; }

.sk-toc a {
	display: block;
	padding: 7px 12px;
	font-size: var(--sk-text-base);
	line-height: 1.4;
	color: var(--sk-on-surface-variant);
}

.sk-toc a:hover { color: var(--sk-link); }

/*
 * H3s sit inside the same rail, one step down the ramp. The two sizes used to
 * be sm/xs against a 17px body, which read as a footnote beside the article
 * rather than as its outline; base/sm closes most of that gap.
 */
.sk-toc .sk-toc__item--h3 a {
	padding-left: var(--sk-3);
	font-size: var(--sk-text-sm);
}

.sk-toc a.is-active { color: var(--sk-ink); font-weight: 700; }
.sk-toc a.is-current { color: var(--sk-ink); }
.sk-toc__list > li.is-open { border-left-color: var(--sk-electric); }

/*
 * The accordion. `is-accordion` is added by app.js, so with no script every
 * section stays open and the rail is a plain nested list — the outline is
 * never hidden behind a control that cannot be operated.
 */
.sk-toc__list.is-accordion > li:not(.is-open) > .sk-toc__sub { display: none; }

.sk-toc__list > li.has-sub { position: relative; }
.sk-toc__list > li.has-sub > a { padding-right: 34px; }

.sk-toc__twist {
	position: absolute;
	top: 0;
	right: 0;
	display: grid;
	place-items: center;
	width: 32px;
	height: 32px;
	padding: 0;
	border: 0;
	background: none;
	color: var(--sk-on-surface-variant);
	cursor: pointer;
}

.sk-toc__twist:hover { color: var(--sk-link); }
.sk-toc__twist .sk-icon { width: 14px; height: 14px; transition: transform 0.18s ease; }
.sk-toc__list > li.is-open > .sk-toc__twist .sk-icon { transform: rotate(90deg); }

@media (prefers-reduced-motion: reduce) {
	.sk-toc__twist .sk-icon { transition: none; }
}

.sk-share { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.sk-share .sk-eyebrow { flex: 1 0 100%; }

.sk-share__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	border-radius: var(--sk-radius-sm);
	background: var(--sk-surface-low);
	color: var(--sk-on-surface-variant);
	font-size: var(--sk-text-base);
}

.sk-share__btn:hover { background: var(--sk-ink); color: var(--sk-electric); }

.sk-post__main .entry-content { max-width: 44rem; }
.sk-post__main .entry-content > * { margin-bottom: var(--sk-3); }

.sk-post__tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: var(--sk-4); }

.sk-author {
	display: flex;
	gap: var(--sk-2);
	margin-top: var(--sk-6);
	padding: var(--sk-3);
	background: var(--sk-surface-low);
	border: var(--sk-stroke);
	border-radius: var(--sk-radius-md);
	max-width: 44rem;
}

.sk-author__name { margin: 0 0 4px; font-size: var(--sk-text-base); font-weight: 700; }
.sk-author__bio { margin: 0; font-size: var(--sk-text-sm); line-height: 1.55; color: var(--sk-on-surface-variant); }

.sk-author__more { margin: var(--sk-2) 0 0; font-size: var(--sk-text-sm); }
.sk-author__more a { color: var(--sk-link); font-weight: 600; }

/*
 * On the homepage the card follows a section heading that already supplies the
 * space .sk-author's own top margin exists to create inside an article.
 */
.sk-author--home { margin-top: 0; }

/* ==========================================================================
   Author page — /ve-tac-gia/
   --------------------------------------------------------------------------
   /author/…/ now redirects here, so this one template carries both jobs the
   two pages used to split between them: who she is, and everything she has
   written. The hero borrows the centred ink band the category archives use so
   the page reads as part of the site rather than as a one-off.
   ========================================================================== */

.sk-author-hero {
	padding-block: var(--sk-8);
	text-align: center;
	background: var(--sk-ink);
	color: var(--sk-on-dark);
}

/*
 * .sk-eyebrow is --sk-link (#006063) — a teal picked for its 7.36:1 on white,
 * which all but disappears on ink. Electric is the on-dark accent.
 */
.sk-author-hero__eyebrow { color: var(--sk-electric); }

/*
 * The byline monogram is electric-on-ink at 40px. On an ink band that would be
 * an invisible square, so the fill and the letters swap places — the same
 * 14.22:1 pair read the other way round.
 */
.sk-author-hero__avatar {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 72px;
	height: 72px;
	margin-bottom: var(--sk-2);
	border-radius: var(--sk-radius-md);
	background: var(--sk-electric);
	color: var(--sk-ink);
	font-family: var(--sk-font-heading);
	font-size: var(--sk-text-2xl);
	line-height: 1;
	font-weight: 700;
}

.sk-author-hero__name { margin: 0 0 var(--sk-1); color: var(--sk-on-dark); }

.sk-author-hero__bio,
.sk-author-hero__meta {
	max-width: 40rem;
	margin-inline: auto;
	color: var(--sk-on-dark-variant);
}

.sk-author-hero__bio {
	margin-block: 0;
	font-size: var(--sk-text-md);
	line-height: var(--sk-text-md-lh);
}

.sk-author-hero__meta {
	margin-block: var(--sk-2) 0;
	font-size: var(--sk-text-sm);
}

.sk-authorpage__body { padding-block: var(--sk-6); }

/*
 * Same 44rem measure the article body uses, but centred: on the article it
 * sits in the right-hand grid column beside the TOC, here it is the only
 * column and would otherwise hug the left edge of a wide container.
 */
.sk-authorpage__body .entry-content {
	max-width: 44rem;
	margin-inline: auto;
}

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

/* ==========================================================================
   Article — Astra's built-in "Bài viết liên quan"
   --------------------------------------------------------------------------
   This block is rendered by Astra's related-posts module, not by single.php,
   so it arrived with Astra's own defaults: a blue hairline rule, blue link
   text, bare images and a heading outside the type ramp. It sits directly
   under the theme's own "Đọc tiếp" grid, which made the mismatch obvious.
   Everything below re-points it at the .sk-card language — ink stroke, 20px
   radius, 16/10 crop, hover zoom, ink title, muted meta.

   SPECIFICITY — read before editing. Astra reaches every element in this
   block with two- and three-class selectors, several of which set the exact
   properties below:

     .site .ast-single-related-posts-container            { padding:2em; margin:3em }
     .ast-page-builder-template .ast-related-post .entry-header,
     .ast-related-post-content .entry-header              { margin:1em auto; padding:0 }
     .ast-related-posts-wrapper .ast-related-post         { padding:0; margin:0; width:100% }
     .ast-related-post-content .entry-header .ast-related-post-title a { … }

   The first pass at this block was written at one class and lost silently —
   the border and radius landed (Astra sets neither) while the card padding
   did not, so every title and meta line sat flush against the card edge.
   That is why every selector here is prefixed `.sk-page .site`: it puts the
   theme at three classes minimum, above Astra on the properties it also sets,
   and `.sk-page` keeps the block scoped to this theme's own templates.

   The lesson generalises — when a rule here "won't take", find the winning
   rule before retuning the value.
   ========================================================================== */

.sk-page .site .ast-single-related-posts-container {
	width: 100%;
	max-width: var(--sk-container);
	margin: 0 auto;
	padding: 0 var(--sk-margin-mobile) var(--sk-section-y);
	border-top: 0;
	background: transparent;
}

@media (min-width: 783px) {
	.sk-page .site .ast-single-related-posts-container { padding-inline: var(--sk-margin-desktop); }
}

.sk-page .site .ast-single-related-posts-container .ast-related-posts-title-section { margin: 0 0 var(--sk-6); }

.sk-page .site .ast-single-related-posts-container .ast-related-posts-title {
	margin: 0;
	font-family: var(--sk-font-heading);
	font-size: var(--sk-text-2xl);
	line-height: var(--sk-text-2xl-lh);
	font-weight: 700;
	color: var(--sk-ink);
	text-transform: none;
}

/* Same electric rule that marks every other section heading. */
.sk-page .site .ast-single-related-posts-container .ast-related-posts-title::after {
	content: "";
	display: block;
	width: 48px;
	height: 4px;
	margin-top: var(--sk-1);
	border-radius: var(--sk-radius-full);
	background: var(--sk-electric);
}

.sk-page .site .ast-single-related-posts-container .ast-related-posts-wrapper {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
	gap: var(--sk-3);
}

@media (min-width: 900px) {
	.sk-page .site .ast-single-related-posts-container .ast-related-posts-wrapper { grid-template-columns: repeat(3, 1fr); }
}

.sk-page .site .ast-single-related-posts-container .ast-related-posts-wrapper > * { min-width: 0; }

.sk-page .site .ast-single-related-posts-container article.ast-related-post {
	position: relative;
	display: flex;
	margin: 0;
	padding: 0;
	background: var(--sk-surface);
	border: var(--sk-stroke);
	border-radius: var(--sk-radius-md);
	overflow: hidden;
	transition: border-color var(--sk-transition);
}

.sk-page .site .ast-single-related-posts-container article.ast-related-post:hover { border-color: var(--sk-teal-deep); }

.sk-page .site .ast-single-related-posts-container .ast-related-posts-inner-section,
.sk-page .site .ast-single-related-posts-container .ast-related-post-content {
	display: flex;
	flex-direction: column;
	flex: 1;
	min-width: 0;
}

/* ---- Media -------------------------------------------------------------- */

.sk-page .site .ast-single-related-posts-container .ast-related-post-featured-section { margin: 0; }

.sk-page .site .ast-single-related-posts-container .post-thumb-img-content {
	display: block;
	margin: 0;
	aspect-ratio: 16 / 10;
	overflow: hidden;
	background: var(--sk-surface-container);
}

.sk-page .site .ast-single-related-posts-container .post-thumb-img-content a { display: block; height: 100%; }

.sk-page .site .ast-single-related-posts-container .post-thumb-img-content img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	border: 0;
	border-radius: 0;
	transition: transform 500ms ease;
}

.sk-page .site .ast-single-related-posts-container article.ast-related-post:hover .post-thumb-img-content img {
	transform: scale(1.05);
}

/* ---- Body --------------------------------------------------------------- */

.sk-page .site .ast-single-related-posts-container .related-entry-header {
	display: flex;
	flex-direction: column;
	flex: 1;
	gap: var(--sk-1);
	padding: var(--sk-3);
	margin: 0;
}

.sk-page .site .ast-single-related-posts-container .ast-related-post-content .entry-header .ast-related-post-title {
	margin: 0;
	font-family: var(--sk-font-heading);
	font-size: var(--sk-text-xl);
	line-height: var(--sk-text-xl-lh);
	font-weight: 700;
	text-transform: none;
}

.sk-page .site .ast-single-related-posts-container .ast-related-post-content .entry-header .ast-related-post-title a {
	color: var(--sk-on-surface);
	text-decoration: none;
}

.sk-page .site .ast-single-related-posts-container article.ast-related-post:hover .ast-related-post-title a {
	color: var(--sk-link);
}

/* The whole card is the target, matching .sk-card__link. */
.sk-page .site .ast-single-related-posts-container .ast-related-post-title a::after {
	content: "";
	position: absolute;
	inset: 0;
}

.sk-page .site .ast-single-related-posts-container .ast-related-post .entry-meta {
	margin: auto 0 0;
	padding-top: var(--sk-1);
	font-size: var(--sk-text-xs);
	line-height: var(--sk-text-xs-lh);
	color: var(--sk-on-surface-variant);
}

/* Category and author links stay clickable through the card-wide overlay. */
.sk-page .site .ast-single-related-posts-container .ast-related-post .entry-meta a {
	position: relative;
	z-index: 1;
	color: var(--sk-link);
	text-decoration: none;
}

.sk-page .site .ast-single-related-posts-container .ast-related-post .entry-meta a:hover { color: var(--sk-link-hover); }

/*
 * Astra prints an .entry-content wrapper in every card even when neither the
 * excerpt nor the read-more link is enabled — it sits *outside* the padded
 * header, so it needs its own gutter or anything switched on later would run
 * to the card edge. Empty, it collapses to zero height and costs nothing.
 */
.sk-page .site .ast-single-related-posts-container .ast-related-post .entry-content {
	margin: 0;
	padding: 0 var(--sk-3);
	font-size: var(--sk-text-sm);
	line-height: var(--sk-text-sm-lh);
	color: var(--sk-on-surface-variant);
}

.sk-page .site .ast-single-related-posts-container .ast-related-post .entry-content > *:last-child { margin-bottom: var(--sk-3); }

/* ==========================================================================
   In-article block patterns
   ========================================================================== */

.sk-summary {
	border: var(--sk-stroke);
	border-radius: var(--sk-radius-md);
	padding: var(--sk-3);
	background: var(--sk-surface);
}

.sk-summary h3 { margin: 0 0 var(--sk-1); font-size: var(--sk-text-base); font-weight: 700; }
.sk-summary ul { margin: 0; padding-left: 1.1em; }
.sk-summary li { font-size: var(--sk-text-sm); line-height: 1.6; }
.sk-summary li::marker { color: var(--sk-teal-deep); }

.sk-stats { gap: var(--sk-2); }

.sk-stats .wp-block-column {
	background: var(--sk-surface-low);
	border-radius: var(--sk-radius);
	padding: var(--sk-2);
}

.sk-stat__label { margin: 0 0 4px !important; font-size: var(--sk-text-xs); color: var(--sk-on-surface-variant); }

.sk-stat__value {
	margin: 0 !important;
	font-family: var(--sk-font-heading);
	font-size: var(--sk-text-xl);
	font-weight: 700;
	color: var(--sk-ink);
	line-height: 1.1;
}

.sk-stat__unit { margin: 2px 0 0 !important; font-size: var(--sk-text-xs); color: var(--sk-on-surface-variant); }

.sk-footnote { font-size: var(--sk-text-xs); color: var(--sk-on-surface-variant); }

.sk-dos { gap: var(--sk-2); }

.sk-dos .wp-block-column { border-radius: var(--sk-radius-md); padding: var(--sk-2); }

.sk-do { background: var(--sk-electric-wash); border: var(--sk-stroke); }
.sk-dont { background: var(--sk-surface-low); border: var(--sk-stroke); }

.sk-dos h4 { margin: 0 0 var(--sk-1); font-size: var(--sk-text-sm); font-weight: 700; }
.sk-dos ul { margin: 0; padding-left: 1.1em; }
.sk-dos li { font-size: var(--sk-text-sm); line-height: 1.6; }

.sk-table table { width: 100%; border-collapse: collapse; }
.sk-table thead th { background: var(--sk-ink); color: var(--sk-on-dark); font-family: var(--sk-font-heading); text-align: left; }
.sk-table th, .sk-table td { padding: 11px var(--sk-2); border: 1px solid var(--sk-ink); font-size: var(--sk-text-sm); }
.sk-table tbody tr:nth-child(even) { background: var(--sk-surface-low); }

.sk-callout {
	background: var(--sk-ink);
	color: var(--sk-on-dark);
	border-radius: var(--sk-radius-md);
	padding: var(--sk-3);
}

.sk-callout h3 { margin: 0 0 6px; color: var(--sk-electric); font-size: var(--sk-text-base); font-weight: 700; }
.sk-callout p { margin: 0; color: var(--sk-on-dark-variant); font-size: var(--sk-text-sm); line-height: 1.6; }

.sk-sources { border-top: 1px solid var(--sk-outline-variant); padding-top: var(--sk-3); }
.sk-sources h3 { margin: 0 0 var(--sk-1); font-size: var(--sk-text-sm); font-weight: 700; }
.sk-sources ol { margin: 0 0 var(--sk-1); padding-left: 1.3em; }
.sk-sources li { font-size: var(--sk-text-sm); line-height: 1.6; color: var(--sk-on-surface-variant); }