/*
 * Blogs listing - visual reproduction of Divi body layout 25424.
 *
 * Values are taken from the Divi CSS the live site still serves:
 *   et-core-unified-cpt-25424.min.css  (module settings)
 *   et-divi-dynamic-tb-25424-tb-112.css + customizer global (Divi defaults)
 * Row/column/gutter maths follow Divi: rows are 80% wide capped at 1080px,
 * and both the hero row and the post grid use gutter width 3 (5.5%).
 */

.eldm-blogs {
	background-color: #fff;
	font-family: 'Noto Sans', Helvetica, Arial, Lucida, sans-serif;
	font-size: 16px;
	font-weight: 300;
	line-height: 1.7em;
	color: #666;
}

.eldm-blogs .eldm-row {
	width: 80%;
	max-width: 1080px;
	margin: 0 auto;
	padding: 30px 0;
	position: relative;
}

/* ---------------------------------------------------------------- hero --- */

.eldm-blogs-hero {
	background-image: linear-gradient(180deg, #1856eb 70%, #ffffff 70%);
	padding: 22px 0 7px;
}

.eldm-blogs-hero .eldm-row--hero {
	display: flex;
	padding-top: 14px;
}

.eldm-blogs-hero .eldm-col {
	width: 47.25%;
	margin-right: 5.5%;
}

.eldm-blogs-hero .eldm-col:last-child {
	margin-right: 0;
}

.eldm-blogs-hero .eldm-col--text {
	align-self: center;
}

.eldm-blogs .eldm-hero-text {
	padding-left: 90px;
	padding-right: 90px;
	color: #F5F5F7;
}

.eldm-blogs .eldm-hero-text h2 {
	margin: 0;
	padding-bottom: 10px;
	font-family: 'Noto Sans', Helvetica, Arial, Lucida, sans-serif;
	font-size: 32px;
	font-weight: 700;
	font-style: italic;
	line-height: 1em;
	color: #F5F5F7;
}

.eldm-blogs .eldm-hero-media {
	display: block;
	width: 80%;
	margin-left: 0;
	text-align: left;
	line-height: 0;
}

.eldm-blogs .eldm-hero-media img {
	display: block;
	width: 100%;
	height: auto;
	max-width: 100%;
}

/* ---------------------------------------------------------------- grid --- */

.eldm-blogs-list {
	padding: 4% 0;
}

/* Three independent stacks, the way salvattore laid the grid out.
   The row is tagged gutter width 2, but Divi never emitted a gutters2 rule for
   three column blog grids, so the live grid actually falls back to gutter
   width 3: columns 29.667% wide, 5.5% apart. */
.eldm-blogs .eldm-blog-grid {
	display: flex;
	column-gap: 5.5%;
	align-items: flex-start;
}

.eldm-blogs .eldm-blog-col {
	flex: 1 1 0;
	min-width: 0;
}

.eldm-blogs .eldm-blog-card {
	border: 1px solid #d8d8d8;
	padding: 19px;
	margin-bottom: 18.539%;
	background-color: #fff;
	word-wrap: break-word;
	color: #716270;
}

.eldm-blogs .eldm-blog-col .eldm-blog-card:last-child {
	margin-bottom: 30px;
}

.eldm-blogs .eldm-thumb {
	position: relative;
	margin: -20px -20px 30px;
	border-radius: 20px;
	overflow: hidden;
}

.eldm-blogs .eldm-thumb-link {
	display: block;
	position: relative;
	line-height: 0;
}

.eldm-blogs .eldm-thumb img {
	display: block;
	width: 100%;
	min-width: 100%;
	max-width: 100%;
	height: auto;
	aspect-ratio: 400 / 250;
	object-fit: cover;
	vertical-align: bottom;
}

.eldm-blogs .eldm-blog-card .entry-title {
	margin: 0;
	padding-bottom: 0;
	font-family: 'Noto Sans', Helvetica, Arial, Lucida, sans-serif;
	font-size: 18px;
	font-weight: 500;
	line-height: 1.3em;
	color: #716270;
}

.eldm-blogs .eldm-blog-card .entry-title a {
	font-family: 'Noto Sans', Helvetica, Arial, Lucida, sans-serif;
	font-weight: 500;
	color: #716270;
	text-decoration: none;
}

/* Divi applied the module's body font settings - uppercase plus a tinted
   underline - to everything in the post content, which here is the read more
   link on its own. show_excerpt was off, so no excerpt is rendered. */
.eldm-blogs .eldm-blog-card .post-content {
	margin-top: 10px;
	font-size: 16px;
	font-weight: 300;
	line-height: 1.7em;
	text-transform: uppercase;
	text-decoration: underline;
	-webkit-text-decoration-color: rgba(25, 85, 237, 0.47);
	text-decoration-color: rgba(25, 85, 237, 0.47);
	color: #716270;
}

.eldm-blogs .eldm-blog-card .post-content * {
	color: #716270;
}

.eldm-blogs .eldm-blog-card .more-link {
	color: #716270;
}

/* ---------------------------------------------------------- pagination --- */

.eldm-blogs .eldm-pagination {
	display: flex;
	justify-content: space-between;
	gap: 20px;
	padding-top: 40px;
	font-size: 16px;
}

.eldm-blogs .eldm-pagination a {
	color: #716270;
	text-decoration: none;
}

.eldm-blogs .eldm-pagination a:hover {
	text-decoration: underline;
}

.eldm-blogs .eldm-not-found {
	font-size: 18px;
	color: #716270;
}

/* -------------------------------------------------------------- tablet --- */

@media only screen and (max-width: 980px) {

	.eldm-blogs-hero .eldm-row--hero {
		display: block;
	}

	.eldm-blogs-hero .eldm-col {
		width: 100%;
		margin-right: 0;
	}

	.eldm-blogs-hero .eldm-col--text {
		margin-bottom: 30px;
	}

	.eldm-blogs .eldm-hero-text {
		padding-left: 0;
		padding-right: 0;
	}

	.eldm-blogs .eldm-hero-media {
		width: 100%;
	}

	.eldm-blogs .eldm-hero-media img {
		width: auto;
		max-width: 100%;
	}

	/* Two columns: drop the salvattore stacks and lay the cards back out in
	   reading order. */
	.eldm-blogs .eldm-blog-col {
		display: contents;
	}

	.eldm-blogs .eldm-blog-grid {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		column-gap: 5.5%;
		row-gap: 45px;
		align-items: start;
	}

	.eldm-blogs .eldm-blog-card,
	.eldm-blogs .eldm-blog-col .eldm-blog-card:last-child {
		order: var(--eldm-order, 0);
		margin-bottom: 0;
	}
}

/* --------------------------------------------------------------- phone --- */

@media only screen and (max-width: 767px) {

	.eldm-blogs .eldm-blog-grid {
		grid-template-columns: 1fr;
	}

	.eldm-blogs .eldm-pagination {
		flex-direction: column;
	}
}

/* ------------------------------------------------------------ wide desk --- */

@media only screen and (min-width: 1350px) {

	.eldm-blogs .eldm-row {
		padding: 27px 0;
	}

	.eldm-blogs-hero .eldm-row--hero {
		padding-top: 14px;
	}

	.eldm-blogs-list {
		padding: 54px 0;
	}
}