/* =========================================================
   HERO SECTION BASE
========================================================= */
.hero-section {
	--clamp-400-800: clamp(25rem, -3.571rem + 59.524vw, 50rem);
	position: relative;
	display: flex;
	align-items: flex-end;
	background-size: cover;
	background-position: top center;
	background-repeat: no-repeat;
	min-height: var(--clamp-400-800);
	overflow: hidden;
	padding: 0 !important;
}

body:has(.podcast-swiper-sec) .hero-section {
	padding-bottom: 5rem !important;
}

@media (min-width: 768px) {

	body:has(.music-showcase-sec) .hero-section,
	body:has(.podcast-swiper-sec) .hero-section {
		padding-bottom: 2rem !important;
	}

	body:has(.feature-music-section) .hero-section {
		padding-bottom: 5rem !important;
	}
}

.hero-video-embed,
.hero-video-embed iframe {
	width: 100%;
	height: 100%;
}

.hero-video-embed {
	position: absolute;
	inset: 0;
}

.hero-video-embed iframe {
	object-fit: cover;
}


/* =========================================================
   BACKGROUND LAYERS
========================================================= */
.hero-background {
	position: absolute;
	inset: 0;
	z-index: 0;
}

/* Image background fallback */
.hero-background--image {
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}

/* Video background wrapper */
.hero-background--video {
	position: absolute;
	inset: 0;
	overflow: hidden;
}

/* Video element */
.hero-video-element {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Video poster (thumbnail) */
.hero-video-poster {
	position: absolute;
	inset: 0;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	z-index: 1;
	transition: opacity 0.3s ease;
}

/* Hidden state when video is playing */
.hero-video-poster.is-hidden {
	opacity: 0;
	pointer-events: none;
}

/* =========================================================
   GRADIENT OVERLAY (UNCHANGED BEHAVIOR)
========================================================= */
.hero-section::after {
	content: "";
	position: absolute;
	inset: 0;
	/* height: 45%; */
	background: linear-gradient(0deg,
			#000000 0%,
			rgba(0, 0, 0, 0) 50.25%);
	z-index: 2;
	pointer-events: none;
}

/* =========================================================
   CONTENT LAYER
========================================================= */
.hero-section .about-content {
	position: relative;
	display: flex;
	gap: 24px;
	color: var(--color-white);
	width: 100%;
	margin-bottom: 72px;
	z-index: 5;
}

.hero-section .about-content .flex-1 {
	flex: 1;
}

.hero-section .about-content .content {
	max-width: 610px;
}

.hero-section .about-content .video-btn-col {
	align-self: flex-end;
}

/* =========================================================
   TYPOGRAPHY
========================================================= */
.hero-section .small-title {
	font-size: var(--h3);
	font-family: var(--font-roman);
}

.hero-section h2 {
	font-size: var(--h1);
	font-family: var(--font-udt-600);
	text-transform: capitalize;
}

.hero-section .description {
	background: var(--color-gradient);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
	margin-bottom: 0;
}

/* =========================================================
   BUTTON GROUP
========================================================= */
.hero-section .button-group {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
	margin-top: 24px;
}

.hero-section .btn {
	min-width: 120px;
}

.hero-section .btn-close {
	filter: invert(1);
	opacity: 1;
	display: block;
	margin-left: auto;
	font-size: 1.25rem;
	margin-bottom: 0.5rem;
}

/* =========================================================
   TRANSPARENT BUTTON (UNCHANGED, CLEANED)
========================================================= */
.btn-transparent {
	position: relative;
	z-index: 1;
	color: var(--color-white);
}

.btn-transparent::after {
	content: "";
	position: absolute;
	inset: 0;
	padding: 2px;
	border-radius: 8px;
	background: linear-gradient(90deg,
			#F4F4EC -25.28%,
			#C39454 24.83%,
			#C39454 100%);
	-webkit-mask:
		linear-gradient(#fff 0 0) content-box,
		linear-gradient(#fff 0 0);
	-webkit-mask-composite: xor;
	mask-composite: exclude;
	pointer-events: none;
	transition: opacity 0.3s ease;
}

.btn-transparent:hover::after {
	opacity: 0;
}

.btn-transparent:hover {
	background: var(--color-primary);
	color: var(--color-white);
}

.btn-white:hover {
	background: var(--color-white);
	color: var(--color-black);
}

/* =========================================================
   VIDEO PLAY / PAUSE BUTTON
========================================================= */
.hero-video-toggle:not(.btn-close) {
	background: var(--color-white);
	border: 0;
	display: block;
	cursor: pointer;
	--play-icon-size: 45px;
	width: var(--play-icon-size);
	height: var(--play-icon-size);
	mask-image: url('../../../assets/icons/circle-play2.svg');
	mask-size: 51px;
	mask-position: center;
	mask-repeat: no-repeat;
	-webkit-mask-image: url('../../../assets/icons/circle-play2.svg');
	-webkit-mask-size: 51px;
	-webkit-mask-position: center;
	-webkit-mask-repeat: no-repeat;
	transition: transform 0.3s ease;
	font-size: 0 !important;
	padding: 0 !important;
}

.hero-video-toggle[aria-pressed="true"]:not(.btn-close) {
	mask-image: url('../../../assets/icons/pause-circle.svg');
	-webkit-mask-image: url('../../../assets/icons/pause-circle.svg');
}

.hero-video-toggle[aria-disabled="true"]:not(.btn-close) {
	opacity: 0.55;
}

.hero-video-toggle:not(.btn-close):hover,
.hero-video-toggle:not(.btn-close):focus-visible {
	background: var(--color-primary);
	outline: 0 !important;
	box-shadow: none !important;
}

.hero-video-toggle .hero-video-toggle__icon,
.hero-video-toggle .hero-video-toggle__icon img {
	display: none !important;
}

.hero-external-links {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
}

.hero-media-audio {
	position: absolute;
	left: 24px;
	bottom: 24px;
	z-index: 6;
	max-width: min(480px, calc(100% - 48px));
}

/* =========================================================
   VIDEO POPUP MODAL
========================================================= */
.hero-section .modal .modal-content {
	background-color: transparent;
	border: 0;
	border-radius: 0;
}

/* =========================================================
   RESPONSIVE
========================================================= */
@media (max-width: 768px) {
	/* .hero-section {
		aspect-ratio: 3 / 4;
		min-height: auto;
	} */

	/* .button-group {
		flex-direction: column;
		width: 100%;
		max-width: 250px;
	} */
	.hero-section .about-content {
		margin-bottom: 24px;
	}
}

@media (min-width:768px) {
    .feature-music-section {
        margin-top: -125px;
        padding-top: 0 !important;
        z-index: 2;
    }
}

.feature-music-section .section-title {
    color: var(--color-white);
}

.feature-music-section .music-card {
    position: relative;
    border-radius: 18px;
    padding: 2px;
    background: linear-gradient(135deg, #ffcc7a, #8f6b2e);
    transition: transform 0.35s ease, box-shadow 0.35s ease;
    overflow: hidden;
}

.feature-music-section .music-card img {
    width: 100%;
    height: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    border-radius: 16px;
}

@media (max-width:768px) {

    .feature-music-section .section-title {
        color: var(--color-black);
    }
}