/* =====================================================================
   CONTATTI (page-contatti.php)
   Fondo chiaro come Chi siamo: a sinistra la sede, a destra il modulo,
   in apertura una fascia di locandine e in fondo la mappa.
   La base è in css/lrf.css.
   ===================================================================== */

.lrf-contatti{
	/* altezza della fascia di locandine: l'apertura parte sempre sotto */
	--muro-h: clamp(400px, 60vh, 680px);

	--paper: #F5F5F7;
	--paper-2: #ffffff;
	--film: var(--paper);
	--film-rgb: 245, 245, 247;

	--ink: #171615;
	--ink-2: rgba(23, 22, 21, 0.72);
	--ink-3: rgba(23, 22, 21, 0.5);
	--line: rgba(23, 22, 21, 0.13);

	position: relative;
	background-color: var(--paper);
	/* niente overflow:hidden qui, altrimenti la colonna sticky non tiene */
}
body{ background-color: #F5F5F7; }

/* Footer e menu di sito, come nelle altre pagine interne */
.menucontinside{ width: var(--centercolwidth); max-width: var(--maxwidth); }
.contfooterhome{ position: relative; background-color: #1d1d1d; }
.contfooterhomeinside{ width: var(--centercolwidth); max-width: var(--maxwidth); }


/* ---------------------------------------------------------------------
   FASCIA DI LOCANDINE E APERTURA
   --------------------------------------------------------------------- */
/* fascia di locandine: colonne che scorrono lentamente verso l'alto */
.lrf-comuro{
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	z-index: 0;
	display: flex;
	gap: 8px;
	align-items: flex-start;   /* le colonne sono alte quanto il loro contenuto */
	height: var(--muro-h);
	overflow: hidden;
	pointer-events: none;
}
/* la sfumatura verso il fondo pagina è un velo, non una maschera: la
   maschera va ricalcolata a ogni fotogramma e fa perdere fluidità */
.lrf-comuro::after{
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	background: linear-gradient(180deg, rgba(245, 245, 247, 0) 64%, rgba(245, 245, 247, 0.42) 86%, #F5F5F7 100%);
}
.lrf-comuro__col{
	flex: 1 0 auto;
	display: flow-root;   /* tiene dentro il margine dell'ultima locandina, senza aggiungere altezza */
	height: max-content;
	width: clamp(120px, 11.5vw, 215px);
	/* ogni colonna parte da un punto diverso e ha la sua andatura */
	animation: lrf-scorri var(--v, 60s) linear infinite;
	animation-delay: var(--r, 0s);
	will-change: transform;
	transform: translateZ(0);
	backface-visibility: hidden;
}
.lrf-comuro__col img{
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 2 / 3;
	object-fit: cover;
	opacity: 0.72;   /* la velatura sta sulle singole locandine: la fascia non e un livello unico da ridisegnare */
	margin-bottom: 8px;   /* margine, non gap: cosi il giro torna esatto */
	border-radius: 4px;
	background: #e9e9ec;   /* si vede anche senza immagine */
}
@keyframes lrf-scorri{
	from{ transform: translate3d(0, 0, 0); }
	to{ transform: translate3d(0, -50%, 0); }
}

.lrf-cohero{
	position: relative;
	z-index: 1;
	padding: calc(var(--muro-h) + clamp(24px, 4vh, 56px)) 0 clamp(8px, 1vw, 16px);
}
.lrf-cohero > .lrf-wrap > *{ animation: lrf-rise 1.2s var(--ease) both; }
.lrf-cohero > .lrf-wrap > :nth-child(1){ animation-delay: .1s; }
.lrf-cohero > .lrf-wrap > :nth-child(2){ animation-delay: .2s; }
.lrf-cohero > .lrf-wrap > :nth-child(3){ animation-delay: .3s; }

.lrf-cohero__title{
	margin: 20px 0 18px;
	font-size: clamp(2.2rem, 5.4vw, 4.4rem);
	font-weight: 700;
	line-height: 0.98;
	letter-spacing: -0.04em;
}
.lrf-cohero__lead{
	max-width: 900px;
	margin: clamp(20px, 2.4vw, 32px) 0 0;
	font-size: clamp(1.1rem, 1.8vw, 1.5rem);
	line-height: 1.4;
	letter-spacing: -0.015em;
	color: var(--ink);
	text-wrap: balance;
}

.lrf-tags{ display: flex; flex-wrap: wrap; gap: 6px; margin: 0; }
.lrf-tags span{
	padding: 5px 8px 4px;
	border-radius: 3px;
	background: rgba(23, 22, 21, 0.07);
	font-size: 0.58rem;
	font-weight: 600;
	letter-spacing: 0.14em;
	line-height: 1.2;
	text-transform: uppercase;
	color: var(--ink-2);
}


/* ---------------------------------------------------------------------
   IMPAGINATO
   --------------------------------------------------------------------- */
.lrf-contatti .lrf-body{
	position: relative;
	z-index: 1;
	padding: clamp(18px, 2vw, 30px) 0 clamp(60px, 8vw, 110px);
}
.lrf-cogrid{
	display: grid;
	grid-template-columns: minmax(0, 0.78fr) minmax(0, 1.22fr);
	gap: clamp(24px, 3vw, 48px);
	align-items: start;
}
/* la colonna di sinistra resta a vista mentre si compila il modulo */
.lrf-colato{
	position: sticky;
	top: calc(8vh + 40px);
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.lrf-cobox{
	padding: clamp(20px, 2.2vw, 28px);
	border: 1px solid var(--line);
	border-radius: 6px;
	background: var(--paper-2);
}
.lrf-cobox__t{
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0 0 12px;
	padding-bottom: 12px;
	border-bottom: 1px solid var(--line);
	font-size: 0.72rem;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--ink);
}

/* sede */
.lrf-cosede{ display: flex; align-items: center; gap: 20px; }
.lrf-cosede__bug{ width: 74px; height: 74px; flex: none; }
.lrf-cosede__nome{
	margin: 0 0 4px;
	font-size: 1.02rem;
	font-weight: 600;
	letter-spacing: -0.01em;
}
.lrf-cosede__ind{
	font-size: 0.9rem;
	line-height: 1.5;
	color: var(--ink-2);
}
.lrf-cosede__ind p{ margin: 0; }

/* telefono e mappa */
.lrf-coazioni{
	display: grid;
	gap: 1px;
	border-radius: 6px;
	overflow: hidden;
	background: rgba(23, 22, 21, 0.06);   /* è solo la riga fra un blocco e l'altro */
}
.lrf-corow{
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 16px;
	padding: 16px clamp(18px, 2vw, 24px);
	background: var(--paper-2);
	transition: background-color .3s ease;
}
.lrf-corow:hover{ background: #fbfbfc; }
.lrf-corow__et{
	font-size: 0.64rem;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--ink-3);
}
.lrf-corow__v{
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 0.98rem;
	font-weight: 500;
	color: var(--ink);
}
.lrf-corow__v svg{ font-size: 0.9em; color: var(--ink-3); }

/* social, nella stessa striscia di telefono e mappa */
.lrf-corow--social{ align-items: center; }
.lrf-cosocial{ display: flex; flex-wrap: wrap; gap: 4px; }
.lrf-cosocial a{
	display: grid;
	place-items: center;
	width: 38px;
	height: 38px;
	border-radius: 8px;
	transition: transform .3s var(--ease), background-color .3s ease;
}
.lrf-cosocial a:hover{ transform: translateY(-2px); background: rgba(23, 22, 21, 0.06); }
.lrf-cosocial img{ width: 21px; height: 21px; object-fit: contain; }

/* posizioni aperte */
.lrf-colavoro p{
	margin: 0;
	font-size: 0.92rem;
	line-height: 1.6;
	color: var(--ink-2);
}


/* ---------------------------------------------------------------------
   NEWSLETTER (blocco condiviso)
   --------------------------------------------------------------------- */
/* la newsletter sta sotto al modulo, senza cornice */
.lrf-conews{
	margin-top: 14px;
	padding: clamp(24px, 3vw, 44px);
	border-radius: 6px;
	background: var(--paper-2);
}
.lrf-conews .container_newsletter{
	width: 100%;
	margin: 0;
	padding: 0;
	border: 0;
	box-shadow: none;
	background: none;
}
.lrf-conews h3{
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0 0 12px;
	padding-bottom: 12px;
	border-bottom: 1px solid var(--line);
	font-size: 0.72rem;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--ink);
}
.lrf-conews h3 img{ width: 22px; height: auto; }
.lrf-conews .newsletterintro{
	margin-bottom: 14px;
	font-size: 0.9rem;
	line-height: 1.6;
	color: var(--ink-2);
}


/* ---------------------------------------------------------------------
   MODULO
   --------------------------------------------------------------------- */
.lrf-coform__box{
	padding: clamp(24px, 3vw, 44px);
	border: 1px solid var(--line);
	border-radius: 6px;
	background: var(--paper-2);
}

/* campi: valgono sia per il modulo di contatto sia per la newsletter */
.lrf-contatti input[type="text"],
.lrf-contatti input[type="email"],
.lrf-contatti input[type="tel"],
.lrf-contatti input[type="url"],
.lrf-contatti input[type="date"],
.lrf-contatti input[type="number"],
.lrf-contatti select,
.lrf-contatti textarea{
	width: 100%;
	padding: 14px 16px;
	border: 1px solid var(--line);
	border-radius: 5px;
	background: #fff;
	font: inherit;
	font-size: 0.95rem;
	color: var(--ink);
	transition: border-color .25s ease, box-shadow .25s ease;
	-webkit-appearance: none;
	appearance: none;
}
.lrf-contatti textarea{ min-height: 150px; resize: vertical; }
.lrf-contatti select{
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23171615' stroke-width='2'><path d='M6 9l6 6 6-6'/></svg>");
	background-repeat: no-repeat;
	background-position: right 14px center;
	background-size: 18px;
	padding-right: 42px;
	cursor: pointer;
}
.lrf-contatti input::placeholder,
.lrf-contatti textarea::placeholder{ color: var(--ink-3); }
.lrf-contatti input:focus,
.lrf-contatti select:focus,
.lrf-contatti textarea:focus{
	outline: 0;
	border-color: rgba(23, 22, 21, 0.4);
	box-shadow: 0 0 0 3px rgba(23, 22, 21, 0.06);
}

.lrf-contatti .wpcf7-form label{ display: block; margin-bottom: 12px; }
.lrf-contatti .wpcf7-form p{ margin: 0; }
.lrf-contatti .wpcf7-list-item{ margin: 0; }
.lrf-contatti .wpcf7-acceptance,
.lrf-contatti .container_newsletter .mailup-privacy,
.lrf-contatti .wpcf7-acceptance .wpcf7-list-item-label{
	font-size: 0.78rem;
	line-height: 1.55;
	color: var(--ink-3);
}
.lrf-contatti input[type="checkbox"]{
	width: 16px;
	height: 16px;
	margin-right: 8px;
	accent-color: var(--accent);
	vertical-align: -2px;
}
.lrf-contatti .wpcf7-not-valid-tip{
	margin-top: 6px;
	font-size: 0.78rem;
	color: var(--accent);
}
.lrf-contatti .wpcf7-response-output{
	margin: 16px 0 0;
	padding: 12px 14px;
	border: 1px solid var(--line);
	border-radius: 5px;
	font-size: 0.88rem;
}

/* bottoni di invio (modulo e newsletter) */
.lrf-contatti .wpcf7-submit,
.lrf-contatti button[type="submit"],
.lrf-contatti input[type="submit"]{
	width: 100%;
	height: 52px;
	margin-top: 8px;
	padding: 0 24px;
	border: 0;
	border-radius: 4px;
	background: var(--accent);
	font: inherit;
	font-size: 0.8rem;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: #fff;
	cursor: pointer;
	transition: background-color .3s ease, transform .3s var(--ease);
}
.lrf-contatti .wpcf7-submit:hover,
.lrf-contatti button[type="submit"]:hover,
.lrf-contatti input[type="submit"]:hover{ background: var(--accent-hi); transform: translateY(-2px); }
.lrf-contatti .wpcf7-spinner{ display: block; margin: 10px auto 0; }


/* ---------------------------------------------------------------------
   MAPPA
   --------------------------------------------------------------------- */
.lrf-comappa{
	position: relative;
	z-index: 1;
	padding-bottom: clamp(40px, 6vw, 80px);
}
.lrf-comappa .lrf-kicker{ margin-bottom: 18px; }
.lrf-comappa .simple-map{
	width: var(--wrap);
	height: clamp(320px, 52vh, 520px);
	margin: 0 auto;
	border: 1px solid var(--line);
	border-radius: 6px;
	overflow: hidden;
	background: #ececef;
}
/* la mappa si accorda alla pagina: quasi in bianco e nero, chiara */
.lrf-comappa .simple-map{ position: relative; }
.lrf-comappa .simple-map iframe{
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
	filter: grayscale(0.9) brightness(1.06) contrast(0.92);
}

.lrf-mappa__link{
	width: var(--wrap);
	margin: 16px auto 0;
	text-align: right;
}
.lrf-mappa__link .lrf-btn--ghost{
	background: var(--paper-2);
	color: var(--ink);
	box-shadow: inset 0 0 0 1px var(--line);
	backdrop-filter: none;
	-webkit-backdrop-filter: none;
}
.lrf-mappa__link .lrf-btn--ghost:hover{ background: #fff; }


/* ---------------------------------------------------------------------
   RESPONSIVE
   --------------------------------------------------------------------- */
@media (max-width: 1000px){
	.lrf-contatti{ --muro-h: clamp(260px, 34vh, 400px); }
	.lrf-cogrid{ grid-template-columns: minmax(0, 1fr); }
	.lrf-coform{ order: -1; }
}
@media (max-width: 600px){
	.lrf-cosede{ align-items: flex-start; }
	.lrf-corow{ flex-direction: column; gap: 4px; }
	.lrf-cosocial a{ width: 46px; height: 46px; }
}

@media (prefers-reduced-motion: reduce){
	.lrf-cohero > .lrf-wrap > *{ animation: none; }
	.lrf-comuro__col{ animation: none; }
}