/**
 * Blog listing (/blog/) — built from the client's Figma.
 *
 * Scoped under .sc-blog for the same reason as the homepage: the 35 legacy
 * pages and 800+ posts still render through parent BuddyBoss styles, so a
 * global reset would break them.
 *
 * Sizes were measured off the supplied design against its 1440 frame. The
 * content band is the same 1176px the header and footer use:
 *     1176 = 776 (grid) + 100 (gap) + 300 (sidebar)
 * which makes a card (776 - 28) / 2 = 374px wide.
 *
 * Loaded by seniorcare_template_slug(), which maps is_home()/is_archive()/
 * is_search() to "archive". Everything below is nested under .sc-blog, so
 * archives that are not redesigned yet are untouched.
 */

/* The BuddyBoss page wrappers constrain and pad their content — css/wordpress.css
   sets "body .site { max-width: 1040px }", which squeezed this layout 200px
   narrower than the header and footer. Lifted here the same way the homepage
   and legal templates lift it.

   Scoped to .blog (the posts page) on purpose, NOT to every request this
   stylesheet loads on: category, tag, author and search archives still render
   through parent templates and DO need those wrappers. */
.blog #main-wrap,
.blog #inner-wrap,
.blog #page,
.blog #main {
	width: 100%;
	max-width: none;
	margin: 0;
	padding: 0;
	background: none;
	border: 0;
	box-shadow: none;
}

/* ------------------------------------------------------------- foundation */
.sc-blog {
	--sc-blog-side: 300px;
	--sc-blog-gap: 100px;
	--sc-blog-card-gap: 28px;
	--sc-blog-line: #e8ecf3;
	--sc-blog-field: #dfe4ec;
	--sc-blog-placeholder: #9aa4b2;

	padding-block: 88px 80px;
	background: var(--sc-surface);
	font-family: var(--sc-font-body);
	font-size: var(--sc-fs-base);
	line-height: var(--sc-lh-normal);
	color: var(--sc-text-body);
	-webkit-font-smoothing: antialiased;
}

.sc-blog *,
.sc-blog *::before,
.sc-blog *::after {
	box-sizing: border-box;
}

.sc-blog img {
	display: block;
	max-width: 100%;
	height: auto;
}

.sc-blog ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

/* :where() so this reset carries ZERO specificity. Written as ".sc-blog h1"
   it scored (0,1,1) and silently outranked every (0,1,0) component class
   below — every heading margin computed to 0 and the headings sat on top of
   the text under them. Keep :where() here; component rules must win. */
.sc-blog :where(h1, h2, h3) {
	margin: 0;
	font-family: var(--sc-font-heading);
	font-weight: var(--sc-fw-bold);
	color: var(--sc-navy);
}

.sc-blog p {
	margin: 0;
}

.sc-blog a {
	text-decoration: none;
}

.sc-blog :focus-visible {
	outline: 2px solid var(--sc-focus);
	outline-offset: 3px;
	border-radius: var(--sc-radius-sm);
}

/* ----------------------------------------------------------------- layout */
.sc-blog__layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr) var(--sc-blog-side);
	column-gap: var(--sc-blog-gap);
	align-items: start;
}

.sc-blog__main {
	min-width: 0;
}

.sc-blog__side {
	display: grid;
	gap: 36px;
	min-width: 0;
}

/* ------------------------------------------------------------------- head */
.sc-blog__head {
	margin-bottom: 32px;
}

.sc-blog__title {
	margin: 0 0 16px;
	font-size: 42px;
	line-height: 1.15;
	letter-spacing: -0.01em;
}

/*
 * Introduction above the results. Sits between the heading and the count so
 * the page reads: what this is -> how to use it -> what you are looking at.
 * Capped at 62ch: the cards below run to 776px, and a full-width paragraph at
 * this size is a longer line than is comfortable to read.
 */
.sc-blog__intro {
	max-width: 62ch;
	margin-bottom: 20px;
	color: var(--sc-text-body);
	font-size: 17px;
	line-height: 1.7;
}

/*
 * ⚠️ Written .sc-blog .sc-blog__intro p, not .sc-blog__intro p.
 *
 * Line 86 of this file is `.sc-blog p { margin: 0 }`, which scores (0,1,1) and
 * beats any single-class rule — the same trap that flattened every heading
 * margin here once already. Two classes takes this to (0,2,0) so it wins, the
 * way front-page.css does it. Verified with getComputedStyle, not by reading
 * the CSS: it first shipped as :where(p) and computed to 0px.
 */
.sc-blog .sc-blog__intro p {
	margin: 0 0 14px;
}

.sc-blog .sc-blog__intro p:last-child {
	margin-bottom: 0;
}

.sc-blog__count {
	font-size: 17px;
	line-height: 1.5;
	color: var(--sc-text-body);
}

.sc-blog__count-num {
	font-weight: var(--sc-fw-bold);
	color: var(--sc-text);
}

.sc-blog__count-term {
	font-weight: var(--sc-fw-semibold);
	color: var(--sc-orange);
}

/* ------------------------------------------------------------- card grid */
.sc-blog__grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	column-gap: var(--sc-blog-card-gap);
	row-gap: 32px;
}

.sc-bcard {
	display: flex;
	flex-direction: column;
	overflow: hidden;
	background: var(--sc-surface);
	border: 1px solid var(--sc-blog-line);
	border-radius: var(--sc-radius);
	box-shadow: 0 1px 2px rgba(16, 26, 43, 0.04);
	transition: box-shadow var(--sc-transition), transform var(--sc-transition);
}

.sc-bcard:hover {
	box-shadow: 0 10px 28px rgba(30, 58, 138, 0.10);
	transform: translateY(-2px);
}

.sc-bcard__media {
	display: block;
	aspect-ratio: 16 / 10;
	overflow: hidden;
	background: var(--sc-surface-blue);
}

.sc-bcard__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Drawn instead of leaving a hole when a post has no featured image. */
.sc-bcard__media-empty {
	display: block;
	width: 100%;
	height: 100%;
	background: linear-gradient(135deg, var(--sc-surface-blue), var(--sc-surface-soft));
}

.sc-bcard__body {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	padding: 20px;
}

/* ------------------------------------------------------------- card meta */
/* Stays on ONE line, as in the design. The design's categories are short
   ("MEDICAL ALERTS"), but real ones run to "Alzheimer's/Dementia/Memory Care";
   wrapping pushed the title down and knocked it out of line with the card
   beside it. The date is protected and the category truncates instead. */
.sc-bcard__meta {
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	gap: 8px;
	min-width: 0;
	line-height: 1.4;
}

.sc-bcard__cat {
	overflow: hidden;
	min-width: 0;
	font-size: 12px;
	font-weight: var(--sc-fw-bold);
	letter-spacing: 0.06em;
	text-transform: uppercase;
	white-space: nowrap;
	text-overflow: ellipsis;
	color: var(--sc-navy);
}

.sc-bcard__cat:hover,
.sc-bcard__cat:focus-visible {
	color: var(--sc-orange);
}

.sc-bcard__dot {
	flex: none;
	color: #c3cbd8;
	font-size: 12px;
}

.sc-bcard__date {
	display: inline-flex;
	flex: none;
	align-items: center;
	gap: 6px;
	font-size: 13px;
	white-space: nowrap;
	color: var(--sc-text-muted);
}

.sc-bcard__date svg {
	flex: none;
	display: block;
}

/* ------------------------------------------------------------ card title */
.sc-bcard__title {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	/* Reserves the second line so one-line titles do not pull the author row
	   up out of alignment with the neighbouring card. */
	min-height: calc(2em * 1.32);
	margin: 10px 0 16px;
	font-size: 21px;
	line-height: 1.32;
}

.sc-bcard__title a {
	color: inherit;
}

.sc-bcard__title a:hover,
.sc-bcard__title a:focus-visible {
	color: var(--sc-navy-dark);
}

/* ----------------------------------------------------------- card author */
.sc-bcard__author {
	display: flex;
	align-items: center;
	gap: 10px;
	/* auto keeps the row on the card's bottom edge whatever the title height. */
	margin-top: auto;
	padding-top: 14px;
	border-top: 1px solid var(--sc-blog-line);
}

.sc-bcard__avatar {
	display: grid;
	flex: none;
	place-items: center;
	overflow: hidden;
	width: 30px;
	height: 30px;
	border-radius: 50%;
	background: var(--sc-navy-tint);
	color: var(--sc-navy);
	font-size: 13px;
	font-weight: var(--sc-fw-bold);
	line-height: 1;
	text-transform: uppercase;
}

.sc-bcard__avatar img {
	width: 100%;
	height: 100%;
	border-radius: 50%;
	object-fit: cover;
}

.sc-bcard__who {
	min-width: 0;
}

.sc-bcard__name {
	display: block;
	font-size: 14px;
	font-weight: var(--sc-fw-semibold);
	line-height: 1.3;
	color: var(--sc-text);
}

.sc-bcard__role {
	display: block;
	margin-top: 2px;
	font-size: 12px;
	line-height: 1.4;
	color: var(--sc-text-muted);
}

/* --------------------------------------------------------- sidebar cards */
.sc-swidget {
	padding: 24px;
	background: var(--sc-surface);
	border: 1px solid var(--sc-blog-line);
	border-radius: var(--sc-radius-lg);
	box-shadow: 0 1px 2px rgba(16, 26, 43, 0.04);
}

.sc-swidget__title {
	margin: 0 0 20px;
	font-size: 21px;
	line-height: 1.25;
}

/* -------------------------------------------------------- search widget */
.sc-bsearch {
	display: grid;
	gap: 24px;
}

.sc-field {
	position: relative;
	display: block;
}

.sc-field__icon,
.sc-field__chev {
	position: absolute;
	top: 50%;
	display: flex;
	transform: translateY(-50%);
	pointer-events: none;
}

.sc-field__icon {
	left: 14px;
	color: var(--sc-blog-placeholder);
}

.sc-field__chev {
	right: 12px;
	color: var(--sc-text-muted);
}

.sc-blog input[type="search"],
.sc-blog select {
	width: 100%;
	height: 44px;
	margin: 0;
	padding: 0 14px;
	border: 1px solid var(--sc-blog-field);
	border-radius: var(--sc-radius-sm);
	background: var(--sc-surface);
	box-shadow: none;
	font-family: var(--sc-font-body);
	font-size: 15px;
	line-height: 1.4;
	color: var(--sc-text);
	-webkit-appearance: none;
	appearance: none;
}

.sc-blog input[type="search"] {
	padding-left: 42px;
}

.sc-blog input[type="search"]::-webkit-search-cancel-button {
	-webkit-appearance: none;
	appearance: none;
}

.sc-blog input[type="search"]::placeholder {
	color: var(--sc-blog-placeholder);
	opacity: 1;
}

.sc-blog select {
	padding-right: 40px;
	cursor: pointer;
}

.sc-blog input[type="search"]:focus,
.sc-blog select:focus {
	outline: none;
	border-color: var(--sc-navy);
	box-shadow: 0 0 0 3px rgba(30, 58, 138, 0.12);
}

.sc-bsearch__submit {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 44px;
	margin: 0;
	padding: 0 16px;
	border: 0;
	border-radius: var(--sc-radius-sm);
	background: var(--sc-orange);
	color: var(--sc-text-invert);
	font-family: var(--sc-font-body);
	font-size: 15px;
	font-weight: var(--sc-fw-bold);
	line-height: 1;
	cursor: pointer;
	transition: background var(--sc-transition);
}

.sc-bsearch__submit:hover,
.sc-bsearch__submit:focus-visible {
	background: var(--sc-orange-dark);
	color: var(--sc-text-invert);
}

/* ------------------------------------------------------- related widget */
.sc-related {
	display: grid;
	gap: 28px;
}

.sc-related__item {
	display: grid;
	grid-template-columns: 58px minmax(0, 1fr);
	gap: 14px;
	align-items: start;
}

.sc-related__thumb {
	display: block;
	overflow: hidden;
	width: 58px;
	height: 46px;
	border-radius: 8px;
	background: var(--sc-surface-blue);
}

.sc-related__thumb img,
.sc-related__thumb-empty {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.sc-related__thumb-empty {
	background: linear-gradient(135deg, var(--sc-surface-blue), var(--sc-surface-soft));
}

.sc-related__title {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	margin: 0;
	font-size: 14px;
	font-weight: var(--sc-fw-semibold);
	line-height: 1.35;
}

.sc-related__title a {
	color: inherit;
}

.sc-related__title a:hover,
.sc-related__title a:focus-visible {
	color: var(--sc-orange);
}

.sc-related__meta {
	margin-top: 6px;
	font-size: 12px;
	line-height: 1.3;
	color: var(--sc-text-muted);
}

/* ------------------------------------------------------------ empty state */
.sc-blog__empty {
	padding: 48px 24px;
	border: 1px dashed var(--sc-blog-line);
	border-radius: var(--sc-radius);
	text-align: center;
}

.sc-blog__empty-title {
	margin-bottom: 8px;
	font-family: var(--sc-font-heading);
	font-size: 21px;
	font-weight: var(--sc-fw-bold);
	color: var(--sc-navy);
}

.sc-blog__empty-text {
	font-size: 15px;
	color: var(--sc-text-muted);
}

.sc-blog__empty-reset {
	display: inline-block;
	margin-top: 20px;
	padding: 11px 22px;
	border-radius: var(--sc-radius-sm);
	background: var(--sc-orange);
	color: var(--sc-text-invert);
	font-size: 15px;
	font-weight: var(--sc-fw-bold);
}

.sc-blog__empty-reset:hover,
.sc-blog__empty-reset:focus-visible {
	background: var(--sc-orange-dark);
	color: var(--sc-text-invert);
}

/* ------------------------------------------------------------ pagination */
/* Not in the supplied design — added because the blog holds 800+ posts.
   Palette and radii follow the cards so it reads as part of the same page. */
.sc-blogpager {
	margin-top: 40px;
}

.sc-blogpager__list {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	align-items: center;
	justify-content: center;
}

.sc-blogpager__item .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 40px;
	height: 40px;
	padding: 0 12px;
	border: 1px solid var(--sc-blog-line);
	border-radius: var(--sc-radius-sm);
	background: var(--sc-surface);
	font-size: 14px;
	font-weight: var(--sc-fw-medium);
	color: var(--sc-navy);
	transition: background var(--sc-transition), border-color var(--sc-transition), color var(--sc-transition);
}

.sc-blogpager__item .page-numbers:hover,
.sc-blogpager__item .page-numbers:focus-visible {
	border-color: var(--sc-navy);
	background: var(--sc-navy-tint);
}

.sc-blogpager__item .page-numbers.current {
	border-color: var(--sc-navy);
	background: var(--sc-navy);
	color: var(--sc-text-invert);
}

.sc-blogpager__item .page-numbers.dots {
	border-color: transparent;
	background: none;
	color: var(--sc-text-muted);
}

/* ----------------------------------------------------------- breakpoints */

/* Laptop: the shell gutter already tightens at this width, so pull the column
   gap in with it rather than letting the cards shrink first. */
@media (max-width: 1240px) {
	.sc-blog {
		--sc-blog-gap: 56px;
	}
}

@media (max-width: 1024px) {
	.sc-blog {
		--sc-blog-gap: 40px;
		--sc-blog-side: 272px;
		padding-block: 64px;
	}

	.sc-blog__title {
		font-size: 36px;
	}
}

/* Tablet: the sidebar no longer earns a column of its own, so it moves under
   the grid as two cards side by side instead of one tall stack. */
@media (max-width: 900px) {
	.sc-blog__layout {
		grid-template-columns: minmax(0, 1fr);
		row-gap: 40px;
	}

	.sc-blog__side {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 24px;
		/* The two cards differ in height; stretching would leave the shorter
		   one with a block of dead space under its button. */
		align-items: start;
	}
}

@media (max-width: 768px) {
	.sc-blog {
		--sc-blog-card-gap: 20px;
		padding-block: 48px 56px;
	}

	.sc-blog__head {
		margin-bottom: 24px;
	}

	.sc-blog__title {
		font-size: 32px;
	}

	.sc-blog__intro {
		margin-bottom: 16px;
		font-size: 16px;
	}

	.sc-blog__grid {
		row-gap: 24px;
	}

	.sc-bcard__title {
		font-size: 19px;
	}
}

@media (max-width: 640px) {
	.sc-blog__grid,
	.sc-blog__side {
		grid-template-columns: minmax(0, 1fr);
	}

	.sc-blog__side {
		gap: 24px;
	}
}

@media (max-width: 480px) {
	.sc-blog {
		padding-block: 36px 44px;
	}

	.sc-blog__title {
		font-size: 28px;
	}

	.sc-blog__count {
		font-size: 15px;
	}

	.sc-swidget {
		padding: 20px;
	}

	.sc-blogpager__item .page-numbers {
		min-width: 36px;
		height: 36px;
		padding: 0 10px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.sc-blog *,
	.sc-blog *::before,
	.sc-blog *::after {
		transition-duration: 0.01ms !important;
	}
}