/* ==========================================================================
   Highland Blog Shortcode - styling
   These first rules are pulled straight from Highland's live Divi
   Customizer output (found in the page source), so headings/links/post
   type should already match the site without any changes needed.
   ========================================================================== */

.highland-blog-grid h2,
.highland-blog-grid article h2 {
	font-size: 26px;
	color: #ed1c27;
}

.highland-blog-grid a {
	color: #ed1c27;
}

.highland-blog-grid article p,
body .et_pb_bg_layout_light .highland-blog-grid article p {
	font-size: 18px;
}

/* ==========================================================================
   Grid layout - ported from the Blog Module's own custom CSS (originally
   scoped to "selector"/.et_pb_blog_0, which overrides Divi's default
   Salvattore masonry with a manual CSS Grid). Rescoped here to our own
   unique classes rather than Divi's real et_pb_blog_grid /
   et_pb_salvattore_content classes.

   IMPORTANT: we deliberately do NOT reuse Divi's actual
   "et_pb_blog_grid" / "et_pb_salvattore_content" class names on our
   markup. Those aren't just style hooks - et_pb_salvattore_content is
   the literal integration point for Divi's own masonry JS (Salvattore),
   which was grabbing our shortcode's grid on page load and fighting our
   AJAX-appended posts. Using our own class names keeps us on pure CSS
   with zero interference from Divi's JS.
   ========================================================================== */

.highland-blog-grid article {
	background-color: transparent !important;
	border: none !important;
	display: flex;
	flex-direction: column;
}

.highland-blog-grid .et_pb_image_container {
	background-color: #fff;
	order: 0;
	overflow: hidden;
	aspect-ratio: 8 / 5; /* matches Divi's 400x250 thumbnail crop */
}

.highland-blog-grid article .entry-featured-image-url {
	margin-bottom: 0;
}

.highland-blog-grid .post-meta {
	order: 1;
	font-size: 14px;
	text-transform: uppercase;
	letter-spacing: 0.02em;
	color: #ed1c27;
	margin: 10px 0 4px;
}

.highland-blog-grid .entry-title {
	order: 2;
}

.highland-blog-grid .highland-blog-posts-grid {
	display: flex;
	flex-wrap: wrap;
	gap: 3.787% 111px;
	align-items: flex-start;
}

.highland-blog-grid .highland-blog-posts-grid article {
	break-inside: avoid;
	flex: 0 1 calc(33.333% - 74px); /* 74px accounts for a share of the two 111px column gaps */
	max-width: calc(33.333% - 74px);
	margin-bottom: 55px !important;
}

.highland-blog-grid .highland-blog-posts-grid article .post-content {
	flex: 1;
}

@media (max-width: 980px) {
	.highland-blog-grid .highland-blog-posts-grid article {
		flex-basis: calc(50% - 55.5px);
		max-width: calc(50% - 55.5px);
	}
}

@media (max-width: 600px) {
	.highland-blog-grid .highland-blog-posts-grid article {
		flex-basis: 100%;
		max-width: 100%;
	}
}

.highland-blog-grid {
	overflow: visible;
	margin-bottom: 5%;
}

.highland-blog-grid .et_pb_image_container img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.highland-blog-grid .post-content {
	font-size: 16px;
	line-height: 1.5;
	margin-top: 8px;
}

/* ==========================================================================
   Ancestor height override
   Something above this shortcode in the page (a Divi Row, Column, or
   Module - likely inherited from duplicating the original blog module's
   row/column) has an explicit fixed height set, rather than "Auto."
   Combined with overflow:visible above, that lets the grid visually
   bleed out past that box's boundary without the page's actual document
   flow expanding to fit it - which is why the footer was rendering
   underneath/through the grid instead of below it.

   This forces any Divi row/column/module that contains our grid back to
   auto height regardless of what's set on it in the builder, without
   needing to track down the specific module in Divi's settings.
   :has() is supported in current Chrome/Edge/Opera/Safari/Firefox.
   ========================================================================== */

.et_pb_row:has(.highland-blog-grid),
.et_pb_column:has(.highland-blog-grid),
.et_pb_module:has(.highland-blog-grid) {
	height: auto !important;
	min-height: auto !important;
	overflow: visible !important;
}

/* ==========================================================================
   Load More button
   ========================================================================== */

.highland-load-more-wrap {
	text-align: center;
	margin: 40px 0;
}

#highland-load-more {
	cursor: pointer;
	border: none;
	background-color: #ED1C27;
	color: #ffffff;
	border-radius: 0;
}

#highland-load-more[disabled] {
	opacity: 0.5;
	cursor: default;
}