/* ============================================================
   TBS Single Article Restyle
   File: assets/css/single-article.css
   ------------------------------------------------------------
   Brings single posts (and single podcasts) in line with the
   design system used on /ai-software-engineering/.

   Scope: only applies to single-post pages via .single-post and
   .single-podcast body classes — does not affect any other page.
   ============================================================ */

/* ───────────────────────────────────────────────────────────
   Design tokens — scoped to the body classes so we don't
   collide with any other theme variables.
   ─────────────────────────────────────────────────────────── */
body.single-post,
body.single-podcast,
body.post-template-default {
	--tbs-bg: #fbfaf7;
	--tbs-bg-elev: #ffffff;
	--tbs-bg-soft: #f1efe9;
	--tbs-ink: #0a0c10;
	--tbs-ink-dim: #424752;
	--tbs-ink-faint: #8a8e98;
	--tbs-blue: #3a5fcc;
	--tbs-blue-deep: #2a47a3;
	--tbs-border: rgba(10, 12, 16, 0.08);
	--tbs-shadow-sm: 0 1px 2px rgba(10, 12, 16, 0.04), 0 4px 16px rgba(10, 12, 16, 0.04);
	--tbs-shadow-md: 0 2px 4px rgba(10, 12, 16, 0.05), 0 12px 32px rgba(10, 12, 16, 0.08);

	background: var(--tbs-bg);
	color: var(--tbs-ink);
}

/* ───────────────────────────────────────────────────────────
   Breadcrumb — mono uppercase, kept BLUE for visibility.
   ─────────────────────────────────────────────────────────── */
body.single-post .breadcrumb,
body.single-podcast .breadcrumb,
body.post-template-default .breadcrumb {
	font-family: "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
	font-size: 11px;
	font-weight: 500;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

body.single-post .breadcrumb a,
body.single-podcast .breadcrumb a,
body.post-template-default .breadcrumb a {
	color: var(--tbs-blue);
	text-decoration: none;
	transition: color 0.15s ease;
}

body.single-post .breadcrumb a:hover,
body.single-podcast .breadcrumb a:hover,
body.post-template-default .breadcrumb a:hover {
	color: var(--tbs-blue-deep);
}

/* ───────────────────────────────────────────────────────────
   Post details bar (date · reading time · category)
   Mono uppercase font kept, but text kept in solid INK for
   visibility. Only the icons get the muted treatment.
   ─────────────────────────────────────────────────────────── */
body.single-post .post-details > div,
body.single-podcast .post-details > div,
body.post-template-default .post-details > div {
	font-family: "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
	font-size: 11px;
	font-weight: 500;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--tbs-ink);
}

/* Category link inside the details bar — accent blue */
body.single-post .post-category-link a,
body.single-podcast .post-category-link a,
body.post-template-default .post-category-link a {
	color: var(--tbs-blue);
	text-decoration: none;
	transition: color 0.15s ease;
}

body.single-post .post-category-link a:hover,
body.single-podcast .post-category-link a:hover,
body.post-template-default .post-category-link a:hover {
	color: var(--tbs-blue-deep);
}

/* ───────────────────────────────────────────────────────────
   Featured image — rounded corners + subtle shadow, like the
   AI page hero card. Strip any blurred backdrop the theme
   adds around the hero image.
   ─────────────────────────────────────────────────────────── */

/* The blue tint visible around the featured image comes from
   the theme's <main> element having background-color: var(--white)
   where --white is actually a light blue. Kill it on single posts. */
body.single-post main.main,
body.single-podcast main.main,
body.post-template-default main.main {
	background-color: transparent !important;
	background: none !important;
}

body.single-post .single-featured-image,
body.single-podcast .single-featured-image,
body.post-template-default .single-featured-image {
	border-radius: 16px;
	overflow: hidden;
	box-shadow: none !important;
	background: none !important;
	background-image: none !important;
	background-color: transparent !important;
	border: none !important;
	padding: 0 !important;
}

/* Also strip any backdrop on the parent wrapper if the theme
   put it there instead of on .single-featured-image directly */
body.single-post .single-post-featured-image,
body.single-podcast .single-post-featured-image,
body.post-template-default .single-post-featured-image,
body.single-post .featured-image-wrapper,
body.single-podcast .featured-image-wrapper,
body.post-template-default .featured-image-wrapper {
	background: none !important;
	background-image: none !important;
	background-color: transparent !important;
	border: none !important;
	padding: 0 !important;
}

/* If the backdrop is added via a ::before / ::after pseudo-element, hide it */
body.single-post .single-featured-image::before,
body.single-podcast .single-featured-image::before,
body.post-template-default .single-featured-image::before,
body.single-post .single-featured-image::after,
body.single-podcast .single-featured-image::after,
body.post-template-default .single-featured-image::after {
	display: none !important;
	content: none !important;
}

body.single-post .single-featured-image img.wp-post-image,
body.single-podcast .single-featured-image img.wp-post-image,
body.post-template-default .single-featured-image img.wp-post-image {
	border-radius: 16px;
	display: block;
	max-width: 100%;
	height: auto;
	margin: 0 auto;
}

/* ───────────────────────────────────────────────────────────
   Article header — restyle ONLY size/weight/spacing.
   Leave the font-family alone so the title inherits the
   theme's existing sans-serif treatment.
   ─────────────────────────────────────────────────────────── */
body.single-post .single-article header h1,
body.single-podcast .single-article header h1,
body.post-template-default .single-article header h1 {
	font-size: clamp(24px, 3vw, 38px);
	font-weight: 600;
	line-height: 1.25;
	letter-spacing: -0.005em;
	color: var(--tbs-ink);
	margin: 0 0 20px;
}

/* Subtitle / standfirst */
body.single-post .single-article header .h5,
body.single-podcast .single-article header .h5,
body.post-template-default .single-article header .h5 {
	font-family: "Inter Tight", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
	font-size: clamp(18px, 2vw, 22px);
	font-weight: 400;
	line-height: 1.5;
	color: var(--tbs-ink-dim);
	margin: 0 0 40px;
	max-width: 68ch;
}

body.single-post .single-article header .h5 p,
body.single-podcast .single-article header .h5 p,
body.post-template-default .single-article header .h5 p {
	margin: 0;
}

/* ───────────────────────────────────────────────────────────
   Article body — typography for prose, lists, blockquotes,
   inline media. Width capped at 68ch for readability,
   matching the AI page's body column.
   ─────────────────────────────────────────────────────────── */
body.single-post .single-article .entry-content,
body.single-podcast .single-article .entry-content,
body.post-template-default .single-article .entry-content {
	font-family: "Inter Tight", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
	font-size: 17px;
	font-weight: 400;
	line-height: 1.7;
	color: var(--tbs-ink-dim);
}

body.single-post .single-article .entry-content > *,
body.single-podcast .single-article .entry-content > *,
body.post-template-default .single-article .entry-content > * {
	max-width: 68ch;
}

/* Wide elements stay full width within the column */
body.single-post .single-article .entry-content > figure,
body.single-podcast .single-article .entry-content > figure,
body.post-template-default .single-article .entry-content > figure,
body.single-post .single-article .entry-content > .wp-block-image,
body.single-podcast .single-article .entry-content > .wp-block-image,
body.post-template-default .single-article .entry-content > .wp-block-image,
body.single-post .single-article .entry-content > .wp-block-table,
body.single-podcast .single-article .entry-content > .wp-block-table,
body.post-template-default .single-article .entry-content > .wp-block-table {
	max-width: 100%;
}

/* Paragraphs */
body.single-post .single-article .entry-content p,
body.single-podcast .single-article .entry-content p,
body.post-template-default .single-article .entry-content p {
	margin: 0 0 24px;
}

/* Bold inline text — slightly stronger color */
body.single-post .single-article .entry-content strong,
body.single-podcast .single-article .entry-content strong,
body.post-template-default .single-article .entry-content strong {
	color: var(--tbs-ink);
	font-weight: 600;
}

/* In-content headings — sane sans-serif hierarchy below h1.
   h2 < h1 visually so the article keeps its hierarchy. */
body.single-post .single-article .entry-content h2,
body.single-podcast .single-article .entry-content h2,
body.post-template-default .single-article .entry-content h2 {
	font-size: clamp(20px, 2.2vw, 26px);
	font-weight: 600;
	line-height: 1.3;
	color: var(--tbs-ink);
	margin: 44px 0 16px;
}

body.single-post .single-article .entry-content h3,
body.single-podcast .single-article .entry-content h3,
body.post-template-default .single-article .entry-content h3 {
	font-size: clamp(18px, 1.8vw, 22px);
	font-weight: 600;
	line-height: 1.35;
	color: var(--tbs-ink);
	margin: 36px 0 14px;
}

body.single-post .single-article .entry-content h4,
body.single-podcast .single-article .entry-content h4,
body.post-template-default .single-article .entry-content h4 {
	font-size: clamp(15px, 1.4vw, 17px);
	font-weight: 600;
	color: var(--tbs-ink);
	margin: 28px 0 10px;
}

/* Lists */
body.single-post .single-article .entry-content ul,
body.single-podcast .single-article .entry-content ul,
body.post-template-default .single-article .entry-content ul,
body.single-post .single-article .entry-content ol,
body.single-podcast .single-article .entry-content ol,
body.post-template-default .single-article .entry-content ol {
	margin: 0 0 28px;
	padding-left: 24px;
}

body.single-post .single-article .entry-content li,
body.single-podcast .single-article .entry-content li,
body.post-template-default .single-article .entry-content li {
	margin-bottom: 10px;
	padding-left: 4px;
}

body.single-post .single-article .entry-content li::marker,
body.single-podcast .single-article .entry-content li::marker,
body.post-template-default .single-article .entry-content li::marker {
	color: var(--tbs-blue);
}

/* Inline links — blue with hover underline */
body.single-post .single-article .entry-content a,
body.single-podcast .single-article .entry-content a,
body.post-template-default .single-article .entry-content a {
	color: var(--tbs-blue);
	text-decoration: none;
	border-bottom: 1px solid rgba(58, 95, 204, 0.25);
	transition: color 0.15s ease, border-color 0.15s ease;
}

body.single-post .single-article .entry-content a:hover,
body.single-podcast .single-article .entry-content a:hover,
body.post-template-default .single-article .entry-content a:hover {
	color: var(--tbs-blue-deep);
	border-bottom-color: var(--tbs-blue-deep);
}

/* Blockquote — matches the pull-quote style on the AI page */
body.single-post .single-article .entry-content blockquote,
body.single-podcast .single-article .entry-content blockquote,
body.post-template-default .single-article .entry-content blockquote {
	margin: 40px 0;
	padding: 4px 0 4px 28px;
	border-left: 3px solid var(--tbs-blue);
	font-family: Georgia, "Times New Roman", serif;
	font-weight: 400;
	font-style: italic;
	font-size: clamp(20px, 2.4vw, 26px);
	line-height: 1.4;
	color: var(--tbs-ink);
}

body.single-post .single-article .entry-content blockquote p,
body.single-podcast .single-article .entry-content blockquote p,
body.post-template-default .single-article .entry-content blockquote p {
	margin: 0 0 12px;
}

body.single-post .single-article .entry-content blockquote p:last-child,
body.single-podcast .single-article .entry-content blockquote p:last-child,
body.post-template-default .single-article .entry-content blockquote p:last-child {
	margin-bottom: 0;
}

/* Inline images and figures */
body.single-post .single-article .entry-content img,
body.single-podcast .single-article .entry-content img,
body.post-template-default .single-article .entry-content img {
	border-radius: 12px;
	display: block;
	max-width: 100%;
	height: auto;
	margin: 12px 0;
}

body.single-post .single-article .entry-content figcaption,
body.single-podcast .single-article .entry-content figcaption,
body.post-template-default .single-article .entry-content figcaption {
	font-family: "JetBrains Mono", ui-monospace, monospace;
	font-size: 11px;
	font-weight: 500;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--tbs-ink-faint);
	margin-top: 12px;
	text-align: center;
}

/* Inline code */
body.single-post .single-article .entry-content code,
body.single-podcast .single-article .entry-content code,
body.post-template-default .single-article .entry-content code {
	font-family: "JetBrains Mono", ui-monospace, monospace;
	font-size: 0.9em;
	background: var(--tbs-bg-soft);
	padding: 2px 6px;
	border-radius: 4px;
	color: var(--tbs-ink);
}

/* Horizontal rule */
body.single-post .single-article .entry-content hr,
body.single-podcast .single-article .entry-content hr,
body.post-template-default .single-article .entry-content hr {
	border: none;
	border-top: 1px solid var(--tbs-border);
	margin: 48px 0;
	max-width: 100%;
}

/* ───────────────────────────────────────────────────────────
   PDF embed + Download button
   ─────────────────────────────────────────────────────────── */
body.single-post .single-post-content > .mt-100,
body.single-podcast .single-post-content > .mt-100,
body.post-template-default .single-post-content > .mt-100 {
	margin-top: 56px !important;
}

body.single-post .single-post-content object,
body.single-podcast .single-post-content object,
body.post-template-default .single-post-content object {
	border-radius: 16px;
	box-shadow: var(--tbs-shadow-sm);
	overflow: hidden;
}

body.single-post .single-post-content .button.button-blue,
body.single-podcast .single-post-content .button.button-blue,
body.post-template-default .single-post-content .button.button-blue {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: var(--tbs-ink) !important;
	color: #fff !important;
	border: none !important;
	border-radius: 999px !important;
	padding: 12px 28px !important;
	font-family: "Inter Tight", sans-serif !important;
	font-weight: 500 !important;
	font-size: 14px !important;
	letter-spacing: 0.01em !important;
	text-transform: none !important;
	box-shadow: var(--tbs-shadow-sm) !important;
	transition: background 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease !important;
}

body.single-post .single-post-content .button.button-blue:hover,
body.single-podcast .single-post-content .button.button-blue:hover,
body.post-template-default .single-post-content .button.button-blue:hover {
	background: #15161a !important;
	transform: translateY(-1px);
	box-shadow: var(--tbs-shadow-md) !important;
}

/* ───────────────────────────────────────────────────────────
   Author block — styles the .post-author-section markup that
   the theme actually outputs (on both desktop and mobile).
   Soft gradient card matching the AI page "Let's talk" CTA.
   No body-class prefix so it works on every post type.
   ─────────────────────────────────────────────────────────── */
div.post-author-section,
.post-author-section {
	margin: 48px 0 0 !important;
	padding: 28px 32px !important;
	background: linear-gradient(135deg, #ffffff 0%, #eff3fc 100%) !important;
	border: 1px solid rgba(10, 12, 16, 0.08) !important;
	border-radius: 16px !important;
	box-shadow: 0 1px 2px rgba(10, 12, 16, 0.04), 0 4px 16px rgba(10, 12, 16, 0.04) !important;
	transition: box-shadow 0.25s ease, transform 0.25s ease !important;
}

@media (min-width: 768px) {
	.post-author-section {
		margin-top: 72px !important;
		padding: 32px 36px !important;
	}
}

.post-author-section:hover {
	box-shadow: 0 2px 4px rgba(10, 12, 16, 0.05), 0 12px 32px rgba(10, 12, 16, 0.08) !important;
	transform: translateY(-1px) !important;
}

.post-author-section .post-author-content,
.post-author-section .post-author-info {
	display: block !important;
	background: transparent !important;
	border: none !important;
	padding: 0 !important;
	margin: 0 !important;
}

.post-author-section .post-author-label {
	font-family: "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, monospace !important;
	font-size: 11px !important;
	font-weight: 500 !important;
	letter-spacing: 0.14em !important;
	text-transform: uppercase !important;
	color: #8a8e98 !important;
	margin: 0 0 8px 0 !important;
	padding: 0 !important;
	background: transparent !important;
}

.post-author-section .post-author-name {
	font-family: "Inter Tight", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
	font-size: clamp(18px, 2vw, 22px) !important;
	font-weight: 600 !important;
	line-height: 1.3 !important;
	color: #0a0c10 !important;
	margin: 0 !important;
	padding: 0 !important;
	background: transparent !important;
}

.post-author-section .post-author-name a {
	color: #0a0c10 !important;
	text-decoration: none !important;
	border-bottom: none !important;
	display: inline-flex;
	align-items: center;
	gap: 8px;
}

.post-author-section .post-author-name a:hover {
	color: #2a47a3 !important;
}

/* ───────────────────────────────────────────────────────────
   Author bio paragraph — optional, renders only when set.
   Appears below the name in the gradient card.
   ─────────────────────────────────────────────────────────── */
.post-author-section .post-author-bio {
	margin-top: 16px !important;
	padding-top: 16px !important;
	border-top: 1px solid rgba(10, 12, 16, 0.06) !important;
	font-family: Georgia, "Times New Roman", serif !important;
	font-size: 16px !important;
	font-weight: 400 !important;
	line-height: 1.65 !important;
	color: #424752 !important;
	max-width: 68ch;
}

.post-author-section .post-author-bio p {
	margin: 0 0 12px 0 !important;
}

.post-author-section .post-author-bio p:last-child {
	margin-bottom: 0 !important;
}

.post-author-section .post-author-bio a {
	color: #3a5fcc !important;
	text-decoration: none !important;
	border-bottom: 1px solid rgba(58, 95, 204, 0.25) !important;
	transition: color 0.15s ease, border-color 0.15s ease;
}

.post-author-section .post-author-bio a:hover {
	color: #2a47a3 !important;
	border-bottom-color: #2a47a3 !important;
}

.post-author-section .post-author-bio strong {
	color: #0a0c10 !important;
	font-weight: 600 !important;
}

/* When bio is present, give the card a touch more breathing room */
.post-author-section.has-bio {
	padding: 32px 36px !important;
}

@media (min-width: 768px) {
	.post-author-section.has-bio {
		padding: 36px 40px !important;
	}
}

@media (max-width: 600px) {
	.post-author-section .post-author-bio {
		font-size: 15px !important;
		line-height: 1.6 !important;
	}
}

/* ───────────────────────────────────────────────────────────
   "Read More" related posts section — only soften borders +
   recolor category mono labels. Leave card titles to the theme.
   ─────────────────────────────────────────────────────────── */
body.single-post section.section[data-animations] .section-border,
body.single-podcast section.section[data-animations] .section-border,
body.post-template-default section.section[data-animations] .section-border {
	border-color: var(--tbs-border) !important;
}

/* Tighten the giant gap before "Read More". */
body.single-post section.section[data-animations],
body.single-podcast section.section[data-animations],
body.post-template-default section.section[data-animations] {
	padding-top: 8px !important;
}

@media (min-width: 1024px) {
	body.single-post section.section[data-animations],
	body.single-podcast section.section[data-animations],
	body.post-template-default section.section[data-animations] {
		padding-top: 12px !important;
	}
}

/* Inline "Read More" title with the divider line — title sits
   to the left, line extends to the right of it. Saves vertical
   space and reads as a small section label cutting through a rule. */
body.single-post section.section[data-animations] .section-title.section-border,
body.single-podcast section.section[data-animations] .section-title.section-border,
body.post-template-default section.section[data-animations] .section-title.section-border {
	display: flex !important;
	align-items: center !important;
	gap: 20px !important;
	border-bottom: none !important;
	padding-bottom: 0 !important;
	margin-bottom: 24px !important;
}

/* The h3 inside — restyled as a small mono uppercase label,
   matching the card category labels for visual consistency. */
body.single-post section.section[data-animations] .section-title.section-border h3.section-title,
body.single-podcast section.section[data-animations] .section-title.section-border h3.section-title,
body.post-template-default section.section[data-animations] .section-title.section-border h3.section-title {
	margin: 0 !important;
	padding: 0 !important;
	flex: 0 0 auto;
	white-space: nowrap;
	font-family: "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, monospace !important;
	font-size: 12px !important;
	font-weight: 500 !important;
	letter-spacing: 0.16em !important;
	text-transform: uppercase !important;
	color: var(--tbs-ink-faint) !important;
	line-height: 1 !important;
}

/* The horizontal rule — rendered as a pseudo-element that
   fills the remaining width after the title. */
body.single-post section.section[data-animations] .section-title.section-border::after,
body.single-podcast section.section[data-animations] .section-title.section-border::after,
body.post-template-default section.section[data-animations] .section-title.section-border::after {
	content: "";
	flex: 1 1 auto;
	height: 1px;
	background: var(--tbs-border);
}

/* The "View all" link (when present) sits at the far right */
body.single-post section.section[data-animations] .section-title.section-border .read-more,
body.single-podcast section.section[data-animations] .section-title.section-border .read-more,
body.post-template-default section.section[data-animations] .section-title.section-border .read-more {
	margin-left: 0 !important;
	flex: 0 0 auto;
	order: 3; /* keep it at the end after the divider line */
}

/* ───────────────────────────────────────────────────────────
   "Read More" cards — soft gradient card layout.

   New DOM order (set by PHP):
     .post-card-header   → category (left) + reading time (right)
     .post-featured-image → image (omitted if none)
     .post-link-content   → title only
     .divider             → hidden, card border replaces it

   The whole card is the link, so a "Read more" CTA is redundant
   and has been removed from the markup.
   ─────────────────────────────────────────────────────────── */

/* Each column stretches to match the tallest sibling */
body.single-post .row .mobile-css-carousel-slide,
body.single-podcast .row .mobile-css-carousel-slide,
body.post-template-default .row .mobile-css-carousel-slide {
	align-self: stretch;
	display: flex;
	flex-direction: column;
}

/* The card shell — the <a class="post-content"> link itself */
body.single-post .mobile-css-carousel-slide .post-content,
body.single-podcast .mobile-css-carousel-slide .post-content,
body.post-template-default .mobile-css-carousel-slide .post-content {
	display: flex;
	flex-direction: column;
	flex: 1; /* fill the column height */
	padding: 24px;
	background: linear-gradient(135deg, #ffffff 0%, #eff3fc 100%);
	border: 1px solid var(--tbs-border);
	border-radius: 16px;
	box-shadow: var(--tbs-shadow-sm);
	text-decoration: none;
	transition: transform 0.25s ease, box-shadow 0.25s ease;
}

body.single-post .mobile-css-carousel-slide .post-content:hover,
body.single-podcast .mobile-css-carousel-slide .post-content:hover,
body.post-template-default .mobile-css-carousel-slide .post-content:hover {
	transform: translateY(-2px);
	box-shadow: var(--tbs-shadow-md);
}

/* Card header — category (left) + reading time (right) on one line.
   !important used because the theme's base style.css has selectors
   for .post-category that override our cleaner styling. */
body.single-post .mobile-css-carousel-slide .post-content .post-card-header,
body.single-podcast .mobile-css-carousel-slide .post-content .post-card-header,
body.post-template-default .mobile-css-carousel-slide .post-content .post-card-header {
	display: flex !important;
	justify-content: space-between !important;
	align-items: center !important;
	gap: 12px !important;
	margin-bottom: 16px !important;
	font-family: "JetBrains Mono", ui-monospace, monospace !important;
	font-size: 11px !important;
	font-weight: 500 !important;
	letter-spacing: 0.14em !important;
	text-transform: uppercase !important;
	color: var(--tbs-ink-faint) !important;
}

/* Style the inner spans uniformly — kill theme overrides */
body.single-post .mobile-css-carousel-slide .post-content .post-card-header .post-category,
body.single-podcast .mobile-css-carousel-slide .post-content .post-card-header .post-category,
body.post-template-default .mobile-css-carousel-slide .post-content .post-card-header .post-category,
body.single-post .mobile-css-carousel-slide .post-content .post-card-header .min-read,
body.single-podcast .mobile-css-carousel-slide .post-content .post-card-header .min-read,
body.post-template-default .mobile-css-carousel-slide .post-content .post-card-header .min-read {
	margin: 0 !important;
	padding: 0 !important;
	font-family: "JetBrains Mono", ui-monospace, monospace !important;
	font-size: 11px !important;
	font-weight: 500 !important;
	letter-spacing: 0.14em !important;
	text-transform: uppercase !important;
	color: var(--tbs-ink-faint) !important;
	background: transparent !important;
	border: none !important;
}

/* NUKE any leftover .meta block at the bottom of the card —
   this comes from the original PHP template that may still be
   cached, or from theme JS inserting it. */
body.single-post .mobile-css-carousel-slide .post-content > .meta,
body.single-podcast .mobile-css-carousel-slide .post-content > .meta,
body.post-template-default .mobile-css-carousel-slide .post-content > .meta,
body.single-post .mobile-css-carousel-slide .post-content .post-link-content .meta,
body.single-podcast .mobile-css-carousel-slide .post-content .post-link-content .meta,
body.post-template-default .mobile-css-carousel-slide .post-content .post-link-content .meta {
	display: none !important;
}

/* Featured image — sits below the header, rounded */
body.single-post .mobile-css-carousel-slide .post-content .post-featured-image,
body.single-podcast .mobile-css-carousel-slide .post-content .post-featured-image,
body.post-template-default .mobile-css-carousel-slide .post-content .post-featured-image {
	border-radius: 12px;
	overflow: hidden;
	margin-bottom: 16px;
	aspect-ratio: 16 / 9;
	background: transparent;
	box-shadow: none;
}

body.single-post .mobile-css-carousel-slide .post-content .post-featured-image img,
body.single-podcast .mobile-css-carousel-slide .post-content .post-featured-image img,
body.post-template-default .mobile-css-carousel-slide .post-content .post-featured-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 12px;
	display: block;
}

/* Title fills remaining card height — keeps cards balanced
   even when titles vary wildly in length */
body.single-post .mobile-css-carousel-slide .post-content .post-link-content,
body.single-podcast .mobile-css-carousel-slide .post-content .post-link-content,
body.post-template-default .mobile-css-carousel-slide .post-content .post-link-content {
	flex: 1 1 auto;
	min-height: 0;
}

body.single-post .mobile-css-carousel-slide .post-content h3.h5,
body.single-podcast .mobile-css-carousel-slide .post-content h3.h5,
body.post-template-default .mobile-css-carousel-slide .post-content h3.h5 {
	color: var(--tbs-ink);
	margin: 0;
}

/* Hide the divider line — the card border replaces it */
body.single-post .mobile-css-carousel-slide .post-content .divider,
body.single-podcast .mobile-css-carousel-slide .post-content .divider,
body.post-template-default .mobile-css-carousel-slide .post-content .divider {
	display: none !important;
}

/* "See all" read-more link */
body.single-post .read-more,
body.single-podcast .read-more,
body.post-template-default .read-more {
	font-family: "JetBrains Mono", ui-monospace, monospace;
	font-size: 11px;
	font-weight: 500;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--tbs-blue);
	text-decoration: none;
	transition: color 0.15s ease;
}

body.single-post .read-more:hover,
body.single-podcast .read-more:hover,
body.post-template-default .read-more:hover {
	color: var(--tbs-blue-deep);
}

/* "View all" pill button on mobile */
body.single-post .button.button-black,
body.single-podcast .button.button-black,
body.post-template-default .button.button-black {
	background: var(--tbs-ink) !important;
	color: #fff !important;
	border-radius: 999px !important;
	border: none !important;
	padding: 12px 28px !important;
	font-family: "Inter Tight", sans-serif !important;
	font-weight: 500 !important;
	font-size: 14px !important;
	box-shadow: var(--tbs-shadow-sm) !important;
	transition: background 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease !important;
}

body.single-post .button.button-black:hover,
body.single-podcast .button.button-black:hover,
body.post-template-default .button.button-black:hover {
	background: #15161a !important;
	transform: translateY(-1px);
	box-shadow: var(--tbs-shadow-md) !important;
}

/* ───────────────────────────────────────────────────────────
   Mobile refinements
   ─────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
	body.single-post .single-article header h1,
	body.single-podcast .single-article header h1,
	body.post-template-default .single-article header h1 {
		margin-bottom: 16px;
	}

	body.single-post .single-article header .h5,
	body.single-podcast .single-article header .h5,
	body.post-template-default .single-article header .h5 {
		margin-bottom: 32px;
	}

	body.single-post .single-article .entry-content blockquote,
	body.single-podcast .single-article .entry-content blockquote,
	body.post-template-default .single-article .entry-content blockquote {
		padding-left: 20px;
		margin: 32px 0;
	}
}