/* ==================================================
   SECTION HEADER
   Mazury Hip Hop Festival Premium
================================================== */

.section-header {

	display:flex;

	flex-direction:column;

	align-items:center;

	text-align:center;

	gap:var(--section-header-gap);

	width:100%;

	margin-bottom:var(--section-header-margin);

}


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

.section-header__eyebrow {

	display:flex;

	align-items:center;

	justify-content:center;

	gap:.85rem;

	font-size:.8rem;

	font-weight:700;

	letter-spacing:.35em;

	line-height:1;

	text-transform:uppercase;

	color:var(--color-primary);

	text-align:center;

	position:relative;

}


.section-header__eyebrow::before,
.section-header__eyebrow::after {

	content:"";

	width:var(--eyebrow-line-width);

	height:var(--eyebrow-line-height);

	flex:0 0 auto;

	border-radius:var(--radius-pill);

	background:

		linear-gradient(
			90deg,
			var(--festival-primary),
			var(--festival-secondary)
		);

	transition:var(--transition-glow);

}


.section-header:hover
.section-header__eyebrow::before,

.section-header:hover
.section-header__eyebrow::after {

	box-shadow:
		0 0 12px rgba(255,0,85,.35);

}


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

.section-header__title {

	margin:0;

	max-width:820px;

	font-size:
		clamp(
			2.4rem,
			5vw,
			4rem
		);

	font-weight:800;

	line-height:1.05;

	text-wrap:balance;

	color:inherit;

}


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

.section-header__description {

	max-width:var(--section-header-width);

	margin:0 auto;

	font-size:1.08rem;

	line-height:1.8;

	color:inherit;

	opacity:.72;

}


/* ==================================================
   RESPONSIVE
================================================== */

@media (max-width:768px) {

	.section-header {

		margin-bottom:3rem;

	}


	.section-header__eyebrow {

		font-size:.72rem;

		letter-spacing:.28em;

	}


	.section-header__title {

		font-size:
			clamp(
				2rem,
				8vw,
				3rem
			);

		line-height:1.05;

	}


	.section-header__description {

		font-size:1rem;

		line-height:1.7;

	}

}