/* =============================================================================
 * Single post — per-template styles
 *
 * Loads after global.css (priority 20).
 * Prefix: .ba-post-hero*, .ba-post-body*, .ba-post-content*,
 *         .ba-post-sidebar*, .ba-post-toc*, .ba-post-cta*,
 *         .ba-post-related*, .ba-rcard*.
 * ========================================================================== */

/* ---------------------------------------------------------------------------
 * 1. HERO
 * Section uses .ba-section (bg --ba-section-bg-1, radius --ba-radius-lg,
 * padding --ba-section-pad). No overrides needed at section level.
 * ------------------------------------------------------------------------- */

.ba-post-hero__breadcrumb {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 6px;
	font-family: var(--ba-font-body);
	font-weight: 400;
	font-size: var(--ba-fs-small);
	color: var(--ba-text-muted);
}
.ba-post-hero__breadcrumb a {
	color: var(--ba-text-muted);
	text-decoration: none;
}
.ba-post-hero__breadcrumb a:hover { color: var(--ba-text-secondary); }
.ba-post-hero__breadcrumb-current {
	color: var(--ba-text-secondary);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	max-width: 480px;
}

.ba-post-hero__meta {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: var(--ba-gap-lg);
	margin-top: var(--ba-gap-xl);
}

.ba-post-hero__cats {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}
.ba-post-hero__cat {
	display: inline-flex;
	align-items: center;
	padding: 10px 14px;
	background: #EFE6DD;
	border-radius: var(--ba-radius-pill);
	font-family: var(--ba-font-body);
	font-weight: 500;
	font-size: 11px;
	line-height: 1;
	letter-spacing: 1.98px;
	text-transform: uppercase;
	color: var(--ba-text-primary);
	text-decoration: none;
	transition: background-color .2s ease;
}
.ba-post-hero__cat:hover { background: #E5D8C8; }

.ba-post-hero__info {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 10px;
	font-family: var(--ba-font-body);
	font-weight: 400;
	font-size: var(--ba-fs-small);
	color: var(--ba-text-muted);
}
.ba-post-hero__info span::after {
	content: '';
	display: inline-block;
	width: 3px;
	height: 3px;
	border-radius: 50%;
	background: currentColor;
	margin-left: 10px;
	vertical-align: middle;
	opacity: 0.55;
}
.ba-post-hero__info span:last-child::after { display: none; }

.ba-post-hero__title {
	font-family: var(--ba-font-heading);
	font-weight: 400;
	font-size: var(--ba-fs-h1);
	line-height: var(--ba-lh-heading);
	color: var(--ba-text-primary);
	margin: var(--ba-gap-xl) 0 0;
}

.ba-post-hero__excerpt {
	font-family: var(--ba-font-body);
	font-weight: 400;
	font-size: 20px;
	line-height: var(--ba-lh-body);
	color: var(--ba-text-muted);
	max-width: 650px;
	margin: 20px 0 0;
}

.ba-post-hero__image {
	margin-top: var(--ba-gap-xl);
	height: 525px;
	border-radius: var(--ba-radius-image);
	overflow: hidden;
	background: linear-gradient(180deg, #EDE1D5, #D8CBBE);
}
.ba-post-hero__image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 100% 60%;
	display: block;
}

.ba-post-hero__tags {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: var(--ba-gap-xl);
}
.ba-post-hero__tag {
	display: inline-flex;
	align-items: center;
	padding: 10px 14px;
	background: #EFE6DD;
	border-radius: var(--ba-radius-pill);
	font-family: var(--ba-font-body);
	font-weight: 500;
	font-size: 11px;
	line-height: 1;
	letter-spacing: 1.98px;
	color: var(--ba-text-primary);
	text-decoration: none;
	transition: background-color .2s ease;
}
.ba-post-hero__tag:hover { background: #E5D8C8; }

/* ---------------------------------------------------------------------------
 * 2. CONTENT + SIDEBAR
 * ------------------------------------------------------------------------- */

.ba-post-body__grid {
	display: grid;
	grid-template-columns: minmax(0, 852fr) minmax(0, 320fr);
	gap: var(--ba-gap-xl);
	align-items: start;
}

/* ---- Content ---- */
.ba-post-content {
	font-family: var(--ba-font-body);
	font-weight: 400;
	font-size: var(--ba-fs-body);
	line-height: var(--ba-lh-body);
	color: var(--ba-text-muted);
}

.ba-post-content p { margin: 0; }
.ba-post-content p + p { margin-top: 14px; }

/* Inline links in post content and hero excerpt */
.ba-post-content a,
.ba-post-hero__excerpt a {
	color: inherit;
	text-decoration: none;
	border-bottom: 1px solid rgba(56, 39, 30, 0.14);
	transition: border-bottom-color .2s ease;
}
.ba-post-content a:hover,
.ba-post-hero__excerpt a:hover { border-bottom-color: rgba(56, 39, 30, 0.32); }

/* Allow the sidebar to stick while scrolling. */
.ba-section--post-body { overflow: visible; }

.ba-post-content h2,
.ba-post-content h3,
.ba-post-content h4 {
	color: var(--ba-text-primary);
	margin: 24px 0 0;
	scroll-margin-top: 120px;
}

.ba-post-content figure,
.ba-post-content img {
	border-radius: var(--ba-radius-lg);
	overflow: hidden;
	max-width: 100%;
	display: block;
	margin-top: 14px;
}
.ba-post-content figure img {
	width: 100%;
	border-radius: 0;
	margin-top: 0;
}

/* Blockquote (Gutenberg .wp-block-quote) */
.ba-post-content blockquote,
.ba-post-content .wp-block-quote {
	background: rgba(237, 225, 213, 0.46);
	padding: 32px;
	border-radius: var(--ba-radius-card);
	border: none;
	border-left: none;
	margin: 24px 0 0;
}
.ba-post-content blockquote::before,
.ba-post-content .wp-block-quote::before {
	content: '';
	display: block;
	width: 42px;
	height: 42px;
	border-radius: 14px;
	background:
		rgba(237, 225, 213, 0.72)
		url("data:image/svg+xml,<svg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'><path d='M13.3333 2.5C12.4129 2.5 11.6667 3.24619 11.6667 4.16667V9.16667C11.6667 10.0871 12.4129 10.8333 13.3333 10.8333C13.7936 10.8333 14.1667 11.2064 14.1667 11.6667V12.5C14.1667 13.4205 13.4205 14.1667 12.5 14.1667C12.0398 14.1667 11.6667 14.5398 11.6667 15V16.6667C11.6667 17.1269 12.0398 17.5 12.5 17.5C15.2614 17.5 17.5 15.2614 17.5 12.5V4.16667C17.5 3.24619 16.7538 2.5 15.8333 2.5H13.3333M4.16667 2.5C3.24619 2.5 2.5 3.24619 2.5 4.16667V9.16667C2.5 10.0871 3.24619 10.8333 4.16667 10.8333C4.6269 10.8333 5 11.2064 5 11.6667V12.5C5 13.4205 4.25381 14.1667 3.33333 14.1667C2.8731 14.1667 2.5 14.5398 2.5 15V16.6667C2.5 17.1269 2.8731 17.5 3.33333 17.5C6.09476 17.5 8.33333 15.2614 8.33333 12.5V4.16667C8.33333 3.24619 7.58714 2.5 6.66667 2.5H4.16667' stroke='%23453124' stroke-width='1.66667' stroke-linecap='round' stroke-linejoin='round'/></svg>")
		center / 20px 20px no-repeat;
	margin-bottom: 18px;
}
.ba-post-content blockquote p,
.ba-post-content .wp-block-quote p {
	font-size: 36px;
	line-height: 1.2;
	font-weight: 400;
	color: var(--ba-text-primary);
	margin: 0;
}
.ba-post-content blockquote cite,
.ba-post-content .wp-block-quote cite {
	display: block;
	font-size: var(--ba-fs-small);
	color: var(--ba-text-muted);
	font-style: normal;
	margin-top: 12px;
}

/* Custom bullet list */
.ba-post-content ul,
.ba-post-content .wp-block-list {
	list-style: none;
	padding: 0;
	margin: 14px 0 0;
	display: flex;
	flex-direction: column;
	gap: 12px;
}
.ba-post-content ul li,
.ba-post-content .wp-block-list li {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	font-size: var(--ba-fs-body);
	color: var(--ba-text-muted);
}
.ba-post-content ul li::before,
.ba-post-content .wp-block-list li::before {
	content: '';
	flex-shrink: 0;
	width: 29px;
	height: 29px;
	border-radius: 50%;
	background:
		rgba(237, 225, 213, 0.56)
		url("data:image/svg+xml,<svg width='18' height='18' viewBox='0 0 18 18' fill='none' xmlns='http://www.w3.org/2000/svg'><path d='M15 4.5L6.75 12.75L3 9' stroke='%2338271E' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/></svg>")
		center / 18px 18px no-repeat;
	margin-top: 1px;
}

/* Ordered list — keep default style, just spacing */
.ba-post-content ol {
	padding-left: 24px;
	margin: 14px 0 0;
	display: flex;
	flex-direction: column;
	gap: 10px;
}

/* ---- Sidebar ---- */
.ba-post-sidebar {
	position: sticky;
	top: 120px;
	display: flex;
	flex-direction: column;
	gap: var(--ba-gap-xl);
	align-self: flex-start;
}

.ba-post-toc,
.ba-post-cta {
	background: rgba(246, 240, 232, 0.75);
	border-radius: var(--ba-radius-card);
	padding: 24px;
}

.ba-post-toc__label,
.ba-post-cta__label {
	display: block;
	font-family: var(--ba-font-body);
	font-weight: 500;
	font-size: 11px;
	line-height: 1;
	letter-spacing: 1.98px;
	text-transform: uppercase;
	color: #A38974;
	margin-bottom: 8px;
}

.ba-post-toc__title,
.ba-post-cta__title {
	font-family: var(--ba-font-body);
	font-weight: 400;
	font-size: 28px;
	line-height: 1.2;
	color: var(--ba-text-primary);
	margin: 0 0 var(--ba-gap-sm);
}

.ba-post-toc__list {
	display: flex;
	flex-direction: column;
}

.ba-post-toc__item {
	display: block;
	padding: 12px 0;
	font-family: var(--ba-font-body);
	font-weight: 500;
	font-size: var(--ba-fs-body);
	line-height: 1.4;
	color: var(--ba-text-primary);
	text-decoration: none;
	transition: color .15s ease;
}
.ba-post-toc__item + .ba-post-toc__item {
	border-top: 1px solid rgba(216, 203, 190, 0.4);
}
.ba-post-toc__item:hover { color: var(--ba-text-secondary); }

.ba-post-cta__body {
	font-family: var(--ba-font-body);
	font-weight: 400;
	font-size: var(--ba-fs-small);
	line-height: var(--ba-lh-body);
	color: var(--ba-text-muted);
	margin: 14px 0;
}
.ba-post-cta__btn {
	display: flex;
	width: 100%;
	justify-content: center;
}

/* ---------------------------------------------------------------------------
 * 3. RELATED POSTS
 * ------------------------------------------------------------------------- */

.ba-post-related__label {
	display: block;
	font-family: var(--ba-font-body);
	font-weight: 500;
	font-size: 11px;
	line-height: 1;
	letter-spacing: 1.98px;
	text-transform: uppercase;
	color: #A38974;
	margin-bottom: 10px;
}
.ba-post-related__title {
	font-family: var(--ba-font-heading);
	font-weight: 400;
	font-size: var(--ba-fs-h2);
	line-height: var(--ba-lh-heading);
	color: var(--ba-text-primary);
	margin: 0 0 var(--ba-space-8);
}
.ba-post-related__grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 18px;
}

/* Related card */
.ba-rcard {
	background: rgba(237, 225, 213, 0.46);
	border-radius: var(--ba-radius-card);
	padding: 18px;
	display: flex;
	flex-direction: column;
	overflow: hidden;
}
.ba-rcard__media {
	display: block;
	height: 208px;
	border-radius: var(--ba-radius-card);
	overflow: hidden;
	background: linear-gradient(180deg, #EDE1D5, #D8CBBE);
	flex-shrink: 0;
}
.ba-rcard__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.ba-rcard__body {
	display: flex;
	flex-direction: column;
	flex: 1;
	padding-top: 18px;
}
.ba-rcard__cat {
	align-self: flex-start;
	display: inline-flex;
	align-items: center;
	padding: 8px 12px;
	background: #EFE6DD;
	border-radius: var(--ba-radius-pill);
	font-family: var(--ba-font-body);
	font-weight: 600;
	font-size: 11px;
	line-height: 1;
	letter-spacing: 1.54px;
	text-transform: uppercase;
	color: var(--ba-text-muted);
	text-decoration: none;
}
.ba-rcard__cat:hover { color: var(--ba-text-primary); }
.ba-rcard__title {
	font-family: var(--ba-font-body);
	font-weight: 400;
	font-size: 28px;
	line-height: 1.15;
	color: var(--ba-text-primary);
	margin: 14px 0 0;
}
.ba-rcard__title a { color: inherit; text-decoration: none; }
.ba-rcard__title a:hover { color: var(--ba-text-secondary); }
.ba-rcard__foot {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--ba-gap-md);
	margin-top: auto;
	padding-top: var(--ba-space-7);
}
.ba-rcard__read {
	font-family: var(--ba-font-body);
	font-weight: 500;
	font-size: var(--ba-fs-small);
	color: var(--ba-text-muted);
}
.ba-rcard__more {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-family: var(--ba-font-body);
	font-weight: 400;
	font-size: 14px;
	color: var(--ba-text-secondary);
	text-decoration: none;
}
.ba-rcard__more:hover { color: var(--ba-text-primary); }
.ba-rcard__more svg { flex-shrink: 0; }

/* ---------------------------------------------------------------------------
 * Responsive
 * ------------------------------------------------------------------------- */

@media (max-width: 1100px) {
	.ba-post-hero__title { font-size: var(--ba-fs-h1-sm); }
	.ba-post-hero__image { height: 380px; }

	.ba-post-body__grid {
		grid-template-columns: 1fr;
	}
	.ba-post-sidebar {
		position: static;
	}
	.ba-post-related__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 720px) {
	.ba-post-hero__title { font-size: 36px; }
	.ba-post-hero__excerpt { font-size: 17px; }
	.ba-post-hero__image { height: 240px; }
	.ba-post-hero__breadcrumb-current { max-width: 220px; }

	.ba-post-content blockquote p,
	.ba-post-content .wp-block-quote p { font-size: 26px; }

	.ba-post-related__title { font-size: var(--ba-fs-h2-md); }
	.ba-post-related__grid { grid-template-columns: 1fr; }
	.ba-rcard__title { font-size: 22px; }
}
