/*
==================================================
GLOBAL_V2.0_PREMIUM.CSS
Mazury Hip Hop Festival Premium Theme
Purpose: Global foundation styles
Version: 2.0
==================================================
*/


/*==================================================
01. RESET
==================================================*/

*,
*::before,
*::after {
	box-sizing:border-box;
}


html {
	scroll-behavior:smooth;
}


/*==================================================
02. BODY
==================================================*/

body {

	font-family:var(--font-primary);

	font-size:var(--font-size-base);

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

	color:var(--color-text);

	background:var(--color-light);

	overflow-x:hidden;

}

/*==================================================
03. LINKS
==================================================*/

a {

	color:inherit;

	text-decoration:none;

	transition:var(--transition-base);

}


a:focus-visible {

	outline:
		2px solid var(--color-primary);

	outline-offset:3px;

}


/*==================================================
04. MEDIA
==================================================*/

img {

	display:block;

	max-width:100%;

	height:auto;

}


/*==================================================
05. LAYOUT
==================================================*/

.wrapper,
.container {

	width:
		min(
			100% - 40px,
			var(--container-width)
		);

	margin-inline:auto;

}


.section {

	position:relative;

	padding-block:var(--section-padding);

}


.section-dark {

	color:var(--color-light);

	background:var(--color-dark);

}


/*==================================================
06. TYPOGRAPHY
==================================================*/

h1,
h2,
h3,
h4 {

	font-family:var(--font-heading);

	font-weight:800;

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

}


/*
--------------------------------------------------
SECTION HEADER

Nagłówki sekcji są obsługiwane wyłącznie przez:

components/section-header.css

Nie definiujemy tutaj:

.section-header
.section-kicker
.section-subtitle
.section-title
.section-description
--------------------------------------------------
*/


/*==================================================
07. BUTTONS
==================================================*/

.btn,
.hero-btn,
.ticket-button {

	display:inline-flex;

	align-items:center;

	justify-content:center;

	gap:.65rem;

	min-height:54px;

	padding:0 35px;

	border:0;

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

	white-space:nowrap;

	user-select:none;

	font:inherit;

	font-weight:700;

	text-decoration:none;

	cursor:pointer;

	transition:

		transform var(--transition-base),

		background var(--transition-base),

		color var(--transition-base),

		box-shadow var(--transition-base);

}


.btn:active {

	transform:scale(.98);

}


.btn:focus-visible {

	outline:
		2px solid var(--color-primary);

	outline-offset:4px;

}


.btn-primary,
.ticket-button {

	color:var(--color-light);

	background:var(--gradient-primary);

	box-shadow:var(--shadow-md);

}


.btn-primary:hover,
.ticket-button:hover {

	transform:translateY(-4px);

	box-shadow:var(--shadow-lg);

}


.btn-outline {

	background:transparent;

	border:
		1px solid rgba(255,255,255,.35);

	color:inherit;

}


.btn-gold {

	background:var(--gradient-vip);

	color:#111;

	box-shadow:var(--shadow-gold);

}


.btn-dark {

	background:var(--color-dark);

	color:var(--color-light);

}


.hero-btn {

	background:transparent;

	color:var(--color-light);

	border:
		1px solid rgba(255,255,255,.35);

}


.hero-btn.primary {

	background:var(--gradient-primary);

	border-color:transparent;

}


.hero-btn:hover {

	background:var(--color-light);

	color:var(--color-dark);

}


.hero-buttons {

	display:flex;

	align-items:center;

	gap:20px;

	flex-wrap:wrap;

}


/*==================================================
08. CARDS
==================================================*/

.card {

	position:relative;

	overflow:hidden;

	padding:35px;

	background:var(--color-light);

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

	box-shadow:var(--shadow-card);

	transition:var(--transition-base);

}


.card:hover {

	transform:translateY(-6px);

	box-shadow:var(--shadow-lg);

}


.card-dark {

	background:var(--gradient-card-dark);

	color:var(--color-light);

}


.card-glass {

	background:var(--glass);

	backdrop-filter:var(--backdrop);

	border:
		1px solid var(--glass-border);

}


.card-gold {

	background:var(--gradient-vip);

	color:#111;

	box-shadow:var(--shadow-gold);

}


.badge {

	display:inline-flex;

	align-items:center;

	padding:.45rem .9rem;

	border-radius:999px;

	font-size:.75rem;

	font-weight:800;

	letter-spacing:.12em;

	text-transform:uppercase;

}


.badge-primary {

	background:var(--gradient-primary);

	color:#fff;

}


.badge-dark {

	background:#202020;

	color:#fff;

}


.badge-gold {

	background:var(--gradient-vip);

	color:#111;

}


.glass {

	background:var(--glass);

	backdrop-filter:var(--backdrop);

	border:
		1px solid var(--glass-border);

}


.glow-primary {

	box-shadow:var(--shadow-neon);

}


.glow-gold {

	box-shadow:var(--shadow-gold);

}


/*==================================================
09. GRID & MEDIA
==================================================*/

.grid {

	display:grid;

	gap:30px;

}


.image-cover {

	width:100%;

	height:100%;

	object-fit:cover;

}

/*==================================================*
* ICON SYSTEM
*==================================================*/

.mhhf-icon {

	display:inline-flex;

	align-items:center;

	justify-content:center;

	flex-shrink:0;

	width:1.25rem;

	height:1.25rem;

	line-height:1;

}

.mhhf-icon svg {

	display:block;

	width:100%;

	height:100%;

	fill:none;

	stroke:currentColor;

	stroke-width:2;

	stroke-linecap:round;

	stroke-linejoin:round;

}

.contact-card__icon .mhhf-icon {

	width:24px;

	height:24px;

	color:#fff;

}


/*==================================================
10. ANIMATIONS
==================================================*/

.reveal,
.reveal-left,
.reveal-right {

	opacity:0;

	transition:

		opacity var(--transition-slow),

		transform var(--transition-slow);

}


.reveal {

	transform:translateY(50px);

}


.reveal-left {

	transform:translateX(-50px);

}


.reveal-right {

	transform:translateX(50px);

}


.reveal.revealed,
.reveal-left.revealed,
.reveal-right.revealed {

	opacity:1;

	transform:none;

}


/*==================================================
11. UTILITIES
==================================================*/

.text-center {

	text-align:center;

}


.text-right {

	text-align:right;

}


.text-light {

	color:var(--color-light);

}


.text-primary {

	color:var(--color-primary);

}


.text-uppercase {

	text-transform:uppercase;

}


.hidden {

	display:none!important;

}


.flex {

	display:flex;

}


.flex-column {

	display:flex;

	flex-direction:column;

}


.items-center {

	align-items:center;

}


.justify-center {

	justify-content:center;

}


.justify-between {

	justify-content:space-between;

}


.w-100 {

	width:100%;

}


.gap-sm {

	gap:12px;

}


.gap-md {

	gap:24px;

}


.gap-lg {

	gap:40px;

}


.mt-0 {

	margin-top:0;

}


.mb-0 {

	margin-bottom:0;

}


.rounded {

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

}


.shadow {

	box-shadow:var(--shadow-card);

}


/*==================================================
12. RESPONSIVE
==================================================*/

@media (max-width:768px) {

	.hero-buttons {

		flex-direction:column;

		width:100%;

	}


	.hero-buttons .btn {

		width:100%;

	}

}