/* =============================================================================
   CIFAMED - Foglio di stile dei contenuti generati
   -----------------------------------------------------------------------------
   DOVE: appendere in fondo a
         wp-content/themes/woodmart-child/style.css
         (in alternativa: WoodMart -> Theme settings -> Custom CSS)

   A COSA SERVE: impagina l'HTML creato da cifamed-contenuti.php. Senza questo
   file le pagine generate si vedono lo stesso, ma senza griglia ne' stile.

   Le stesse classi si possono assegnare a mano nel campo
   "Avanzate -> Classi CSS" dei widget Elementor, per uniformare le pagine
   esistenti a quelle nuove.
   ============================================================================= */

:root {
	--cfm-header-h: 90px;              /* altezza header sticky desktop: DA VERIFICARE */
	--cfm-gap: 40px;
	--cfm-video-vertical-max: 360px;
	--cfm-radius: 8px;
	--cfm-border: rgba( 0, 0, 0, .1 );
	--cfm-muted: rgba( 0, 0, 0, .65 );
}

/* --- Blocchi generici ------------------------------------------------------ */
.cfm-intro,
.cfm-tech,
.cfm-cols,
.cfm-icons,
.cfm-cards,
.cfm-highlight,
.cfm-cta {
	margin: 0 0 var(--cfm-gap);
}

.cfm-intro > *:last-child,
.cfm-highlight > *:last-child {
	margin-bottom: 0;
}

/* --- Blocco tecnologia ----------------------------------------------------- */
/* Titolo a tutta larghezza, testo a sinistra, gallery a destra, video sotto:
   e' il layout richiesto dal cliente. */
.cfm-tech {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--cfm-gap);
	align-items: start;
	scroll-margin-top: calc( var(--cfm-header-h) + 20px );
}

.cfm-tech__head,
.cfm-tech__video {
	grid-column: 1 / -1;
}

.cfm-tech__head > *:last-child,
.cfm-tech__text > *:last-child {
	margin-bottom: 0;
}

/* Se il macchinario non ha gallery, il testo occupa tutta la riga. */
.cfm-tech:not( :has( .cfm-tech__gallery ) ) .cfm-tech__text {
	grid-column: 1 / -1;
}

/* Un contenitore lasciato vuoto non deve aprire una colonna vuota. */
.cfm-tech__gallery:empty,
.cfm-tech__video:empty {
	display: none;
}

.cfm-tech__gallery img {
	max-width: 100%;
	height: auto;
	border-radius: var(--cfm-radius);
}

/* --- Video: orizzontale (default) ------------------------------------------ */
.cfm-tech__video iframe,
.cfm-tech__video video,
.cfm-tech__video .wp-video,
.cfm-tech__video .elementor-video,
.cfm-tech__video .elementor-wrapper {
	display: block;
	width: 100%;
	aspect-ratio: 16 / 9;
	height: auto;
	border: 0;
	border-radius: var(--cfm-radius);
	background: #000;
}

/* --- Video: verticale ------------------------------------------------------ */
/* Niente stiramento e niente bande nere: il player viene ristretto e centrato. */
.cfm-tech__video--vertical {
	max-width: var(--cfm-video-vertical-max);
	margin-left: auto;
	margin-right: auto;
}

.cfm-tech__video--vertical iframe,
.cfm-tech__video--vertical video,
.cfm-tech__video--vertical .wp-video,
.cfm-tech__video--vertical .elementor-video,
.cfm-tech__video--vertical .elementor-wrapper {
	aspect-ratio: 9 / 16;
}

.cfm-tech__video .wp-video,
.cfm-tech__video .mejs-container {
	width: 100% !important;
	height: auto !important;
}

/* --- Placeholder Complianz ------------------------------------------------- */
/* I video YouTube e Vimeo restano bloccati finche' l'utente non accetta i
   cookie di marketing: senza queste regole al loro posto compare un rettangolo
   grigio senza proporzioni. */
.cfm-tech__video .cmplz-placeholder-element,
.cfm-tech__video .cmplz-blocked-content-container {
	border-radius: var(--cfm-radius);
	overflow: hidden;
	aspect-ratio: 16 / 9;
	height: auto !important;
	min-height: 0 !important;
}

.cfm-tech__video--vertical .cmplz-placeholder-element,
.cfm-tech__video--vertical .cmplz-blocked-content-container {
	aspect-ratio: 9 / 16;
}

/* --- Colonne (benefici, aree, risultati) ----------------------------------- */
.cfm-cols {
	display: grid;
	grid-template-columns: repeat( auto-fit, minmax( 260px, 1fr ) );
	gap: var(--cfm-gap);
}

.cfm-cols h3 {
	margin-top: 0;
}

/* --- Icone e punti di forza ------------------------------------------------ */
.cfm-icons {
	display: grid;
	grid-template-columns: repeat( auto-fit, minmax( 260px, 1fr ) );
	gap: var(--cfm-gap);
	list-style: none;
	margin-left: 0;
	padding-left: 0;
}

.cfm-icon {
	padding: 24px;
	border: 1px solid var(--cfm-border);
	border-radius: var(--cfm-radius);
}

.cfm-icon h3 {
	margin-top: 0;
}

.cfm-icon > *:last-child {
	margin-bottom: 0;
}

/* Le schede piu' lunghe (altre tecnologie Hitek) stanno piu' larghe. */
.cfm-icons--compact {
	grid-template-columns: repeat( auto-fit, minmax( 300px, 1fr ) );
}

/* Spazio per l'icona, quando verra' inserita come immagine o SVG. */
.cfm-icon img,
.cfm-icon svg {
	display: block;
	width: 48px;
	height: 48px;
	margin-bottom: 12px;
}

/* --- Card di navigazione --------------------------------------------------- */
.cfm-cards {
	display: grid;
	grid-template-columns: repeat( auto-fit, minmax( 220px, 1fr ) );
	gap: 20px;
}

.cfm-card {
	display: block;
	padding: 24px;
	border: 1px solid var(--cfm-border);
	border-radius: var(--cfm-radius);
	text-decoration: none;
	transition: transform .2s ease, box-shadow .2s ease;
}

.cfm-card:hover,
.cfm-card:focus-visible {
	transform: translateY( -2px );
	box-shadow: 0 6px 20px rgba( 0, 0, 0, .08 );
}

.cfm-card__title {
	display: block;
	font-weight: 600;
	margin-bottom: 4px;
}

.cfm-card__text {
	display: block;
	font-size: .9em;
	color: var(--cfm-muted);
}

/* --- Riquadro in evidenza -------------------------------------------------- */
.cfm-highlight {
	padding: 24px;
	border-left: 3px solid currentColor;
	border-radius: 0 var(--cfm-radius) var(--cfm-radius) 0;
	background: rgba( 0, 0, 0, .03 );
}

.cfm-highlight h3 {
	margin-top: 0;
}

/* --- Pulsanti e CTA -------------------------------------------------------- */
.cfm-actions,
.cfm-cta {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
}

.cfm-btn {
	display: inline-block;
	padding: 12px 24px;
	border: 1px solid currentColor;
	border-radius: var(--cfm-radius);
	text-decoration: none;
	font-weight: 600;
	line-height: 1.2;
}

.cfm-btn--primary {
	border-color: transparent;
	background: #1f2d3d;   /* DA ALLINEARE al colore principale del tema */
	color: #fff;
}

.cfm-btn--wa {
	border-color: transparent;
	background: #25d366;
	color: #0b2e13;
}

/* --- Navigazione ad ancore (pagina Hitek Milano) --------------------------- */
.cfm-anchornav {
	position: sticky;
	top: var(--cfm-header-h);
	z-index: 99;
	margin-bottom: var(--cfm-gap);
	border-bottom: 1px solid var(--cfm-border);
	backdrop-filter: blur( 8px );
}

.cfm-anchornav ul {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 20px;
	margin: 0;
	padding: 12px 0;
	list-style: none;
}

.cfm-anchornav a {
	text-decoration: none;
	white-space: nowrap;
}

/* --- Mobile ---------------------------------------------------------------- */
@media ( max-width: 1024px ) {
	:root {
		--cfm-header-h: 70px;   /* header sticky mobile: DA VERIFICARE */
		--cfm-gap: 28px;
	}

	.cfm-tech {
		grid-template-columns: 1fr;
	}

	.cfm-tech__video--vertical {
		max-width: 300px;
	}

	/* Le ancore diventano una striscia scorrevole invece di dodici righe. */
	.cfm-anchornav ul {
		flex-wrap: nowrap;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
	}

	.cfm-anchornav ul::-webkit-scrollbar {
		display: none;
	}

	.cfm-anchornav li {
		flex: 0 0 auto;
	}
}

/* --- Tema scuro ------------------------------------------------------------ */
@media ( prefers-color-scheme: dark ) {
	:root {
		--cfm-border: rgba( 255, 255, 255, .18 );
		--cfm-muted: rgba( 255, 255, 255, .7 );
	}

	.cfm-highlight {
		background: rgba( 255, 255, 255, .05 );
	}
}

/* --- Riduzione movimento --------------------------------------------------- */
@media ( prefers-reduced-motion: reduce ) {
	html {
		scroll-behavior: auto;
	}

	.cfm-card {
		transition: none;
	}
}