/**
 * simplydwell/blog-posts — "Explore Our Stories" blog section (Figma).
 *
 * A light #FAF8F5 section (80px vertical padding, 64px gaps): a centered header
 * (eyebrow #D46F35, two-tone Lexend heading, #737A87 desc, 78x3 gold line) above a
 * responsive grid of post cards. Each card: a 384x283 image under a 25% black wash,
 * then a short gold accent line beside the title (Lexend 700 18/28), an orange date,
 * a 4-line excerpt and a "Read more" arrow link. Below the grid, numbered pagination
 * with Previous/Next chevrons (active page/next #D46F35, other pages #DCA23B, a
 * disabled prev arrow #A5A7AB) — built and driven by view.js.
 *
 * The theme's "Lexend" @font-face is wired to vollkorn.woff2 (serif), so we register
 * the real Lexend file under our own name (SDLexend) and use that.
 */

@font-face {
	font-family: "SDLexend";
	src: url( "../../assets/fonts/lexend-latin-300-800.woff2" ) format( "woff2" );
	font-weight: 300 800;
	font-style: normal;
	font-display: swap;
}

.sd-bp {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 64px;
	box-sizing: border-box;
	padding: var( --sd-bp-pad, 80px ) clamp( 20px, 6vw, 120px );
	background: var( --sd-bp-bg, #FAF8F5 );
	font-family: var( --sd-bp-font, 'SDLexend', 'Helvetica Neue', Arial, sans-serif );
}

.sd-bp * {
	box-sizing: border-box;
}

/* ── Header ──────────────────────────────────────────────────────────────────── */
.sd-bp__head {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 32px;
	width: 100%;
	max-width: 794px;
	text-align: center;
}

.sd-bp__tag {
	margin: 0;
	font-weight: 700;
	font-size: var( --sd-bp-tagsize, 12px );
	line-height: 1.33;
	letter-spacing: 0.17em;
	text-transform: uppercase;
	color: var( --sd-bp-tag, #D46F35 );
}

.sd-bp__heading {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: 16px;
	margin: 0;
	font-weight: 700;
	font-size: var( --sd-bp-hsize, 60px );
	line-height: 1;
	color: var( --sd-bp-hcolor, #1F242E );
}

.sd-bp__accent {
	white-space: nowrap;
}

.sd-bp__desc {
	margin: 0;
	font-weight: 500;
	font-size: var( --sd-bp-dsize, 16px );
	line-height: 1.625;
	color: var( --sd-bp-dcolor, #737A87 );
	overflow-wrap: break-word;
}

.sd-bp__line {
	display: block;
	width: var( --sd-bp-line-len, 78px );
	height: var( --sd-bp-line-thick, 3px );
	background: var( --sd-bp-line, #DCA23B );
	border-radius: 2px;
}

/* ── Post grid ───────────────────────────────────────────────────────────────── */
.sd-bp__grid {
	display: grid;
	grid-template-columns: repeat( var( --sd-bp-cols, 3 ), minmax( 0, 1fr ) );
	column-gap: 24px;
	row-gap: 64px;
	width: 100%;
	max-width: 1440px;
}

.sd-bp__card {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 24px;
	overflow: hidden; /* clip the image zoom on hover */
	text-decoration: none;
}

.sd-bp__card[hidden] {
	display: none;
}

/* Whole-card click target; the visible "Read more" is a decorative duplicate. */
.sd-bp__card-overlay {
	position: absolute;
	inset: 0;
	z-index: 1;
}

.sd-bp__media {
	display: block;
	width: 100%;
	aspect-ratio: 384 / 283;
	background-color: #1F242E;
	background-position: center;
	background-size: cover;
	background-repeat: no-repeat;
	transition: transform 0.4s ease;
}

.sd-bp__card:hover .sd-bp__media {
	transform: scale( 1.04 );
}

/* Body: a short vertical gold accent line beside the text column (Figma). */
.sd-bp__body {
	display: flex;
	flex-direction: row;
	align-items: flex-start;
	gap: 16px;
}

.sd-bp__vline {
	flex: none;
	width: 3px;
	height: 64px;
	background: #DCA23B;
}

.sd-bp__text {
	display: flex;
	flex-direction: column;
	gap: 16px;
	min-width: 0;
}

.sd-bp__title {
	margin: 0;
	font-weight: 700;
	font-size: 18px;
	line-height: 28px;
	color: #1F242E;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	overflow-wrap: break-word;
	transition: color 0.2s ease;
}

.sd-bp__card:hover .sd-bp__title {
	color: #D46F35;
}

.sd-bp__date {
	margin: 0;
	font-weight: 700;
	font-size: 12px;
	line-height: 16px;
	color: #D46F35;
}

.sd-bp__excerpt {
	margin: 0;
	font-weight: 500;
	font-size: 16px;
	line-height: 26px;
	color: #737A87;
	display: -webkit-box;
	-webkit-line-clamp: 4;
	-webkit-box-orient: vertical;
	overflow: hidden;
	overflow-wrap: break-word;
}

.sd-bp__readmore {
	position: relative;
	z-index: 2; /* sits above the overlay so it is independently clickable */
	align-self: flex-start;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-weight: 700;
	font-size: 14px;
	line-height: 20px;
	color: #D46F35;
	text-decoration: none;
}

.sd-bp__readmore-icon {
	transition: transform 0.15s ease;
}

.sd-bp__card:hover .sd-bp__readmore,
.sd-bp__readmore:hover,
.sd-bp__readmore:focus-visible {
	gap: 12px;
	outline: none;
}

.sd-bp__card:hover .sd-bp__readmore-icon {
	transform: translateX( 3px );
}

/* ── Pagination (built by view.js) ───────────────────────────────────────────── */
.sd-bp__pagination {
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
	gap: 16px;
	flex-wrap: wrap;
}

.sd-bp__pagination[hidden] {
	display: none;
}

.sd-bp__page-arrow {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 20px;
	height: 20px;
	padding: 0;
	border: 0;
	background: transparent;
	color: #D46F35;
	cursor: pointer;
	transition: color 0.15s ease, opacity 0.15s ease;
}

.sd-bp__page-arrow:hover:not( :disabled ),
.sd-bp__page-arrow:focus-visible:not( :disabled ) {
	color: #1F242E;
	outline: none;
}

.sd-bp__page-arrow:disabled {
	color: #A5A7AB;
	cursor: default;
}

.sd-bp__page-num {
	padding: 0 2px;
	border: 0;
	background: transparent;
	font-family: inherit;
	font-weight: 700;
	font-size: 14px;
	line-height: 20px;
	color: #DCA23B;
	cursor: pointer;
	transition: color 0.15s ease;
}

.sd-bp__page-num:hover,
.sd-bp__page-num:focus-visible {
	color: #D46F35;
	outline: none;
}

.sd-bp__page-num.is-active {
	color: #D46F35;
	cursor: default;
}

.sd-bp__page-ellipsis {
	font-weight: 700;
	font-size: 14px;
	line-height: 20px;
	color: #A5A7AB;
}

/* ── Responsive ──────────────────────────────────────────────────────────────── */

/* Tablet / iPad landscape: drop to a two-column grid. */
@media ( max-width: 1024px ) {
	.sd-bp {
		gap: 48px;
		padding: clamp( 48px, 8vw, 80px ) clamp( 20px, 5vw, 48px );
	}
	.sd-bp__grid {
		grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
		column-gap: 20px;
		row-gap: 48px;
	}
	.sd-bp__heading {
		font-size: clamp( 36px, 6vw, 60px );
	}
}

/* iPad portrait / small tablets: keep two columns but ease the gaps so the cards
   and the vertical accent line don't get cramped. */
@media ( max-width: 820px ) {
	.sd-bp {
		gap: 44px;
	}
	.sd-bp__grid {
		column-gap: 16px;
		row-gap: 44px;
	}
	.sd-bp__body {
		gap: 12px;
	}
	.sd-bp__vline {
		height: 56px;
	}
}

/* Phones: single column, tighter rhythm, and a larger pagination touch target. */
@media ( max-width: 600px ) {
	.sd-bp {
		gap: 40px;
		padding: 40px 20px;
	}
	.sd-bp__head {
		gap: 24px;
	}
	.sd-bp__grid {
		grid-template-columns: minmax( 0, 1fr );
		column-gap: 0;
		row-gap: 40px;
	}
	.sd-bp__heading {
		font-size: clamp( 30px, 9vw, 46px );
		gap: 4px 12px;
	}
	.sd-bp__card {
		gap: 20px;
	}
	.sd-bp__pagination {
		gap: 8px;
	}
	/* Bigger, easier-to-tap arrows without changing the icon size. */
	.sd-bp__page-arrow {
		width: 40px;
		height: 40px;
	}
	.sd-bp__page-num {
		min-width: 28px;
		min-height: 32px;
		padding: 0 4px;
	}
}

@media ( prefers-reduced-motion: reduce ) {
	.sd-bp__media,
	.sd-bp__title,
	.sd-bp__readmore,
	.sd-bp__readmore-icon,
	.sd-bp__page-arrow,
	.sd-bp__page-num {
		transition: none;
	}
	.sd-bp__card:hover .sd-bp__media {
		transform: none;
	}
}

/* High-specificity override: beat the theme's serif heading !important rule. */
.sd-bp .sd-bp__head .sd-bp__heading,
.sd-bp .sd-bp__head .sd-bp__heading .sd-bp__word,
.sd-bp .sd-bp__head .sd-bp__heading .sd-bp__accent,
.sd-bp .sd-bp__head .sd-bp__tag,
.sd-bp .sd-bp__head .sd-bp__desc,
.sd-bp .sd-bp__card .sd-bp__title,
.sd-bp .sd-bp__card .sd-bp__date,
.sd-bp .sd-bp__card .sd-bp__excerpt,
.sd-bp .sd-bp__card .sd-bp__readmore {
	font-family: var( --sd-bp-font, 'SDLexend', 'Helvetica Neue', Arial, sans-serif ) !important;
}