/**
 * Hemritu Premium Homepage — Hero Banner
 */


/* =========================================================
   MAIN BANNER
   ========================================================= */

.hr-home-banner {
	position: relative !important;
	display: block !important;
	width: 100% !important;
	max-width: 100% !important;
	min-width: 0;
	margin: 0 !important;
	padding: 0 !important;
	overflow: hidden;
	background: #f5f1ea;
	clear: both !important;
}


/* =========================================================
   VIEWPORT
   ========================================================= */

.hr-home-banner__viewport {
	position: relative;
	display: block;
	width: 100%;
	height: clamp(430px, 41.6667vw, 800px);
	min-height: 430px;
	overflow: hidden;
}


/* =========================================================
   SLIDES
   ========================================================= */

.hr-home-banner__slide {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;

	opacity: 0;
	visibility: hidden;
	pointer-events: none;

	transition:
		opacity 700ms ease,
		visibility 700ms ease;
}

.hr-home-banner__slide.is-active {
	position: relative;
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
}


/* =========================================================
   FULL BANNER CLICKABLE LINK
   ========================================================= */

.hr-home-banner__link {
	position: relative;
	display: block;
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;

	color: inherit;
	text-decoration: none !important;

	overflow: hidden;
}

.hr-home-banner__link:hover,
.hr-home-banner__link:focus,
.hr-home-banner__link:active {
	color: inherit;
	text-decoration: none !important;
}


/* =========================================================
   BANNER IMAGE
   ========================================================= */

.hr-home-banner__media {
	position: absolute;
	inset: 0;

	display: block;
	width: 100%;
	height: 100%;

	margin: 0;
	padding: 0;
}

.hr-home-banner__media img {
	width: 100% !important;
	height: 100% !important;
	display: block !important;
	object-fit: cover !important;
	object-position: center center !important;
	background: none !important;
}


/* =========================================================
   TEXT OVER IMAGE
   ========================================================= */

.hr-home-banner__content {
	position: absolute;

	z-index: 4;

	left: clamp(35px, 7vw, 110px);
	top: 50%;

	width: min(42%, 600px);

	margin: 0;
	padding: 0;

	transform: translateY(-50%);

	text-align: left;

	pointer-events: none;
}


/* =========================================================
   EYEBROW
   ========================================================= */

.hr-home-banner__eyebrow {
	display: block;

	margin: 0 0 14px;
	padding: 0;

	color: #9b702f;

	font-size: clamp(10px, 0.9vw, 13px);
	font-weight: 600;
	line-height: 1.4;

	letter-spacing: 0.22em;
	text-transform: uppercase;
}


/* =========================================================
   TITLE
   ========================================================= */

.hr-home-banner__title {
	display: block;

	margin: 0 0 16px !important;
	padding: 0 !important;

	color: #3b1d12;

	font-family: Georgia, "Times New Roman", serif;
	font-size: clamp(38px, 4.4vw, 72px);
	font-weight: 500;
	line-height: 1.02;

	letter-spacing: -0.02em;
}


/* =========================================================
   DESCRIPTION
   ========================================================= */

.hr-home-banner__text {
	display: block;

	max-width: 520px;

	margin: 0 0 24px !important;
	padding: 0 !important;

	color: #3c3029;

	font-size: clamp(13px, 1.15vw, 17px);
	font-weight: 400;
	line-height: 1.6;
}


/* =========================================================
   CTA
   ========================================================= */

.hr-home-banner__cta {
	display: inline-flex;

	align-items: center;
	justify-content: center;

	min-width: 130px;
	min-height: 46px;

	margin: 0;
	padding: 0 26px;

	border: 0;
	border-radius: 999px;

	background: #a8752b;

	color: #fff !important;

	font-size: 11px;
	font-weight: 600;
	line-height: 1;

	letter-spacing: 0.14em;
	text-transform: uppercase;

	text-decoration: none !important;

	box-shadow: none;

	transition:
		background-color 200ms ease,
		transform 200ms ease;
}


/*
 * Since the whole banner is the link, CTA is only visual.
 */

.hr-home-banner__link:hover .hr-home-banner__cta {
	background: #8e6122;
	transform: translateY(-1px);
}


/* =========================================================
   PLACEHOLDER
   ========================================================= */

.hr-home-banner__placeholder {
	position: absolute;
	inset: 0;

	display: flex;

	width: 100%;
	height: 100%;

	align-items: center;

	padding: clamp(40px, 7vw, 100px);

	background:
		radial-gradient(
			circle at 80% 25%,
			rgba(190, 153, 83, 0.22),
			transparent 32%
		),
		linear-gradient(
			115deg,
			#17140f 0%,
			#302719 52%,
			#725735 100%
		);
}


/* =========================================================
   PLACEHOLDER CONTENT
   ========================================================= */

.hr-home-banner__placeholder-content {
	width: min(620px, 100%);
	color: #fff;
}

.hr-home-banner__placeholder-content .hr-home-banner__eyebrow {
	color: #d5b26a;
}

.hr-home-banner__placeholder h1 {
	margin: 0 0 20px;

	color: #fff;

	font-family: Georgia, "Times New Roman", serif;

	font-size: clamp(42px, 5.5vw, 78px);
	font-weight: 500;
	line-height: 0.98;
}

.hr-home-banner__placeholder p {
	max-width: 520px;

	margin: 0 0 30px;

	color: rgba(255, 255, 255, 0.9);

	font-size: clamp(15px, 1.5vw, 18px);
	line-height: 1.7;
}

.hr-home-banner__placeholder .hr-home-banner__cta {
	background: #fff;
	color: #15130f !important;
}


/* =========================================================
   ARROWS
   ========================================================= */

.hr-home-banner__arrow {
	position: absolute;

	z-index: 10;

	top: 50%;

	display: grid;

	width: 48px;
	height: 48px;

	margin: 0;
	padding: 0;

	place-items: center;

	border: 0;
	border-radius: 50%;

	background: rgba(20, 20, 20, 0.72);

	color: #fff;

	cursor: pointer;

	transform: translateY(-50%);

	transition:
		background-color 200ms ease,
		transform 200ms ease;
}

.hr-home-banner__arrow:hover {
	background: rgba(20, 20, 20, 0.9);
}

.hr-home-banner__arrow:focus-visible {
	outline: 2px solid #fff;
	outline-offset: 3px;
}

.hr-home-banner__arrow--prev {
	left: 24px;
}

.hr-home-banner__arrow--next {
	right: 24px;
}

.hr-home-banner__arrow span {
	font-size: 25px;
	line-height: 1;
}


/* =========================================================
   DOTS
   ========================================================= */

.hr-home-banner__dots {
	position: absolute;

	z-index: 11;

	bottom: 22px;
	left: 50%;

	display: flex;

	gap: 8px;

	margin: 0;
	padding: 0;

	transform: translateX(-50%);
}

.hr-home-banner__dot {
	width: 8px;
	height: 8px;

	margin: 0;
	padding: 0;

	border: 0;
	border-radius: 50%;

	background: rgba(255, 255, 255, 0.55);

	cursor: pointer;

	transition:
		width 200ms ease,
		background-color 200ms ease;
}

.hr-home-banner__dot.is-active {
	width: 24px;

	border-radius: 999px;

	background: #fff;
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 1024px) {

	.hr-home-banner__viewport {
		height: clamp(400px, 48vw, 600px);
	}

	.hr-home-banner__content {
		left: 6%;
		width: min(48%, 500px);
	}

	.hr-home-banner__title {
		font-size: clamp(34px, 5vw, 58px);
	}

	.hr-home-banner__text {
		max-width: 440px;
	}

}


/* =========================================================
   MOBILE — 1080 × 1350
   Ratio = 4 : 5
   ========================================================= */

@media (max-width: 767px) {

	/*
	 * Mobile uploaded image:
	 *
	 * 1080px × 1350px
	 *
	 * Ratio:
	 * 4 : 5
	 *
	 * Example:
	 * 360px screen width = 450px banner height
	 * 390px screen width = 487.5px banner height
	 * 414px screen width = 517.5px banner height
	 */

	.hr-home-banner__viewport {
		position: relative !important;

		width: 100% !important;

		height: calc(100vw * 1350 / 1080) !important;

		min-height: 0 !important;
		max-height: none !important;

		aspect-ratio: 1080 / 1350 !important;

		overflow: hidden !important;
	}


	/* -----------------------------------------
	   Mobile Slide
	   ----------------------------------------- */

	.hr-home-banner__slide {
		position: absolute;

		inset: 0;

		width: 100% !important;
		height: 100% !important;

		min-height: 0 !important;
		max-height: none !important;

		margin: 0 !important;
		padding: 0 !important;
	}

	.hr-home-banner__slide.is-active {
		position: relative;
	}


	/* -----------------------------------------
	   Mobile Link
	   ----------------------------------------- */

	.hr-home-banner__link {
		position: relative;

		display: block;

		width: 100% !important;
		height: 100% !important;

		min-height: 0 !important;
		max-height: none !important;

		margin: 0 !important;
		padding: 0 !important;

		overflow: hidden !important;
	}


	/* -----------------------------------------
	   Mobile Image Container
	   ----------------------------------------- */

	.hr-home-banner__media {
		position: absolute;

		inset: 0;

		display: block;

		width: 100% !important;
		height: 100% !important;

		min-height: 0 !important;
		max-height: none !important;

		margin: 0 !important;
		padding: 0 !important;
	}


	/* -----------------------------------------
	   Mobile Image
	   ----------------------------------------- */

	.hr-home-banner__media img {
		display: block !important;

		width: 100% !important;
		height: 100% !important;

		min-width: 100% !important;
		min-height: 100% !important;

		max-width: none !important;
		max-height: none !important;

		margin: 0 !important;
		padding: 0 !important;

		/*
		 * The uploaded image itself is 1080 × 1350,
		 * and the container is also 4:5.
		 *
		 * contain ensures the complete mobile image
		 * remains visible without cropping.
		 */
		object-fit: contain !important;
		object-position: center center !important;

		background: #f5f1ea;
	}


	/* -----------------------------------------
	   Mobile Text Overlay
	   ----------------------------------------- */

	.hr-home-banner__content {
		left: 6%;

		top: 50%;

		width: 56%;

		transform: translateY(-50%);
	}


	/* -----------------------------------------
	   Mobile Eyebrow
	   ----------------------------------------- */

	.hr-home-banner__eyebrow {
		margin-bottom: 7px;

		font-size: 8px;

		letter-spacing: 0.16em;
	}


	/* -----------------------------------------
	   Mobile Title
	   ----------------------------------------- */

	.hr-home-banner__title {
		margin-bottom: 8px !important;

		font-size: clamp(24px, 7vw, 42px);

		line-height: 1.02;
	}


	/* -----------------------------------------
	   Mobile Description
	   ----------------------------------------- */

	.hr-home-banner__text {
		max-width: 100%;

		margin-bottom: 12px !important;

		font-size: clamp(10px, 2.7vw, 14px);

		line-height: 1.4;
	}


	/* -----------------------------------------
	   Mobile CTA
	   ----------------------------------------- */

	.hr-home-banner__cta {
		min-width: 100px;

		min-height: 34px;

		padding: 0 18px;

		font-size: 8px;

		letter-spacing: 0.12em;
	}


	/* -----------------------------------------
	   Mobile Arrows
	   ----------------------------------------- */

	.hr-home-banner__arrow {
		width: 36px;
		height: 36px;
	}

	.hr-home-banner__arrow--prev {
		left: 10px;
	}

	.hr-home-banner__arrow--next {
		right: 10px;
	}

	.hr-home-banner__arrow span {
		font-size: 19px;
	}


	/* -----------------------------------------
	   Mobile Dots
	   ----------------------------------------- */

	.hr-home-banner__dots {
		bottom: 10px;

		gap: 5px;
	}

	.hr-home-banner__dot {
		width: 6px;
		height: 6px;
	}

	.hr-home-banner__dot.is-active {
		width: 18px;
	}


	/* -----------------------------------------
	   Mobile Placeholder
	   ----------------------------------------- */

	.hr-home-banner__placeholder {
		min-height: 0;

		padding: 28px 22px 55px;
	}

	.hr-home-banner__placeholder h1 {
		font-size: clamp(32px, 10vw, 48px);
	}

	.hr-home-banner__placeholder p {
		font-size: 13px;
		line-height: 1.5;
	}

}


/* =========================================================
   SMALL MOBILE
   ========================================================= */

@media (max-width: 480px) {

	.hr-home-banner__content {
		left: 5%;

		width: 58%;
	}

	.hr-home-banner__title {
		font-size: clamp(22px, 6.8vw, 32px);
	}

	.hr-home-banner__text {
		font-size: 9px;
	}

	.hr-home-banner__cta {
		min-height: 31px;

		padding: 0 15px;

		font-size: 7px;
	}

	.hr-home-banner__arrow {
		width: 32px;
		height: 32px;
	}

	.hr-home-banner__arrow--prev {
		left: 7px;
	}

	.hr-home-banner__arrow--next {
		right: 7px;
	}

}


@media (max-width: 767px) {

	.hr-home-banner__viewport {
		position: relative !important;
		width: 100% !important;
		height: auto !important;
		min-height: 0 !important;
		max-height: none !important;
		aspect-ratio: 1080 / 1350 !important;
		overflow: hidden !important;
	}

	.hr-home-banner__slide {
		width: 100% !important;
		height: 100% !important;
	}

	.hr-home-banner__link {
		width: 100% !important;
		height: 100% !important;
	}

	.hr-home-banner__media {
		width: 100% !important;
		height: 100% !important;
		display: block !important;
	}

	.hr-home-banner__media img {
		width: 100% !important;
		height: 100% !important;
		display: block !important;
		object-fit: cover !important;
		object-position: center center !important;
		background: none !important;
	}
}