/* ============================================================
   COURSE — scheda corso (single-les_course).
   SOLO l'irriducibile: colori, gradienti, pill, fixed, ::before.
   Layout/spaziatura/bordi/radius/gap → utility .les-* e componenti nel markup
   (vedi frontend-corsi-guide.md §15). Caricato su is_singular('les_course').
   ============================================================ */


.les-emoji-iconbox {
    height: 100%;
    background: var(--les-color-neutral-0);
}
.les-emoji-iconbox-title {
    color: var(--les-color-accent-700);
}
.les-emoji-iconbox-emoji {
    background: var(--les-color-neutral-50);
}
/* variante "out-icon" (come work-fast): emoji in cerchio neutro che sporge dal
   lato corrispondente alla posizione dell'icona (top/bottom/left/right). */
.les .les-emoji-icon-boxes-out-icon .les-emoji-iconbox-emoji {
    /* Il disco assume il colore della SEZIONE che sta dietro la card: la sezione
       lo dichiara in --les-out-icon-bg, così intorno all'emoji sembra trasparenza.
       (CSS, non JS: il colore lo conosciamo già; JS fallirebbe sui gradienti.) */
    background: var( --les-out-icon-bg, transparent );
    padding: .14em;
    border-radius: 50%;
    aspect-ratio: 1 / 1;
    display: flex;
    align-items: center;
    justify-content: center;
}
.les .les-emoji-icon-boxes-out-icon .les-emoji-iconbox-position-top    .les-emoji-iconbox-emoji { margin-top:    calc((.72em + var(--les-space-md)) * -1); }
.les .les-emoji-icon-boxes-out-icon .les-emoji-iconbox-position-bottom .les-emoji-iconbox-emoji { margin-bottom: calc((.72em + var(--les-space-md)) * -1); }
.les .les-emoji-icon-boxes-out-icon .les-emoji-iconbox-position-left   .les-emoji-iconbox-emoji { margin-left:   calc((.72em + var(--les-space-md)) * -1); }
.les .les-emoji-icon-boxes-out-icon .les-emoji-iconbox-position-right  .les-emoji-iconbox-emoji { margin-right:  calc((.72em + var(--les-space-md)) * -1); }
/* ---------- HERO (bg image + overlay) ---------- */
.les .les-course-hero {
    --les-hero-bg-image: none;
    position: relative;
    overflow: visible;
    padding-bottom: calc(2 * var(--les-space-xxxl)) !important;
}
.les .les-course-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 0;
    background-image: var(--les-hero-bg-image);
    background-size: cover;
    background-position: center;
	opacity: 0.2;
}
.les .les-course-hero .l-section-h .g-cols{
	grid-template-columns: repeat(2,1fr);
}
@media (max-width: 600px) {
	.les .les-course-hero {
		padding-bottom: var(--les-space-xl) !important;
	}
}
/* Card testo hero */

.les .les-course-hero-text{
	margin-right: -6rem;
}
.les .les-course-hero-card {
    position: relative;
    z-index: 2;
	padding: var(--les-space-xl);
    display: flex;
    flex-direction: column;
    gap: var(--les-space-md);
}
.les .les-course-hero .l-section-h::after{
	content: '';
    background-color: var(--les-color-neutral-0);
    width: 68%;
    height: 100%;
    top: 0;
    left: 0;
    position: absolute;
    border-radius: var(--les-border-radius-xl);
	box-shadow: 0 8px 32px -12px color-mix(in srgb, var(--les-color-accent-900) 28%, transparent);
}
.les .les-course-hero .l-section-h::after{
		background: var(--les-color-accent-100);
	}
@media (max-width: 1024px) {
	.les .les-course-hero .l-section-h .g-cols{
		grid-template-columns: repeat(1,1fr);
		margin-top: 64%;
    	gap: 0;
	}
	.les .les-course-hero-text {
		margin-right: 0;
		order: 2;
	}
	.les .les-course-hero .l-section-h::after{
		width: 100%;
	}
}
@media (max-width: 1024px) {
	.les .les-course-hero .l-section-h .g-cols{
		margin-top: 36%;
	}
}
@media (max-width: 600px) {
	.les .les-course-hero .l-section-h .g-cols{
		margin-top: 46%;
	}
	
}

/* Colonna media */
.les .les-course-hero-media {
    position: relative;
    z-index: auto;
    overflow: visible;
	margin-right: -4rem;
  	margin-left: 2rem;
}
@media (max-width: 1400px) {
	.les .les-course-hero-media {
		margin-right: -2rem;
	}
}
@media (max-width: 1280px) {
	.les .les-course-hero-media {
		margin-right: 0rem;
	}
}
@media (max-width: 1024px) {
	.les .les-course-hero-media {
		margin-left: 4rem;
        margin-top: -34%;
        margin-right: 4rem;
		margin-bottom: -2rem;
		order: 1;
		max-width: 320px;
	}
}
@media (max-width: 600px) {
	.les .les-course-hero-media {
		margin-left: 4rem;
        margin-top: -48%;
        margin-right: 4rem;
		margin-bottom: -2rem;
		order: 1;
	}
}
.les .les-course-hero-media .vc_column-inner,
.les .les-course-hero-media .wpb_wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: visible;
}

/* Ring: .w-image-h di Impreza diventa il cerchio con gradiente */
.les .les-course-hero-ring {
    display: flex;
    align-items: center;
    justify-content: center;
    --hero-img-size: min(100%, 960px);
    max-width: unset;
}
.les .les-course-hero-ring .w-image-h {
    width: var(--hero-img-size);
    aspect-ratio: 1;
    max-height: var(--hero-img-size);
    border-radius: 50%;
    background: linear-gradient(to right, var(--les-color-accent-700), var(--les-color-accent-400), var(--les-color-primary-400))!important;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-shadow: 0 4px 16px -8px rgba(0 0 0 / .52);
}
.les .les-course-hero-ring .w-image-h img {
    width: calc(var(--hero-img-size) - 5%);
    object-fit: cover;
    object-position: center;
    border-radius: 50%;
    background-color: #fff;
    z-index: 3;
    flex-shrink: 0;
    aspect-ratio: 1;
    max-height: calc(var(--hero-img-size) - 5%);
}

.les .les-course-hero-title { color: var(--les-color-accent-900); }

/* ---------- SERVIZI CORRELATI ---------- */
.les .les-course-related-services {
	display: flex;
	flex-wrap: wrap;
	gap:var(--les-space-md) var(--les-space-xl);
	margin-top: var(--les-space-xxl);
}
.les .les-course-related-services-title {
	flex: 0 0 100%;
	margin: 0;
}
.les .les-course-related-services > .les-course-related-service {
	flex: 0 0 calc((100% - var(--les-space-xl)) / 2);
}
.les .les-course-related-services.is-single {
	align-items: center;
}
.les .les-course-related-services.is-single > .les-course-related-service {
	flex-basis: 100%;
}
.les .les-course-related-services.is-single .les-course-related-service.has-image {
	display: flex;
	align-items: center;
}
.les .les-course-related-services.is-single .les-course-related-service-image {
	flex: 0 0 32%;
	width: 32%;
	margin-left: calc(var(--les-related-service-space) / 2);
	margin-right: calc(-1.36 * var(--les-related-service-space));
}
.les .les-course-related-services.is-single .les-course-related-service-content {
	flex: 1 1 auto;
	margin-top: 0;
	padding-top: var(--les-related-service-space);
	padding-left: calc(var(--les-related-service-space) * 4);
}
.les .les-course-related-service {
	--les-related-service-space: var(--les-space-lg);
	position: relative;
}
.les .les-course-related-service-image {
	width: 54%;
	margin-left: calc(var(--les-related-service-space) / 2);
	padding: calc(var(--les-related-service-space) / 1.8);
	border-radius: 50%;
	background: var(--les-color-neutral-0);
	position: relative;
	z-index: 1;
}
.les .les-course-related-service-image .w-image-h,
.les .les-course-related-service-image img {
	width: 100%;
	aspect-ratio: 1;
	object-fit: cover;
	border-radius: 50%;
	background: var(--les-color-neutral-50);
}
.les .les-course-related-service-content {
	box-sizing: border-box;
	padding: calc(var(--les-related-service-space) * 2) var(--les-related-service-space) var(--les-related-service-space);
	margin-top: calc(-1.36 * var(--les-related-service-space));
	border-radius: var(--les-border-radius-md);
	background: var(--les-color-neutral-50);
	display: flex;
	flex-direction: column;
	gap: var(--les-space-sm);
}
.les .les-course-related-service:not(.has-image) .les-course-related-service-content {
	margin-top: 0;
	padding-top: var(--les-related-service-space);
}
.les .les-course-related-service-type {
	color: var(--les-color-neutral-800);
	font-size: smaller;
}
.les .les-course-related-service-title {
	margin: 0;
	font-family: var(--font-family);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	color: var(--les-color-accent-700);
}
.les .les-course-related-service-cta {
	margin-top: auto;
	padding-top: var(--les-space-sm);
}
.les .les-course-related-service-cta .w-btn {
	color: var(--les-color-primary-600) !important;
	transform: scale(.88);
	transform-origin: left center;
}
.les .les-course-related-service-cta .w-btn:hover {
	color: var(--les-color-neutral-900) !important;
}
@media (max-width: 600px) {
	.les .les-course-related-services > .les-course-related-service,
	.les .les-course-related-services.is-single > .les-course-related-service {
		flex-basis: 100%;
	}
	.les .les-course-related-services.is-single .les-course-related-service.has-image {
		display: block;
	}
	.les .les-course-related-services.is-single .les-course-related-service-image {
		width: 42%;
		margin-right: 0;
	}
	.les .les-course-related-services.is-single .les-course-related-service-content {
		margin-top: calc(-1.36 * var(--les-related-service-space));
		padding-top: calc(var(--les-related-service-space) * 2);
		padding-left: var(--les-related-service-space);
	}
	.les .les-course-related-service-image {
		width: 42%;
	}
}
.les .les-course-hero-title .les-course-kicker {
    display: block;
    font-size: 1.2em;
    color: var(--les-color-primary-500);
}
.les .les-course-hero-claim { color: var(--les-color-neutral-700); margin: 0; }
@media (max-width: 600px) {
	.les .les-course-hero-title .h1l {
		font-size: calc(var(--h1l-font-size) * 0.8);
	}
    .les .les-course-hero-card {
        padding: var(--les-space-lg);
    }
}


/* riga hero_info: icona FA + testo breve in fondo alla colonna hero */
.les .les-course-hero-info {
	display: flex;
	align-items: flex-start;
	gap: .5em;
	color: var(--les-color-neutral-600);
	font-size: .875em;
}
.les .les-course-hero-info > i {
	flex-shrink: 0;
	margin-top: .2em;
	font-size: 1em;
}
.les .les-course-hero-info-text p { margin-bottom: 0; }
.les .les-course-hero-info-text p + p { margin-top: .25em; }

/* badge "Gratuito" (pill) */
.les .les-course-badge--free {
	display: inline-flex; align-items: center; gap: .4em;
	padding: .35em .9em; border-radius: 999px;
	font-size: var(--les-text-size-xs); font-weight: 700; text-transform: uppercase; letter-spacing: .03em;
	background: linear-gradient(45deg,#26B53D,#53CF60); color: #fff;
}

/* ---------- TITOLO RILASCIATO (card WPB: logo + copy) ---------- */
.les .les-course-credential-section {
	position: relative;
	z-index: 2;
}
.les .les-course-credential {
	overflow: hidden;
	margin-top: calc( -1.6 * var(--les-space-xxxl));
	background:
		radial-gradient(120% 140% at 8% 10%, var(--les-color-accent-700), transparent 42%),
		linear-gradient(110deg, var(--les-color-accent-950), var(--les-color-accent-800));
	color: var(--les-color-neutral-0);
	box-shadow: 0 18px 40px color-mix(in srgb, var(--les-color-accent-950) 18%, transparent);
}
.les .les-course-credential > .vc_column_container {
	justify-content: center;
}
.les .les-course-credential-kicker {
	color: var(--les-color-neutral-0);
	opacity: .86;
}
.les .les-course-credential-title {
	color: var(--les-color-neutral-0);
	margin-bottom: var(--les-space-sm);
}
.les .les-course-credential-description {
	color: var(--les-color-accent-100);
	max-width: 46rem;
}
.les .les-course-credential-logo {
	height: 100%;
	justify-content: center;
}
.les .les-course-credential-logo .w-iconbox-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: clamp(5rem, 8vw, 8rem);
	aspect-ratio: 1 / 1;
	border: 2px solid var(--les-color-primary-400);
	border-radius: 50%;
	color: var(--les-color-primary-400) !important;
}
.les .les-course-credential-logo .w-iconbox-icon,
.les .les-course-credential-logo .w-iconbox-icon i {
	line-height: 1;
	font-size: 3.2rem !important;
}
.les .les-course-chip { background: #fff; border: 1px solid var(--les-color-accent-200); border-radius: 999px; padding: .3em .9em; font-size: var(--les-text-size-xs); font-weight: 600; color: var(--les-color-accent-800); }
@media (max-width: 1024px) {
	.les .les-course-credential {
		text-align: center;
		grid-template-columns: 1fr !important;
	}
	.les .les-course-credential-description {
		margin-right: auto;
		margin-left: auto;
	}
	.les .les-course-credential-logo .w-iconbox-icon i{
		font-size: 2.8rem !important;
	}
}
@media (max-width: 600px) {
	.les .les-course-credential {
		margin-top: 0;
	}
	.les .les-course-credential-logo .w-iconbox-icon,
	.les .les-course-credential-logo .w-iconbox-icon i {
		line-height: 1;
		font-size: 2.4rem !important;
	}
}

/* ---------- SIDEBAR (TOC + CTA) ---------- */
.les .les-course-toc-title { color: var(--les-color-neutral-500); }
.les .les-course-toc ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .35rem; }
.les .les-course-toc a { text-decoration: none; color: var(--les-color-accent-800); font-weight: 600; border-left: 2px solid transparent; padding-left: .7rem; display: inline-block;}
.les .les-course-toc a:hover { border-color: var(--les-color-primary-500); color: var(--les-color-accent-950); }
.les .les-course-toc .les-toc-level-4 { padding-left: 1rem; }
.les .les-course-toc .les-toc-level-5 { padding-left: 2rem; }
.les .les-course-toc .les-toc-level-6 { padding-left: 3rem; }
.les .les-course-aside-cta { background: radial-gradient(120% 140% at 0% 0%, var(--les-color-accent-700), var(--les-color-accent-950)); color: #fff; }
.les .les-course-aside-cta p { color: var(--les-color-accent-100); }
.les .les-course-code { color: var(--les-color-neutral-500); }
.les .les-course-wp-sidebar {
}
.les .les-course-wp-sidebar .widget {
}
.les .les-course-wp-sidebar .widgettitle,
.les .les-course-wp-sidebar .widget-title {
	color: var(--les-color-accent-800);
	font-size: var(--les-text-size-lg);
	margin-bottom: var(--les-space-sm);
}
/* ---------- DESTINATARI / REQUISITI (card WPB sotto credential) ---------- */
.les .les-course-access-section {
	position: relative;
	z-index: 1;
}
@media (max-width: 600px){
	.les .les-course-access-section{
		margin-top: var(--les-space-lg);
	}
}
.les .les-course-access-card {
	position: relative;
	background:
		linear-gradient(90deg, var(--les-color-neutral-0), var(--les-color-accent-50));
	width: 100%;
	border: var(--les-border);
}
.les .les-course-access-panel {
	flex: 1 1 0;
	min-width: 0;
}
.les .les-course-access-card > .divider {
	position: absolute;
	top: var(--les-space-lg);
	bottom: var(--les-space-lg);
	left: 50%;
	width: var(--les-border-width);
	background: var(--les-color-neutral-200);
	transform: translateX(-50%);
}
.les .les-course-access-panel-content {
	width: 100%;
}
@media (max-width: 1024px){
	.les .les-course-access-panel-content{
		margin-top: var(--les-space-lg);
	}
}
@media (max-width: 900px){
	.les .les-course-access-panel-content{
		margin-bottom: var(--les-space-lg);
	}
}
.les .les-course-access-icon {
	flex: 0 0 auto;
}
.les .les-course-access-icon .w-iconbox-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: clamp(4.5rem, 7vw, 6.5rem);
	aspect-ratio: 1 / 1;
	border-radius: 50%;
	background: var(--les-color-accent-100);
	color: var(--les-color-accent-700) !important;
}
.les .les-course-access-icon .w-iconbox-icon i {
	line-height: 1;
}
.les .les-course-access-kicker {
	color: var(--les-color-accent-500);
	margin-bottom: 0 !important;
}
.les .les-course-access-title {
	color: var(--les-color-neutral-950);
	margin: 0;
	padding: 0;
}
.les .les-course-tags { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem; }
.les .les-course-tags li { background: var(--les-color-accent-100); color: var(--les-color-accent-800); border-radius: 999px; padding: .35em 1em; font-weight: 600; font-size: var(--les-text-size-sm); margin: 0;}
.les .les-course-checklist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .5rem; }
.les .les-course-checklist li { padding-left: 1.8em; position: relative; }
.les .les-course-checklist li::before { content: "\2713"; position: absolute; left: 0; color: var(--les-color-primary-600); font-weight: 700; }
@media (max-width: 900px) {
	.les .les-course-access-card {
		grid-template-columns: 1fr !important;
	}
	.les .les-course-access-card > .divider {
		top: 50%;
		right: var(--les-space-lg);
		bottom: auto;
		left: var(--les-space-lg);
		width: auto;
		height: var(--les-border-width);
		transform: translateY(-50%);
	}
	.les .les-course-access-panel-content {
		align-items: center;
		text-align: center;
	}
	.les .les-course-access-copy {
		align-items: center;
	}
	.les .les-course-checklist {
		text-align: left;
	}
}
@media (max-width: 600px) {
	.les .les-course-access-panel-content {
		display: flex !important;
		gap: var(--les-space-md) !important;
	}
	.les .les-course-access-icon .w-iconbox-icon{
		font-size: 1.6em !important;
		width: clamp(3.2rem, 7vw, 6.5rem);
	}
}

/* ---------- MODULO CONTATTO (come #modulo-contatto dei servizi) ---------- */
/* .les #modulo-contatto {
	background: var(--les-color-accent-50);
	--img-offcontent-offset: 12rem;
}
.les #modulo-contatto .w-hwrapper > .w-image { width: 40%; }
.les #modulo-contatto .w-hwrapper > .w-vwrapper { width: 60%; }
.les #modulo-contatto #service-cf-image img {
	margin-left: calc( -1 * var(--img-offcontent-offset) );
	width: calc( 100% + var(--img-offcontent-offset) );
	max-width: unset;
}
@media (max-width: 767px) {
	.les #modulo-contatto { --img-offcontent-offset: 0px; }
	.les #modulo-contatto .w-hwrapper { flex-direction: column-reverse; gap: var(--les-space-xl); }
	.les #modulo-contatto .w-hwrapper > * { width: 100% !important; margin-right: unset !important; }
} */

/* ---------- CONTATTI ---------- */
.les #corsi-contatti {
	background: linear-gradient(180deg, var(--les-color-accent-50), var(--les-color-neutral-0));
}
.les #corsi-contatti h2 { font-size: 1em; color: var(--les-color-accent-600); }
.les #corsi-contatti h2 .funziona { color: var(--les-color-primary-500); }
.les #corsi-contatti #modulo-contatto > div {
	background: var(--les-color-accent-900);
	padding: var(--les-space-lg);
	border-radius: var(--les-border-radius-md);
	box-shadow: var(--les-box-shadow-raised);
	color: var(--les-color-neutral-0);
}
@media (max-width: 600px) {
	.les #corsi-contatti .g-cols { grid-gap: 2rem !important; }
}

/* ---------- POPUP CONTATTO (#service-popup-contact: linguetta fissa che scivola da destra) ---------- */
.les { --scp-width: 360px; }
.les #service-popup-contact {
	position: fixed; top: 40vh; right: calc( var(--scp-width) * -1 );
	max-width: var(--scp-width); z-index: 999;
	color: var(--les-color-neutral-0);
	background: var(--les-color-accent-900);
	border: solid 2px var(--les-color-accent-700);
	border-radius: var(--les-border-radius-md) 0 0 var(--les-border-radius-md);
	transition: transform 300ms ease-in-out;
}
.les #service-popup-contact:hover { transform: translateX( calc( var(--scp-width) * -1 ) ); }
.les #service-popup-contact .w-text { color: var(--les-color-neutral-0); }
/* la linguetta "spc-open-button" sporge a sinistra del pannello ed è sempre visibile */
.les #service-popup-contact #spc-open-button {
	position: absolute;
	left: calc( ( var(--les-space-md) + 2 * var(--les-space-sm) + 18px ) * -1 );
	line-height: 1em;
	background: var(--les-color-accent-700);
	border-radius: var(--les-border-radius-md) 0 0 var(--les-border-radius-md);
}
.les #service-popup-contact #spc-open-button .w-iconbox-title { writing-mode: vertical-rl; color: var(--les-color-neutral-0); }
@media (max-width: 767px) { .les { --scp-width: 280px; } }

/* ---------- SERVIZI CORRELATI (widget sidebar: lista di link separati) ---------- */
/* Widget contenitore: niente bg, niente padding (le voci arrivano ai bordi) */
.les .les-course-aside-services { display: flex; flex-direction: column; }
.les .les-course-aside-services-title { color: var(--les-color-accent-700); margin-bottom: var(--les-space-xs); }
/* Anteprima = link che riempie l'intera riga (cliccabile ovunque) */
.les .les-service-mini { display: flex; flex-direction: column; gap: var(--les-space-xxs); padding: var(--les-space-sm) 0; text-decoration: none; color: inherit; }
/* Separatore tra le anteprime */
.les .les-service-mini + .les-service-mini { border-top: var(--les-border); }
.les .les-service-mini-title { color: var(--les-color-accent-900); }
.les .les-service-mini-desc { color: var(--les-color-neutral-600); }
.les .les-service-mini:hover .les-service-mini-title { color: var(--les-color-accent-700); }

/* ---------- STICKY COURSE BAR (WPB, come #cta-topfooter) ---------- */
.les .les-coursebar {
	position: fixed;
	right: auto;
	bottom: var(--les-space-md);
	left: 50%;
	z-index: 90;
	width: min(calc(100vw - (2 * var(--les-space-md))), 1180px);
	pointer-events: none;
	opacity: 0;
	visibility: hidden;
	transform: translate(-50%, calc(100% + var(--les-space-xl)));
	transition:
		transform .25s ease,
		opacity .2s ease,
		visibility 0s linear .25s;
}
.les .les-coursebar.is-visible {
	opacity: 1;
	visibility: visible;
	transform: translate(-50%, 0);
	transition-delay: 0s;
}
.les .les-coursebar > .l-section {
	background: transparent;
	overflow: visible;
}
.les .les-coursebar > .l-section > .l-section-h {
	max-width: none;
	padding: 0;
}
.les #les-coursebar-cta > div > .vc_row {
	position: relative;
	z-index: 5;
	width: 100%;
	padding: 2rem var(--les-space-xxl);
	pointer-events: auto;
	background: #f2f4f7;
	border-radius: 6rem;
	box-shadow: 0 11px 12px 0 #00000038;
}
@media (max-width: 767px) {
	.les .les-coursebar {
		bottom: var(--les-space-sm);
		width: calc(100vw - (2 * var(--les-space-sm)));
	}
	.les #les-coursebar-cta > div > .vc_row {
		padding: var(--les-space-lg);
		border-radius: var(--les-border-radius-md);
	}
	.les #les-coursebar-cta .w-btn-wrapper.align_right {
		margin-bottom: 0;
		text-align: left;
	}
	.les #les-coursebar-cta .w-btn-wrapper .w-btn {
		margin-left: 0 !important;
	}
}

#les-coursebar-cta {
	padding: 0;
}