/**
 * The hero under the offers strip: how it looks.
 *
 * The hero is an Elementor section carrying the diwan-hero class. How tall it
 * is lives elsewhere: its "Fill the rest of the screen" switch and numbers are
 * in the section's Layout tab under "Diwan · Height", and the rule behind them
 * is fit-screen.css.
 */

.diwan-hero {
	margin-block-end: 28px;
}

/* The headline sits over a photograph, so it needs the inverse palette rather
   than the body text colour it would otherwise inherit. */
.diwan-hero .elementor-slide-heading {
	color: var(--diwan-text-inverse, #fff);
	font-size: clamp(28px, 3.4vw, 52px);
	line-height: 1.15;
	margin-block: 0 12px;
}

.diwan-hero .elementor-slide-description {
	color: var(--diwan-text-inverse, #fff);
	font-size: clamp(15px, 1.2vw, 18px);
	line-height: 1.6;
	margin-block: 0 22px;
	opacity: 0.92;
}

/* PRO Elements ships its own outlined slide button at three classes deep, so
   these have to reach at least as far or the brand button never lands. */
.diwan-hero .elementor-slides .swiper-slide-inner .elementor-slide-button {
	background: var(--diwan-canvas, #faf7db);
	border: 1px solid var(--diwan-canvas, #faf7db);
	border-radius: var(--diwan-radius-sm, 4px);
	color: var(--diwan-wood, #3b0f00);
	font-weight: 600;
	padding: 12px 26px;
	text-decoration: none;
	transition: background-color 0.16s ease, color 0.16s ease;
}

.diwan-hero .elementor-slides .swiper-slide-inner .elementor-slide-button:hover,
.diwan-hero .elementor-slides .swiper-slide-inner .elementor-slide-button:focus-visible {
	background: var(--diwan-hover, #e0b070);
	border-color: var(--diwan-hover, #e0b070);
	color: var(--diwan-hover-text, #3b0f00);
}

/* The slider's arrows are the site's arrows, and they are drawn in arrows.css
   along with the offers strip above and both loop carousels. Elementor's own is
   a near-white chevron meant to sit straight on a dark photo, and it disappears
   the moment it is put on a pale slide, which is half of why they are shared.
   Nothing hero-specific is left to say about them. */

.diwan-hero .swiper-pagination-bullet {
	background: var(--diwan-white, #fff);
	opacity: 0.5;
}

.diwan-hero .swiper-pagination-bullet-active {
	background: var(--diwan-canvas, #faf7db);
	opacity: 1;
}

@media (max-width: 900px) {
	.diwan-hero {
		margin-block-end: 20px;
	}
}