/* ==========================================================================
   Green Heart Incoming — component styles
   theme.json copre colori/font/spaziatura di base; qui solo layout di
   componenti non esprimibili via design tokens (header, card, split, reveal).
   ========================================================================== */

/* --- Accessibilita': focus states (lo skip-link e' iniettato automaticamente
   da WordPress per i temi a blocchi, nessun markup custom necessario) --- */
:focus-visible {
	outline: 3px solid var(--wp--preset--color--accent);
	outline-offset: 2px;
}

/* --- Header / navigazione --- */
.ghi-header {
	position: -webkit-sticky;
	position: sticky;
	top: 0;
	z-index: 9999;
	background: var(--wp--preset--color--background);
	border-bottom: 1px solid rgba(30, 75, 59, 0.12);
}

.ghi-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1.5rem;
	padding: 0.75rem 1.5rem;
	max-width: var(--wp--style--global--wide-size, 1200px);
	margin: 0 auto;
}

.ghi-header__logo img {
	display: block;
	height: 42px;
	width: auto;
}

/* Blocco nativo core/navigation: solo rifiniture tipografiche, il comportamento
   mobile (toggle/overlay) e' gestito interamente da WordPress. */
.ghi-nav .wp-block-navigation-item__content {
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	text-decoration: none;
}

.ghi-nav .wp-block-navigation__responsive-container.is-menu-open {
	background: var(--wp--preset--color--background);
}

/* --- Hero: slideshow a 3 foto, nessun overlay scuro e nessun riquadro pieno -
   il testo siede su una sfumatura chiara che si dissolve nella foto --- */
.ghi-hero-slideshow {
	position: relative;
	min-height: 82vh;
	overflow: hidden;
}

.ghi-hero-slideshow__slides {
	/* Il layout "constrained" del gruppo genitore applica un max-width a TUTTI i
	   figli diretti (compreso questo, che deve invece riempire l'intero sfondo):
	   !important qui annulla in modo affidabile quel vincolo auto-generato da
	   Gutenberg, la cui specificita' esatta non e' garantita nel tempo. */
	position: absolute;
	inset: 0;
	max-width: none !important;
	margin: 0 !important;
}

.ghi-hero-slideshow__slide {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	margin: 0 !important;
	opacity: 0;
	transition: opacity 1.4s ease;
}

.ghi-hero-slideshow__slide img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.ghi-hero-slideshow__slide.is-active {
	opacity: 1;
}

.ghi-hero-slideshow__scrim {
	/* Stesso vincolo "constrained" del genitore da annullare qui, vedi sopra. */
	position: absolute;
	inset: 0;
	top: 38%;
	display: flex;
	align-items: flex-end;
	justify-content: center;
	padding: 0 1.5rem 3.5rem;
	background: linear-gradient(to top, rgba(255, 255, 255, 0.96) 0%, rgba(255, 255, 255, 0.82) 45%, rgba(255, 255, 255, 0) 100%);
	max-width: none !important;
	margin: 0 !important;
}

.ghi-hero-slideshow__content {
	max-width: 640px;
	text-align: center;
}

.ghi-hero-slideshow__content h1 {
	/* Dimensione fluida invece di un valore fisso: evita che il titolo sia
	   sproporzionato sugli schermi piccoli o tagli male dentro la sfumatura. */
	font-size: clamp(1.75rem, 5vw + 1rem, 3rem);
	margin-bottom: 0.75em;
}

@media (max-width: 600px) {
	.ghi-hero-slideshow {
		min-height: 70vh;
	}
	.ghi-hero-slideshow__scrim {
		top: 30%;
		padding-bottom: 2.25rem;
	}
}

@media (prefers-reduced-motion: reduce) {
	.ghi-hero-slideshow__slide {
		transition: none;
	}
}

/* --- Bottoni: rifiniture sopra lo stile base di theme.json --- */
.wp-element-button {
	transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease, color 0.2s ease;
	box-shadow: 0 2px 8px rgba(30, 75, 59, 0.18);
}

.wp-element-button:hover,
.wp-element-button:focus-visible {
	transform: translateY(-2px);
	box-shadow: 0 8px 20px rgba(30, 75, 59, 0.26);
}

/* --- Cluster tag (sostituisce badge prezzo/sconto dei riferimenti UX) --- */
.ghi-cluster-tag {
	display: inline-block;
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	background: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--primary);
	padding: 0.3em 0.9em;
	border-radius: 999px;
}

/* --- Card (Experience / Itinerary): box bianco compatto, immagine verticale,
   badge cluster sopra la foto - stile card Touriza (Attivita'/Destinazioni),
   senza prezzo/sconto --- */
.ghi-card {
	display: flex;
	flex-direction: column;
	gap: 0.6rem;
	text-decoration: none;
	color: inherit;
	background: var(--wp--preset--color--white, #fff);
	border-radius: 10px;
	overflow: hidden;
	box-shadow: 0 1px 3px rgba(30, 75, 59, 0.1), 0 1px 2px rgba(30, 75, 59, 0.06);
	padding-bottom: 1rem;
	transition: box-shadow 0.25s ease, transform 0.25s ease;
}

.ghi-card:hover,
.ghi-card:focus-within {
	box-shadow: 0 8px 20px rgba(30, 75, 59, 0.16);
	transform: translateY(-3px);
}

.ghi-card__image {
	position: relative;
	aspect-ratio: 3 / 4;
	overflow: hidden;
	background: linear-gradient(135deg, var(--wp--preset--color--secondary), var(--wp--preset--color--primary));
}

.ghi-card__image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 0.4s ease;
}

.ghi-card:hover .ghi-card__image img,
.ghi-card:focus-visible .ghi-card__image img {
	transform: scale(1.04);
}

.ghi-card__image--placeholder::after {
	content: "Green Heart Incoming";
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	color: rgba(255, 255, 255, 0.75);
	font-size: var(--wp--preset--font-size--small);
	text-transform: uppercase;
	letter-spacing: 0.08em;
	text-align: center;
	padding: 1rem;
}

.ghi-card__tag {
	position: absolute;
	top: 0.85rem;
	left: 0.85rem;
}

.ghi-card__title {
	font-size: var(--wp--preset--font-size--medium);
	margin: 0;
	padding: 0 1rem;
}

.ghi-card__meta {
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--secondary);
	padding: 0 1rem;
}

.ghi-card-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 1.5rem;
}

@media (max-width: 1100px) {
	.ghi-card-grid {
		grid-template-columns: repeat(3, 1fr);
	}
}

@media (max-width: 780px) {
	.ghi-card-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 480px) {
	.ghi-card-grid {
		grid-template-columns: 1fr;
	}
}

/* --- Split image/text section --- */
.ghi-split {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 3rem;
	align-items: center;
}

.ghi-split__media {
	position: relative;
}

.ghi-split__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 6px;
	display: block;
}

@media (max-width: 782px) {
	.ghi-split {
		grid-template-columns: 1fr;
	}
}

/* --- Why Green Heart: sezione scura full-bleed con collage fotografico a due
   immagini leggermente sovrapposte/ruotate (ispirata al blocco "About Us" di
   Touriza, senza rating/recensioni che non abbiamo) --- */
.ghi-why-dark {
	background: var(--wp--preset--color--primary);
	color: #fff;
}

.ghi-why-dark p {
	color: rgba(255, 255, 255, 0.78);
}

.ghi-why-dark h2 {
	color: #fff;
	font-size: clamp(1.75rem, 4vw + 1rem, 2.75rem);
}

p.ghi-eyebrow {
	display: flex;
	align-items: center;
	gap: 0.65rem;
	text-transform: uppercase;
	letter-spacing: 0.12em;
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	color: var(--wp--preset--color--accent);
	margin-bottom: 0.5rem;
}

.ghi-eyebrow::before {
	content: "";
	display: inline-block;
	width: 28px;
	height: 2px;
	background: var(--wp--preset--color--accent);
}

.ghi-why-collage {
	position: relative;
}

.ghi-why-collage__main {
	margin: 0;
	border-radius: 6px;
	overflow: hidden;
}

.ghi-why-collage__main img {
	display: block;
	width: 100%;
	height: 100%;
}

.ghi-why-collage__accent {
	/* Ora e' un <figure> (blocco Immagine nativo, non piu' un div di placeholder):
	   azzero il margine di default del browser, che con position:absolute si
	   sommerebbe a right/bottom disallineando la rotazione. */
	position: absolute;
	right: -6%;
	bottom: -10%;
	width: 46%;
	margin: 0;
	aspect-ratio: 3 / 4;
	border-radius: 6px;
	overflow: hidden;
	transform: rotate(-6deg);
	box-shadow: 0 16px 32px rgba(0, 0, 0, 0.35);
	border: 6px solid var(--wp--preset--color--background);
}

.ghi-why-collage__accent img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

@media (max-width: 782px) {
	.ghi-why-collage {
		margin-bottom: 3.5rem;
	}
	.ghi-why-collage__accent {
		right: 4%;
	}
}

/* --- Work With Us: card fotografiche con overlay testo (schema ispirato al
   blocco "Popular Trip Activities" di Touriza, in versione chiara). Placeholder
   in attesa di foto reali. --- */
.ghi-work-cards {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1.25rem;
}

.ghi-work-card {
	/* height forzato con !important: qualcosa in questo ambiente (non ancora
	   identificato con certezza) sta vincendo altre versioni di questa regola
	   provate in precedenza (aspect-ratio, altezza esplicita su flex, grid con
	   grid-auto-rows) - qui non lasciamo margine di dubbio. */
	position: relative;
	height: 400px !important;
	border-radius: 10px;
	overflow: hidden;
	display: block;
	text-decoration: none;
	color: #fff;
}

/* Overlay scuro per la leggibilita' del testo: sempre presente, sopra la foto
   reale se c'e' o sopra il placeholder se non c'e' ancora. */
.ghi-work-card::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	background: linear-gradient(to top, rgba(20, 40, 32, 0.9) 0%, rgba(20, 40, 32, 0.25) 55%, rgba(20, 40, 32, 0.05) 100%);
	pointer-events: none;
}

.ghi-work-card__image {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	margin: 0 !important;
	display: block;
	z-index: 0;
}

.ghi-work-card__image a {
	display: block;
	width: 100%;
	height: 100%;
}

.ghi-work-card__image img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Usata solo finche' una card non ha ancora una foto reale caricata. */
.ghi-work-card--placeholder {
	background:
		repeating-linear-gradient(45deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.08) 10px, rgba(255, 255, 255, 0.02) 10px, rgba(255, 255, 255, 0.02) 20px),
		linear-gradient(135deg, var(--wp--preset--color--secondary), var(--wp--preset--color--primary));
}

.ghi-work-card__text {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 2;
	padding: 1.1rem;
	min-height: 6.5rem;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	pointer-events: none;
}

.ghi-work-card__title {
	display: block;
	font-size: var(--wp--preset--font-size--medium);
	font-weight: 600;
	margin: 0 0 0.3em;
	color: #fff !important;
}

.ghi-work-card__title a {
	color: #fff !important;
	text-decoration: none;
	pointer-events: auto;
}

.ghi-work-card__subtitle {
	display: block;
	margin: 0;
	font-size: var(--wp--preset--font-size--small);
	color: rgba(255, 255, 255, 0.85) !important;
}

@media (max-width: 782px) {
	/* Stessa soglia dell'impilamento nativo del blocco Colonne di WordPress:
	   sotto, il testo e' gia' sopra le card a piena larghezza. */
	.ghi-work-cards {
		grid-template-columns: 1fr;
	}
	.ghi-work-card {
		height: 220px !important;
	}
}

/* --- Riquadro chiaro per il testo su foto full-bleed (The Umbria We Know) -
   stesso principio dell'hero: leggibilita' da un pannello chiaro, non da testo
   bianco diretto sulla foto (che qui perdeva contrasto). --- */
.ghi-umbria-card {
	background: rgba(255, 255, 255, 0.93);
	border-radius: 16px;
	padding: 2.5rem;
	max-width: 640px;
	margin: 0 auto;
	box-shadow: 0 16px 40px rgba(20, 40, 32, 0.25);
}

/* Il blocco Cover di WordPress forza di default il testo bianco al suo interno
   (pensato per overlay scuri pieni): qui serve il contrario, quindi va forzato
   esplicitamente, non basta omettere l'attributo colore sul blocco. */
.ghi-umbria-card h2 {
	color: var(--wp--preset--color--primary) !important;
}

.ghi-umbria-card p {
	color: var(--wp--preset--color--text) !important;
}

@media (max-width: 600px) {
	.ghi-umbria-card {
		padding: 1.75rem 1.5rem;
	}
}

/* --- About: stesso schema di ghi-umbria-card (foto di sfondo + pannello), ma
   tonalita' avana sfumata e testo nero invece di bianco/verde. --- */
.ghi-about-card {
	background: linear-gradient(135deg, rgba(217, 194, 160, 0.96) 0%, rgba(217, 194, 160, 0.88) 100%);
	border-radius: 16px;
	padding: 2.5rem;
	max-width: 640px;
	margin: 0 auto;
	box-shadow: 0 16px 40px rgba(20, 40, 32, 0.25);
	/* Colore di base sul pannello, non solo su h2/p: il bottone "outline" usa
	   "currentColor" per bordo e testo, quindi eredita questo valore. Senza,
	   erediterebbe il bianco forzato dal blocco Cover (vedi nota sotto) e
	   risulterebbe illeggibile sullo sfondo avana chiaro. */
	color: #000000 !important;
}

/* Stesso motivo della regola equivalente su .ghi-umbria-card: il blocco Cover
   forza il testo bianco di default, va sovrascritto esplicitamente. */
.ghi-about-card h2 {
	color: #000000 !important;
}

.ghi-about-card p {
	color: #000000 !important;
}

.ghi-about-card__stat {
	align-items: baseline;
	gap: 0.6rem;
	margin: 0.5rem 0 1.5rem;
}

.ghi-about-card__stat-number {
	margin: 0;
	font-family: var(--wp--preset--font-family--heading);
	font-size: 2rem;
	font-weight: 700;
	color: var(--wp--preset--color--primary) !important;
}

.ghi-about-card__stat-label {
	margin: 0;
	font-size: var(--wp--preset--font-size--small);
	color: #000000 !important;
}

@media (max-width: 600px) {
	.ghi-about-card {
		padding: 1.75rem 1.5rem;
	}
}

/* --- Selected Experiences: card grandi con overlay scuro e titolo in evidenza
   (schema ispirato al blocco destinazioni di Touriza), su sfondo chiaro. Classe
   dedicata e separata da ".ghi-card" (usata da Itineraries e dagli archivi, che
   funzionano gia' bene) per non introdurre effetti collaterali li'. --- */
.ghi-destinations {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1.5rem;
}

/* Il blocco nativo "Nessun risultato" avvolge le sue card in un contenitore
   proprio (.wp-block-query-no-results): senza questa regola quel contenitore
   diventa l'unico figlio diretto della griglia e le card al suo interno si
   impilano in verticale invece di stare nella griglia a 3 colonne. Con
   "display:contents" il contenitore "sparisce" dal layout e le card tornano
   ad essere figlie dirette della griglia, come le card reali. */
.ghi-destinations .wp-block-query-no-results {
	display: contents;
}

.ghi-destination-card {
	position: relative;
	height: 420px !important;
	border-radius: 10px;
	overflow: hidden;
	background: linear-gradient(135deg, var(--wp--preset--color--secondary), var(--wp--preset--color--primary));
}

.ghi-destination-card::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	background: linear-gradient(to top, rgba(20, 40, 32, 0.85) 0%, rgba(20, 40, 32, 0.15) 55%, rgba(20, 40, 32, 0) 100%);
}

.ghi-destination-card__image {
	position: absolute;
	inset: 0;
	margin: 0;
}

.ghi-destination-card__image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.ghi-destination-card__overlay {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 2;
	padding: 1.5rem;
}

.ghi-destination-card__tag {
	margin-bottom: 0.6rem;
}

.ghi-destination-card__title {
	margin: 0 0 0.2em;
	font-size: var(--wp--preset--font-size--large) !important;
	font-weight: 700;
	color: #fff !important;
}

.ghi-destination-card__title a {
	color: #fff !important;
	text-decoration: none;
}

.ghi-destination-card__meta {
	margin: 0;
	color: rgba(255, 255, 255, 0.85) !important;
	font-size: var(--wp--preset--font-size--small) !important;
}

.ghi-destination-card--placeholder {
	background:
		repeating-linear-gradient(45deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.08) 10px, rgba(255, 255, 255, 0.02) 10px, rgba(255, 255, 255, 0.02) 20px),
		linear-gradient(135deg, var(--wp--preset--color--secondary), var(--wp--preset--color--primary));
}

@media (max-width: 900px) {
	.ghi-destinations {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 600px) {
	.ghi-destinations {
		grid-template-columns: 1fr;
	}
	.ghi-destination-card {
		height: 280px !important;
	}
}

/* --- CTA band di chiusura sezione --- */
.ghi-cta-band {
	text-align: center;
	background: var(--wp--preset--color--primary);
	color: #fff;
	padding: 4rem 1.5rem;
}

.ghi-cta-band h2 {
	color: #fff;
}

/* --- Footer --- */
.ghi-footer {
	background: var(--wp--preset--color--primary);
	color: #fff;
	padding: 3rem 1.5rem 1.5rem;
}

.ghi-footer a {
	color: #fff;
}

.ghi-footer__columns {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 2rem;
	max-width: var(--wp--style--global--wide-size, 1200px);
	margin: 0 auto 2rem;
}

@media (max-width: 782px) {
	.ghi-footer__columns {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 480px) {
	.ghi-footer__columns {
		grid-template-columns: 1fr;
	}
}

.ghi-footer__bottom {
	text-align: center;
	font-size: var(--wp--preset--font-size--small);
	border-top: 1px solid rgba(255, 255, 255, 0.2);
	padding-top: 1.5rem;
}

.ghi-footer__legal {
	margin-top: 0.35rem;
	font-size: 0.75rem;
	opacity: 0.75;
}

/* --- B2B login box --- */
.ghc-b2b-login,
.ghc-b2b-status {
	max-width: 420px;
	margin: 0 auto;
	padding: 2rem;
	border: 1px solid rgba(30, 75, 59, 0.15);
	border-radius: 6px;
}

.ghc-b2b-login__intro {
	font-size: var(--wp--preset--font-size--small);
	margin-bottom: 1.5rem;
}

/* --- Torna su: stessa tonalita' (accento) gia' usata per i bottoni principali del
   sito. Nascosto di default (visibile solo dopo un po' di scroll, gestito in JS) e
   senza JS non compare mai - nessun problema, e' un aiuto in piu', non una funzione
   indispensabile (il tasto Home/scroll manuale restano sempre disponibili). --- */
.ghi-back-to-top {
	position: fixed;
	right: 1.5rem;
	bottom: 1.5rem;
	z-index: 9998;
	width: 46px;
	height: 46px;
	display: flex;
	align-items: center;
	justify-content: center;
	border: none;
	border-radius: 999px;
	background: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--primary);
	cursor: pointer;
	opacity: 0;
	visibility: hidden;
	transform: translateY(8px);
	transition: opacity 0.25s ease, transform 0.25s ease, background-color 0.2s ease;
	box-shadow: 0 6px 16px rgba(30, 75, 59, 0.3);
}

.ghi-back-to-top.is-visible {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

.ghi-back-to-top:hover,
.ghi-back-to-top:focus-visible {
	background: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--white, #fff);
}

@media (prefers-reduced-motion: reduce) {
	.ghi-back-to-top {
		transition: opacity 0.25s ease, visibility 0.25s ease;
	}
}

/* --- Scroll reveal (progressive enhancement: visibile di default, l'animazione
   si attiva solo se JS gira, via la classe "js" aggiunta su <html>) --- */
.js .ghi-reveal {
	opacity: 0;
	transform: translateY(16px);
	transition: opacity 0.6s ease, transform 0.6s ease;
}

.js .ghi-reveal.is-visible {
	opacity: 1;
	transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
	.js .ghi-reveal {
		opacity: 1;
		transform: none;
		transition: none;
	}
}