/**
 * Homepage Blog / Latest News.
 *
 * MAM-Homepage-CTA-Blogs-Social-Architecture.md §11-17. Left content
 * column (heading/text/CTA) + 3 photo cards, blogs-texture.jpg background,
 * cyan-bordered cards that darken/grayscale + reveal a "View Details +"
 * button on hover.
 */

.mainsail-blog-section {
	position: relative;
	overflow: hidden;
	padding: max(7.813vw, 50px) 6.25vw;
}

.mainsail-blog-section::before {
	content: "";
	position: absolute;
	z-index: -1;
	inset: 0;
	background: var(--mainsail-blog-bg) 0 0 / cover no-repeat;
	pointer-events: none;
}

.mainsail-blog-section__container {
	display: flex;
	align-items: center;
	max-width: 1600px;
	margin: 0 auto;
}

.mainsail-blog-section__main {
	width: max(20.313vw, 265px);
	max-width: 100%;
	flex-shrink: 0;
}

.mainsail-blog-section__heading {
	margin: 0;
}

.mainsail-blog-section__heading small {
	display: block;
	font-family: "Montserrat", Arial, Helvetica, sans-serif;
	font-size: max(1.25vw, 15px);
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: 0.3em;
	text-transform: uppercase;
	color: #ffffff;
}

.mainsail-blog-section__heading strong {
	display: block;
	margin-top: 10px;
	font-family: "Poiret One", "Montserrat", Arial, sans-serif;
	font-size: max(3.75vw, 30px);
	font-weight: 400;
	line-height: 1.2;
	letter-spacing: 0;
	text-transform: uppercase;
	color: #ffffff;
}

.mainsail-blog-section__text {
	margin: max(2.5vw, 20px) 0 0;
	font-family: var(--global-body-font-family, "Roboto", sans-serif);
	font-size: max(0.875vw, 13px);
	font-weight: 300;
	line-height: 1.9;
	letter-spacing: 0.05em;
	color: #ffffff;
}

/* Overrides .site-button--white's own (cyan) normal-state color — on this
   section's dark texture the CTA text must read white at rest, with no
   underline in either state. Extra class raises specificity above the
   sitewide .site-button.site-button--white rule without !important. */
.mainsail-blog-section__link.site-button.site-button--white {
	color: #ffffff;
	text-decoration: none;
}

/* On hover, the sitewide .site-button--white:hover rule already fills
   the background with the accent color; only the text needs to flip
   to black here (everything else about the sitewide hover state is
   kept as-is). */
.mainsail-blog-section__link.site-button.site-button--white:hover {
	color: #000000;
}

/* display:inline-block is required on the DESKTOP link only: as a plain
   inline <a>, the sitewide rule never sets a display, so its margin-top
   was being ignored by layout (vertical margins don't apply to inline
   boxes), which is what let the button overlap the paragraph above it.
   This must stay scoped to --desktop — applying it via the shared
   .mainsail-blog-section__link class instead outranked (by specificity)
   the .mainsail-blog-section__link--mobile{display:none} rule below and
   forced the mobile button to also render on desktop, next to the cards. */
.mainsail-blog-section__link--desktop.site-button.site-button--white {
	display: inline-block;
}

.mainsail-blog-section__link {
	margin-top: max(2.5vw, 20px);
}

.mainsail-blog-section__link--mobile {
	display: none;
}

/* Card grid */

.mainsail-blog-section__list {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: max(0.375vw, 6px);
	flex-grow: 1;
	margin-left: 7.5vw;
}

@media (max-width: 1199px) {
	.mainsail-blog-section__list {
		margin-left: 5.04vw;
	}
}

.mainsail-blog-card {
	position: relative;
	display: block;
	aspect-ratio: 3 / 4;
	padding: max(1.25vw, 15px);
	border: 1px solid rgba(37, 198, 251, 0.5);
	overflow: hidden;
	text-decoration: none;
}

/* 10px gap between the card's own border/frame and the photo itself —
   the gap shows the card's background (transparent, so the section's
   own dark texture reads through). */
.mainsail-blog-card__image {
	position: absolute;
	inset: 10px;
}

.mainsail-blog-card__image::after {
	content: "";
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0.2);
	transition: background-color 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* :hover scoped to devices with a real hover-capable pointer (a mouse)
   — otherwise tapping a card on a touch device leaves the darkened
   overlay "stuck on" until the visitor taps elsewhere, since there's
   no mouse to move away and clear :hover. :focus-visible (keyboard
   navigation) is unaffected and always applies. */
@media (hover: hover) and (pointer: fine) {
	.mainsail-blog-card:hover .mainsail-blog-card__image::after {
		background: rgba(0, 0, 0, 0.75);
	}
}

.mainsail-blog-card:focus-visible .mainsail-blog-card__image::after {
	background: rgba(0, 0, 0, 0.75);
}

.mainsail-blog-card__image img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: filter 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

@media (hover: hover) and (pointer: fine) {
	.mainsail-blog-card:hover .mainsail-blog-card__image img {
		filter: grayscale(1);
	}
}

.mainsail-blog-card:focus-visible .mainsail-blog-card__image img {
	filter: grayscale(1);
}

.mainsail-blog-card__info {
	position: absolute;
	z-index: 2;
	bottom: 0;
	right: 10px;
	left: 10px;
	margin: 0 0 max(1.25vw, 15px);
	padding: 0 10px max(2.18vw, 20px);
	text-align: left;
	text-transform: uppercase;
	color: #ffffff;
}

.mainsail-blog-card__date {
	display: block;
	font-family: var(--global-body-font-family, "Roboto", sans-serif);
	font-size: max(0.813vw, 10px);
	font-weight: 300;
	line-height: 1;
	letter-spacing: 0.1em;
}

.mainsail-blog-card__title {
	display: -webkit-box;
	margin-top: max(0.375vw, 5px);
	font-family: var(--global-body-font-family, "Roboto", sans-serif);
	font-size: max(0.938vw, 13px);
	font-weight: 700;
	line-height: 1.5;
	letter-spacing: 0.1em;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* Individual card CTA — hidden until hover/focus. */
.mainsail-blog-card__link {
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	height: 0;
	margin-top: 0;
	width: max(12.375vw, 175px);
	max-width: 100%;
	padding: 10px;
	border: 1px solid #25c6fb;
	background: #25c6fb;
	color: #000000;
	font-family: var(--global-body-font-family, "Roboto", sans-serif);
	font-size: max(0.875vw, 10px);
	font-weight: 400;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	transform: scale(0);
	transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
	transition-property: height, transform, margin-top;
}

.mainsail-blog-card:hover .mainsail-blog-card__link,
.mainsail-blog-card:focus-visible .mainsail-blog-card__link {
	height: max(3.625vw, 48px);
	margin-top: max(1.25vw, 15px);
	transform: none;
}

@media (prefers-reduced-motion: reduce) {
	.mainsail-blog-card__image::after,
	.mainsail-blog-card__image img,
	.mainsail-blog-card__link {
		transition: none;
	}
}

@media (max-width: 991px) {
	.mainsail-blog-section {
		padding: 50px 15px;
	}

	.mainsail-blog-section__container {
		display: block;
		max-width: 750px;
		margin: 0 auto;
	}

	.mainsail-blog-section__main {
		width: 500px;
		max-width: 100%;
		margin: 0 auto;
		text-align: center;
	}

	.mainsail-blog-section__list {
		margin: 40px 0 0;
	}

	.mainsail-blog-card__link {
		display: none;
	}

	.mainsail-blog-section__link {
		text-align: center;
	}

	.mainsail-blog-section__link--desktop {
		display: none;
	}

	.mainsail-blog-section__link--mobile {
		display: block;
	}
}

/* Stays full-width/single-column (3 cards don't divide evenly into a
   2-column grid without leaving an empty cell). Instead the card's
   3:4 aspect-ratio — which made a full-width card very tall, letting
   only one show on screen at a time — is swapped for a much shorter
   16:9 ratio, so two cards stack within one phone screen's height. */
@media (max-width: 567px) {
	.mainsail-blog-section__list {
		grid-template-columns: 1fr;
		gap: 10px;
	}

	.mainsail-blog-card {
		aspect-ratio: 16 / 9;
	}
}