/*
 * Card progetto / tecnologia
 *
 * Tipografia dal theme.json: titolo = H3, tag = Subtitle, descrizione = Paragrafo.
 * Colori: palette del tema (slug ink, coral, tag-blue, tag-grey) con il valore di riserva dopo la virgola,
 * cosi' la card funziona anche prima di aggiungerli a theme.json.
 * Il pulsante e' lo stile "Primario" del blocco Pulsante (bottoni.css).
 */

 .cl-card {
	--cl-ink: var(--wp--preset--color--ink, #21242a);
	--cl-settore: var(--wp--preset--color--coral, #ed7466);
	--cl-servizio: var(--wp--preset--color--tag-blue, #8db6ff);
	--cl-tecnologia: var(--wp--preset--color--tag-grey, #7d848f);
	--cl-bordo-img: #c9cdd3;   /* bordo dell'immagine (grigio) */
	--btn-h: 3rem;   /* altezza del pulsante dentro la card */

	display: flex;
	flex-direction: column;
	box-sizing: border-box;
	min-width: 0;
	height: 100%;
	padding: 1.1rem;
	border: 1.5px solid var(--cl-ink);
	border-radius: 2.5rem;
	background: #fff;
	color: var(--cl-ink);
	/* ombra a riposo: piccolissima e morbida, giusto un lieve distacco dal fondo */
	box-shadow: 0 1px 2px rgba(33, 36, 42, 0.04), 0 4px 12px rgba(33, 36, 42, 0.04);
	transition: box-shadow 0.45s ease, translate 0.45s cubic-bezier(0.65, 0, 0.35, 1);
	z-index: 2;
}

/* Hover su qualunque parte della card (col mouse); su touch mentre si tocca; da tastiera col focus.
   Ombra piu' ampia e diffusa, e un sollevamento di soli 4px (la traslazione non sfoca il testo, lo zoom si') */
.cl-card:active,
.cl-card:focus-within {
	box-shadow: 0 2px 4px rgba(33, 36, 42, 0.04), 0 14px 34px -8px rgba(33, 36, 42, 0.16);
	translate: 0 -4px;
}

@media (hover: hover) {
	.cl-card:hover {
		box-shadow: 0 2px 4px rgba(33, 36, 42, 0.04), 0 14px 34px -8px rgba(33, 36, 42, 0.16);
		translate: 0 -4px;
	}
}

.cl-card *,
.cl-card *::before,
.cl-card *::after {
	box-sizing: border-box;
}

/* ---- immagine: incassata, con angoli molto tondi ----
   In hover l'immagine scorre da sola dal suo bordo alto al suo bordo basso, come una pagina che scrolla.
   Funziona quando l'immagine e' piu' alta del riquadro (es. screenshot a pagina intera);
   se e' alta quanto il riquadro o meno, resta ferma. */
.cl-card__media {
	position: relative;
	display: block;
	flex: none;
	aspect-ratio: 7 / 4;
	overflow: hidden;
	container-type: size;   /* permette di misurare l'altezza del riquadro con "cqh" */
	border: 1.5px solid var(--cl-bordo-img);
	border-radius: 2rem;
	background: var(--wp--preset--color--primary-soft, #dceaff);   /* si vede solo se manca l'immagine */
	isolation: isolate;
}

.cl-card__img {
	position: absolute;
	top: 0;
	left: 0;
	display: block;
	width: 100%;
	height: auto;        /* l'immagine mantiene le sue proporzioni, anche se piu' alta del riquadro */
	min-height: 100%;    /* se e' piu' bassa del riquadro, lo riempie */
	object-fit: cover;
	translate: 0 0;
	/* ritorno in alto: piu' rapido dello scorrimento */
	transition: translate 0.8s cubic-bezier(0.65, 0, 0.35, 1);
	will-change: translate;
}

/* scorrimento fino al fondo: -altezza dell'immagine + altezza del riquadro */
.cl-card:active .cl-card__img,
.cl-card:focus-within .cl-card__img {
	translate: 0 calc(-100% + 100cqh);
	transition-duration: var(--cl-scroll-time, 2.8s);
}

@media (hover: hover) {
	.cl-card:hover .cl-card__img {
		translate: 0 calc(-100% + 100cqh);
		transition-duration: var(--cl-scroll-time, 2.8s);
	}
}

@media (prefers-reduced-motion: reduce) {
	.cl-card,
	.cl-card__img {
		transition: none;
	}
}

/* ---- corpo ---- */
.cl-card__body {
	display: flex;
	flex: 1;
	flex-direction: column;
	align-items: flex-start;
	gap: 1.1rem;
	padding: 1.4rem 0.4rem 0.6rem;
}

/* Titolo = H3 */
.cl-card .cl-card__title {
	margin: 0;
	color: inherit;
	font-size: var(--wp--preset--font-size--h3, clamp(1.25rem, 0.898rem + 1.502vw, 2.25rem));
	font-weight: 700;
	line-height: 1.15;
	overflow-wrap: anywhere;
}

.cl-card__title a {
	color: inherit;
	text-decoration: none;
	/* sottolineatura disegnata con uno sfondo: cresce da 0 a 100% in 0,2 secondi, ease in/out */
	background: linear-gradient(currentColor, currentColor) 0 100% / 0 2px no-repeat;
	padding-bottom: 0.08em;
	-webkit-box-decoration-break: clone;
	box-decoration-break: clone;   /* se il titolo va su due righe, la riga si disegna su ciascuna */
	transition: background-size 0.2s ease-in-out;
}

.cl-card__title a:hover,
.cl-card__title a:focus-visible {
	background-size: 100% 2px;
}

.cl-card__title a:focus-visible {
	outline: 3px solid var(--cl-ink);
	outline-offset: 4px;
	border-radius: 4px;
}

/* Tag = Subtitle, maiuscolo e grassetto, contorno colorato per tipo */
.cl-card .cl-card__tags {
	display: flex;
	flex-wrap: wrap;
	gap: 0.35rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.cl-card__tag {
	margin: 0;
	padding: 0.18rem 0.6rem;
	border: 1.25px solid var(--cl-ink);
	border-radius: 999px;
	color: var(--cl-ink);
	font-size: 0.65rem;
	font-weight: 700;
	letter-spacing: 0.015em;
	line-height: 1.2;
	text-transform: uppercase;
}

.cl-card__tag--settore    { border-color: var(--cl-settore); }
.cl-card__tag--servizio   { border-color: var(--cl-servizio); }
.cl-card__tag--tecnologia { border-color: var(--cl-tecnologia); }

/* Descrizione = Paragrafo. Il PHP limita i caratteri; qui, per sicurezza, massimo 5 righe con puntini. */
.cl-card .cl-card__text {
	margin: 0;
	color: inherit;
	font-size: var(--wp--preset--font-size--paragraph, 1rem);
	font-weight: 400;
	line-height: 1.65;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 5;
	line-clamp: 5;
	overflow: hidden;
}

/* Pulsante sempre in fondo alla card, anche quando i testi hanno lunghezze diverse */
.cl-card .cl-card__action {
	margin-top: auto;
	padding-top: 0.4rem;
}

.cl-card .cl-card__action .wp-block-button {
	margin: 0;
}

/* ---- griglia: classe  cl-griglia-card  sul Ciclo di query ---- */
.cl-griglia-card .wp-block-post-template {
	display: grid !important;
	grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
	align-items: stretch;
	gap: 1.5rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.cl-griglia-card .wp-block-post-template > .wp-block-post {
	min-width: 0;
	margin: 0;
}

@media (max-width: 980px) {
	.cl-griglia-card .wp-block-post-template {
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
	}
}

@media (max-width: 640px) {
	/* Telefono: tag molto piu' piccoli, cosi' la card resta corta */
	.cl-card .cl-card__tags { gap: 0.25rem; }
	.cl-card .cl-card__tag {
		padding: 0.12rem 0.45rem;
		border-width: 1px;
		font-size: 0.625rem;
		letter-spacing: 0.01em;
	}

	/* Telefono: le card scorrono in orizzontale, una accanto all'altra, e si fermano ben allineate.
	   La card successiva si vede in parte (84% di larghezza), cosi' si capisce che si puo' scorrere.
	   Per tenerle in colonna anche su telefono, aggiungi la classe  cl-colonna-mobile  al Ciclo di query. */
	.cl-griglia-card:not(.cl-colonna-mobile) .wp-block-post-template {
		display: flex !important;
		grid-template-columns: none !important;
		gap: 1rem;
		overflow-x: auto;
		overflow-y: hidden;
		scroll-snap-type: x mandatory;
		overscroll-behavior-x: contain;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
		/* A tutta larghezza schermo: le card escono dai margini del gruppo e vengono tagliate
		   solo dal bordo del telefono. Il padding laterale (--cl-gutter) e' il margine di partenza. */
		--cl-gutter: 2rem;
		width: 100vw;
		max-width: 100vw;
		margin: -1rem calc(50% - 50vw) -1.5rem;
		padding: 1rem var(--cl-gutter) 2.5rem;
		scroll-padding-inline: var(--cl-gutter);
		box-sizing: border-box;
	}

	.cl-griglia-card:not(.cl-colonna-mobile) .wp-block-post-template::-webkit-scrollbar {
		display: none;
	}

	.cl-griglia-card:not(.cl-colonna-mobile) .wp-block-post-template > .wp-block-post {
		flex: 0 0 84%;
		scroll-snap-align: start;
	}

	.cl-griglia-card.cl-colonna-mobile .wp-block-post-template {
		grid-template-columns: minmax(0, 1fr) !important;
	}

	.cl-card {
		border-radius: 2rem;
		padding: 0.9rem;
	}

	.cl-card__media {
		border-radius: 1.5rem;
	}
}