/* Hero amb imatge de fons (home i pàgines interiors) */
.hero {
	position: relative;
	height: 80vh;
	min-height: 460px;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	color: var(--color-white);
	background-color: var(--color-green-900);
	background-image: linear-gradient(180deg, var(--color-green-700) 0%, var(--color-green-900) 100%);
	background-size: cover;
	background-position: center;
}

.hero__overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(
		180deg,
		rgba(32, 37, 31, 0.8) 0%,
		rgba(32, 37, 31, 0.55) 12%,
		rgba(32, 37, 31, 0.3) 30%,
		rgba(32, 37, 31, 0.35) 60%,
		rgba(32, 37, 31, 0.6) 100%
	);
}

.hero__content {
	position: relative;
	z-index: 1;
	max-width: 760px;
	padding: 0 var(--gutter);
}

.hero__content h1,
.hero__title {
	font-family: var(--font-heading);
	line-height: 1.15;
	font-size: clamp(32px, 5vw, 56px);
	margin-bottom: 0.3em;
}

.hero__subtitle {
	font-family: var(--font-accent);
	font-style: italic;
	color: var(--color-tan-light);
	font-size: clamp(18px, 2.5vw, 24px);
	margin-bottom: 0.6em;
}

.hero__text {
	font-family: var(--font-body);
	font-size: clamp(15px, 1.6vw, 18px);
	opacity: 0.9;
}

/* Variant per a pàgines interiors: més baixa, amb el text una mica per sota del navbar */
.hero--page {
	height: 60vh;
	min-height: 420px;
	padding-top: var(--navbar-height);
}

.hero--page .hero__content {
	max-width: 1000px;
}

/* Passador de la pàgina d'inici: les diapositives s'apilen i es fonen l'una amb l'altra (hero-slider.js) */
.hero--slider {
	overflow: hidden;
}

.hero__slide {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: var(--color-green-900);
	background-image: linear-gradient(180deg, var(--color-green-700) 0%, var(--color-green-900) 100%);
	background-size: cover;
	background-position: center;
	opacity: 0;
	visibility: hidden;
	transition: opacity 1s ease, visibility 0s linear 1s;
}

.hero__slide.is-active {
	opacity: 1;
	visibility: visible;
	transition: opacity 1s ease, visibility 0s;
}

/* Indicador i fletxes, a baix a la dreta */
.hero__controls {
	position: absolute;
	right: var(--gutter);
	bottom: 32px;
	z-index: 2;
	display: flex;
	align-items: center;
	gap: 8px;
}

/* Una mica més d'aire entre les barretes i les fletxes */
.hero__dots {
	display: flex;
	gap: 8px;
	margin-right: 10px;
}

/* Cada punt és una barreta; la de la diapositiva activa s'omple durant els 4 segons */
.hero__dot {
	position: relative;
	width: 36px;
	height: 3px;
	padding: 0;
	border: 0;
	border-radius: 2px;
	background-color: rgba(255, 255, 255, 0.35);
	overflow: hidden;
	cursor: pointer;
}

/* Zona de clic més alta que la barreta */
.hero__dot::before {
	content: "";
	position: absolute;
	inset: -10px 0;
}

.hero__dot-fill {
	position: absolute;
	inset: 0;
	background-color: var(--color-tan-light);
	transform: scaleX(0);
	transform-origin: left center;
}

.hero__dot.is-active .hero__dot-fill {
	transform: scaleX(1);
}

.hero--slider.is-playing .hero__dot.is-active .hero__dot-fill {
	animation: hero-dot-fill var(--hero-interval, 6s) linear;
}

.hero--slider.is-paused .hero__dot.is-active .hero__dot-fill {
	animation-play-state: paused;
}

@keyframes hero-dot-fill {
	from {
		transform: scaleX(0);
	}
	to {
		transform: scaleX(1);
	}
}

.hero__arrow {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	padding: 0;
	border: 1px solid rgba(255, 255, 255, 0.5);
	border-radius: 50%;
	background-color: rgba(32, 37, 31, 0.25);
	color: var(--color-white);
	cursor: pointer;
	transition: background-color 0.2s ease, border-color 0.2s ease;
}

.hero__arrow:hover {
	background-color: rgba(32, 37, 31, 0.5);
	border-color: var(--color-white);
}

.hero__arrow svg {
	width: 20px;
	height: 20px;
}

@media (max-width: 700px) {
	.hero__controls {
		bottom: 20px;
	}

	.hero__arrow {
		width: 34px;
		height: 34px;
	}

	.hero__dot {
		width: 24px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.hero__slide,
	.hero__slide.is-active {
		transition: none;
	}
}