/**
 * Hemritu Homepage
 * Be The Hemritu Hero
 * Instagram Reels
 */

/* =========================================================
   SECTION
========================================================= */

.hr-home-instagram {
	width: 100%;
	max-width: 100%;
	margin: 0;
	padding: 95px 0 100px;
	background: #ffffff;
	overflow: hidden;
}

.hr-home-instagram__container {
	width: calc(100% - 60px);
	max-width: 1380px;
	margin: 0 auto;
}

/* =========================================================
   HEADER
========================================================= */

.hr-home-instagram__header {
	width: 100%;
	max-width: 900px;
	margin: 0 auto 45px;
	text-align: center;
}

.hr-home-instagram__eyebrow {
	margin: 0 0 12px;
	font-size: 10px;
	line-height: 1.3;
	font-weight: 700;
	letter-spacing: 0.28em;
	text-transform: uppercase;
	color: #9a7438;
}

.hr-home-instagram__heading {
	margin: 0;
	padding: 0;

	font-family: Georgia, "Times New Roman", serif;
	font-size: 48px;
	line-height: 1.15;
	font-weight: 500;

	color: #111111;
}

.hr-home-instagram__description {
	max-width: 760px;
	margin: 16px auto 0;

	font-size: 15px;
	line-height: 1.7;
	font-weight: 400;

	color: #666666;
}

/* =========================================================
   REEL GRID
========================================================= */

.hr-home-instagram__grid {
	display: grid;

	/*
	 * Desktop columns come directly from
	 * Homepage Admin → Desktop Reels Per Row.
	 */
	grid-template-columns: repeat(
		var(--hr-instagram-desktop-columns, 4),
		minmax(0, 1fr)
	);

	gap: 28px;

	width: 100%;
	margin: 0 auto;
}

/* =========================================================
   REEL ITEM
========================================================= */

.hr-home-instagram__item {
	min-width: 0;
	width: 100%;
}

/* =========================================================
   REEL CARD
========================================================= */

.hr-home-instagram__card {
	position: relative;

	width: 100%;

	overflow: hidden;

	border-radius: 16px;

	background: #f3f3f3;

	box-shadow:
		0 6px 22px rgba(0, 0, 0, 0.09);
}

/* =========================================================
   REEL MEDIA
========================================================= */

.hr-home-instagram__media {
	position: relative;

	width: 100%;

	aspect-ratio: 9 / 12;

	overflow: hidden;

	background: #eeeeee;
}

.hr-home-instagram__image {
	display: block;

	width: 100%;
	height: 100%;

	object-fit: cover;
	object-position: center;

	transition: transform 450ms ease;
}

.hr-home-instagram__card:hover
.hr-home-instagram__image {
	transform: scale(1.025);
}

/* =========================================================
   INSTAGRAM ICON
========================================================= */

.hr-home-instagram__instagram {
	position: absolute;

	top: 14px;
	left: 14px;

	z-index: 5;

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

	width: 35px;
	height: 35px;

	border-radius: 50%;

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

	box-shadow:
		0 3px 12px rgba(0, 0, 0, 0.15);

	text-decoration: none;
}

.hr-home-instagram__instagram img,
.hr-home-instagram__instagram svg {
	width: 18px;
	height: 18px;
}

/* =========================================================
   PLAY BUTTON
========================================================= */

.hr-home-instagram__play {
	position: absolute;

	top: 50%;
	left: 50%;

	z-index: 5;

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

	width: 58px;
	height: 58px;

	padding: 0;

	transform: translate(-50%, -50%);

	border: 0;
	border-radius: 50%;

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

	box-shadow:
		0 6px 20px rgba(0, 0, 0, 0.18);

	cursor: pointer;

	transition:
		transform 220ms ease,
		box-shadow 220ms ease;
}

.hr-home-instagram__play::before {
	content: "";

	display: block;

	width: 0;
	height: 0;

	margin-left: 4px;

	border-top: 9px solid transparent;
	border-bottom: 9px solid transparent;
	border-left: 13px solid #111111;
}

.hr-home-instagram__play:hover {
	transform: translate(-50%, -50%) scale(1.08);

	box-shadow:
		0 9px 27px rgba(0, 0, 0, 0.23);
}

/* =========================================================
   SHARE BUTTON
========================================================= */

.hr-home-instagram__share {
	position: absolute;

	right: 14px;
	bottom: 14px;

	z-index: 6;

	display: inline-flex;
	align-items: center;
	justify-content: center;

	height: 32px;

	padding: 0 13px;

	border: 1px solid rgba(255, 255, 255, 0.45);
	border-radius: 8px;

	background: rgba(0, 0, 0, 0.48);

	color: #ffffff;

	font-family: inherit;
	font-size: 9px;
	font-weight: 700;
	line-height: 1;

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

	backdrop-filter: blur(5px);
	-webkit-backdrop-filter: blur(5px);

	box-shadow:
		0 3px 10px rgba(0, 0, 0, 0.16);

	cursor: pointer;

	appearance: none;
	-webkit-appearance: none;

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

.hr-home-instagram__share:hover {
	background: rgba(0, 0, 0, 0.72);
	border-color: rgba(255, 255, 255, 0.75);
	transform: translateY(-1px);
}

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

.hr-home-instagram__title {
	margin: 12px 0 0;

	text-align: center;

	font-size: 13px;
	line-height: 1.4;
	font-weight: 500;

	color: #333333;
}

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

.hr-home-instagram__cta-wrap {
	display: flex;
	align-items: center;
	justify-content: center;

	width: 100%;

	margin-top: 38px;
}

.hr-home-instagram__cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 11px;

	min-height: 48px;

	padding: 0 28px;

	border-radius: 999px;

	background: #171717;
	color: #ffffff;

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

	text-decoration: none;

	box-shadow:
		0 5px 15px rgba(0, 0, 0, 0.11);

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

.hr-home-instagram__cta:hover {
	background: #000000;
	color: #ffffff;

	transform: translateY(-2px);

	box-shadow:
		0 8px 21px rgba(0, 0, 0, 0.17);
}

.hr-home-instagram__cta-arrow {
	font-size: 16px;
	line-height: 1;
}

/* =========================================================
   LARGE DESKTOP
========================================================= */

@media (min-width: 1200px) {

	.hr-home-instagram {
		padding-top: 105px;
		padding-bottom: 110px;
	}

	.hr-home-instagram__container {
		width: calc(100% - 100px);
		max-width: 1420px;
	}

	.hr-home-instagram__grid {
		gap: 30px;
	}

	.hr-home-instagram__header {
		margin-bottom: 48px;
	}
}

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

@media (max-width: 991px) {

	.hr-home-instagram {
		padding: 70px 0 80px;
	}

	.hr-home-instagram__container {
		width: calc(100% - 40px);
	}

	.hr-home-instagram__header {
		margin-bottom: 35px;
	}

	.hr-home-instagram__heading {
		font-size: 40px;
	}

	.hr-home-instagram__description {
		font-size: 14px;
	}

	/*
	 * Tablet follows the mobile-column setting.
	 * This prevents the desktop setting from forcing
	 * too many cards on smaller screens.
	 */
	.hr-home-instagram__grid {
		grid-template-columns: repeat(
			var(--hr-instagram-mobile-columns, 2),
			minmax(0, 1fr)
		);

		gap: 20px;
	}
}

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

@media (max-width: 767px) {

	.hr-home-instagram {
		padding: 55px 0 65px;
	}

	.hr-home-instagram__container {
		width: calc(100% - 24px);
	}

	.hr-home-instagram__header {
		margin-bottom: 28px;
	}

	.hr-home-instagram__eyebrow {
		margin-bottom: 9px;
		font-size: 8px;
		letter-spacing: 0.21em;
	}

	.hr-home-instagram__heading {
		font-size: 31px;
		line-height: 1.15;
	}

	.hr-home-instagram__description {
		margin-top: 11px;
		font-size: 11px;
		line-height: 1.6;
	}

	/* =====================================================
	   MOBILE GRID
	   USE ADMIN → MOBILE REELS PER ROW
	===================================================== */

	.hr-home-instagram__grid {
		display: grid !important;

		grid-template-columns: repeat(
			var(--hr-instagram-mobile-columns, 2),
			minmax(0, 1fr)
		) !important;

		gap: 16px 13px;

		width: 100%;

		margin: 0 auto;

		padding: 0;

		overflow: visible !important;

		scroll-snap-type: none;
	}

	.hr-home-instagram__item {
		width: 100% !important;
		min-width: 0 !important;
		max-width: 100% !important;

		flex: none !important;

		scroll-snap-align: none;
	}

	.hr-home-instagram__card {
		width: 100% !important;

		border-radius: 12px;
	}

	.hr-home-instagram__instagram {
		top: 8px;
		left: 8px;

		width: 27px;
		height: 27px;
	}

	.hr-home-instagram__play {
		width: 43px;
		height: 43px;
	}

	.hr-home-instagram__play::before {
		border-top-width: 6px;
		border-bottom-width: 6px;
		border-left-width: 9px;
	}

	.hr-home-instagram__share {
		right: 7px;
		bottom: 7px;

		height: 27px;

		padding: 0 9px;

		border-radius: 7px;

		font-size: 8px;
	}

	.hr-home-instagram__title {
		margin-top: 7px;
		font-size: 10px;
	}

	.hr-home-instagram__cta-wrap {
		margin-top: 25px;
	}

	.hr-home-instagram__cta {
		min-height: 41px;
		padding: 0 20px;
		font-size: 10px;
	}
}

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

@media (max-width: 380px) {

	.hr-home-instagram__heading {
		font-size: 28px;
	}

	.hr-home-instagram__grid {
		grid-template-columns: repeat(
			var(--hr-instagram-mobile-columns, 2),
			minmax(0, 1fr)
		) !important;

		gap: 14px 10px;
	}

	.hr-home-instagram__item {
		width: 100% !important;
		min-width: 0 !important;
		max-width: 100% !important;
	}
}

/* =========================================================
   ACCESSIBILITY
========================================================= */

.hr-home-instagram button:focus-visible,
.hr-home-instagram a:focus-visible {
	outline: 2px solid #a17b3d;
	outline-offset: 3px;
}