/* ==========================================================================
   TextCRM — Blog (textcrm-blog)
   Responsive post grid that lists WordPress posts and links each card to its
   single post. Layout mirrors the original RewardRace blog grid 1:1; the
   colour system, typography, radius, shadow and hover tokens follow the
   TextCRM design language (Inter, #0b1326 surface, #00f5a0 accent,
   white-tinted glass cards) shared with the Powerful Features / FAQ /
   Pricing widgets.
   ========================================================================== */

.textcrm-blog {
	/* ---- Typography ---- */
	--tcbl-font: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
	--tcbl-fs-h2:  3rem;   /* 48 — inner-page hero base; scales 48→72 @md (see __title) */
	--tcbl-fs-h4:  clamp(1.125rem, 1rem + .5vw, 1.375rem);  /* 18–22 */
	--tcbl-fs-lg:  1.125rem;   /* 18 */
	--tcbl-fs-md:  1rem;       /* 16 */
	--tcbl-fs-sm:  .9375rem;   /* 15 */
	--tcbl-fs-xs:  .8125rem;   /* 13 */
	--tcbl-fs-2xs: .75rem;     /* 12 */
	--tcbl-lh-snug:    1.25;
	--tcbl-lh-relaxed: 1.6;

	/* ---- Radius ---- */
	--tcbl-radius-md:   12px;
	--tcbl-radius-lg:   16px;
	--tcbl-radius-2xl:  24px;
	--tcbl-radius-pill: 9999px;

	/* ---- Motion ---- */
	--tcbl-dur-fast: .2s;
	--tcbl-dur-base: .3s;
	--tcbl-dur-slow: .4s;
	--tcbl-ease-out: cubic-bezier(.16, 1, .3, 1);

	/* ---- Palette (dark = TextCRM default / auto) ---- */
	--tcbl-section-bg:  #0b1326;
	--tcbl-heading:     #ffffff;
	--tcbl-text:        #e5e7eb;
	--tcbl-muted:       #9ca3af;
	--tcbl-subtle:      #6b7280;
	--tcbl-accent:      #00f5a0;
	--tcbl-accent-on:   #04241a;   /* text laid over the mint accent fill */
	--tcbl-accent-tint: rgba(0, 245, 160, .1);
	--tcbl-card-bg:     rgba(15, 23, 42, .6);
	--tcbl-card-border: rgba(255, 255, 255, .08);
	--tcbl-card-shadow: inset 1px 1px 0 rgba(255, 255, 255, .06), 0 1px 2px rgba(0, 0, 0, .3);
	--tcbl-card-shadow-hover: inset 1px 1px 0 rgba(255, 255, 255, .08), 0 16px 40px -16px rgba(0, 0, 0, .5);
	--tcbl-card-border-hover: rgba(0, 245, 160, .3);
	--tcbl-img-bg:      #131b2e;
	--tcbl-eyebrow-bg:     rgba(255, 255, 255, .05);
	--tcbl-eyebrow-border: rgba(255, 255, 255, .1);
	--tcbl-ring:        0 0 0 3px rgba(0, 245, 160, .3);

	--tcbl-cols:        3;
	--tcbl-img-ratio:   16 / 10;

	position: relative;
	font-family: var(--tcbl-font);
	color: var(--tcbl-text);
	background: var(--tcbl-section-bg);
	box-sizing: border-box;
	border-top: 0 !important;
	overflow: hidden;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}
.textcrm-blog *, .textcrm-blog *::before, .textcrm-blog *::after { box-sizing: border-box; }

/* Heading glow — the same teal halo the Pricing hero uses
   (rgba(68,226,205,.15) blurred 120px) so the Blog headline carries the same
   beautiful glow as the other pages. Sits at z-index 0, behind the z-index:1
   __wrap content; the section's overflow:hidden keeps it tidy. */
.textcrm-blog::before {
	content: "";
	position: absolute;
	top: -70px;
	left: 50%;
	transform: translateX(-50%);
	width: min(920px, 100%);
	height: 560px;
	background: rgba(68, 226, 205, 0.19);
	filter: blur(130px);
	border-radius: 9999px;
	pointer-events: none;
	z-index: 0;
}

/* Light variant — clean white surface keeping the mint accent family
   (a darker mint is used for text so it stays legible on white). */
.textcrm-blog--light {
	--tcbl-section-bg:  #ffffff;
	--tcbl-heading:     #0b1326;
	--tcbl-text:        #1f2937;
	--tcbl-muted:       #4b5563;
	--tcbl-subtle:      #6b7280;
	--tcbl-accent:      #00a37a;
	--tcbl-accent-on:   #ffffff;
	--tcbl-accent-tint: rgba(0, 163, 122, .1);
	--tcbl-card-bg:     #ffffff;
	--tcbl-card-border: rgba(11, 19, 38, .1);
	--tcbl-card-shadow: 0 1px 2px rgba(11, 19, 38, .04), 0 6px 18px rgba(11, 19, 38, .04);
	--tcbl-card-shadow-hover: 0 4px 14px rgba(0, 163, 122, .12), 0 12px 32px rgba(11, 19, 38, .08);
	--tcbl-card-border-hover: rgba(0, 163, 122, .35);
	--tcbl-img-bg:      #f1f5f9;
	--tcbl-eyebrow-bg:     rgba(0, 163, 122, .08);
	--tcbl-eyebrow-border: rgba(0, 163, 122, .2);
	--tcbl-ring:        0 0 0 3px rgba(0, 163, 122, .25);
}

/* ===========================================================
   Layout
   =========================================================== */
.textcrm-blog__wrap {
	max-width: 1280px;
	margin: 0 auto;
	/* Top padding clears the site's fixed (sticky) header (~80px) so the
	   heading is never tucked underneath it for logged-out visitors (the
	   admin bar otherwise masks the gap). Matches the inner-page rhythm. */
	padding: clamp(7rem, 4rem + 4vw, 8.5rem) clamp(1.25rem, 3vw, 2.5rem) clamp(3rem, 6vw, 5.5rem);
	position: relative;
	z-index: 1;
}

/* ===========================================================
   Heading block
   =========================================================== */
.textcrm-blog__head {
	margin: 0 auto 3rem;
	max-width: 896px;   /* match the Inner Hero title container so the 72px heading wraps the same way */
	text-align: center;
	display: flex;
	flex-direction: column;
	align-items: center;
}

/* Eyebrow badge — TextCRM pill: white-tinted surface, uppercase label-sm,
   brand-green sparkle + text. */
.textcrm-blog .textcrm-blog__eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 5px 16px;
	background: var(--tcbl-eyebrow-bg);
	border: 1px solid var(--tcbl-eyebrow-border);
	border-radius: var(--tcbl-radius-pill);
	font-size: var(--tcbl-fs-2xs);
	font-weight: 600;
	letter-spacing: .05em;
	text-transform: uppercase;
	color: var(--tcbl-accent);
	margin-bottom: clamp(1.25rem, 2vw, 1.75rem);
}

.textcrm-blog__eyebrow-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 14px;
	height: 14px;
	color: var(--tcbl-accent);
	flex-shrink: 0;
}

/* Hero heading — uses the shared inner-page hero scale (48px mobile → 72px
   md+, matching the Inner Hero / Pricing / Features heroes) so the Blog hero
   is the same size as every other inner page rather than the smaller 30–48px
   content-heading scale it used before. */
.textcrm-blog .textcrm-blog__title {
	font-size: var(--tcbl-fs-h2);
	font-weight: 700;
	letter-spacing: -.03em;
	line-height: 1.2;
	margin: 0;
	color: var(--tcbl-heading);
	text-wrap: balance;
}
.textcrm-blog__title-lead,
.textcrm-blog__title-tail { color: inherit; }
.textcrm-blog .textcrm-blog__title-accent {
	color: var(--tcbl-accent) !important;
	font-weight: 700;
}

.textcrm-blog .textcrm-blog__subtitle {
	max-width: 672px;   /* match the Inner Hero subtitle so line length stays readable */
	margin: 1rem auto 0;
	font-size: var(--tcbl-fs-lg);
	line-height: var(--tcbl-lh-relaxed);
	color: var(--tcbl-muted);
	font-weight: 400;
	text-wrap: pretty;
}

/* ===========================================================
   Post grid
   =========================================================== */
.textcrm-blog__grid {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(var(--tcbl-cols), minmax(0, 1fr));
	gap: clamp(1.25rem, 2.4vw, 2rem);
	align-items: stretch;
}
.textcrm-blog__item {
	display: flex;
	min-width: 0;
}

/* ===========================================================
   Post card — TextCRM glass surface
   =========================================================== */
.textcrm-blog__card {
	position: relative;
	flex: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
	background: var(--tcbl-card-bg);
	border: 1px solid var(--tcbl-card-border);
	border-radius: var(--tcbl-radius-2xl);
	overflow: hidden;
	box-shadow: var(--tcbl-card-shadow);
	-webkit-backdrop-filter: blur(20px);
	backdrop-filter: blur(20px);
	transition:
		transform var(--tcbl-dur-base) var(--tcbl-ease-out),
		box-shadow var(--tcbl-dur-base) var(--tcbl-ease-out),
		border-color var(--tcbl-dur-base) var(--tcbl-ease-out);
}
.textcrm-blog__card:hover {
	transform: translateY(-4px);
	box-shadow: var(--tcbl-card-shadow-hover);
	border-color: var(--tcbl-card-border-hover);
}
/* Keyboard focus surfaces the same affordance as hover. */
.textcrm-blog__card:focus-within {
	border-color: var(--tcbl-accent);
	box-shadow: var(--tcbl-ring);
}

/* ----- Thumbnail ----- */
.textcrm-blog__media {
	position: relative;
	display: block;
	aspect-ratio: var(--tcbl-img-ratio);
	background: var(--tcbl-img-bg);
	overflow: hidden;
}
.textcrm-blog__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform var(--tcbl-dur-slow) var(--tcbl-ease-out);
}
.textcrm-blog__card:hover .textcrm-blog__img { transform: scale(1.04); }

/* Placeholder when a post has no featured image. */
.textcrm-blog__media--empty {
	display: flex;
	align-items: center;
	justify-content: center;
	background: linear-gradient(135deg, rgba(0, 245, 160, .14), rgba(0, 245, 160, .04));
}
.textcrm-blog--light .textcrm-blog__media--empty {
	background: linear-gradient(135deg, rgba(0, 163, 122, .14), rgba(0, 163, 122, .04));
}
.textcrm-blog__media--empty svg {
	width: 38px;
	height: 38px;
	color: var(--tcbl-accent);
	opacity: .55;
}

/* ----- Body ----- */
.textcrm-blog__body {
	display: flex;
	flex-direction: column;
	gap: .75rem;
	padding: clamp(1.1rem, 1.8vw, 1.5rem);
	flex: 1;
}

/* ----- Category badge ----- */
.textcrm-blog__cats {
	display: flex;
	flex-wrap: wrap;
	gap: .5rem;
	margin: 0;
}
.textcrm-blog__cat {
	display: inline-flex;
	align-items: center;
	padding: 4px 10px;
	font-size: var(--tcbl-fs-2xs);
	font-weight: 700;
	letter-spacing: .05em;
	text-transform: uppercase;
	color: var(--tcbl-accent);
	background: var(--tcbl-accent-tint);
	border-radius: var(--tcbl-radius-pill);
	line-height: 1.3;
}

/* ----- Title ----- */
.textcrm-blog .textcrm-blog__card-title {
	font-size: var(--tcbl-fs-h4);
	font-weight: 700;
	letter-spacing: -.02em;
	line-height: var(--tcbl-lh-snug);
	margin: 0;
	color: var(--tcbl-heading);
}
.textcrm-blog .textcrm-blog__card-title a {
	color: inherit;
	text-decoration: none;
	transition: color var(--tcbl-dur-fast) var(--tcbl-ease-out);
}
.textcrm-blog .textcrm-blog__card-title a:hover { color: var(--tcbl-accent); }
/* Stretched link — makes the whole card clickable while keeping
   the accessible link text on the post title. */
.textcrm-blog__card-title a::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
}

/* ----- Excerpt ----- */
.textcrm-blog .textcrm-blog__excerpt {
	font-size: var(--tcbl-fs-sm);
	line-height: var(--tcbl-lh-relaxed);
	color: var(--tcbl-muted);
	margin: 0;
	font-weight: 400;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* ----- Meta row (date • author • read time) ----- */
.textcrm-blog__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .5rem;
	font-size: var(--tcbl-fs-xs);
	color: var(--tcbl-subtle);
	font-weight: 500;
	margin: 0;
}
.textcrm-blog__meta-item {
	display: inline-flex;
	align-items: center;
	gap: 5px;
}
.textcrm-blog__meta-item svg {
	width: 14px;
	height: 14px;
	flex-shrink: 0;
}
.textcrm-blog__meta-sep {
	width: 3px;
	height: 3px;
	border-radius: 50%;
	background: currentColor;
	opacity: .55;
}
.textcrm-blog__avatar {
	width: 20px;
	height: 20px;
	border-radius: 50%;
	object-fit: cover;
	flex-shrink: 0;
}

/* ----- Read more ----- */
.textcrm-blog__more {
	margin-top: auto;
	padding-top: .25rem;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	align-self: flex-start;
	font-size: var(--tcbl-fs-sm);
	font-weight: 700;
	color: var(--tcbl-accent);
	text-decoration: none;
	transition: gap var(--tcbl-dur-fast) var(--tcbl-ease-out);
}
.textcrm-blog__more svg {
	width: 16px;
	height: 16px;
	transition: transform var(--tcbl-dur-fast) var(--tcbl-ease-out);
}
.textcrm-blog__card:hover .textcrm-blog__more { gap: 10px; }
.textcrm-blog__card:hover .textcrm-blog__more svg { transform: translateX(2px); }

/* ===========================================================
   Empty state
   =========================================================== */
.textcrm-blog__empty {
	max-width: 460px;
	margin: 0 auto;
	text-align: center;
	padding: clamp(2.5rem, 6vw, 4rem) 1.5rem;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: .75rem;
}
.textcrm-blog__empty-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	border-radius: var(--tcbl-radius-lg);
	background: var(--tcbl-accent-tint);
	color: var(--tcbl-accent);
}
.textcrm-blog__empty-icon svg { width: 26px; height: 26px; }
.textcrm-blog .textcrm-blog__empty-text {
	font-size: var(--tcbl-fs-md);
	color: var(--tcbl-muted);
	margin: 0;
}

/* ===========================================================
   Pagination
   =========================================================== */
.textcrm-blog__pagination {
	margin-top: clamp(2rem, 4vw, 3.25rem);
	display: flex;
	justify-content: center;
}
.textcrm-blog__pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 40px;
	height: 40px;
	padding: 0 .75rem;
	margin: 0 4px;
	border-radius: var(--tcbl-radius-md);
	border: 1px solid var(--tcbl-card-border);
	background: var(--tcbl-card-bg);
	color: var(--tcbl-text);
	font-size: var(--tcbl-fs-sm);
	font-weight: 600;
	text-decoration: none;
	transition:
		background-color var(--tcbl-dur-fast) var(--tcbl-ease-out),
		border-color var(--tcbl-dur-fast) var(--tcbl-ease-out),
		color var(--tcbl-dur-fast) var(--tcbl-ease-out);
}
.textcrm-blog__pagination a.page-numbers:hover {
	border-color: var(--tcbl-accent);
	color: var(--tcbl-accent);
}
.textcrm-blog__pagination .page-numbers.current {
	background: var(--tcbl-accent);
	border-color: var(--tcbl-accent);
	color: var(--tcbl-accent-on);
}
.textcrm-blog__pagination .page-numbers.dots {
	border-color: transparent;
	background: transparent;
}

/* ===========================================================
   Responsive
   =========================================================== */
@media (max-width: 1024px) {
	.textcrm-blog__grid { --tcbl-cols: 2; }
}

/* md+ — headline scales up to the inner-page display size (72px), matching
   the Inner Hero / Pricing / Features heroes. */
@media (min-width: 768px) {
	.textcrm-blog .textcrm-blog__title {
		font-size: 4.5rem;      /* 72px */
		line-height: 1.1;
		letter-spacing: -.04em;
	}
}

@media (max-width: 640px) {
	.textcrm-blog__wrap {
		padding: clamp(6.5rem, 4rem + 8vw, 7.5rem) clamp(1rem, 5vw, 1.5rem) clamp(2.5rem, 8vw, 4rem);
	}
	.textcrm-blog__head { margin-bottom: 2rem; }
	.textcrm-blog__grid { --tcbl-cols: 1; }
}

/* Small phones — match the Inner Hero's reduced headline (36px). */
@media (max-width: 480px) {
	.textcrm-blog .textcrm-blog__title {
		font-size: 2.25rem;     /* 36px */
		letter-spacing: -.02em;
	}
}

/* Reduced-motion users get no hover lift or zoom. */
@media (prefers-reduced-motion: reduce) {
	.textcrm-blog__card:hover { transform: none; }
	.textcrm-blog__card:hover .textcrm-blog__img { transform: none; }
}