/* Hero slider HTML5 — sostituisce RevSlider sulla home */

/* Sovrascriviamo la section Elementor parent (max-width 1400px, overflow hidden)
   solo quando contiene .art-hero. Doppio meccanismo: :has() per browser moderni,
   .has-art-hero (aggiunta via JS) come fallback per Firefox <121 / Safari <15.4. */
section.elementor-section:has(.art-hero),
section.elementor-section:has(.art-hero) > .elementor-container,
section.elementor-section:has(.art-hero) .elementor-column,
section.elementor-section:has(.art-hero) .elementor-widget-wrap,
section.elementor-section:has(.art-hero) .elementor-widget-shortcode,
section.elementor-section:has(.art-hero) .elementor-widget-container,
section.elementor-section:has(.art-hero) .elementor-shortcode,
section.elementor-section.has-art-hero,
section.elementor-section.has-art-hero > .elementor-container,
section.elementor-section.has-art-hero .elementor-column,
section.elementor-section.has-art-hero .elementor-widget-wrap,
section.elementor-section.has-art-hero .elementor-widget-shortcode,
section.elementor-section.has-art-hero .elementor-widget-container,
section.elementor-section.has-art-hero .elementor-shortcode {
	width: 100% !important;
	max-width: 100% !important;
	padding: 0 !important;
	margin: 0 !important;
	overflow: visible !important;
}

.art-hero {
	position: relative;
	display: block;
	/* Esce dal container Elementor (max 1400px) per occupare l'intera viewport
	   fin dal primo paint, senza dipendere dal JS "stretch_section" di Elementor
	   che applica width:100vw + left:-X solo dopo il load (causando shift). */
	width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
	/* Altezza = viewport - navbar. La navbar reale viene misurata da JS al load
	   e scritta in --art-hero-navbar-h; 95px è il fallback desktop. */
	height: calc(100vh - var(--art-hero-navbar-h, 95px));
	min-height: 480px;
	overflow: hidden;
	background: #1c120c;
	color: #f5e9d0;
	font-family: inherit;
}

.art-hero__track {
	position: absolute;
	inset: 0;
}

.art-hero__slide {
	position: absolute;
	inset: 0;
	background-size: cover;
	background-position: center;
	opacity: 0;
	transition: opacity 800ms ease-in-out;
	display: flex;
	align-items: center;
	justify-content: center;
	pointer-events: none;
}

.art-hero__slide.is-active {
	opacity: 1;
	pointer-events: auto;
	z-index: 1;
}

.art-hero__overlay {
	display: none;
}

.art-hero__content {
	position: relative;
	max-width: 800px;
	padding: 0 24px;
	text-align: center;
	z-index: 1;
	animation: artHeroIn 1s ease-out;
}

@keyframes artHeroIn {
	from { opacity: 0; transform: translateY(20px); }
	to   { opacity: 1; transform: translateY(0); }
}

.art-hero__kicker {
	margin: 0 0 18px;
	font-size: clamp(13px, 1.1vw, 16px);
	letter-spacing: 0.22em;
	text-transform: uppercase;
	font-weight: 600;
	color: #1c120c;
}

.art-hero__title {
	margin: 0 0 36px;
	font-size: clamp(40px, 8vw, 110px);
	font-weight: 300;
	line-height: 1.05;
	color: #241c10;
}

/* Slide 1 (titolo "Pregiato Nero di Seppia"): testo lungo, font più piccolo. */
.art-hero__slide:nth-child(1) .art-hero__title {
	font-size: clamp(28px, 5vw, 69px);
}

.art-hero__cta {
	display: inline-block;
	padding: 14px 38px;
	font-size: 13px;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	font-weight: 600;
	color: #1c120c;
	background: rgba(245, 233, 208, 0.88);
	border: 2px solid #1c120c;
	text-decoration: none;
	transition: background-color 200ms, color 200ms, border-color 200ms;
}

.art-hero__cta:hover,
.art-hero__cta:focus-visible {
	background: #1c120c;
	color: #f5e9d0;
	border-color: #1c120c;
}

.art-hero__nav {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 28px;
	height: 60px;
	background: transparent;
	color: #241c10;
	border: 0;
	padding: 0;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 3;
	opacity: 0.85;
	transition: opacity 200ms, transform 200ms;
}

.art-hero__nav:hover,
.art-hero__nav:focus-visible {
	opacity: 1;
}

.art-hero__nav svg {
	width: 100%;
	height: 100%;
	stroke-width: 2;
}

.art-hero__nav--prev { left: 40px; }
.art-hero__nav--next { right: 40px; }

/* Dot indicators */
.art-hero__dots {
	position: absolute;
	bottom: 28px;
	left: 50%;
	transform: translateX(-50%);
	display: flex;
	gap: 12px;
	z-index: 3;
}

.art-hero__dot {
	width: 12px;
	height: 12px;
	border-radius: 50%;
	border: 2px solid #1c120c;
	background: rgba(245, 233, 208, 0.6);
	cursor: pointer;
	padding: 0;
	box-shadow: 0 0 8px rgba(245, 233, 208, 0.5);
	transition: background-color 200ms, border-color 200ms;
}

.art-hero__dot:hover { background: rgba(245, 233, 208, 0.95); }
.art-hero__dot.is-active { background: #1c120c; }

/* Reduce motion */
@media (prefers-reduced-motion: reduce) {
	.art-hero__slide { transition: none; }
	.art-hero__content { animation: none; }
}

/* Mobile tweaks */
@media (max-width: 640px) {
	.art-hero {
		/* Su mobile la navbar è in genere più bassa: 70px di fallback. */
		height: calc(100vh - var(--art-hero-navbar-h, 70px));
		min-height: 420px;
	}
	.art-hero__nav { width: 18px; height: 40px; }
	.art-hero__nav--prev { left: 14px; }
	.art-hero__nav--next { right: 14px; }
	.art-hero__cta { padding: 12px 28px; font-size: 12px; }
}