/* ============================================================
   i3 Blog Stylesheet
   Loads only on WordPress single-post pages. Contains the
   two-column grid layout, hero with TOC sidebar, sticky right
   rail, content cards, and bottom related grid.

   All rules here depend on i3-base.css being loaded first.
   Tokens (--i3-*) come from base. This file must not redefine
   any token.

   Layout shape:

      +---------------------------------------------+
      |  .i3-blog-hero (spans both columns)         |
      |  [content left]       [TOC sidebar right]   |
      +----------------------+----------------------+
      |                      |                      |
      |  .i3-blog-content    |  .i3-blog-rail       |
      |  (article body)      |  (sticky CTA,        |
      |                      |   share, related)    |
      |                      |                      |
      +----------------------+----------------------+
      |  .i3-author-strip (spans both, from base)   |
      +---------------------------------------------+
      |  .i3-blog-related (spans both)              |
      +---------------------------------------------+
   ============================================================ */


/* ------------------------------------------------------------
   1. PAGE WRAPPER AND GRID
   ------------------------------------------------------------ */

/* ------------------------------------------------------------
   1. PAGE WRAPPER AND GRID
   ------------------------------------------------------------
   Layout structure:

     .i3-page--blog (block container, max-width wrapper)
       |
       +-- .i3-blog-hero  (full width)
       |
       +-- .i3-blog-body  (CSS grid: content column | rail column)
       |     |
       |     +-- .i3-blog-content-wrap  (grid-column: 1)
       |     +-- .i3-blog-rail          (grid-column: 2, position: sticky)
       |
       +-- .i3-author-strip  (full width, outside the grid)
       +-- .i3-blog-related  (full width, outside the grid)

   Scoping the 2-column grid to .i3-blog-body keeps the rail's
   sticky bounds inside the content row only. If the grid lived
   on .i3-page--blog, the sticky rail would overlap the author
   strip and related cards at the bottom of the page.

   The .i3-blog-body wrapper is added by i3-toc.js at page load
   via DOM wrapping. Keeping the wrapper creation in JS means
   the HTML in each post stays simpler.
   ------------------------------------------------------------ */

.i3-page--blog {
	max-width: var(--i3-container-wide);
	margin: 0 auto;
	padding: 0 var(--i3-space-5);
}

.i3-blog-body {
	display: grid;
	grid-template-columns: 1fr 340px;
	column-gap: var(--i3-space-6);
}

/* The main content column. */
.i3-blog-body > .i3-blog-content-wrap {
	grid-column: 1;
	min-width: 0; /* Allow content to shrink inside grid cell, prevents overflow. */
}

/* The sticky right rail. Sticky bounds are .i3-blog-body, which
   ends where author strip begins, so the rail un-sticks correctly. */
.i3-blog-body > .i3-blog-rail {
	grid-column: 2;
	position: sticky;
	top: 100px;
	align-self: start;
}


/* ------------------------------------------------------------
   2. HERO
   Spans both columns. Two-column interior: content left,
   TOC card right.
   ------------------------------------------------------------ */

.i3-blog-hero {
	background: linear-gradient(135deg, #edf1ff 0%, #e4eaff 40%, #ede9ff 70%, #f0edff 100%);
	border-bottom: 1px solid #d8ddf5;
	margin: 0 calc(-1 * var(--i3-space-5)) var(--i3-space-7);
	padding: var(--i3-space-7) var(--i3-space-5) 0;
}

.i3-blog-hero-inner {
	max-width: var(--i3-container-wide);
	margin: 0 auto;
	display: grid;
	grid-template-columns: 1fr 340px;
	column-gap: var(--i3-space-7);
	align-items: end;
}

.i3-blog-hero-main {
	padding-bottom: var(--i3-space-7);
}

.i3-blog-hero-side {
	align-self: stretch;
	display: flex;
	flex-direction: column;
}


/* Breadcrumbs inside hero */
.i3-blog-hero-crumbs {
	display: flex;
	align-items: center;
	gap: var(--i3-space-2);
	margin-bottom: var(--i3-space-4);
	font-size: 11.5px;
}

.i3-blog-hero-crumbs a {
	color: var(--i3-color-faint);
	text-decoration: none;
}

.i3-blog-hero-crumbs a:hover {
	color: var(--i3-color-purple);
}

.i3-blog-hero-crumbs-sep {
	color: var(--i3-color-border);
	font-size: 11px;
}

.i3-blog-hero-crumbs-current {
	color: var(--i3-color-purple);
	font-weight: 600;
}


/* Category pill + reading time */
.i3-blog-hero-cat {
	display: inline-flex;
	align-items: center;
	gap: var(--i3-space-2);
	margin-bottom: var(--i3-space-3);
}

.i3-blog-hero-cat-pill {
	background: rgba(91, 61, 189, 0.12);
	color: var(--i3-color-purple);
	font-size: 10.5px;
	font-weight: 700;
	padding: var(--i3-space-1) var(--i3-space-3);
	border-radius: var(--i3-radius-sm);
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.i3-blog-hero-cat-time {
	color: var(--i3-color-faint);
	font-size: 11.5px;
}


/* H1 inside hero overrides base sizing. Blog H1s are larger. */
.i3-blog-hero h1 {
	font-size: clamp(1.8rem, 3vw, 2.5rem);
	color: var(--i3-color-navy);
	line-height: 1.2;
	letter-spacing: -0.01em;
	margin-bottom: var(--i3-space-4);
	font-weight: 600;
}


/* Article deck (subtitle below H1) */
.i3-blog-hero-deck {
	font-size: 15.5px;
	color: var(--i3-color-muted);
	line-height: 1.75;
	margin-bottom: var(--i3-space-5);
	font-weight: 400;
}


/* Author block inside hero */
.i3-blog-hero-author {
	display: flex;
	align-items: center;
	gap: var(--i3-space-3);
	margin-bottom: var(--i3-space-5);
}

.i3-blog-hero-author .i3-avatar {
	width: 42px;
	height: 42px;
	font-size: 13px;
}


/* Featured image */
.i3-blog-hero-image {
	margin: var(--i3-space-5) 0 0;
	border-radius: var(--i3-radius-lg);
	overflow: hidden;
	box-shadow: 0 8px 32px rgba(10, 31, 61, 0.12);
}

.i3-blog-hero-image img {
	width: 100%;
	height: auto;
	display: block;
}


/* ------------------------------------------------------------
   3. TOC SIDEBAR (inside hero-side)
   Auto-populated by i3-toc.js on page load. The container
   <nav class="i3-blog-toc"> is required in the HTML; the JS
   fills in the <ol> of H2 links.
   ------------------------------------------------------------ */

.i3-blog-toc {
	position: sticky;
	top: var(--i3-space-5);
	align-self: start;
	background: var(--i3-color-bg);
	border: 1px solid rgba(91, 61, 189, 0.15);
	border-radius: var(--i3-radius-md);
	padding: var(--i3-space-5);
}

.i3-blog-toc-label {
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.1em;
	color: var(--i3-color-purple);
	margin-bottom: var(--i3-space-3);
	text-transform: uppercase;
}

.i3-blog-toc-links {
	display: flex;
	flex-direction: column;
	gap: var(--i3-space-2);
	list-style: none;
	margin: 0;
	padding: 0;
	counter-reset: i3-toc;
}

.i3-blog-toc-links li {
	counter-increment: i3-toc;
	margin: 0;
	padding: 0;
}

.i3-blog-toc-links a {
	font-size: 12.5px;
	color: var(--i3-color-muted);
	text-decoration: none;
	display: flex;
	align-items: flex-start;
	gap: var(--i3-space-2);
	line-height: 1.4;
	word-wrap: break-word;
}

.i3-blog-toc-links a::before {
	content: counter(i3-toc, decimal-leading-zero);
	font-size: 10px;
	color: var(--i3-color-faint);
	font-weight: 600;
	flex-shrink: 0;
	margin-top: 2px;
	min-width: 16px;
}

.i3-blog-toc-links a:hover {
	color: var(--i3-color-purple);
}

/* Active link when reader has scrolled to that section.
   JavaScript toggles .is-active on link elements. */
.i3-blog-toc-links a.is-active {
	color: var(--i3-color-purple);
	font-weight: 600;
}


/* ------------------------------------------------------------
   4. CONTENT COLUMN
   Body text sizing inside a blog post. Smaller and lighter than
   interior core pages; blog posts are long-form reading.
   ------------------------------------------------------------ */

.i3-blog-content-wrap {
	padding: 0;
}

.i3-blog-content {
	max-width: 100%;
}

.i3-blog-content h2 {
	font-size: 1.5rem;
	font-weight: 600;
	color: var(--i3-color-navy);
	line-height: 1.25;
	margin: var(--i3-space-7) 0 var(--i3-space-3);
	letter-spacing: -0.005em;
	scroll-margin-top: 100px; /* So in-page TOC jumps don't hide under sticky nav. */
}

.i3-blog-content h3 {
	font-size: 1.0625rem;
	font-weight: 700;
	color: var(--i3-color-navy);
	margin: var(--i3-space-6) 0 var(--i3-space-2);
	line-height: 1.35;
	letter-spacing: 0.01em;
}

.i3-blog-content p {
	font-size: 15.5px;
	color: var(--i3-color-text);
	line-height: 1.85;
	margin-bottom: var(--i3-space-4);
	font-weight: 400;
}

.i3-blog-content ul,
.i3-blog-content ol {
	margin: 0 0 var(--i3-space-5);
	padding-left: var(--i3-space-5);
}

.i3-blog-content li {
	font-size: 15.5px;
	color: var(--i3-color-text);
	line-height: 1.8;
	margin-bottom: var(--i3-space-2);
}

.i3-blog-content strong {
	color: var(--i3-color-navy);
	font-weight: 600;
}

.i3-blog-content a {
	color: var(--i3-color-purple);
	text-decoration: none;
	font-weight: 500;
	border-bottom: 1px solid rgba(91, 61, 189, 0.3);
}

.i3-blog-content a:hover {
	border-bottom-color: var(--i3-color-purple);
}


/* ------------------------------------------------------------
   5. CONTENT CARDS
   Inline callout cards for key takeaways, answer callouts,
   tables, and mid-article CTAs.
   ------------------------------------------------------------ */


/* Key takeaways card */
.i3-blog-card-takeaways {
	border: 1px solid var(--i3-color-border);
	border-radius: var(--i3-radius-md);
	overflow: hidden;
	margin: var(--i3-space-6) 0;
}

.i3-blog-card-takeaways-head {
	background: var(--i3-color-purple-soft);
	padding: var(--i3-space-3) var(--i3-space-5);
	display: flex;
	align-items: center;
	gap: var(--i3-space-3);
}

.i3-blog-card-takeaways-label {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.1em;
	color: var(--i3-color-purple-mid);
	text-transform: uppercase;
}

.i3-blog-card-takeaways-body {
	padding: var(--i3-space-4) var(--i3-space-5);
}

.i3-blog-card-takeaways-body ul {
	margin: 0;
	padding-left: var(--i3-space-4);
}

.i3-blog-card-takeaways-body li {
	font-size: 14px;
	color: var(--i3-color-muted);
	line-height: 1.75;
	margin-bottom: var(--i3-space-3);
	font-weight: 400;
}

.i3-blog-card-takeaways-body li:last-child {
	margin-bottom: 0;
}

.i3-blog-card-takeaways-body li strong {
	color: var(--i3-color-navy);
	font-weight: 600;
}


/* Answer card */
.i3-blog-card-answer {
	background: var(--i3-color-surface);
	border: 1px solid var(--i3-color-border);
	border-radius: var(--i3-radius-md);
	padding: var(--i3-space-5);
	margin: var(--i3-space-6) 0;
}

.i3-blog-card-answer-label {
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.1em;
	color: var(--i3-color-purple);
	margin-bottom: var(--i3-space-2);
	text-transform: uppercase;
}

.i3-blog-card-answer-q {
	font-size: 14.5px;
	font-weight: 700;
	color: var(--i3-color-navy);
	margin-bottom: var(--i3-space-2);
}

.i3-blog-card-answer-a {
	font-size: 14.5px;
	color: var(--i3-color-muted);
	line-height: 1.8;
}


/* Reference table card. Used for comparison tables inside posts. */
.i3-blog-card-table {
	border: 1px solid var(--i3-color-border);
	border-radius: var(--i3-radius-md);
	overflow: hidden;
	margin: var(--i3-space-6) 0;
}

.i3-blog-card-table-head {
	background: var(--i3-color-surface);
	padding: var(--i3-space-3) var(--i3-space-5);
	border-bottom: 1px solid var(--i3-color-border);
}

.i3-blog-card-table-head h4 {
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.07em;
	color: var(--i3-color-navy);
	margin: 0;
	text-transform: uppercase;
}

.i3-blog-card-table table {
	width: 100%;
	border-collapse: collapse;
}

.i3-blog-card-table th {
	text-align: left;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.06em;
	color: var(--i3-color-faint);
	padding: var(--i3-space-2) var(--i3-space-4);
	background: var(--i3-color-surface);
	border-bottom: 1px solid var(--i3-color-border);
	text-transform: uppercase;
}

.i3-blog-card-table td {
	font-size: 13.5px;
	color: var(--i3-color-muted);
	padding: var(--i3-space-3) var(--i3-space-4);
	border-bottom: 1px solid var(--i3-color-border);
	vertical-align: top;
	line-height: 1.55;
}

.i3-blog-card-table tr:last-child td {
	border-bottom: none;
}

.i3-blog-card-table td:first-child {
	font-weight: 600;
	color: var(--i3-color-navy);
	width: 20%;
}

.i3-blog-card-table .is-ok {
	color: var(--i3-color-success);
	font-weight: 500;
}

.i3-blog-card-table .is-warn {
	color: var(--i3-color-warning);
	font-weight: 500;
}


/* Mid-article dark CTA card */
.i3-blog-card-cta {
	background: linear-gradient(135deg, var(--i3-color-navy) 0%, #26215c 100%);
	border-radius: var(--i3-radius-lg);
	padding: var(--i3-space-6) var(--i3-space-6);
	margin: var(--i3-space-7) 0;
	text-align: center;
	color: white;
}

.i3-blog-card-cta-eyebrow {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.1em;
	color: rgba(255, 255, 255, 0.6);
	margin-bottom: var(--i3-space-3);
	text-transform: uppercase;
}

.i3-blog-card-cta-title {
	font-size: 22px;
	font-weight: 600;
	color: white;
	margin-bottom: var(--i3-space-3);
	line-height: 1.3;
}

.i3-blog-card-cta-body {
	font-size: 15px;
	color: rgba(255, 255, 255, 0.85);
	margin-bottom: var(--i3-space-5);
	line-height: 1.6;
	max-width: 520px;
	margin-left: auto;
	margin-right: auto;
}


/* Inline diagram (dark-background image wrapper with caption) */
.i3-blog-diagram {
	background: #01033e;
	border-radius: var(--i3-radius-md);
	overflow: hidden;
	margin: var(--i3-space-6) 0;
}

.i3-blog-diagram img {
	width: 100%;
	height: auto;
	max-height: 380px;
	object-fit: contain;
	display: block;
}

.i3-blog-diagram-caption {
	color: rgba(255, 255, 255, 0.75);
	background: #01033e;
	padding: 0 var(--i3-space-5) var(--i3-space-5);
	font-size: 12.5px;
	font-style: italic;
	text-align: center;
}


/* ------------------------------------------------------------
   6. RIGHT RAIL (sticky)
   CTA, share, related articles. Sits in the right grid column.
   ------------------------------------------------------------ */

.i3-blog-rail {
	width: 100%;
	display: flex;
	flex-direction: column;
	gap: var(--i3-space-4);
}


/* Rail CTA card */
.i3-blog-rail-cta {
	background: linear-gradient(160deg, var(--i3-color-purple-soft), #e5e2ff);
	border: 1px solid rgba(91, 61, 189, 0.2);
	border-radius: var(--i3-radius-md);
	padding: var(--i3-space-5);
	text-align: center;
}

.i3-blog-rail-cta-label {
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.1em;
	color: var(--i3-color-purple);
	margin-bottom: var(--i3-space-3);
	text-transform: uppercase;
}

.i3-blog-rail-cta-title {
	font-size: 14.5px;
	font-weight: 700;
	color: var(--i3-color-navy);
	margin-bottom: var(--i3-space-2);
	line-height: 1.35;
}

.i3-blog-rail-cta-body {
	font-size: 12.5px;
	color: var(--i3-color-muted);
	margin-bottom: var(--i3-space-4);
	line-height: 1.65;
}

.i3-blog-rail-cta-btn {
	display: block;
	background: var(--i3-color-navy);
	color: white;
	font-size: 13px;
	font-weight: 600;
	padding: var(--i3-space-3);
	border-radius: var(--i3-radius-sm);
	text-decoration: none;
}

.i3-blog-rail-cta-btn:hover {
	background: var(--i3-color-purple);
	color: white;
}


/* Rail share box */
.i3-blog-rail-share {
	border: 1px solid var(--i3-color-border);
	border-radius: var(--i3-radius-md);
	padding: var(--i3-space-4);
}

.i3-blog-rail-share-label {
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.1em;
	color: var(--i3-color-faint);
	margin-bottom: var(--i3-space-3);
	text-transform: uppercase;
}

.i3-blog-rail-share-btns {
	display: flex;
	flex-direction: column;
	gap: var(--i3-space-2);
}

.i3-blog-rail-share-btn {
	font-size: 12.5px;
	color: var(--i3-color-muted);
	background: var(--i3-color-surface);
	border: 1px solid var(--i3-color-border);
	padding: var(--i3-space-2) var(--i3-space-4);
	border-radius: var(--i3-radius-sm);
	text-align: center;
	cursor: pointer;
	font-weight: 500;
	font-family: var(--i3-font-body);
	text-decoration: none;
	display: block;
}

.i3-blog-rail-share-btn:hover {
	background: var(--i3-color-purple-soft);
	color: var(--i3-color-purple);
	border-color: var(--i3-color-purple);
}


/* Rail related articles */
.i3-blog-rail-related {
	border: 1px solid var(--i3-color-border);
	border-radius: var(--i3-radius-md);
	padding: var(--i3-space-4);
}

.i3-blog-rail-related-label {
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.1em;
	color: var(--i3-color-faint);
	margin-bottom: var(--i3-space-3);
	text-transform: uppercase;
}

.i3-blog-rail-related-item {
	padding: var(--i3-space-3) 0;
	border-bottom: 1px solid var(--i3-color-border);
}

.i3-blog-rail-related-item:last-child {
	border-bottom: none;
	padding-bottom: 0;
}

.i3-blog-rail-related-cat {
	font-size: 10px;
	font-weight: 700;
	color: var(--i3-color-purple);
	letter-spacing: 0.06em;
	margin-bottom: var(--i3-space-1);
	text-transform: uppercase;
}

.i3-blog-rail-related-title {
	font-size: 12.5px;
	color: var(--i3-color-navy);
	font-weight: 500;
	line-height: 1.4;
	text-decoration: none;
	display: block;
}

.i3-blog-rail-related-title:hover {
	color: var(--i3-color-purple);
}


/* ------------------------------------------------------------
   7. HEADER SHARE BUTTONS
   Round icon buttons below the hero image.
   ------------------------------------------------------------ */

.i3-blog-share {
	display: flex;
	gap: var(--i3-space-3);
	margin-top: var(--i3-space-5);
}

.i3-blog-share-btn {
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background: rgba(10, 31, 61, 0.08);
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--i3-color-navy);
	text-decoration: none;
	transition: background var(--i3-transition);
}

.i3-blog-share-btn:hover {
	background: var(--i3-color-purple);
	color: white;
}

.i3-blog-share-btn svg {
	width: 16px;
	height: 16px;
	fill: currentColor;
}


/* ------------------------------------------------------------
   8. BOTTOM RELATED GRID
   Three-card grid of related posts below the author strip.
   ------------------------------------------------------------ */

.i3-blog-related {
	margin: var(--i3-space-7) 0 var(--i3-space-8);
}

.i3-blog-related-label {
	font-size: 11px;
	font-weight: 800;
	letter-spacing: 1.5px;
	text-transform: uppercase;
	color: var(--i3-color-purple);
	padding-bottom: var(--i3-space-3);
	margin-bottom: var(--i3-space-5);
	border-bottom: 2px solid var(--i3-color-border);
}

.i3-blog-related-cards {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--i3-space-5);
}

.i3-blog-related-card {
	display: block;
	padding: var(--i3-space-5);
	border: 1px solid var(--i3-color-border);
	border-radius: var(--i3-radius-md);
	text-decoration: none;
	background: var(--i3-color-bg);
	transition: var(--i3-transition);
}

.i3-blog-related-card:hover {
	box-shadow: var(--i3-shadow-md);
	border-color: var(--i3-color-purple);
	transform: translateY(-2px);
}

.i3-blog-related-card-cat {
	font-size: 9.5px;
	font-weight: 700;
	letter-spacing: 0.5px;
	color: var(--i3-color-muted);
	text-transform: uppercase;
	margin-bottom: var(--i3-space-2);
}

.i3-blog-related-card-title {
	font-size: 16px;
	font-weight: 700;
	color: var(--i3-color-text-strong);
	line-height: 1.4;
	margin-bottom: var(--i3-space-3);
}

.i3-blog-related-card-meta {
	font-size: 12px;
	color: var(--i3-color-muted);
}


/* ------------------------------------------------------------
   9. WPAUTOP GUARDS (blog-scoped)
   ------------------------------------------------------------ */

.i3-page--blog .i3-blog-related-cards > p,
.i3-page--blog .i3-blog-related-card > p {
	display: contents;
	margin: 0;
	padding: 0;
}

.i3-page--blog .i3-blog-related-cards > p:empty,
.i3-page--blog .i3-blog-related-card > p:empty {
	display: none;
}


/* ------------------------------------------------------------
   10. RESPONSIVE
   Below 1100px the right rail drops below the content.
   Below 640px the related grid collapses to one column.
   ------------------------------------------------------------ */

@media (max-width: 1100px) {

	.i3-blog-body {
		grid-template-columns: 1fr;
	}

	.i3-blog-body > .i3-blog-rail {
		grid-column: 1;
		grid-row: auto;
		position: static;
		width: 100%;
		margin-top: var(--i3-space-7);
	}

	.i3-blog-hero-inner {
		grid-template-columns: 1fr;
		gap: var(--i3-space-5);
	}

	.i3-blog-toc {
		position: static;
	}

}

@media (max-width: 640px) {

	.i3-blog-related-cards {
		grid-template-columns: 1fr;
	}

	.i3-blog-hero h1 {
		font-size: 1.75rem;
	}

	.i3-blog-card-cta {
		padding: var(--i3-space-5) var(--i3-space-4);
	}

}


/* ============================================================
   END of i3-blog.css
   ============================================================ */