/* ============================================================
   single.css — Single post (single.php).
   Loaded on: is_single()   (after main.css + content.css)

   Ported from the standalone index.html mock-up. Everything is
   scoped under .hxs-single so none of it leaks into the shared
   header/footer or other templates, and the mock-up's own token
   names are mapped onto the theme tokens from main.css
   (--bg / --text / --muted / --border / --accent), with a few
   extra card / brand-button tokens defined locally below.
   ============================================================ */

/*
 * Pure-black page for single posts.
 *
 * Astra applies a light background to single posts via its own dynamic
 * (customizer) CSS with !important — that washed the post out and made the
 * light body text unreadable. This higher-specificity !important rule wins
 * over Astra's, and rebasing the --bg token here means the shared header, the
 * content area and the footer all render the same solid black (no seams).
 */
html body.single-post,
html body.single {
	--bg: #000000;
	background: #000000 !important;
	background-color: #000000 !important;
}

/*
 * Astra wraps the post in several containers (#content, .site-content,
 * .ast-container, #primary, .entry-content …), any of which can carry a light
 * panel background that would show behind our black page. Force them all
 * transparent on single posts so only the #000 body shows through.
 */
body.single-post #content,
body.single-post .site-content,
body.single-post .ast-container,
body.single-post #primary,
body.single-post .entry-content,
body.single-post .ast-article-single,
body.single-post .site-primary-content-wrap {
	background: transparent !important;
	box-shadow: none !important;
}

.hxs-single {
	/*
	 * Black-on-black surface scale.
	 *
	 * The page is pure #000 and every panel is a slightly different shade of
	 * near-black, so stacked cards still separate by a hair without any grey
	 * entering the palette. --bg-card is the name the rest of this file (and the
	 * inline accordion CSS in single.php) already uses, so pointing it at
	 * --surface-1 recolours every card in one place.
	 */
	--surface-1:      #0b0b0b;                    /* cards sitting on the page   */
	--surface-2:      #070707;                    /* card stacked under another  */
	--hairline:       rgba(255, 255, 255, 0.055); /* edge definition, not grey   */
	--bg-card:        var(--surface-1);
	--bg-card-hover:  #121212;

	/* Brand colours for the Telegram/Discord/share buttons — deliberately kept
	   outside the theme palette so those buttons stay recognisable. */
	--btn-telegram:   #229ED9;
	--btn-discord:    #5865F2;
	--btn-twitter:    #1DA1F2;
	--btn-reddit:     #FF4500;

	/* Solid black content area regardless of any wrapper behind it. */
	background: #000000;
	padding: 24px 0 48px;
}

/* Centered reading column. */
.hxs-single .hxs-container {
	max-width: 900px;
	margin:    0 auto;
	padding:   0 16px;
}

.hxs-single .post-content {
	background: transparent;
	padding:   16px 0 0;
}

/* Links inside the post body pick up the accent. */
.hxs-single a {
	color: var(--accent);
	transition: color 0.2s ease;
}
.hxs-single a:hover { color: var(--accent-hover); }

/* Telegram/Discord banner buttons keep their own brand colours, not the accent
   (the blanket .hxs-single a rule above would otherwise turn them green). */
.hxs-single .btn-join { color: var(--btn-telegram); }
.hxs-single .btn-join.is-discord { color: var(--btn-discord); }
.hxs-single .btn-join:hover { color: var(--btn-telegram); }
.hxs-single .btn-join.is-discord:hover { color: var(--btn-discord); }

/* Section heading underline (accent → violet), matching the mock-up.
   Applied to the component headings only — never to user content in .prose. */
.hxs-single .downloads h2,
.hxs-single .related-anime h2,
.hxs-single .faq-new-title,
.hxs-single .comments-new-title {
	position: relative;
	display: inline-block;
	padding-bottom: 12px;
}
.hxs-single .downloads h2::after,
.hxs-single .related-anime h2::after,
.hxs-single .faq-new-title::after,
.hxs-single .comments-new-title::after {
	content: '';
	position: absolute;
	left: 0;
	bottom: 0;
	height: 3px;
	width: 70px;
	border-radius: 2px;
	background: linear-gradient(90deg, var(--accent), rgba(139, 92, 246, 0.8));
}

/* ---------- 1. Breadcrumb ---------- */
.hxs-single .breadcrumb {
	font-size: 0.875rem;
	color: var(--muted);
	margin-bottom: 1.5rem;
}
.hxs-single .breadcrumb a { color: var(--muted); }
.hxs-single .breadcrumb a:hover { color: var(--accent); }

/* ---------- 2. Poster ----------
   A single centred poster on the flat black page — no blurred backdrop. The
   width is capped rather than derived from the container so the 2:3 artwork
   never grows past a comfortable size on wide screens, and max-width keeps it
   proportional on phones. */
.hxs-single .hxs-poster-wrap {
	display: flex;
	justify-content: center;
	margin-bottom: 1.75rem;
}
.hxs-single .hxs-poster {
	width: 220px;
	max-width: 62vw;
	height: auto;
	aspect-ratio: 2 / 3;
	object-fit: cover;
	border-radius: 10px;
	background: var(--bg-card);
	border: 1px solid rgba(43, 238, 52, 0.3);
	box-shadow: 0 10px 34px rgba(0, 0, 0, 0.55), 0 0 22px rgba(43, 238, 52, 0.1);
}

/* ---------- 3. Title ---------- */
.hxs-single .post-title {
	font-size: 2.5rem;
	line-height: 1.2;
	margin-bottom: 1.25rem;
	font-weight: 800;
	color: #fff;
	text-align: center;
	letter-spacing: -0.01em;
}

/* ---------- 4. Genre pills (green) ----------
   Genre and Tag rows sit together as one block: this row only gets a small gap
   so the purple tag row reads as its continuation, not a separate section. */
.hxs-single .genre-pills {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	justify-content: center;
	margin-bottom: 10px;
}
.hxs-single .genre-pill {
	display: inline-block;
	padding: 4px 12px;
	font-size: 12.5px;
	line-height: 1.4;
	font-weight: 600;
	letter-spacing: 0.02em;
	color: var(--accent);
	background: rgba(43, 238, 52, 0.08);
	border: 1px solid var(--accent);
	border-radius: 999px;
	text-decoration: none;
	transition: background 0.15s ease, color 0.15s ease;
}
.hxs-single .genre-pill:hover,
.hxs-single .genre-pill:focus {
	background: var(--accent);
	color: #0d0d0d;
}

/* ---------- 5. Tag pills (purple — the one non-green accent in the theme) ----------
   Rendered straight after the genre row with no heading of its own, so the two
   pill rows read as a single block under the title. */
.hxs-single .post-tags {
	margin-bottom: 1.25rem;
	/* Centres the inline-flex "Show N more" button under the centred pills. */
	text-align: center;
}

/* Collapsible wrapper: ~2 lines tall until expanded. The pill row is ~30px +
   8px gap, so 68px shows roughly two lines before the "Show More" toggle. */
.hxs-single .tag-pills-wrap {
	max-height: 68px;
	overflow: hidden;
	transition: max-height 0.25s ease;
}
.hxs-single .tag-pills-wrap.expanded {
	max-height: none;
}
.hxs-single .tag-pills {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	justify-content: center;
}
.hxs-single .tag-pill {
	display: inline-block;
	padding: 4px 12px;
	font-size: 12.5px;
	line-height: 1.4;
	font-weight: 600;
	letter-spacing: 0.02em;
	color: #7C3AED;
	background: rgba(124, 58, 237, 0.10);
	border: 1px solid #7C3AED;
	border-radius: 999px;
	text-decoration: none;
	transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.hxs-single .tag-pill:hover,
.hxs-single .tag-pill:focus {
	color: #fff;
	background: #7C3AED;
}

/* "Show N more / Show less" toggle — only shown by JS when the pills overflow.
   [hidden] must win: a bare `display: inline-block` would override the hidden
   attribute and leak the button onto posts with only a line of tags, so the
   base rule is scoped with :not([hidden]). */
.hxs-single .tag-show-more[hidden] { display: none; }
.hxs-single .tag-show-more:not([hidden]) {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	margin-top: 10px;
	padding: 0;
	background: none;
	border: none;
	color: var(--muted);
	font-size: 12.5px;
	font-weight: 600;
	cursor: pointer;
	transition: color 0.15s ease;
}
.hxs-single .tag-show-more:hover { color: #fff; }
.hxs-single .tag-toggle-chevron {
	transition: transform 0.2s ease;
}
.hxs-single .tag-show-more[aria-expanded="true"] .tag-toggle-chevron {
	transform: rotate(180deg);
}

/* ---------- 6. Studio pill ----------
   Neutral grey on purpose: green belongs to Genre, purple to Tags, so a third
   colour would break the palette. Left-aligned (not centred like the pill rows)
   to read as a meta line rather than another taxonomy row. */
.hxs-single .studio-row {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-bottom: 1.75rem;
}
.hxs-single .studio-pill {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 5px 14px;
	font-size: 11.5px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--text);
	background: rgba(255, 255, 255, 0.04);
	border: 1px solid var(--border);
	border-radius: 999px;
	transition: border-color 0.15s ease, color 0.15s ease;
}
.hxs-single .studio-pill:hover,
.hxs-single .studio-pill:focus {
	color: #fff;
	border-color: var(--accent);
}
.hxs-single .studio-star {
	color: var(--accent);
	font-size: 11px;
	line-height: 1;
}

/* ---------- 7. Table of Contents (in the DOM, visually hidden) ---------- */

/* Card styling, kept so removing the hide rule below restores the old look. */
.hxs-single .toc {
	background: var(--bg-card);
	padding: 1.5rem;
	border-radius: 8px;
	margin-bottom: 1.75rem;
	border: 1px solid var(--hairline);
}

/*
 * The heading + anchor links stay in the markup so crawlers still see the
 * in-page structure, but the card is clipped out of the visual flow: it was
 * breaking the poster → title → synopsis rhythm for a list that is usually only
 * one or two items long.
 *
 * Clipped rather than display:none, so the anchors stay real, reachable links
 * for screen readers. Delete this rule to show the card again.
 *
 * Must come AFTER the rule above: same specificity, so the later declarations
 * win — otherwise margin-bottom would leak back in and reserve empty space.
 */
.hxs-single .toc {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}
.hxs-single .toc .toc-heading { font-weight: 700; margin-bottom: 1rem; font-size: 1.25rem; color: #fff; }
.hxs-single .toc ul { margin-left: 1.5rem; list-style: disc; }
.hxs-single .toc ul li { margin-bottom: 0.5rem; }
.hxs-single .toc a { color: var(--muted); }
.hxs-single .toc a:hover { color: var(--accent); text-decoration: underline; }

/* ---------- 8. Synopsis card (the_content) ----------
 * The post body sits in a bordered card. Long copy is clamped to a fixed
 * height and revealed by the "Show more" button that single.js un-hides only
 * when the text actually overflows, so short synopses show no button at all.
 *
 * .prose comes from content.css with a boxed look for the legal pages; the
 * card supplies the box here, so the inner .prose is flattened. single.css
 * loads after content.css and these selectors are more specific, so they win.
 */
/*
 * margin-top matters now that the TOC card above is position:absolute and so
 * out of flow: the synopsis becomes the next in-flow sibling after the studio
 * pill (or the tag row / title on posts that have no studio). Adjacent-sibling
 * margins collapse to the larger of the two, so declaring it here gives every
 * one of those combinations the same gap.
 */
.hxs-single .anime-info {
	margin-top: 1.75rem;
	margin-bottom: 1.75rem;
}

.hxs-single .hxs-synopsis-card {
	background: var(--bg-card);
	border: 1px solid var(--hairline);
	border-radius: 12px;
	padding: 20px 22px;
}

.hxs-single .hxs-synopsis-body {
	position: relative;
	overflow: hidden;
}

/* Short intro = the first fully-bold paragraph, lifted out of the content and
   shown at the top of the card. An accent rule marks it instead of the old
   tinted box, so the card still reads as one description block. */
.hxs-single .short-intro {
	font-size: 1rem;
	font-weight: 700;
	color: #fff;
	background: none;
	border-left: 3px solid var(--accent);
	border-radius: 0;
	padding: 2px 0 2px 14px;
	margin-bottom: 14px;
}
.hxs-single .short-intro p { margin: 0; }
/* Added by single.js only when the content is taller than this. */
.hxs-single .hxs-synopsis-body.is-clamped { max-height: 220px; }

/* Fade the cut-off line while clamped so the text trails away instead of being
   chopped mid-glyph. Matches --bg-card so the gradient is invisible at the top. */
.hxs-single .hxs-synopsis-body.is-clamped::after {
	content: '';
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 68px;
	background: linear-gradient(to bottom, rgba(11, 11, 11, 0), var(--surface-1));
	pointer-events: none;
}

.hxs-single .prose {
	background: transparent;
	border: none;
	border-radius: 0;
	padding: 0;
}
.hxs-single .prose .page-links {
	margin-top: 20px;
	font-size: 13px;
	color: var(--muted);
}
.hxs-single .prose .page-links a { color: var(--accent); }

/* "Show more / Show less" — same [hidden]-safe pattern as the tag toggle: a bare
   display rule would override the hidden attribute and leak the button onto
   posts with a short synopsis. */
.hxs-single .hxs-synopsis-more[hidden] { display: none; }
.hxs-single .hxs-synopsis-more:not([hidden]) {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	margin-top: 14px;
	padding: 0;
	background: none;
	border: none;
	color: var(--accent);
	font-family: inherit;
	font-size: 12.5px;
	font-weight: 700;
	cursor: pointer;
	transition: color 0.15s ease;
}
.hxs-single .hxs-synopsis-more:hover { color: var(--accent-hover); }
.hxs-single .hxs-synopsis-chevron { transition: transform 0.2s ease; }
.hxs-single .hxs-synopsis-more[aria-expanded="true"] .hxs-synopsis-chevron {
	transform: rotate(180deg);
}

/* ---------- 9. Info table ----------
   Quality + Episodes are derived from the Download Links rows, Audio +
   Subtitles come from the Anime Info meta box; single.php drops any row whose
   value is empty. Two fixed columns (label / value), dashed hairline separators.

   Uses --surface-2 (a shade darker than the synopsis card above it) so the two
   stacked panels read as separate cards without either one turning grey. */
.hxs-single .hxs-info-table {
	background: var(--surface-2);
	border: 1px solid var(--hairline);
	border-radius: 12px;
	padding: 4px 22px;
	margin-bottom: 1.75rem;
}
.hxs-single .hxs-info-row {
	display: flex;
	align-items: baseline;
	gap: 16px;
	padding: 14px 0;
	border-bottom: 1px dashed rgba(255, 255, 255, 0.1);
}
.hxs-single .hxs-info-row:last-child { border-bottom: none; }
.hxs-single .hxs-info-label {
	flex: 0 0 110px;
	font-size: 11.5px;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--muted);
}
.hxs-single .hxs-info-value {
	flex: 1 1 auto;
	min-width: 0;
	font-size: 0.95rem;
	font-weight: 600;
	color: #fff;
	overflow-wrap: anywhere;
}
.hxs-single .hxs-info-value.is-accent { color: var(--accent); }

/* ---------- 10. Downloads ----------
   The episode-accordion card/pill/button styles live inline in single.php
   (critical CSS for LiteSpeed-cached pages); only the section chrome is here. */
.hxs-single .downloads { margin-bottom: 2.5rem; }
.hxs-single .downloads h2 {
	font-size: 1.75rem;
	margin-bottom: 1.5rem;
	width: fit-content;
	margin-inline: auto;
	color: var(--accent);
}

.hxs-single .dl-disclaimer { text-align: center; font-size: 0.75rem; color: var(--muted); margin-top: 12px; }

/* ---------- 11. Share ---------- */
.hxs-single .share-section {
	display: flex;
	justify-content: center;
	gap: 1.25rem;
	margin-bottom: 2.5rem;
	padding-top: 1.5rem;
	border-top: 1px solid var(--border);
}
.hxs-single .share-btn {
	width: 48px;
	height: 48px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 1.25rem;
	color: #fff;
	transition: transform 0.2s, opacity 0.2s;
}
.hxs-single .share-btn:hover { opacity: 0.9; transform: translateY(-3px); color: #fff; }
.hxs-single .share-telegram { background: var(--btn-telegram); }
.hxs-single .share-twitter  { background: var(--btn-twitter); }
.hxs-single .share-reddit   { background: var(--btn-reddit); }

/* ---------- 12. FAQ ---------- */
.hxs-single .faq-section { margin-bottom: 2.5rem; }
.hxs-single .faq-new-title {
	font-size: 1.75rem;
	font-weight: 700;
	color: var(--accent);
	margin-bottom: 28px;
}
.hxs-single details.faq-new-item {
	background: var(--bg-card);
	border: 1px solid rgba(139, 92, 246, 0.35);
	border-radius: 10px;
	margin-bottom: 14px;
	overflow: hidden;
	transition: box-shadow 0.2s ease;
}
.hxs-single details.faq-new-item[open] {
	box-shadow: 0 0 0 1px rgba(139, 92, 246, 0.35), 0 4px 20px rgba(139, 92, 246, 0.18);
}
.hxs-single summary.faq-new-question {
	list-style: none;
	cursor: pointer;
	padding: 16px 18px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	font-weight: 600;
	font-size: 1.125rem;
	color: var(--text);
}
.hxs-single summary.faq-new-question::-webkit-details-marker { display: none; }
.hxs-single .faq-new-q-left { display: flex; align-items: center; gap: 10px; }
.hxs-single .faq-new-check { flex-shrink: 0; width: 19px; height: 19px; color: var(--accent); }
.hxs-single .faq-new-chevron { transition: transform 0.2s ease; color: var(--muted); flex-shrink: 0; }
.hxs-single details[open] .faq-new-chevron { transform: rotate(180deg); color: var(--accent); }
.hxs-single .faq-new-answer {
	padding: 0 18px 18px 47px;
	color: var(--muted);
	font-size: 0.95rem;
	line-height: 1.6;
}
.hxs-single .faq-new-answer p { margin-bottom: 0; }

/* ---------- 13. Comments ---------- */
.hxs-single .comments-section {
	margin-bottom: 2.5rem;
	padding-top: 2rem;
	border-top: 1px solid var(--border);
}
.hxs-single .comments-new-title {
	font-size: 1.6rem;
	font-weight: 700;
	color: var(--accent);
	margin-bottom: 20px;
}
.hxs-single .comment-new-card {
	background: var(--bg-card);
	border-radius: 10px;
	padding: 16px 18px;
	margin-bottom: 12px;
	display: flex;
	gap: 12px;
}
.hxs-single .comment-new-avatar {
	width: 38px;
	height: 38px;
	border-radius: 50%;
	background: var(--surface-2);
	flex-shrink: 0;
	object-fit: cover;
}
.hxs-single .comment-new-body { flex: 1; }
.hxs-single .comment-new-top { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 4px; gap: 10px; }
.hxs-single .comment-new-name { font-weight: 700; font-size: 0.95rem; color: var(--text); }
.hxs-single .comment-new-time { font-size: 0.8rem; color: var(--muted); white-space: nowrap; }
.hxs-single .comment-new-text { font-size: 0.9rem; color: #d1d5db; line-height: 1.5; margin: 0; }
.hxs-single .comment-new-more { font-size: 0.85rem; color: var(--muted); margin: 4px 0 0; }

/* WordPress comment form, restyled to match the mock-up.
   #respond is targeted directly so it works regardless of class_container support. */
.hxs-single .comments-section #respond {
	background: var(--bg-card);
	border: 1px solid rgba(139, 92, 246, 0.3);
	border-radius: 12px;
	padding: 22px;
	margin-top: 24px;
	box-shadow: 0 4px 20px rgba(139, 92, 246, 0.15);
}
.hxs-single .comment-new-form-title,
.hxs-single .comments-section #reply-title {
	font-size: 1.1rem;
	font-weight: 700;
	margin: 0 0 16px;
	color: var(--text);
}
.hxs-single .comments-section #reply-title small { margin-left: 10px; font-weight: 400; }
.hxs-single .comments-section .logged-in-as { font-size: 0.85rem; color: var(--muted); margin-bottom: 14px; }
.hxs-single .comments-section .logged-in-as a { color: var(--accent); }

.hxs-single .comment-new-form-row { margin-bottom: 14px; }
.hxs-single .comment-new-form-label { display: block; font-size: 0.82rem; color: var(--muted); margin-bottom: 6px; }
.hxs-single .comment-new-form-input,
.hxs-single .comment-new-form-textarea {
	width: 100%;
	background: var(--bg);
	border: 1px solid rgba(255, 255, 255, 0.08);
	border-radius: 8px;
	padding: 11px 14px;
	color: var(--text);
	font-family: inherit;
	font-size: 0.92rem;
	transition: border-color 0.2s ease;
}
.hxs-single .comment-new-form-input:focus,
.hxs-single .comment-new-form-textarea:focus { outline: none; border-color: var(--accent); }
.hxs-single .comment-new-form-textarea { resize: vertical; min-height: 100px; }

.hxs-single .comments-section .form-submit { margin: 0; }
.hxs-single .comment-new-submit-btn {
	background: var(--accent);
	color: #000;
	border: none;
	padding: 12px 26px;
	border-radius: 8px;
	font-weight: 700;
	font-size: 0.95rem;
	cursor: pointer;
	transition: all 0.2s ease;
}
.hxs-single .comment-new-submit-btn:hover { background: var(--accent-hover); transform: scale(1.02); }
.hxs-single .comment-new-moderation-note {
	display: flex;
	align-items: center;
	gap: 7px;
	margin-top: 14px;
	font-size: 0.78rem;
	color: var(--muted);
}
.hxs-single .comment-new-moderation-note svg { flex-shrink: 0; color: #9ca3af; }

/* ---------- 14. Related ---------- */
.hxs-single .related-anime {
	margin-bottom: 1rem;
	padding-top: 2rem;
	border-top: 1px solid var(--border);
}
.hxs-single .related-anime h2 { font-size: 1.75rem; margin-bottom: 1.5rem; color: var(--accent); }
.hxs-single .related-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
	gap: 1.25rem;
}
.hxs-single .related-card {
	background: var(--bg-card);
	border-radius: 8px;
	overflow: hidden;
	transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s;
	border: 1px solid var(--border);
	display: block;
}
.hxs-single .related-card:hover {
	transform: translateY(-4px);
	box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
	border-color: var(--accent);
}
.hxs-single .related-thumb {
	width: 100%;
	aspect-ratio: 3 / 4;
	background: var(--surface-2);
	object-fit: cover;
	border-radius: 0;
}
.hxs-single .related-thumb--empty {
	display: flex;
	align-items: center;
	justify-content: center;
}
.hxs-single .related-info { padding: 1rem; }
.hxs-single .related-title {
	font-size: 1rem;
	font-weight: 700;
	margin-bottom: 0.25rem;
	color: var(--text);
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.hxs-single .related-label { font-size: 0.75rem; color: var(--muted); text-transform: uppercase; letter-spacing: 0.5px; }

/* ---------- Responsive ---------- */
@media (max-width: 768px) {
	.hxs-single .post-title { font-size: 2rem; }
	.hxs-single .hxs-synopsis-card,
	.hxs-single .hxs-info-table { padding-inline: 16px; }
}
@media (max-width: 480px) {
	.hxs-single .post-title { font-size: 1.6rem; }
	.hxs-single .related-grid { grid-template-columns: repeat(2, 1fr); gap: 1rem; }

	/* Narrower label column so long values (e.g. "Hindi / English") keep a
	   usable line length on small phones. */
	.hxs-single .hxs-info-label { flex-basis: 88px; }
	.hxs-single .hxs-info-row { padding: 12px 0; }
	.hxs-single .hxs-synopsis-body.is-clamped { max-height: 190px; }
}