:root {
	/* --min_fs: 1;
	--max_fs: 4;
	--min_vw: 20;
	--max_vw: 65;
	--min_fs_rem: calc(var(--min_fs) * 1rem);
	--max_fs_rem: calc(var(--max_fs) * 1rem);
	--min_vw_rem: calc(var(--min_vw) * 1rem); */
	/* --slope: (var(max_fs) - var(min_fs)) * (calc(100vw - var(--min_vw_rem))) /
		(var(--max_vw) - var(--min_vw)); */
	/* --slope: (var(max_fs) - var(min_fs)) / (var(--max_vw) - var(--min_vw)); */
	/* --yAxisIntersection: -var(--min_vw) * var(--slope) + var(--min_fs) */
	/* font-size: clamp(
		var(--min_fs_rem),
		(var(--min_fs_rem) + var(--slope)),
		var(--max_fs_rem)
	); */
	/* font-size: clamp(1rem, calc(-1 * var(--yAxisIntersection)) + var(--slope), 4rem); */
	/* font-size: clamp(1rem, -0.33rem + 6.7vw, 4rem); */
}
/* CSS Reset */
* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	position: relative;
}
body {
	font-family: sans-serif;
	line-height: 1.5;
}
/* Base Styles */
body {
	font-family: "Arial", sans-serif;
	margin: 0;
	padding: 0;
	background: #f5f5f5;
	color: #333;
}

/* Main Grid Layout */
.grid-container {
	display: grid;
	/* grid-template-columns: 1fr; */
	/* grid-template-rows: auto; */
	gap: 2rem;
	/* width: auto; */
	max-width: 1200px;
	margin: 0 auto;
	/* padding: 1rem; */
}

/* Hero Section */
.hero {
	aspect-ratio: 1280/785;
	/* background: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)),
		url("https://images.unsplash.com/photo-1547347298-4074fc3086f0?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80"); */
	/* background: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)),
			url(../assets/img/1280_785.jpg); */
	background: url(../assets/img/1280_785.jpg);
	background-size: cover;
	color: white;
	text-align: center;
	/* padding: 4rem 1rem; */
	/* border-radius: 10px; */
	display: grid;
	align-items: center;
	.hero_banner {
		align-self: start;
		/* background: blue; */
		h1 {
			/* font-size: 3rem; */
			/* font-size: clamp(16px, 5vw, 48px); */
			background: blueviolet;
			background: url(../assets/img/1280_785.jpg);
			color: white;
			/* background: url(images/fire.jpg) no-repeat; */
			background-clip: text;
			text-fill-color: transparent;
			-webkit-background-clip: text;
			-webkit-text-fill-color: transparent;
			background-position: center;
			background-position: 50% 65%;
			font-weight: 800;
			/* text-shadow: 1px 1px 2px hsl(0 50% 100% / 0.1); */
			filter: drop-shadow(0px 1px 0px hsl(0 50% 0% / 0.9));
		}
	}
	.hero_content {
		height: min-content;
		/* filter: blur(1px); */
		padding: 4em 1em 0.5em;
		/* border: 1px solid grey; */
		/* background: url(../assets/img/a-vibrant-motivational-poster-celebratin_XzieciaMT9aUeBOFdfu8xA_NzT1dilFS0yy_PSu5DzmKA.jpg); */
		background-size: cover;
		max-width: 80%;
		margin: auto;
	}
}

.hero h2 {
	/* font-size: 3rem; */
	margin: 0;
	color: hsl(192 20% 67% / 1);
	color: hsl(312 50% 50% / 1);
	text-shadow: 0px 1px 0px hsl(0 50% 0% / 0.6);
}
.hero p {
	color: hsl(72 50% 25% / 1);
	font-weight: 600;
}

.cta-button {
	background: #ff6b00; /* Builder's orange */
	color: white;
	border: none;
	padding: 1rem 2rem;
	font-size: 1.2rem;
	border-radius: 5px;
	cursor: pointer;
	margin-top: 1rem;
	display: inline-flex;
	gap: 0.4em;
	.icon_whatsapp {
		/* width: 2em; */
		/* height: 2em; */
		/* display: block; */
		display: flex;
		align-items: center;
		align-content: center;
		justify-content: space-between;
	}
}

/* Events Grid */
.events {
	text-align: center;
}

.event-grid {
	display: grid;
	/* grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
	grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
	grid-template-columns:
		minmax(20vw, auto) minmax(350px, 1fr)
		minmax(20vw, auto); */
	/* grid-auto-rows: minmax(130px, auto); */
	gap: 1.5rem;
	margin-top: 2rem;
	/* margin-inline: 2em; */
	/* margin-inline: clamp(2rem, 1rem + 6vw, 8rem); */
	margin-inline: auto;
	width: fit-content;
	.bg_1 {
		background-color: hsl(208, 100%, 54%);
		.event_card_text {
			/* background-color: hsl(208, 100%, 64%); */
			/* background-image: radial-gradient(
				circle,
				hsl(208, 100%, 64%),
				hsl(208, 100%, 44%)
			); */
			rotate: 5deg;
		}
		.noisy_bg {
			background-image: radial-gradient(
				circle,
				hsl(208, 100%, 74%),
				hsl(198, 100%, 40%)
			);
			/* box-shadow: 5px 5px 10px 10px hsl(208 100% 45% / 1); */
		}
	}
	.bg_2 {
		background-color: hsl(168, 100%, 50%);
		.event_card_text {
			/* background-color: hsl(208, 100%, 64%); */
			/* background-image: radial-gradient(
				circle,
				hsl(208, 100%, 64%),
				hsl(208, 100%, 44%)
			); */
			rotate: -3deg;
		}
		.noisy_bg {
			background-image: radial-gradient(
				circle,
				hsl(168, 100%, 74%),
				hsl(158, 100%, 40%)
			);
			/* box-shadow: 5px 5px 10px 10px hsl(208 100% 45% / 1); */
		}
	}
	.bg_3 {
		background-color: hsl(27, 100%, 50%);
		.event_card_text {
			/* background-color: hsl(208, 100%, 64%); */
			/* background-image: radial-gradient(
				circle,
				hsl(208, 100%, 64%),
				hsl(208, 100%, 44%)
			); */
			rotate: 10deg;
		}
		.noisy_bg {
			background-image: radial-gradient(
				circle,
				hsl(27, 100%, 74%),
				hsl(17, 100%, 40%)
			);
			/* box-shadow: 5px 5px 10px 10px hsl(208 100% 45% / 1); */
		}
	}
	.bg_4 {
		background-color: hsl(300, 100%, 66%);
		.event_card_text {
			/* background-color: hsl(208, 100%, 64%); */
			/* background-image: radial-gradient(
				circle,
				hsl(208, 100%, 64%),
				hsl(208, 100%, 44%)
			); */
			rotate: 1deg;
		}
		.noisy_bg {
			background-image: radial-gradient(
				circle,
				hsl(300, 100%, 74%),
				hsl(290, 100%, 40%)
			);
			/* box-shadow: 5px 5px 10px 10px hsl(208 100% 45% / 1); */
		}
	}
	.bg_5 {
		background-color: hsl(56, 100%, 55%);
		.event_card_text {
			/* background-color: hsl(208, 100%, 64%); */
			/* background-image: radial-gradient(
				circle,
				hsl(208, 100%, 64%),
				hsl(208, 100%, 44%)
			); */
			rotate: -5deg;
		}
		.noisy_bg {
			background-image: radial-gradient(
				circle,
				hsl(56, 100%, 74%),
				hsl(46, 100%, 40%)
			);
			/* box-shadow: 5px 5px 10px 10px hsl(208 100% 45% / 1); */
		}
	}
}
.bg_1 {
	/* clip-path: url(#myClipPath); */
}
.event-card {
	/* grid-column: 2/3; */
	/* min-width: 350px; */
	/* justify-self: center; */
	/* max-width: 350px; */
	background: white;
	padding: 1em;
	border-radius: 8px;
	box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
	box-shadow: 1px 3px 3px rgba(0, 0, 0, 0.4);
	display: grid;
	grid-template-columns: auto auto;
	column-gap: 2em;
	align-items: center;
	/* justify-items: start; */
	/* align-content: stretch; */
	/* clip-path: path("M0 0 L50 0 L50 50 L0 50 Z"); */
	.event_card_text {
		padding: 1em;
		.noisy_bg {
			position: absolute;
			left: -5%;
			top: -10%;
			width: 100%;
			height: 100%;
			filter: url(#noise);
		}
		.content {
			z-index: 10;
		}
	}
	h3 {
		/* grid-column: 2/3;
		grid-row: 1/2;
		justify-self: end; */
		text-align: end;
	}
	p {
		/* grid-column: 2/3;
		grid-row: 2/3;
		justify-self: end; */
		text-align: end;
	}
	.icon {
		display: inline-block;
		width: 3em;
		height: 3em;
		/* margin-inline-end: 0.5em; */
		/* filter: saturate(2); */
		/* position: absolute; */
		/* left: 1em; */
		/* top: 1em; */
		/* grid-column: 1/2;
		grid-row: 1/3; */
	}
	.icon_beach {
		background: url(../assets/icons/beach_volley.png);
		background-size: contain;
	}
	.icon_soccer {
		background: url(../assets/icons/soccer.png);
		background-size: contain;
	}
	.icon_basket {
		background: url(../assets/icons/basket.png);
		background-size: contain;
	}
	.icon_tennis {
		background: url(../assets/icons/tennis.png);
		background-size: contain;
	}
	.icon_rollers {
		background: url(../assets/icons/rollers.png);
		background-size: contain;
	}
}

/* Countdown Timer */
.countdown {
	text-align: center;
	background: #333;
	background: hsl(192, 21%, 68%);
	color: white;
	padding: 2rem;
	/* border-radius: 10px; */
	/* Mask properties */
	-webkit-mask-image: url(../assets/img/texture/IMG_20240922_142614.jpg);
	mask-image: url(../assets/img/texture/IMG_20240922_142614.jpg);
	-webkit-mask-size: cover;
	mask-size: cover;
	-webkit-mask-position: center;
	mask-position: center;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;

	/* Use luminance mode for JPGs */
	-webkit-mask-mode: luminance;
	mask-mode: luminance;
	h2 {
		color: black;
	}
}

.timer {
	font-size: 2rem;
	font-weight: bold;
}
.timer {
	display: flex;
	justify-content: center;
	gap: 1.5rem;
	margin-top: 1rem;
}

.timer-block {
	background: rgba(255, 255, 255, 0.2);
	background: hsl(192 21% 58%);
	background: hsl(192 40% 30%);
	border-radius: 8px;
	padding: 1rem;
	/* min-width: 80px; */
	text-align: center;
	/* backdrop-filter: blur(5px); */
}
.timer-block {
	background: rgba(255, 255, 255, 0.2);
	background: hsl(192 21% 58%);
	background: hsl(197 50% 35%);
	border-radius: 8px;
	padding: 1rem;
	/* min-width: 80px; */
	text-align: center;
	/* backdrop-filter: blur(5px); */
	box-shadow: 1px 1px 2px hsl(200 50% 10% / 1);
	border: 1px solid hsl(0 100% 100% / 0.7);
	flex-basis: 100px;
}

.timer-block span {
	/* font-size: 2.5rem; */
	font-weight: bold;
	display: block;
}

.timer-block small {
	font-size: 0.8rem;
	opacity: 0.8;
	text-transform: uppercase;
}

/* Testimonials */
.testimonial-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
	gap: 1.5rem;
	margin-top: 2rem;
}

blockquote {
	background: white;
	padding: 1.5rem;
	border-left: 4px solid #ff6b00;
	border-radius: 5px;
}

/* Registration Form */
.registration {
	background: white;
	padding: 2rem;
	border-radius: 10px;
	text-align: center;
}

form {
	display: grid;
	gap: 1rem;
	max-width: 500px;
	margin: 0 auto;
}

input,
select {
	padding: 0.8rem;
	border: 1px solid #ddd;
	border-radius: 5px;
}

/* Footer */
.footer {
	/* text-align: center;
	padding: 2rem;
	background: #333;
	color: white; */
	/* border-radi us: 10px; */
	padding: 1.5rem 2rem;
	background: hsl(210 50% 10% / 1);
	display: flex;
	justify-content: space-between;
	p {
		margin-inline-start: auto;
		color: white;
		a {
			background: azure;
			margin-inline: 0.3rem;
			border-radius: 0.2rem;
			padding: 0.2rem 0.3rem;
			text-decoration: none;
			font-weight: 600;
			img {
				width: 1rem;
			}
		}
	}
}
.memory {
	width: 90%;
	margin: auto;
	border: 3px solid black;
	padding: 0.5em 2em;
	border-left: 10px solid red;
}

/* .social-links a {
	color: #ff6b00;
	margin: 0 0.5rem;
	text-decoration: none;
} */

.debug-font-size {
	position: fixed;
	bottom: 20px;
	right: 20px;
	background: rgba(0, 0, 0, 0.8);
	color: white;
	padding: 10px 15px;
	border-radius: 4px;
	font-family: monospace;
	z-index: 9999;
	font-size: 14px;
	width: 50%;
}

.debug-breakpoint {
	width: 50%;
	margin-top: 5px;
	height: 4px;
	background: linear-gradient(90deg, red 0%, green 100%);
}