/*
 * Folio Hero Screen
 * 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.
 */

/*
 * Base layout (self-contained). Makes the images a full-bleed background behind the
 * text even when the theme's own .herro styles or Swiper script are not loaded.
 */
.herro.herro-left {
	position: relative;
	display: grid;
	min-height: 100vh;
	overflow: hidden;
	isolation: isolate;
	background: #000;
}

.herro.herro-left .content {
	position: relative;
	z-index: 3;
	min-height: inherit;
	box-sizing: border-box;
	padding-top: 8rem;
	padding-bottom: 6rem;
}

.herro.herro-left .herro-imgs-slider {
	position: absolute;
	inset: 0;
	z-index: 0;
	width: 100%;
	height: 100%;
	overflow: hidden;
}

.herro.herro-left .herro-imgs-slider .swiper-wrapper {
	position: relative;
	height: 100%;
}

.herro.herro-left .herro-imgs-slider .swiper-slide {
	height: 100%;
}

.herro.herro-left .herro-imgs-slider img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.herro.herro-left .shade {
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
}

/* Readable defaults on the dark image (the Elementor style controls still override these) */
.herro.herro-left .herro-heading .title,
.herro.herro-left .herro-heading .subtitle,
.herro.herro-left .desc,
.herro.herro-left .desc p {
	color: #fff;
}

.herro.herro-left .hero__btn {
	display: inline-block;
	padding: .9em 1.6em;
	color: #fff;
	background: rgba(255, 255, 255, .18);
	text-decoration: none;
}

/* Fallback slider: used only if the theme's Swiper has not started (no .swiper-initialized) */
.herro.herro-left .herro-imgs-slider:not(.swiper-initialized) .swiper-slide {
	position: absolute;
	inset: 0;
	opacity: 0;
}

.herro.herro-left .herro-imgs-slider:not(.swiper-initialized) .swiper-slide:only-child {
	opacity: 1;
}

.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);
	}
}