/* ==========================================================================
   OIB Blog suite — shared stylesheet for:
     - Blog Grid       (.oib-blog)   — listing page
     - Post Content    (.oib-post)   — single-post hero + body
     - Related Posts   (.oib-rel)    — bottom-of-post row
   ========================================================================== */

/* ==========================================================================
   1. Blog Grid (listing)
   ========================================================================== */

.oib-blog {
	--oib-blog-pt: 80px;
	--oib-blog-pb: 80px;

	position: relative;
	padding: var(--oib-blog-pt) 24px var(--oib-blog-pb);
	background: #ffffff;
	font-family: var(--oib-font, "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif);
	-webkit-font-smoothing: antialiased;
}

.oib-blog__inner {
	margin: 0 auto;
}

.oib-blog__inner--narrow { max-width: 1080px; }
.oib-blog__inner--wide   { max-width: 1280px; }
.oib-blog__inner--full   { max-width: calc(100% - 32px); }

/* ---- Header ---- */
.oib-blog__header {
	margin: 0 0 48px;
	max-width: 720px;
}

.oib-blog__heading {
	margin: 0 0 12px;
	color: #0f172a;
	font-size: clamp(28px, 3.4vw, 40px);
	font-weight: 800;
	line-height: 1.15;
	letter-spacing: -0.02em;
}

.oib-blog__subtitle {
	margin: 0;
	color: #475569;
	font-size: clamp(15px, 1.1vw, 17px);
	line-height: 1.6;
}

/* ---- Grid ---- */
.oib-blog__grid {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 32px;
}

.oib-blog__cell {
	margin: 0;
	padding: 0;
	display: flex;
}

/* ---- Card ---- */
.oib-blog__card {
	display: flex;
	flex-direction: column;
	width: 100%;
}

.oib-blog__media {
	position: relative;
	display: block;
	width: 100%;
	aspect-ratio: 16 / 10;
	overflow: hidden;
	border-radius: 16px;
	background: #e2e8f0;
	margin-bottom: 18px;
}

.oib-blog__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 0.5s ease;
}

.oib-blog__card:hover .oib-blog__media img {
	transform: scale(1.04);
}

.oib-blog__media-placeholder {
	display: block;
	width: 100%;
	height: 100%;
	background:
		linear-gradient(135deg, #f1f5f9 0%, #e2e8f0 100%);
}

.oib-blog__card-body {
	display: flex;
	flex-direction: column;
}

.oib-blog__card-cat {
	display: inline-block;
	margin: 0 0 10px;
	color: #7E5D74;
	font-size: 12.5px;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	text-decoration: none;
	align-self: flex-start;
}

.oib-blog__card-cat:hover {
	text-decoration: underline;
}

.oib-blog__card-title {
	margin: 0 0 12px;
	color: #0f172a;
	font-size: clamp(19px, 1.6vw, 22px);
	font-weight: 800;
	line-height: 1.3;
	letter-spacing: -0.015em;
}

.oib-blog__card-title a {
	color: inherit;
	text-decoration: none;
	transition: color 0.2s ease;
}

.oib-blog__card:hover .oib-blog__card-title a {
	color: #7E5D74;
}

.oib-blog__card-excerpt {
	margin: 0 0 14px;
	color: #475569;
	font-size: 14.5px;
	line-height: 1.6;
}

.oib-blog__card-meta {
	margin: 0;
	color: #64748b;
	font-size: 13px;
	display: inline-flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
}

.oib-blog__card-sep { opacity: 0.5; }

/* ---- Search ---- */
.oib-blog__search-area {
	margin: 0 0 44px;
}

.oib-blog__search {
	margin: 0;
}

.oib-blog__search-wrap {
	display: flex;
	align-items: center;
	position: relative;
	background: #ffffff;
	border: 1.5px solid #e2e8f0;
	border-radius: 14px;
	box-shadow:
		0 2px 8px rgba(15, 23, 42, 0.05),
		0 1px 2px rgba(15, 23, 42, 0.04);
	overflow: hidden;
	transition: border-color 0.22s ease, box-shadow 0.22s ease;
}

.oib-blog__search-wrap:focus-within {
	border-color: #7E5D74;
	box-shadow:
		0 0 0 3.5px rgba(126, 93, 116, 0.14),
		0 2px 8px rgba(15, 23, 42, 0.05);
}

.oib-blog__search-icon {
	flex-shrink: 0;
	display: flex;
	align-items: center;
	padding: 0 0 0 18px;
	color: #94a3b8;
	pointer-events: none;
	transition: color 0.2s ease;
}

.oib-blog__search-wrap:focus-within .oib-blog__search-icon {
	color: #7E5D74;
}

.oib-blog__search-icon svg {
	display: block;
	width: 18px;
	height: 18px;
}

.oib-blog__search-input {
	flex: 1 1 0;
	min-width: 0;
	height: 54px;
	padding: 0 14px;
	border: 0;
	background: transparent;
	color: #0f172a;
	font-size: 15px;
	font-family: inherit;
	outline: none;
	-webkit-appearance: none;
	appearance: none;
}

.oib-blog__search-input::placeholder {
	color: #94a3b8;
}

.oib-blog__search-btn {
	flex-shrink: 0;
	display: inline-flex;
	align-items: center;
	gap: 7px;
	height: 38px;
	padding: 0 20px;
	margin: 0 8px 0 0;
	border: 0;
	border-radius: 10px;
	background: #7E5D74;
	color: #ffffff;
	font-size: 14px;
	font-weight: 600;
	font-family: inherit;
	letter-spacing: 0.01em;
	cursor: pointer;
	white-space: nowrap;
	transition: background 0.18s ease, box-shadow 0.18s ease;
}

.oib-blog__search-btn:hover {
	background: #6A4960;
	box-shadow: 0 4px 12px rgba(126, 93, 116, 0.30);
}

.oib-blog__search-btn svg {
	width: 14px;
	height: 14px;
	display: block;
}

/* Meta row — "Results for X" + "Clear search" */
.oib-blog__search-meta {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin: 12px 4px 0;
}

.oib-blog__search-info {
	margin: 0;
	color: #64748b;
	font-size: 13.5px;
	line-height: 1.4;
}

.oib-blog__search-info strong {
	color: #0f172a;
	font-weight: 600;
}

.oib-blog__search-clear {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	color: #94a3b8;
	font-size: 13px;
	font-weight: 500;
	text-decoration: none;
	white-space: nowrap;
	transition: color 0.18s ease;
}

.oib-blog__search-clear:hover {
	color: #7E5D74;
}

.oib-blog__search-clear svg {
	display: block;
}

/* ---- Pagination ---- */
.oib-blog__pagination {
	margin: 56px auto 0;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 6px;
}

.oib-blog__pagination .oib-blog__page,
.oib-blog__pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 40px;
	height: 40px;
	padding: 0 14px;
	border-radius: 10px;
	background: transparent;
	color: #475569;
	font-size: 14.5px;
	font-weight: 600;
	text-decoration: none;
	transition: background 0.18s ease, color 0.18s ease;
}

.oib-blog__pagination a:hover {
	background: #f1f5f9;
	color: #0f172a;
}

.oib-blog__pagination .current {
	background: #7E5D74;
	color: #ffffff;
}

/* ---- Empty state ---- */
.oib-blog__empty {
	margin: 0;
	padding: 48px 24px;
	border: 1px dashed #cbd5e1;
	border-radius: 14px;
	text-align: center;
	color: #64748b;
	font-size: 15px;
}

/* ==========================================================================
   2. Post Content (single-post hero + body)
   ========================================================================== */

.oib-post {
	--oib-post-pt: 48px;
	--oib-post-pb: 64px;

	padding: var(--oib-post-pt) 24px var(--oib-post-pb);
	background: #ffffff;
	font-family: var(--oib-font, "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif);
	-webkit-font-smoothing: antialiased;
}

.oib-post__inner {
	margin: 0 auto;
}

.oib-post__inner--narrow { max-width: 760px; }   /* guideline: 760px reading width */
.oib-post__inner--wide   { max-width: 880px; }
.oib-post__inner--full   { max-width: calc(100% - 32px); }

.oib-post__placeholder {
	margin: 0;
	padding: 32px;
	border: 1px dashed #cbd5e1;
	border-radius: 12px;
	color: #64748b;
	text-align: center;
	font-size: 14.5px;
}

/* ---- Hero ---- */
.oib-post__hero {
	margin: 0 0 40px;
	text-align: center;
}

.oib-post__cat {
	display: inline-block;
	margin: 0 0 16px;
	color: #7E5D74;
	font-size: 12.5px;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	text-decoration: none;
}

.oib-post__cat:hover { text-decoration: underline; }

.oib-post__title {
	margin: 0 0 18px;
	color: #0f172a;
	font-size: clamp(30px, 4.4vw, 48px);
	font-weight: 800;
	line-height: 1.15;
	letter-spacing: -0.025em;
}

.oib-post__meta {
	margin: 0 0 36px;
	color: #64748b;
	font-size: 14px;
	display: inline-flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: 10px;
}

.oib-post__meta-sep { opacity: 0.5; }

.oib-post__image {
	margin: 0;
	border-radius: 18px;
	overflow: hidden;
}

.oib-post__image img {
	display: block;
	width: 100%;
	height: auto;
}

/* ---- Body / prose — typography guideline ---- */
.oib-post__body {
	font-family: var(--oib-font);
	color: var(--oib-color-body);     /* #222 */
	font-size: 18px;                  /* Guideline: 18px desktop */
	font-weight: 400;
	line-height: 1.8;
}

/* Lead paragraph — slight editorial bump on the very first paragraph */
.oib-post__body > p:first-child {
	font-size: 19px;
	color: #1f2937;
	line-height: 1.75;
}

/* Headings — Satoshi, per H1–H6 spec.
   H1 is reserved for the page banner (Post Banner widget) per SEO rules;
   inside the post body we cap at H2 by default — but support all six. */
.oib-post__body h1,
.oib-post__body h2,
.oib-post__body h3,
.oib-post__body h4,
.oib-post__body h5,
.oib-post__body h6 {
	font-family: var(--oib-font-heading);
	color: var(--oib-color-heading); /* #111 */
	line-height: 1.3;
	letter-spacing: -0.01em;
	margin-top: 10px;
	margin-bottom: 14px;
}

.oib-post__body h1 { font-size: 40px; font-weight: 700; }
.oib-post__body h2 { font-size: 30px; font-weight: 700; }
.oib-post__body h3 { font-size: 26px; font-weight: 600; }
.oib-post__body h4 { font-size: 24px; font-weight: 600; }
.oib-post__body h5 { font-size: 22px; font-weight: 600; }
.oib-post__body h6 { font-size: 20px; font-weight: 600; }

@media (max-width: 768px) {
	.oib-post__body                       { font-size: 16px; }
	.oib-post__body > p:first-child       { font-size: 17px; }
	.oib-post__body h1                    { font-size: 32px; }
	.oib-post__body h2                    { font-size: 26px; }
	.oib-post__body h3                    { font-size: 24px; }
	.oib-post__body h4                    { font-size: 22px; }
	.oib-post__body h5                    { font-size: 20px; }
	.oib-post__body h6                    { font-size: 18px; }
}

/* Paragraph spacing — 20px per guideline */
.oib-post__body p          { margin: 0 0 20px; }
.oib-post__body p:last-child { margin-bottom: 0; }

/* Links */
.oib-post__body a {
	color: #7E5D74;
	text-decoration: underline;
	text-underline-offset: 3px;
	text-decoration-thickness: 1px;
}
.oib-post__body a:hover { color: #6A4960; }

/* Lists */
.oib-post__body ul,
.oib-post__body ol {
	padding-left: 1.4em;
	margin: 0 0 20px;
}

.oib-post__body li { margin: 0.4em 0; }

/* Quote — 3px solid #111 left, #FAFAFA bg, 20px padding */
.oib-post__body blockquote {
	margin: 24px 0;
	padding: 20px;
	border-left: 3px solid #111111;
	background: #FAFAFA;
	color: #222222;
	border-radius: 0 4px 4px 0;
	font-style: normal;
}

.oib-post__body blockquote p:last-child { margin-bottom: 0; }

/* Images — 16px radius per guideline */
.oib-post__body img {
	max-width: 100%;
	height: auto;
	border-radius: 16px;
	margin: 24px 0;
}

.oib-post__body figure  { margin: 24px 0; }
.oib-post__body figure img { margin: 0; }

.oib-post__body figcaption {
	margin-top: 10px;
	color: var(--oib-color-meta);
	font-size: 14px;
	text-align: center;
}

/* Inline code */
.oib-post__body code {
	padding: 2px 6px;
	border-radius: 5px;
	background: #F5F5F5;
	color: #111111;
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-size: 0.92em;
}

/* Code blocks — light theme per guideline */
.oib-post__body pre {
	padding: 20px;
	border-radius: 12px;
	background: #F5F5F5;
	color: #111111;
	overflow-x: auto;
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-size: 14.5px;
	line-height: 1.6;
	margin: 24px 0;
}

.oib-post__body pre code {
	padding: 0;
	background: transparent;
	color: inherit;
	font-size: inherit;
}

.oib-post__body hr {
	border: 0;
	border-top: 1px solid #e2e8f0;
	margin: 32px 0;
}

/* ---- Tables ----
   Standalone <table> blocks get wrapped (in JS or via the WP block-table
   figure) so the table itself can stay `display: table` (proper column
   sizing) while the wrapper handles horizontal scroll on narrow viewports. */
.oib-post__body .wp-block-table,
.oib-post__body figure.wp-block-table,
.oib-post__body .oib-table-scroll {
	margin: 1.8em 0;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	border: 1px solid #e5e7eb;
	border-radius: 14px;
	background: #ffffff;
	box-shadow: 0 1px 2px rgba(15, 23, 42, 0.03);
}

.oib-post__body table {
	width: 100%;
	margin: 0;
	border-collapse: collapse;
	font-size: 15px;
	line-height: 1.6;
	color: #334155;
	table-layout: auto;
}

/* Tables that are NOT inside a wrapper (raw <table> in the_content): give
   them their own rounded card so they don't render edge-to-edge. */
.oib-post__body > table {
	margin: 1.8em 0;
	border: 1px solid #e5e7eb;
	border-radius: 14px;
	overflow: hidden;
	box-shadow: 0 1px 2px rgba(15, 23, 42, 0.03);
}

.oib-post__body table thead {
	background: var(--oib-primary-soft, #f4eef2);
}

.oib-post__body table th,
.oib-post__body table td {
	padding: 14px 18px;
	text-align: left;
	vertical-align: top;
	border: 1px solid #e5e7eb;
}

/* No outer borders — the wrapper provides them so column borders line up
   with the rounded card edge instead of doubling up. */
.oib-post__body table tr > *:first-child { border-left: 0; }
.oib-post__body table tr > *:last-child  { border-right: 0; }
.oib-post__body table thead tr:first-child > * { border-top: 0; }
.oib-post__body table tbody tr:last-child > *  { border-bottom: 0; }

.oib-post__body table th {
	color: var(--oib-primary-dark, #6A4960);
	font-family: var(--oib-font-heading, var(--oib-font));
	font-weight: 700;
	font-size: 13px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	white-space: nowrap;
}

.oib-post__body table td {
	color: #334155;
}

/* First column reads as the row label — make it a touch heavier */
.oib-post__body table tbody td:first-child {
	color: #0f172a;
	font-weight: 600;
}

.oib-post__body table tbody tr:hover td {
	background: rgba(var(--oib-primary-rgb, 126, 93, 116), 0.04);
}

/* WP block-table figure already provides the wrapper — kill its inner table
   styling and let the wrapper own the card chrome. */
.oib-post__body .wp-block-table table,
.oib-post__body figure.wp-block-table table {
	border: 0;
	border-radius: 0;
	box-shadow: none;
}

.oib-post__body .wp-block-table figcaption {
	padding: 12px 18px;
	background: #fafbfc;
	color: var(--oib-color-meta);
	font-size: 13.5px;
	text-align: center;
	border-top: 1px solid #e5e7eb;
	margin: 0;
}

/* Mobile — slightly tighter padding & font */
@media (max-width: 640px) {
	.oib-post__body table th,
	.oib-post__body table td { padding: 11px 14px; font-size: 13.5px; }
	.oib-post__body table th { font-size: 11.5px; letter-spacing: 0.06em; }
}

/* ==========================================================================
   4. Post Banner (single-post hero)
   ========================================================================== */

.oib-pban {
	--oib-pban-pt: 56px;
	--oib-pban-pb: 48px;

	position: relative;
	padding: var(--oib-pban-pt) 24px var(--oib-pban-pb);
	background:
		radial-gradient(60% 70% at 50% 0%, rgba(126, 93, 116, 0.06) 0%, rgba(255, 255, 255, 0) 65%),
		#ffffff;
	font-family: var(--oib-font, "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif);
	-webkit-font-smoothing: antialiased;
	overflow: hidden;
	isolation: isolate;
}

/* Soft hairline below the banner so the article body has a clear start */
.oib-pban::after {
	content: "";
	position: absolute;
	left: 50%;
	bottom: 0;
	transform: translateX(-50%);
	width: min(880px, 90%);
	height: 1px;
	background: linear-gradient(90deg, transparent 0%, rgba(15, 23, 42, 0.08) 50%, transparent 100%);
	pointer-events: none;
}

.oib-pban__inner {
	margin: 0 auto;
	position: relative;
	z-index: 2;
}

.oib-pban__inner--narrow { max-width: 880px;  }
.oib-pban__inner--wide   { max-width: 1080px; }
.oib-pban__inner--full   { max-width: calc(100% - 32px); }

.oib-pban__copy {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
}

/* Category styled as a soft pill — more visual weight than plain text */
.oib-pban__cat {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin: 0 0 20px;
	padding: 6px 14px;
	border-radius: 999px;
	background: rgba(126, 93, 116, 0.10);
	color: #7E5D74;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	text-decoration: none;
	line-height: 1.4;
	transition: background 0.18s ease, color 0.18s ease, transform 0.18s ease;
}

.oib-pban__cat::before {
	content: "";
	display: inline-block;
	width: 6px;
	height: 6px;
	border-radius: 999px;
	background: currentColor;
	opacity: 0.65;
}

.oib-pban__cat:hover,
.oib-pban__cat:focus-visible {
	background: rgba(126, 93, 116, 0.16);
	color: #6A4960;
	transform: translateY(-1px);
	outline: none;
}

.oib-pban__title {
	margin: 0 0 18px;
	font-family: var(--oib-font-heading);
	color: var(--oib-color-heading);
	font-size: 40px;            /* Guideline H1 desktop */
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: -0.02em;
}

@media (max-width: 768px) {
	.oib-pban__title { font-size: 32px; }  /* Guideline H1 mobile */
}

.oib-pban__excerpt {
	margin: 0 0 22px;
	color: #475569;
	font-size: clamp(16px, 1.2vw, 18px);
	line-height: 1.6;
	max-width: 640px;
}

.oib-pban__meta {
	margin: 0;
	font-family: var(--oib-font);
	color: var(--oib-color-meta);
	font-size: 14px;
	font-weight: 500;
	display: inline-flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: 10px;
}

.oib-pban__meta-sep { opacity: 0.5; }
.oib-pban__meta-author { color: #111111; font-weight: 600; }

.oib-pban__image {
	margin: 40px 0 0;
	padding: 0;
	width: 100%;
	height: 420px;
	border-radius: 20px;
	overflow: hidden;
	background-size: cover;
	background-position: center;
	background-color: #f1f5f9;
	box-shadow:
		0 1px 2px rgba(15, 23, 42, 0.04),
		0 20px 40px -24px rgba(15, 23, 42, 0.18);
}

.oib-pban__image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	visibility: hidden;       /* image is the bg layer; keep <img> for a11y/SEO */
}

/* ---- Image-as-background layout ---- */
.oib-pban--bg {
	color: #ffffff;
}

.oib-pban--bg .oib-pban__bg {
	position: absolute;
	inset: 0;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	z-index: 0;
	pointer-events: none;
}

.oib-pban--bg .oib-pban__overlay {
	position: absolute;
	inset: 0;
	background: #0b1424;
	opacity: 0.55;
	z-index: 1;
	pointer-events: none;
}

.oib-pban--bg .oib-pban__copy {
	min-height: 320px;
	justify-content: center;
}

.oib-pban--bg .oib-pban__title  { color: #ffffff; }
.oib-pban--bg .oib-pban__excerpt { color: rgba(255, 255, 255, 0.88); }
.oib-pban--bg .oib-pban__meta    { color: rgba(255, 255, 255, 0.75); }
.oib-pban--bg .oib-pban__cat     { color: #fbbf24; }

/* ==========================================================================
   Post Table of Contents (sticky)
   ========================================================================== */

.oib-toc {
	--oib-toc-top: 100px;

	position: relative;
	background: #FAFAFA;
	border: 1px solid rgba(15, 23, 42, 0.08);
	border-radius: 12px;
	padding: 20px 22px;
	margin: 0 0 28px;
	font-family: var(--oib-font, "Inter", system-ui, sans-serif);
	-webkit-font-smoothing: antialiased;
}

/* Sticky on desktop only */
@media (min-width: 1024px) {
	.oib-toc--sticky {
		position: sticky;
		top: var(--oib-toc-top);
	}
}

.oib-toc__toggle {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	margin: 0;
	padding: 0;
	border: 0;
	background: transparent;
	color: inherit;
	cursor: default;
	font: inherit;
}

.oib-toc__heading {
	margin: 0;
	color: #7E5D74;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	line-height: 1.4;
}

.oib-toc__toggle-icon {
	width: 16px;
	height: 16px;
	color: #94a3b8;
	display: none;
	transition: transform 0.2s ease;
}

.oib-toc__list {
	list-style: none;
	margin: 14px 0 0;
	padding: 0;
	counter-reset: oib-toc;
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.oib-toc__item { counter-increment: oib-toc; }
.oib-toc__item--h3 { padding-left: 14px; }
.oib-toc__item--h4 { padding-left: 28px; }

.oib-toc__link {
	position: relative;
	display: block;
	padding: 4px 0 4px 14px;
	color: #475569;
	font-size: 14.5px;
	line-height: 1.5;
	text-decoration: none;
	transition: color 0.18s ease;
}

.oib-toc__link::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0;
	bottom: 0;
	width: 2px;
	border-radius: 2px;
	background: transparent;
	transition: background 0.18s ease;
}

.oib-toc--numbered .oib-toc__item > .oib-toc__link::before { display: none; }

.oib-toc--numbered .oib-toc__link {
	padding-left: 0;
}

.oib-toc--numbered .oib-toc__link::after {
	content: counter(oib-toc) ".";
	margin-right: 8px;
	color: #94a3b8;
	font-variant-numeric: tabular-nums;
}

.oib-toc--numbered .oib-toc__link {
	display: flex;
	flex-direction: row-reverse;
	justify-content: flex-end;
	gap: 0;
}

.oib-toc__link:hover { color: #0f172a; }

.oib-toc__link.is-active {
	color: #7E5D74;
	font-weight: 600;
}

.oib-toc__link.is-active::before { background: #7E5D74; }

.oib-toc__empty {
	color: #94a3b8;
	font-size: 13.5px;
	list-style: none;
}

/* Mobile: collapsible */
@media (max-width: 1023px) {
	.oib-toc--collapsible .oib-toc__toggle    { cursor: pointer; }
	.oib-toc--collapsible .oib-toc__toggle-icon { display: block; }
	.oib-toc--collapsible .oib-toc__list      { display: none; }
	.oib-toc--collapsible.is-open .oib-toc__list { display: flex; }
	.oib-toc--collapsible.is-open .oib-toc__toggle-icon { transform: rotate(180deg); }
}

/* ==========================================================================
   5. Post Author Box
   ========================================================================== */

.oib-pauth {
	--oib-pauth-pt: 40px;
	--oib-pauth-pb: 40px;

	padding: var(--oib-pauth-pt) 24px var(--oib-pauth-pb);
	background: #ffffff;
	font-family: var(--oib-font, "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif);
	-webkit-font-smoothing: antialiased;
}

.oib-pauth__inner {
	margin: 0 auto;
}

.oib-pauth__inner--narrow { max-width: 700px; }
.oib-pauth__inner--wide   { max-width: 960px; }
.oib-pauth__inner--full   { max-width: calc(100% - 32px); }

.oib-pauth__card {
	display: flex;
	align-items: flex-start;
	gap: 20px;
	padding: 28px;
	background: #f8fafc;
	border: 1px solid rgba(15, 23, 42, 0.06);
	border-radius: 16px;
}

.oib-pauth__avatar-link {
	display: inline-block;
	flex-shrink: 0;
	transition: opacity 0.2s ease;
}

.oib-pauth__avatar-link:hover { opacity: 0.85; }

.oib-pauth__avatar {
	display: inline-block;
	width: 72px;
	height: 72px;
	border-radius: 999px;
	overflow: hidden;
}

.oib-pauth__avatar img {
	width: 100%;
	height: 100%;
	display: block;
	border-radius: 999px;
}

.oib-pauth__body {
	flex: 1 1 auto;
	min-width: 0;
}

.oib-pauth__eyebrow {
	margin: 0 0 4px;
	color: #7E5D74;
	font-size: 11.5px;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	line-height: 1.4;
}

.oib-pauth__name {
	margin: 0 0 4px;
	color: #0f172a;
	font-size: 18px;
	font-weight: 800;
	line-height: 1.25;
	letter-spacing: -0.015em;
}

.oib-pauth__name a {
	color: inherit;
	text-decoration: none;
	transition: color 0.2s ease;
}

.oib-pauth__name a:hover { color: #7E5D74; }

.oib-pauth__role {
	margin: 0 0 10px;
	color: #64748b;
	font-size: 13.5px;
	line-height: 1.4;
}

.oib-pauth__bio {
	margin: 0 0 14px;
	color: #475569;
	font-size: 14.5px;
	line-height: 1.65;
}

.oib-pauth__link {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	color: #7E5D74;
	font-size: 14px;
	font-weight: 600;
	text-decoration: none;
	transition: gap 0.2s ease, color 0.2s ease;
}

.oib-pauth__link:hover {
	gap: 10px;
	color: #6A4960;
}

.oib-pauth__link svg {
	width: 14px;
	height: 14px;
	flex-shrink: 0;
}

/* ==========================================================================
   3. Related Posts
   ========================================================================== */

.oib-rel {
	--oib-rel-pt: 64px;
	--oib-rel-pb: 80px;

	padding: var(--oib-rel-pt) 24px var(--oib-rel-pb);
	background: #f8fafc;
	font-family: var(--oib-font, "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif);
	-webkit-font-smoothing: antialiased;
}

.oib-rel__inner {
	margin: 0 auto;
}

.oib-rel__inner--narrow { max-width: 1080px; }
.oib-rel__inner--wide   { max-width: 1280px; }
.oib-rel__inner--full   { max-width: calc(100% - 32px); }

.oib-rel__header {
	margin: 0 0 32px;
}

.oib-rel__heading {
	margin: 0;
	color: #0f172a;
	font-size: clamp(22px, 2.4vw, 28px);
	font-weight: 800;
	line-height: 1.2;
	letter-spacing: -0.015em;
}

.oib-rel__grid {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 28px;
}

.oib-rel__cell {
	margin: 0;
	padding: 0;
	display: flex;
}

.oib-rel__card {
	display: flex;
	flex-direction: column;
	width: 100%;
}

.oib-rel__media {
	position: relative;
	display: block;
	width: 100%;
	aspect-ratio: 16 / 10;
	overflow: hidden;
	border-radius: 14px;
	background: #e2e8f0;
	margin-bottom: 14px;
}

.oib-rel__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 0.5s ease;
}

.oib-rel__card:hover .oib-rel__media img {
	transform: scale(1.04);
}

.oib-rel__media-placeholder {
	display: block;
	width: 100%;
	height: 100%;
	background: linear-gradient(135deg, #f1f5f9 0%, #e2e8f0 100%);
}

.oib-rel__card-cat {
	display: inline-block;
	margin: 0 0 6px;
	color: #7E5D74;
	font-size: 11.5px;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	text-decoration: none;
	align-self: flex-start;
}

.oib-rel__card-title {
	margin: 0 0 8px;
	color: #0f172a;
	font-size: 17px;
	font-weight: 700;
	line-height: 1.35;
	letter-spacing: -0.01em;
}

.oib-rel__card-title a {
	color: inherit;
	text-decoration: none;
	transition: color 0.2s ease;
}

.oib-rel__card:hover .oib-rel__card-title a {
	color: #7E5D74;
}

.oib-rel__card-meta {
	margin: 0;
	color: #64748b;
	font-size: 12.5px;
}

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width: 1024px) {
	.oib-blog__grid,
	.oib-rel__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
	}
}

@media (max-width: 768px) {
	.oib-pban__image  { height: 280px; }
	.oib-pban__title  { font-size: clamp(26px, 6.5vw, 36px); }
	.oib-pban--bg .oib-pban__copy { min-height: 240px; }
}

@media (max-width: 640px) {
	.oib-blog,
	.oib-post,
	.oib-rel,
	.oib-pban,
	.oib-pauth {
		padding-left: 18px;
		padding-right: 18px;
	}

	.oib-blog__header,
	.oib-rel__header {
		margin-bottom: 28px;
	}

	.oib-blog__grid,
	.oib-rel__grid {
		grid-template-columns: 1fr !important;
		gap: 22px;
	}

	.oib-post__hero { margin-bottom: 28px; }
	.oib-post__title { font-size: clamp(24px, 7vw, 32px); }
	.oib-post__meta { margin-bottom: 24px; }
	.oib-post__body { font-size: 15.5px; }

	.oib-post__body table th,
	.oib-post__body table td { padding: 10px 12px; font-size: 13.5px; }

	.oib-pban__image   { height: 220px; border-radius: 16px; }
	.oib-pban__excerpt { font-size: 15.5px; }

	/* Author box stacks on phone */
	.oib-pauth__card {
		flex-direction: column;
		align-items: flex-start;
		gap: 14px;
		padding: 22px;
	}

	.oib-pauth__avatar {
		width: 60px;
		height: 60px;
	}
}

/* ==========================================================================
   A11y / motion
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
	.oib-blog__media img,
	.oib-rel__media img,
	.oib-blog__card-title a,
	.oib-rel__card-title a { transition: none !important; }

	.oib-blog__card:hover .oib-blog__media img,
	.oib-rel__card:hover .oib-rel__media img { transform: none; }
}

/* ==========================================================================
   ⌬ Blog Details page — sticky 3-col reading layout
   ==========================================================================
   Used by templates/single.php. The hero (oib-crumbs--banner) sits at the
   top, then a centered grid:

       [share rail]  [ article body ]  [ "On this page" TOC ]
        (sticky)                          (sticky)

   On tablets the grid collapses to:
       [article body, full width]
       [TOC under content, collapsible]
   (the share rail moves into the inline share row below the article).

   --------------------------------------------------------------------------- */

.oib-bd {
	background: #ffffff;
	font-family: var(--oib-font, "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif);
	-webkit-font-smoothing: antialiased;
}

/* Chrome wrappers — the auto-detected header/footer Elementor templates may
   contain widgets we DON'T want on a single-post page (e.g., a Breadcrumbs
   banner the user dropped onto their global header). The single-post template
   already renders its own breadcrumb hero, so we suppress any duplicates that
   ride along inside the chrome render. To allow them back, add a stylesheet
   rule with higher specificity or remove these selectors. */
.oib-bd-chrome .oib-crumbs,
.oib-bd-chrome .elementor-widget-oib_breadcrumbs {
	display: none !important;
}

/* Hero overrides — title + meta inside the gradient banner */
.oib-bd__hero {
	padding-top: clamp(56px, 7vw, 88px) !important;
	padding-bottom: clamp(56px, 7vw, 88px) !important;
	min-height: auto !important;
}

.oib-bd__hero .oib-crumbs__list {
	margin-bottom: 24px;
}

.oib-bd__hero .oib-crumbs__title {
	max-width: 940px;
	margin: 0 0 20px;
}

.oib-bd__hero .oib-crumbs__meta {
	margin: 0;
	color: rgba(255, 255, 255, 0.9) !important;
	font-size: 14.5px;
	display: inline-flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: 10px;
}

.oib-bd__hero .oib-crumbs__meta-author {
	color: #ffffff !important;
	font-weight: 600;
}

.oib-bd__hero .oib-crumbs__meta-sep { opacity: 0.55; }

/* ---- Reading grid wrapper ---- */
.oib-bd__wrap {
	max-width: 1280px;
	margin: 0 auto;
	padding: clamp(40px, 5vw, 64px) 24px clamp(32px, 4vw, 48px);
}

.oib-bd__grid {
	display: grid;
	grid-template-columns: 64px minmax(0, 1fr) 280px;
	gap: 48px;
	align-items: start;
}

/* ---- Share rail (left, sticky) ---- */
.oib-bd__rail {
	position: sticky;
	top: 110px;
	display: flex;
	justify-content: center;
}

/* ---- Article main column ---- */
.oib-bd__main {
	min-width: 0;
	max-width: 760px;
	margin: 0 auto;
}

.oib-bd__featured {
	margin: 0 0 32px;
	border-radius: 20px;
	overflow: hidden;
	background: #f1f5f9;
	box-shadow:
		0 1px 2px rgba(15, 23, 42, 0.04),
		0 16px 36px -22px rgba(15, 23, 42, 0.18);
}

.oib-bd__featured img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 9;
	object-fit: cover;
}

/* Re-use .oib-post__body typography for the article body */
.oib-bd__main .oib-post__body {
	font-family: var(--oib-font);
	color: var(--oib-color-body);
	font-size: 18px;
	line-height: 1.8;
}

/* ---- Right aside (sticky TOC) ---- */
.oib-bd__aside {
	position: sticky;
	top: 110px;
	max-height: calc(100vh - 130px);
	overflow-y: auto;
}

/* Inside the aside the TOC card has its own padding/border */
.oib-bd__aside .oib-toc {
	margin: 0;
	background: #FAFAFA;
}

/* ==========================================================================
   Share component — vertical rail + inline horizontal row
   ========================================================================== */

.oib-share {
	display: inline-flex;
	gap: 10px;
	align-items: center;
}

.oib-share--vertical {
	flex-direction: column;
	gap: 12px;
	padding: 8px;
	background: #ffffff;
	border: 1px solid rgba(15, 23, 42, 0.06);
	border-radius: 999px;
	box-shadow: 0 6px 18px rgba(15, 23, 42, 0.05);
}

.oib-share__btn {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	padding: 0;
	border: 1px solid rgba(15, 23, 42, 0.08);
	border-radius: 999px;
	background: #ffffff;
	color: #475569;
	cursor: pointer;
	transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease, transform 0.18s ease;
	text-decoration: none;
}

.oib-share__btn svg {
	width: 16px;
	height: 16px;
}

.oib-share__btn:hover,
.oib-share__btn:focus-visible {
	background: var(--oib-primary, #7E5D74);
	border-color: var(--oib-primary, #7E5D74);
	color: #ffffff;
	transform: translateY(-1px);
	outline: none;
}

.oib-share--vertical .oib-share__btn {
	border: 0;
	background: transparent;
	color: #475569;
}

.oib-share--vertical .oib-share__btn:hover,
.oib-share--vertical .oib-share__btn:focus-visible {
	background: var(--oib-primary-soft, #f4eef2);
	color: var(--oib-primary, #7E5D74);
	transform: none;
}

.oib-share__copied {
	position: absolute;
	left: 50%;
	bottom: calc(100% + 6px);
	transform: translateX(-50%);
	padding: 4px 10px;
	background: #0f172a;
	color: #ffffff;
	border-radius: 6px;
	font-size: 11.5px;
	font-weight: 600;
	letter-spacing: 0.02em;
	white-space: nowrap;
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.2s ease, transform 0.2s ease;
}

.oib-share__btn.is-copied .oib-share__copied {
	opacity: 1;
	transform: translateX(-50%) translateY(-2px);
}

/* ==========================================================================
   Author card — soft surface variant (matches mockup)
   ========================================================================== */

.oib-pauth__card--soft {
	display: flex;
	align-items: center;
	gap: 22px;
	padding: 28px 32px;
	background: var(--oib-primary-soft, #f4eef2);
	border: 1px solid rgba(var(--oib-primary-rgb, 126, 93, 116), 0.10);
	border-radius: 18px;
	flex-wrap: wrap;
}

.oib-pauth__card--soft .oib-pauth__avatar {
	width: 80px;
	height: 80px;
}

.oib-pauth__card--soft .oib-pauth__body {
	flex: 1 1 220px;
	min-width: 0;
}

.oib-pauth__card--soft .oib-pauth__eyebrow {
	margin-bottom: 6px;
	color: var(--oib-primary, #7E5D74);
	font-size: 11px;
	letter-spacing: 0.18em;
}

.oib-pauth__card--soft .oib-pauth__name {
	margin: 0 0 6px;
	font-size: 20px;
}

.oib-pauth__card--soft .oib-pauth__bio {
	margin: 0;
	color: #475569;
	font-size: 14.5px;
	line-height: 1.6;
}

.oib-pauth__card--soft .oib-pauth__link {
	flex-shrink: 0;
	padding: 10px 18px;
	border-radius: 999px;
	background: #ffffff;
	border: 1px solid rgba(var(--oib-primary-rgb, 126, 93, 116), 0.18);
	color: var(--oib-primary, #7E5D74);
	font-size: 13.5px;
	font-weight: 600;
}

.oib-pauth__card--soft .oib-pauth__link:hover {
	background: var(--oib-primary, #7E5D74);
	color: #ffffff;
	border-color: var(--oib-primary, #7E5D74);
}

/* ==========================================================================
   Related posts — "Keep reading" header with View-all link
   ========================================================================== */

.oib-rel__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
}

.oib-rel__view-all {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	color: var(--oib-primary, #7E5D74);
	font-size: 14px;
	font-weight: 600;
	text-decoration: none;
	transition: gap 0.2s ease, color 0.2s ease;
}

.oib-rel__view-all svg {
	width: 14px;
	height: 14px;
}

.oib-rel__view-all:hover {
	gap: 10px;
	color: var(--oib-primary-dark, #6A4960);
}

/* ==========================================================================
   Responsive — blog details
   ========================================================================== */

@media (max-width: 1180px) {
	.oib-bd__grid {
		grid-template-columns: 56px minmax(0, 1fr) 240px;
		gap: 36px;
	}
}

@media (max-width: 1023px) {
	/* Collapse to single column: hide left rail, drop TOC under article */
	.oib-bd__grid {
		grid-template-columns: minmax(0, 1fr);
		gap: 32px;
	}

	.oib-bd__rail {
		display: none;
	}

	.oib-bd__aside {
		order: 2;
		position: static;
		max-height: none;
		overflow: visible;
		margin-top: 8px;
	}

	.oib-bd__main {
		order: 1;
		max-width: 100%;
	}

	.oib-bd__aside .oib-toc--sticky {
		position: static;
	}
}

@media (max-width: 768px) {
	.oib-pauth__card--soft {
		gap: 16px;
		padding: 22px;
	}

	.oib-pauth__card--soft .oib-pauth__link {
		align-self: flex-start;
	}
}

@media (max-width: 640px) {
	.oib-bd__wrap {
		padding-left: 18px;
		padding-right: 18px;
	}

	.oib-bd__featured {
		border-radius: 14px;
	}

	.oib-bd__hero .oib-crumbs__title {
		font-size: clamp(28px, 7.5vw, 38px);
	}

	.oib-pauth__card--soft {
		flex-direction: column;
		align-items: flex-start;
	}

	.oib-share--vertical {
		display: none; /* hidden via grid collapse, belt-and-braces */
	}

	.oib-pauth__card--soft .oib-pauth__body{
		flex: unset;
	}
}