/*
 * Yuma Hero Widget (Left Aligned)
 * Overrides only the alignment of the Cristiano theme's .herro block.
 * The background slider (.herro-imgs-slider) keeps the theme's fade + slow zoom.
 * The widget omits the .parallax-top class, so there is no parallax movement.
 */

.herro.herro-left .content {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	align-content: center;
	justify-content: start;
	text-align: left;
	/*
	 * Same left edge as the header logo / menu button. The theme's header is a
	 * centered 1508px box with 32px side padding (1572px outer), so on wide
	 * screens the content moves in with it and keeps lining up with the logo.
	 */
	padding-left: calc(max(0px, (100% - 1572px) / 2) + 32px);
	padding-right: 32px;
}

.herro.herro-left .content .inner {
	text-align: left;
	margin-left: 0;
	margin-right: auto;
	width: 100%;
	max-width: 1100px;
}

/* Title block */
.herro.herro-left .herro-heading.title-elegant {
	align-items: flex-start;
	text-align: left;
}

.herro.herro-left .herro-heading.title-elegant .title {
	padding-left: 0;
	padding-right: 0;
}

/* The decorative lines around the title: start solid on the left, fade out to the right */
.herro.herro-left .herro-heading.title-elegant .title:after {
	inset: 0 0 0 0;
	-webkit-mask: linear-gradient(90deg, #fff 55%, transparent);
	mask: linear-gradient(90deg, #fff 55%, transparent);
}

/* Description */
.herro.herro-left .desc {
	margin: 0;
	max-width: 35rem;
	text-align: left;
}

/* Buttons: hug their text so left and right padding are equal on every screen size
   (the theme stacks them full-width on phones, which left extra space on the right) */
.herro.herro-left .hero__btns {
	justify-content: flex-start;
	flex-wrap: wrap;
}

.herro.herro-left .hero__btn {
	width: auto;
	align-self: flex-start;
	text-align: center;
}

/* Shade: dark on the left (behind the text), clear on the right */
.herro.herro-left.herro-left--shade .shade {
	background: linear-gradient(90deg, rgba(0, 0, 0, .78) 0%, rgba(0, 0, 0, .5) 45%, rgba(0, 0, 0, 0) 85%);
}

/* Phones: the theme header uses this same fluid side padding (16px–32px) */
@media (max-width: 480px) {
	.herro.herro-left .content {
		padding-left: clamp(1rem, -1rem + 10vw, 2rem);
		padding-right: clamp(1rem, -1rem + 10vw, 2rem);
	}
}

@media (max-width: 767px) {
	/* Text sits over the whole image on phones, so darken evenly */
	.herro.herro-left.herro-left--shade .shade {
		background: rgba(0, 0, 0, .55);
	}
}