/* =====================================================================
   Dual-Blog page template
   Uses the theme's default Open Sans — no font-family declarations here
   so everything inherits from the site's base styles.
   ===================================================================== */

.db-page { background: #fff; }

/* ---------- Blog grid section (used twice) ---------- */
.db-grid { padding: 80px 0; }
/* Subtle alternating backgrounds so the two grids feel visually separated
   from the colored feature block between them. The second-position blog
   gets the off-white tint regardless of which CPT it is. */
.db-grid--green { background: #f7f9fa; }

.db-grid__header {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 24px;
	margin-bottom: 36px;
}
.db-grid__titles {
	max-width: 720px;
}
.db-grid__heading {
	margin: 0;
	font-size: 42px;
	font-weight: 700;
	line-height: 1.1;
	color: #1a1a1a;
}
.db-grid__intro {
	margin: 12px 0 0;
	font-size: 16px;
	line-height: 1.55;
	color: #555;
}
.db-grid__browse {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 12px 24px;
	background: #2f6d3a;        /* matches the dark-green button in the mockup */
	color: #fff;
	font-weight: 600;
	font-size: 14px;
	border-radius: 4px;
	text-decoration: none;
	white-space: nowrap;
}
.db-grid__browse:hover,
.db-grid__browse:focus {
	background: #25552d;
	color: #fff;
	text-decoration: none;
}

.db-grid__body {
	display: grid;
	grid-template-columns: 1fr;
	gap: 48px;
	align-items: stretch;   /* both columns take the full row height */
}
@media (min-width: 900px) {
	.db-grid__body {
		grid-template-columns: 1fr 1fr;
		gap: 56px;
	}
}

/* -- Featured (left column) -- */
.db-grid__featured {
	display: block;
	color: inherit;
	text-decoration: none;
}
.db-grid__featured:hover,
.db-grid__featured:focus {
	color: inherit;
	text-decoration: none;
}
.db-grid__featured:hover .db-grid__featured-art { transform: translateY(-2px); }

.db-grid__featured-art {
	display: block;
	width: 100%;
	aspect-ratio: 1 / 1;
	background-color: #eaeaea;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	border-radius: 8px;
	transition: transform 0.2s ease;
}
@supports not (aspect-ratio: 1) {
	.db-grid__featured-art { height: 0; padding-top: 100%; }
}

.db-grid__featured-title {
	margin: 20px 0 0;
	font-size: 28px;
	font-weight: 700;
	line-height: 1.25;
	color: #1a1a1a;
}

/* -- Small list (right column) -- */
/* The list column matches the featured column's height. Each list item is
   an equal-height flex slot, so the dividers between them fall at 1/3 and
   2/3 of the column — perfectly even regardless of card content height. */
.db-grid__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	align-self: stretch;
	height: 100%;
	min-height: 100%;
	gap: 0;
}
.db-grid__list-item {
	position: relative;
	flex: 1 1 0;               /* equal-size slots */
	display: flex;
	align-items: center;       /* card centered inside its slot */
}
/* Hairline divider at the boundary between slots (top edge of each item
   after the first). Because slots are equal height, these dividers are
   evenly spaced. */
.db-grid__list-item + .db-grid__list-item::before {
	content: '';
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	height: 1px;
	background: #d9dfe3;
}

.db-grid__small {
	display: grid;
	grid-template-columns: 200px 1fr;
	gap: 22px;
	align-items: center;
	color: inherit;
	text-decoration: none;
}
.db-grid__small:hover,
.db-grid__small:focus {
	color: inherit;
	text-decoration: none;
}
.db-grid__small:hover .db-grid__small-art { transform: translateY(-2px); }
.db-grid__small-art {
	display: block;
	width: 200px;
	aspect-ratio: 4 / 3;
	background-color: #eaeaea;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	border-radius: 6px;
	transition: transform 0.2s ease;
}
@supports not (aspect-ratio: 1) {
	.db-grid__small-art { height: 150px; }
}
.db-grid__small-title {
	display: block;
	margin: 0;
	font-size: 20px;
	font-weight: 700;
	line-height: 1.3;
	color: #1a1a1a;
}

/* ---------- Featured mid-block (image left, copy right) ---------- */
.db-feature {
	padding: 60px 0;
	background: #2ca8e0;
	color: #fff;
}
.db-feature__inner {
	display: grid;
	grid-template-columns: 1fr;
	gap: 30px;
	align-items: center;
}
@media (min-width: 820px) {
	.db-feature__inner {
		grid-template-columns: 5fr 7fr;
		gap: 50px;
	}
}

.db-feature__media { display: flex; justify-content: center; }
.db-feature__image {
	display: block;
	width: 100%;
	max-width: 360px;
	aspect-ratio: 3 / 4;
	background-color: rgba(255, 255, 255, 0.12);
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	border-radius: 8px;
	box-shadow: 0 14px 40px rgba(0, 0, 0, 0.18);
}
@supports not (aspect-ratio: 1) {
	.db-feature__image { height: 0; padding-top: 133.33%; }
}

.db-feature__copy { max-width: 640px; }
.db-feature__heading {
	margin: 0 0 16px;
	font-size: 34px;
	font-weight: 700;
	line-height: 1.2;
	color: #fff;
}
.db-feature__text {
	font-size: 16px;
	line-height: 1.6;
	color: rgba(255, 255, 255, 0.95);
}
.db-feature__text p { margin: 0 0 12px; }
.db-feature__text p:last-child { margin-bottom: 0; }

.db-feature__button {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin-top: 24px;
	padding: 14px 28px;
	background: #fff;
	color: #1a1a1a;
	font-weight: 700;
	font-size: 15px;
	border-radius: 4px;
	text-decoration: none;
}
.db-feature__button:hover,
.db-feature__button:focus {
	background: #f3f3f3;
	color: #1a1a1a;
	text-decoration: none;
}

/* Mobile tweaks */
@media (max-width: 620px) {
	.db-grid { padding: 55px 0; }
	.db-grid__heading { font-size: 32px; }
	.db-grid__featured-title { font-size: 22px; }
	.db-grid__header { flex-direction: column; gap: 16px; }
	.db-grid__small { grid-template-columns: 120px 1fr; gap: 14px; }
	.db-grid__small-art { width: 120px; aspect-ratio: 4 / 3; }
	.db-grid__small-title { font-size: 16px; }
	.db-feature { padding: 50px 0; }
	.db-feature__heading { font-size: 26px; }
}