/* ============================================================
   Rich Text Block
   ============================================================ */

.rich-text-block {
	padding: var(--space-20) 0;
}

/* ─── Typography ─────────────────────────────────────────────────────────── */

.rich-text-block__content > *:first-child{
	margin-top:0;
}

.rich-text-block__content h1,
.rich-text-block__content h2,
.rich-text-block__content h3,
.rich-text-block__content h4 {
	font-family: var(--font-heading);
	font-weight: 700;
	line-height: 1.5;
	color: var(--color-text);
	margin: var(--space-6) 0 var(--space-4);
}

.rich-text-block iframe{
	max-width:100%;
}

.rich-text-block__content p {
	font-size: var(--text-base);
	line-height: 2;
	color: var(--color-text);
	font-weight:500;
	margin-bottom: var(--space-6);
}

.rich-text-block__content p + ul{
	margin-top: -12px;
}

.rich-text-block__content a {
	color:var(--color-text);
	text-decoration: underline;
}

.rich-text-block__content a:hover {
	color:var(--header-link-hover);
}

.rich-text-block__content a.cta-btn {
	text-decoration: none;
}

.rich-text-block__content a.cta-btn--clear,
.rich-text-block__content a.cta-btn--clear:hover {
	color: var(--color-text);
}

.rich-text-block__content ul,
.rich-text-block__content ol {
	padding-left: var(--space-8);
	color: var(--color-text);
	font-weight:500;
	margin-bottom:var(--space-6);
}

.rich-text-block__content li {
	line-height:2;
}

.rich-text-block__content li + li {
	margin-top: var(--space-2);
}

/* ─── With Sidebar / With Ads layout ────────────────────────────────────── */

.rich-text-block--with-sidebar .rich-text-block__inner,
.rich-text-block--with-ads .rich-text-block__inner {
	display: grid;
	grid-template-columns: 2fr 1fr;
	gap: var(--space-24);
	align-items: start;
}

.rich-text-block__sidebar {
	position: sticky;
	top: calc(var(--header-height) + var(--space-8));
}

/* ── In-content mobile ad slots ──
   .blog-grid__ad rule duplicated from blog-feed.css/ad-placement.css — post/
   press singles don't load either. Mobile-only: tlf_content_with_mobile_ads()
   in single.php injects these into blog_content unconditionally, so
   visibility is CSS-gated here. */
.blog-article .rich-text-block__content .blog-grid__ad {
	display: none !important;
}

@media (max-width: 768px) {
	.blog-article .rich-text-block__content .blog-grid__ad {
		display: block;
		width: 100%;
		max-width: 1124px;
		height: 90px;
		margin: 36px auto;
		background-color: var(--color-border);
	}
}

/* ─── Mobile ─────────────────────────────────────────────────────────────── */

@media (max-width: 1201px) {
	.rich-text-block {
		padding: var(--space-12) 0;
	}

	.rich-text-block--with-sidebar .rich-text-block__inner,
	.rich-text-block--with-ads .rich-text-block__inner {
		grid-template-columns: 1fr;
		gap:20px;
	}

	.rich-text-block__sidebar {
		position: static;
	}

	.rich-text-block .ad-placeholder{
		display:none;
	}
}

/* ============================================================
   Sidebar Card Block
   ============================================================ */

.sidebar-card {
	background-color: var(--color-bg-tertiary);
	border-radius: 30px;
	padding: var(--space-10) var(--space-12);
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--space-4);
}

.sidebar-card__title {
	font-family: var(--font-heading);
	font-size: var(--h2-size);
	font-weight: 700;
	color: var(--color-text);
	margin: 0;
	width:100%;
}

.sidebar-card__text {
	font-size: var(--text-base);
	line-height: 1.75;
	color: var(--color-text);
	margin-top:0;
}

.sidebar-card .cta-btn{
	padding-left:33px;
	padding-right:33px;
}

/* ─── Mobile ─────────────────────────────────────────────────────────────── */

@media (max-width: 768px) {
	.sidebar-card__title {
		font-size: var(--h2-size-mobile);
	}
	.sidebar-card{
		text-align:center;
		padding: var(--space-8) var(--space-8);
	}
	.sidebar-card__text{
		margin:0;
	}
	.sidebar-card .cta-btn{
		margin:auto;
	}
}