/* NODO Ads Manager — stili frontend
   v1.2.0: il rapporto larghezza/altezza del posizionamento viene mantenuto con
   aspect-ratio invece di un'altezza fissa in pixel, cosi' il banner si
   ingrandisce/rimpicciolisce restando sempre nelle proporzioni configurate. */

.nam-ad-slot{
	width:100%;
	max-width:var(--nam-width,970px);
	min-height:0;
	margin:0 auto;
	position:relative;
	box-sizing:border-box
}
.nam-ad-slot *{box-sizing:border-box}

.nam-ad-link{display:block;text-decoration:none!important;color:inherit!important}

.nam-ad{width:100%;position:relative;overflow:hidden}

.nam-ad-label{
	font-size:10px;
	line-height:1.4;
	letter-spacing:.08em;
	text-transform:uppercase;
	color:#6f6a62;
	margin:0 0 6px;
	text-align:center
}

.nam-ad-media{
	width:100%;
	aspect-ratio:var(--nam-ratio,970/250);
	display:flex;
	align-items:center;
	justify-content:center;
	overflow:hidden;
	background:#f5f2ec
}

.nam-ad-image{width:100%;height:100%;display:block}

.nam-fit-contain .nam-ad-image{object-fit:contain}
.nam-fit-cover .nam-ad-image{object-fit:cover}

.nam-ad-image_text{
	display:grid;
	grid-template-columns:minmax(0,1.4fr) minmax(220px,.6fr);
	gap:0;
	background:#fff;
	border:1px solid rgba(30,26,21,.1)
}
.nam-ad-image_text .nam-ad-label{grid-column:1/-1;margin:0;padding:5px 8px;background:#fff}
.nam-ad-image_text .nam-ad-media{height:100%;aspect-ratio:var(--nam-ratio,970/250)}

/* Adattamento "naturale": l'admin ha scelto di ignorare il rapporto del
   posizionamento e mostrare l'immagine con le sue proporzioni reali. Queste
   regole devono restare DOPO le precedenti (anche dentro la media query sotto)
   perche' a parita' di specificita' CSS vince l'ultima dichiarata. */
.nam-ad-media.nam-fit-natural{aspect-ratio:auto;height:auto}
.nam-fit-natural .nam-ad-image{height:auto;object-fit:contain}

.nam-ad-copy{
	padding:clamp(18px,3vw,38px);
	display:flex;
	flex-direction:column;
	justify-content:center
}
.nam-ad-title{
	font-size:clamp(20px,2.5vw,34px);
	font-weight:700;
	line-height:1.1;
	margin-bottom:10px;
	color:#191713
}
.nam-ad-body{font-size:15px;line-height:1.55;color:#4f4a42}
.nam-ad-body p:last-child{margin-bottom:0}

.nam-ad-code{text-align:center}
.nam-code-preview{
	white-space:pre-wrap;
	text-align:left;
	background:#f7f4ee;
	padding:16px;
	border-radius:10px;
	border:1px solid #e6ded1;
	color:#29251f
}

.nam-ad-placeholder,
.nam-elementor-placeholder,
.nam-ad-admin-warning{
	padding:24px;
	border:1px dashed #c8bda8;
	background:#faf8f4;
	color:#6f6556;
	text-align:center;
	border-radius:8px
}

.nam-ad-loading{
	min-height:80px;
	display:flex;
	align-items:center;
	justify-content:center;
	color:#7b746a;
	font-size:13px
}
.nam-ad-loading:after{
	content:"";
	width:18px;
	height:18px;
	margin-left:10px;
	border:2px solid rgba(150,126,79,.25);
	border-top-color:#967e4f;
	border-radius:50%;
	animation:nam-spin .8s linear infinite
}
@keyframes nam-spin{to{transform:rotate(360deg)}}

@media(max-width:767px){
	.nam-ad-slot{max-width:var(--nam-mobile-width,320px)}
	.nam-ad-media{aspect-ratio:var(--nam-mobile-ratio,320/100)}
	.nam-ad-image_text{grid-template-columns:1fr}
	.nam-ad-image_text .nam-ad-media{aspect-ratio:var(--nam-mobile-ratio,320/100)}
	.nam-ad-media.nam-fit-natural{aspect-ratio:auto;height:auto}
	.nam-ad-copy{padding:18px}
}