/*
 * IncubeSocial — Blog archive + single post styles (Adam 2026-07-22).
 * Loaded only on the blog archive/home, single posts, and category/tag
 * archives (see incubesocial_enqueue_blog_assets() in functions.php).
 * Uses design-tokens.css custom properties exclusively for color/type,
 * same convention as pricing.css/how-it-works.css.
 */

/* ---------- Archive: hero ------------------------------------------------ */

/* Tightened 2026-07-23 (Adam: "4 columns... compacted overall"). */
.blog-hero {
	background: var(--color-navy-dark);
	padding-block: 1.75rem;
	text-align: center;
}
.blog-eyebrow {
	font-family: var(--font-body);
	font-weight: 600;
	font-size: 0.8125rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--color-blue-accent);
	margin: 0 0 0.75rem;
}
.blog-h1 {
	font-size: clamp(1.75rem, 4vw, 2.5rem);
	color: #fff;
	margin: 0 0 0.75rem;
	letter-spacing: -0.01em;
}
.blog-sub {
	color: rgba(255, 255, 255, 0.78);
	font-size: 1rem;
	max-width: 560px;
	margin: 0 auto;
}

/* ---------- Archive: card grid -------------------------------------------- */

.blog-grid-section {
	padding-block: 1.75rem;
}
/* 3->4 columns 2026-07-23 (Adam: "I would love to see 4 columns"). Extra
   breakpoint added at 1200px so 4-up doesn't kick in on tablet-width
   screens where cards would get too narrow to read comfortably (the old
   3-col grid only had a 900px/600px step down, nothing between 4 and 3). */
.blog-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 1.25rem;
}
@media (max-width: 1200px) { .blog-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 900px) { .blog-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .blog-grid { grid-template-columns: 1fr; } }

.blog-card {
	border: 1.5px solid #ececf2;
	border-radius: var(--radius-lg, 20px);
	overflow: hidden;
	background: #fff;
	transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}
.blog-card:hover {
	border-color: var(--color-purple-primary);
	box-shadow: 0 8px 24px rgba(108, 58, 237, 0.12);
	transform: translateY(-2px);
}
.blog-card__link {
	display: flex;
	flex-direction: column;
	text-decoration: none;
	color: inherit;
	height: 100%;
}
.blog-card__thumb {
	display: block;
	aspect-ratio: 16 / 10;
	overflow: hidden;
	background: var(--color-grey-light);
}
.blog-card__thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.blog-card__thumb--fallback {
	background: var(--gradient-signature);
}
.blog-card__body {
	display: flex;
	flex-direction: column;
	gap: 0.4rem;
	padding: 1rem;
	flex: 1;
}
.blog-card__title {
	font-family: var(--font-heading);
	font-weight: 800;
	font-size: 0.98rem;
	color: var(--color-navy-dark);
	letter-spacing: -0.01em;
}
.blog-card__excerpt {
	font-size: 0.82rem;
	color: rgba(13, 19, 43, 0.6);
	line-height: 1.45;
	flex: 1;
}
.blog-card__read-more {
	font-size: 0.78rem;
	font-weight: 700;
	color: var(--color-purple-primary);
	margin-top: 0.2rem;
}

.blog-empty {
	text-align: center;
	color: #63677A;
	padding-block: 3rem;
}

.blog-pagination {
	display: flex;
	justify-content: center;
	gap: 0.5rem;
	margin-top: 2rem;
}
.blog-pagination__item a,
.blog-pagination__item span {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 36px;
	height: 36px;
	padding: 0 0.6rem;
	border-radius: var(--radius-sm, 8px);
	border: 1.5px solid #ececf2;
	color: var(--color-navy-dark);
	text-decoration: none;
	font-size: 0.85rem;
	font-weight: 600;
}
.blog-pagination__item .current {
	background: var(--gradient-signature);
	color: #fff;
	border-color: transparent;
}

/* ---------- Single post ---------------------------------------------------- */

.site-content--narrow {
	max-width: 720px;
	margin-inline: auto;
}

/* Bottom padding zeroed 2026-07-23 (Adam: "less the gaps... TOOOO much") --
   was 2rem, stacking with .blog-single__hero-image's OWN 1.5rem top padding
   below plus .blog-single__content's 2rem top padding after that -- three
   padding sources in a row before any real content. hero-image and content
   each supply their own top spacing, so this block only needs top padding. */
.blog-single__head {
	background: var(--color-grey-light);
	padding-block: 2.5rem 0;
}
.blog-single__back {
	display: inline-block;
	font-size: 0.85rem;
	font-weight: 700;
	color: var(--color-purple-primary);
	text-decoration: none;
	margin-bottom: 1rem;
}
.blog-single__back:hover { text-decoration: underline; }
.blog-single__title {
	font-size: clamp(1.75rem, 4vw, 2.5rem);
	color: var(--color-navy-dark);
	margin: 0 0 0.5rem;
	letter-spacing: -0.01em;
}
.blog-single__meta {
	font-size: 0.85rem;
	color: #63677A;
	margin: 0;
}

/* Now holds a real photo (was an oversized SVG glyph floating in empty
   space -- Adam: "replace the svg... with actual stock photos"). Fixed
   width/height 2026-07-23 (Adam: "Thumbnail is tooo big, it should be
   fixed into a fixed height and width for all of them") -- was fluid
   (width:100% inside a 960px container, scaling up to 960x540 on wide
   viewports); now the SAME 720x360 for every post at every viewport
   above the mobile breakpoint, matching the article's own 720px text
   column width instead of stretching wider than the content it sits
   above. */
.blog-single__hero-image {
	margin: 0 auto;
	padding: 1.25rem 1.5rem 0;
	display: flex;
	justify-content: center;
}
.blog-single__hero-image img {
	width: 720px;
	height: 360px;
	max-width: 100%;
	object-fit: cover;
	border-radius: var(--radius-lg, 20px);
	display: block;
}

.blog-single__content {
	padding-block: 1.5rem 2rem;
	font-size: 1.05rem;
	line-height: 1.75;
	color: var(--color-navy-dark);
}
.blog-single__content p { margin: 0 0 1.25rem; }
.blog-single__content h2 {
	font-size: 1.4rem;
	margin: 2rem 0 0.75rem;
	letter-spacing: -0.01em;
}
.blog-single__content h3 {
	font-size: 1.15rem;
	margin: 1.5rem 0 0.5rem;
}
.blog-single__content ul,
.blog-single__content ol {
	margin: 0 0 1.25rem;
	padding-left: 1.25rem;
}
.blog-single__content li { margin-bottom: 0.4rem; }
.blog-single__content strong { font-weight: 700; }

.blog-single__cta {
	background: var(--color-navy-dark);
	border-radius: var(--radius-lg, 20px);
	padding: 2rem;
	text-align: center;
	margin: 1rem 0 3rem;
}
.blog-single__cta-title {
	font-size: 1.3rem;
	color: #fff;
	margin: 0 0 0.5rem;
}
.blog-single__cta-text {
	color: rgba(255, 255, 255, 0.78);
	font-size: 0.95rem;
	max-width: 460px;
	margin: 0 auto 1.25rem;
}
.blog-single__cta-button {
	display: inline-block;
	background: var(--gradient-signature);
	color: #fff;
	padding: 0.75rem 1.75rem;
	border-radius: var(--radius-pill, 999px);
	font-weight: 700;
	font-size: 0.9rem;
	text-decoration: none;
}
.blog-single__cta-button:hover { transform: translateY(-1px); }