/* ==========================================================================
   ETB Single Post

   Port of the Elementor "Blog Template" (626). Sizes, colours and spacing
   are taken from the live 626 render; the breakpoints are Elementor's
   (tablet up to 1000px, mobile up to 767px).

   Departures from 626: the author box's "All Posts" button uses the orange
   outline pill shared with the Pillar post (client request, 2026-10-13); and,
   on small screens where 626 broke down:
   - mobile: the author box stacks, cards span the full width, and the
     content card's padding drops from 48px to 24px;
   - tablet: Dive Deeper items stay full width inside their cards (626
     squeezed them to a third of the card).
   ========================================================================== */

.etb-sp {
	--etb-sp-orange: #FA4616;
	--etb-sp-yellow: #FED141;
	--etb-sp-text:   #101820;
	--etb-sp-muted:  #75787B;
	--etb-sp-band:   #F3F3F3;
	--etb-sp-shadow: 1px 1px 12px -3px rgba(0, 0, 0, 0.2);
}

/* ── Theme layout reset ─────────────────────────────────────────────────── */

/* The template runs edge to edge, as 626 did under Elementor's full-width
   page template. The ID selectors are needed to outrank BuddyBoss's
   ".single-post:not(.has-sidebar, …) .content-area" 800px cap. */
body.etb-single-post #content {
	padding-left: 0;
	padding-right: 0;
}

body.etb-single-post #content > .container {
	max-width: 100%;
	padding: 0;
}

body.etb-single-post #content .site-content-grid {
	margin: 0;
	max-width: none;
}

body.etb-single-post #primary.content-area {
	max-width: none;
	width: 100%;
	flex: 1 1 100%;
	margin: 0;
	padding: 0;
}

/* ── Hero ───────────────────────────────────────────────────────────────── */

.etb-sp-hero {
	background-color: var(--etb-sp-band);
}

.etb-sp-hero__inner {
	display: flex;
	max-width: 1500px;
	margin: 0 auto;
}

.etb-sp-hero__text {
	width: 50%;
	background-color: var(--etb-sp-yellow);
	position: relative;
	z-index: 2;
}

/* Percentages resolve against the column width, as in Elementor. */
.etb-sp-hero__text-inner {
	padding: 12.5% 10% 25%;
}

.etb-sp-title {
	font-size: 39px;
	font-weight: 700;
	line-height: 1.4;
	color: #000;
	margin: 0 0 20px;
}

.etb-sp-excerpt {
	font-size: 20px;
	font-style: oblique;
	line-height: 27px;
	color: #000;
	margin: 0 0 20px;
}

.etb-sp-byline {
	display: flex;
	width: max-content;
	max-width: 100%;
	align-items: center;
	font-size: 16px;
	line-height: 27px;
	color: #000;
	text-decoration: none;
}

.etb-sp-byline:hover {
	color: #000;
}

.etb-sp-byline__avatar {
	width: 40px;
	height: 40px;
	border-radius: 100%;
	object-fit: cover;
}

.etb-sp-byline__name {
	padding-left: 10px;
}

.etb-sp-hero__media {
	width: 50%;
	min-height: 50px;
	position: relative;
	overflow: hidden;
}

.etb-sp-hero__image {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}

/* ── Body: content card + sidebar ───────────────────────────────────────── */

.etb-sp-body {
	background-color: var(--etb-sp-band);
}

.etb-sp-body__inner {
	display: flex;
	align-items: flex-start;
	max-width: 1500px;
	margin: 0 auto;
}

.etb-sp-main {
	width: 70.684%;
}

/* The negative top margin pulls the card up over the hero; as a percentage it
   resolves against .etb-sp-main's width, like 626's column margin did. */
.etb-sp-card {
	position: relative;
	z-index: 5;
	margin: -10% 2% 0 0;
	padding: 48px;
	background-color: #fff;
	border-radius: 0 25px 25px 0;
	box-shadow: 1px 1px 12px -3px rgba(0, 0, 0, 0.19);
}

.etb-sp-content {
	margin-bottom: 20px;
}

.etb-sp-content::after {
	content: "";
	display: table;
	clear: both;
}

/* Book / Character / Period / Topic row */
.etb-sp-terms {
	display: flex;
	flex-wrap: wrap;
	list-style: none;
	margin: 0 -8px 20px;
	padding: 0;
	font-size: 16px;
	line-height: 27px;
}

.etb-sp-terms__item {
	display: flex;
	align-items: center;
	margin: 0 8px;
}

.etb-sp-icon {
	width: 14px;
	height: 14px;
	flex-shrink: 0;
	fill: #000;
}

.etb-sp-terms__text {
	padding-left: 5px;
}

.etb-sp-terms a {
	color: var(--etb-sp-orange);
}

/* 35px both ways: the top margin collapses with the 20px under the terms row
   (or the content), giving 626's 20px widget gap + 15px divider padding. */
.etb-sp-divider {
	height: 0;
	margin: 35px 0;
	border: 0;
	border-top: 1px solid rgba(0, 0, 0, 0.23);
	background: none;
}

/* Author box */
.etb-sp-author {
	display: flex;
	align-items: flex-start;
}

.etb-sp-author__avatar {
	flex-shrink: 0;
	margin-right: 25px;
}

.etb-sp-author__avatar img {
	display: block;
	width: 100px;
	height: 100px;
	border-radius: 500px;
	object-fit: cover;
}

.etb-sp-author__text {
	flex: 1;
	min-width: 0;
}

.etb-sp-author__name {
	font-size: 24px;
	font-weight: 700;
	line-height: 1.4;
	color: var(--etb-sp-text);
	margin: 0 0 5px;
}

.etb-sp-author__bio {
	font-size: 17px;
	line-height: 27px;
	color: var(--etb-sp-text);
	margin: 0 0 0.8em;
}

.etb-sp-author__button {
	margin-top: 4px;
}

/* Outline pill: the author box's "All Posts" and the Pillar post's
   Spotlight / Glossary "Read more". */
.etb-sp-button-outline {
	display: inline-block;
	padding: 9px 22px;
	font-size: 15px;
	line-height: 1.2;
	color: var(--etb-sp-orange);
	background: transparent;
	border: 2px solid var(--etb-sp-orange);
	border-radius: 100px;
	text-decoration: none;
	transition: all 0.2s;
}

.etb-sp-button-outline:hover,
.etb-sp-button-outline:focus {
	color: #fff;
	background: var(--etb-sp-orange);
}

/* Sidebar */
.etb-sp-sidebar {
	width: 29.173%;
	padding: 10px;
}

.etb-sp-side-card {
	margin-top: 32px;
	padding: 32px;
	background-color: #fff;
	border-radius: 25px;
	box-shadow: var(--etb-sp-shadow);
}

.etb-sp-side-card__title {
	font-size: 20px;
	font-weight: 700;
	line-height: 28px;
	color: var(--etb-sp-text);
	margin: 0 0 20px;
}

.etb-sp-side-card__title--newsletter {
	margin-top: 10px;
}

.etb-sp-related {
	display: flex;
	flex-direction: column;
	gap: 20px;
	margin-bottom: 20px;
}

.etb-sp-related__item {
	display: flex;
	align-items: flex-start;
}

.etb-sp-related__thumb {
	display: block;
	position: relative;
	flex-shrink: 0;
	width: 37%;
	margin-right: 10px;
	padding-bottom: calc(37% * 0.75);
	border-radius: 5px;
	overflow: hidden;
}

.etb-sp-related__thumb img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.etb-sp-related__text {
	flex: 1;
	min-width: 0;
}

.etb-sp-related__title {
	font-size: 16px;
	font-weight: 500;
	line-height: 1.4;
	margin: 0 0 5px;
}

.etb-sp-related__title a {
	color: var(--etb-sp-text);
	text-decoration: none;
}

.etb-sp-related__title a:hover {
	color: var(--etb-sp-orange);
}

.etb-sp-related__date {
	font-size: 12px;
	line-height: 1.3;
	color: var(--etb-sp-muted);
}

.etb-sp-newsletter__text {
	font-size: 16px;
	line-height: 27px;
	color: var(--etb-sp-text);
	margin: 0 0 20px;
}

.etb-sp-button {
	display: inline-block;
	padding: 15px 30px;
	font-size: 18px;
	line-height: 1;
	color: #fff;
	background-color: var(--etb-sp-orange);
	border-radius: 100px;
	text-decoration: none;
	transition: all 0.3s;
}

.etb-sp-button:hover,
.etb-sp-button:focus {
	color: #000;
	background-color: var(--etb-sp-yellow);
}

.etb-sp-promo {
	margin-top: 30px;
}

.etb-sp-promo img {
	display: block;
	max-width: 100%;
	height: auto;
}

/* ── Dive Deeper ────────────────────────────────────────────────────────── */

.etb-sp-deeper {
	padding: 32px 0 80px;
	background-color: rgba(243, 243, 243, 0.953);
}

.etb-sp-deeper__inner {
	max-width: 1600px;
	margin: 0 auto;
	padding: 0 48px 48px;
}

.etb-sp-deeper__rule {
	height: 0;
	margin: 15px 0 35px;
	border: 0;
	border-top: 5px solid rgba(0, 0, 0, 0.125);
	background: none;
}

.etb-sp-deeper__title {
	font-size: 34px;
	font-weight: 700;
	line-height: 1.4;
	color: var(--etb-sp-text);
	margin: 0 0 20px;
}

.etb-sp-deeper__grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	column-gap: 64px;
	padding: 0 32px;
}

.etb-sp-deeper__card {
	padding: 32px;
	background-color: #fff;
	border-radius: 25px;
	box-shadow: var(--etb-sp-shadow);
}

.etb-sp-deeper__card-title {
	font-size: 24px;
	font-weight: 700;
	line-height: 1.4;
	text-align: center;
	color: var(--etb-sp-text);
	margin: 0 0 20px;
}

.etb-sp-deeper__list {
	list-style: none;
	margin: 0 -15px;
	padding: 0;
}

.etb-sp-deeper__item {
	padding: 0 15px 35px;
}

.etb-sp-deeper__item-title {
	font-size: 18px;
	font-weight: 700;
	line-height: 1.3;
	margin: 0;
}

.etb-sp-deeper__item-title a {
	color: var(--etb-sp-orange);
	text-decoration: none;
}

.etb-sp-deeper__type {
	font-size: 16px;
	font-style: italic;
	line-height: 27px;
	text-transform: uppercase;
	color: var(--etb-sp-text);
}

.etb-sp-deeper__author {
	display: flex;
	align-items: center;
	gap: 10px;
	padding-top: 8px;
	font-size: 15px;
	line-height: 1.15;
	color: var(--etb-sp-text);
}

.etb-sp-deeper__author img {
	width: 50px;
	height: 50px;
	border-radius: 500px;
	object-fit: cover;
}

/* ── Tablet (≤1000px) ───────────────────────────────────────────────────── */

@media (max-width: 1000px) {
	.etb-sp-deeper__grid {
		column-gap: 20px;
		padding: 0;
	}

	.etb-sp-deeper__card {
		padding: 24px;
	}

	.etb-sp-deeper__list {
		margin: 0;
	}

	.etb-sp-deeper__item {
		padding: 0 0 28px;
	}
}

/* ── Mobile (≤767px) ────────────────────────────────────────────────────── */

@media (max-width: 767px) {
	.etb-sp-hero__inner,
	.etb-sp-body__inner {
		flex-direction: column;
		align-items: stretch;
	}

	.etb-sp-hero__text,
	.etb-sp-hero__media,
	.etb-sp-main,
	.etb-sp-sidebar {
		width: 100%;
	}

	/* Same side gutter as the content card below it. */
	.etb-sp-hero__text-inner {
		padding: 10% 24px;
	}

	/* 626: 30% top and bottom padding around a 50px spacer. */
	.etb-sp-hero__media {
		min-height: calc(60vw + 50px);
	}

	.etb-sp-card {
		padding: 24px;
	}

	.etb-sp-author {
		flex-direction: column;
	}

	.etb-sp-author__avatar {
		margin: 0 0 15px;
	}

	.etb-sp-related__item {
		flex-direction: column;
	}

	.etb-sp-related__thumb {
		width: 100%;
		margin: 0 0 10px;
		padding-bottom: 50%;
	}

	.etb-sp-deeper__inner {
		padding: 0 20px 20px;
	}

	.etb-sp-deeper__grid {
		grid-template-columns: minmax(0, 1fr);
		row-gap: 20px;
	}
}