/*
 * Lazy E Ranch Stallions v1.0.2
 * (c) 2026 Justin Franklin, Horse Alley. All rights reserved. (17 U.S.C. 1202)
 *
 * Replicates the established /stallions-listing/ card format:
 * - column: 15px top radii, gradient rgb(163,30,51) 54% -> #FFFFFF
 * - image: 12px top radii, 1250x850 crop
 * - name: theme h4 (2vw desktop / 7vw tablet / 8vw phone, 1em line height, white)
 * - pedigree: 14px white, italic year line, -10px pull-up
 * - button: theme h5, 13px, gradient #3b4e94 -> #18234c, 8px 36px 12px padding
 * No font-family declarations: h4/h5/body inherit theme typography.
 */

/* Grid */
html body .ler-stallions {
	display: grid !important;
	grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
	column-gap: 40px !important;
	row-gap: 60px !important;
	width: 100% !important;
}
html body .ler-stallions[data-cols="2"] { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
html body .ler-stallions[data-cols="4"] { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }

/* wpautop defense */
html body .ler-stallions > p:empty,
html body .ler-stallions > br { display: none !important; }

/* Card */
html body .ler-stallions .ler-card {
	display: flex !important;
	flex-direction: column !important;
	gap: 10px !important;
	margin: 0 !important;
	padding: 0 !important;
	border-top-left-radius: 15px !important;
	border-top-right-radius: 15px !important;
	overflow: hidden !important;
	background: linear-gradient(180deg, rgb(163, 30, 51) 0%, rgb(163, 30, 51) 54%, rgb(255, 255, 255) 100%) !important;
}

/* Photo */
html body .ler-stallions .ler-card__imglink {
	display: block !important;
	line-height: 0 !important;
}
html body .ler-stallions .ler-card__img,
html body .ler-stallions .ler-card__imglink img {
	display: block !important;
	width: 100% !important;
	height: auto !important;
	aspect-ratio: 1250 / 850 !important;
	object-fit: cover !important;
	border-radius: 12px 12px 0 0 !important;
	margin: 0 !important;
}

/* Body */
html body .ler-stallions .ler-card__body {
	display: flex !important;
	flex-direction: column !important;
	gap: 10px !important;
	padding: 25px 5% 5% 5% !important;
	text-align: center !important;
	flex-grow: 1 !important;
}

/* Name (theme h4 supplies family / weight / uppercase) */
html body .ler-stallions .ler-card__name {
	margin: 0 !important;
	padding: 0 !important;
	color: #FFFFFF !important;
	font-size: 2vw !important;
	line-height: 1em !important;
	text-align: center !important;
	text-transform: uppercase !important;
}
html body .ler-stallions .ler-card__name a {
	color: #FFFFFF !important;
	text-decoration: none !important;
	background-image: linear-gradient(currentColor, currentColor) !important;
	background-repeat: no-repeat !important;
	background-position: 0 100% !important;
	background-size: 0% 2px !important;
	transition: background-size 0.4s cubic-bezier(0.42, 0, 0.58, 1) !important;
	box-shadow: none !important;
}
html body .ler-stallions .ler-card__name a:hover {
	background-size: 100% 2px !important;
	color: #FFFFFF !important;
}
/* JS fit mode: names scale to a single line like Salient responsive text.
   Without JS the class is absent and long names simply wrap. */
html body .ler-stallions.ler-fit .ler-card__name {
	white-space: nowrap !important;
}

/* Pedigree */
html body .ler-stallions .ler-card__pedigree {
	margin: -10px 0 0 0 !important;
	padding: 0 !important;
	color: #FFFFFF !important;
	font-size: 14px !important;
	line-height: 1.7 !important;
	text-align: center !important;
}
html body .ler-stallions .ler-card__pedigree em {
	font-style: italic !important;
	color: #FFFFFF !important;
}

/* Spacers (match the live divider blocks) */
html body .ler-stallions .ler-spacer { flex: none !important; margin: 0 !important; padding: 0 !important; }
html body .ler-stallions .ler-spacer--10 { height: 10px !important; }
html body .ler-stallions .ler-spacer--30 { height: 30px !important; }

/* More Information button (theme h5 supplies family / uppercase / tracking) */
html body .ler-stallions .ler-card__cta {
	margin: 0 !important;
	padding: 0 !important;
	font-size: 13px !important;
	line-height: 1 !important;
	text-align: center !important;
	color: #FFFFFF !important;
}
html body .ler-stallions .ler-card__cta a,
html body .ler-stallions .ler-card__cta .ler-card__cta-static {
	display: inline-block !important;
	padding: 8px 36px 12px 36px !important;
	background: linear-gradient(to right, #3b4e94, #18234c) !important;
	color: #FFFFFF !important;
	font-size: 13px !important;
	line-height: 1.7 !important;
	border-radius: 0 !important;
	text-decoration: none !important;
	box-shadow: none !important;
	transition: filter 0.25s ease, transform 0.25s ease !important;
}
html body .ler-stallions .ler-card__cta a:hover {
	filter: brightness(1.2) !important;
	color: #FFFFFF !important;
}
/* Unlinked cards keep the exact layout, nothing is clickable */
html body .ler-stallions .ler-card--nolink .ler-card__imglink,
html body .ler-stallions .ler-card--nolink .ler-card__name span,
html body .ler-stallions .ler-card--nolink .ler-card__cta-static {
	cursor: default !important;
	pointer-events: none !important;
}
html body .ler-stallions .ler-card--nolink .ler-card__name span {
	color: #FFFFFF !important;
}
html body .ler-stallions .ler-card--nolink .ler-card__cta-static {
	opacity: 0.55 !important;
}

/* Tablet: stacked, matching Salient column stacking + 50px phone margin pattern */
@media only screen and (max-width: 999px) {
	html body .ler-stallions {
		grid-template-columns: minmax(0, 1fr) !important;
		row-gap: 50px !important;
	}
	html body .ler-stallions[data-cols="2"],
	html body .ler-stallions[data-cols="4"] {
		grid-template-columns: minmax(0, 1fr) !important;
	}
	html body .ler-stallions .ler-card__name { font-size: 7vw !important; }
}

/* Phone */
@media only screen and (max-width: 690px) {
	html body .ler-stallions .ler-card__name { font-size: 8vw !important; }
}