/**
 * La card in tre blocchi.
 *
 * Qui c'è solo la struttura: nessun colore, nessun bordo, nessuno spazio
 * deciso d'autorità. Il colore lo mette il widget dai suoi controlli, oppure
 * il tema. Quello che serve al plugin è che i tre blocchi stiano al loro
 * posto e che quanto è configurabile passi da una variabile.
 */

.qdir-grid {
	display: grid;
	grid-template-columns: repeat( var( --qdir-columns, 3 ), minmax( 0, 1fr ) );
	gap: var( --qdir-gap, 24px );
}

/*
 * Le soglie cambiano la variabile, non il template: leggerla qui significava
 * ritrovare il valore da schermo grande, perche' era gia' impostato.
 * Elementor scrive le sue regole responsive dopo le nostre, quindi quando il
 * widget dichiara le colonne per tablet e telefono sono le sue a valere.
 */
@media screen and ( max-width: 1024px ) {
	.qdir-grid {
		--qdir-columns: 2;
	}
}

@media screen and ( max-width: 767px ) {
	.qdir-grid {
		--qdir-columns: 1;
	}
}

.qdir-card {
	position: relative;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	background: transparent;
	transition-property: background-color, border-color, box-shadow, transform;
	transition-duration: .25s;
	transition-timing-function: ease;
}

/* ---------------------------------------------------------------------
 * Blocco 1: immagine
 * ------------------------------------------------------------------ */

.qdir-card__media {
	position: relative;
	display: block;
	overflow: hidden;
	line-height: 0;
}

.qdir-card__image {
	display: block;
	width: 100%;
	height: auto;
	transition-property: transform;
	transition-duration: .25s;
	transition-timing-function: ease;
}

/* ---------------------------------------------------------------------
 * Blocco 2: contenuto
 * ------------------------------------------------------------------ */

.qdir-card__content {
	position: relative;
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	align-items: flex-start;
	padding: 16px;
}

.qdir-card--center .qdir-card__content {
	align-items: center;
}

.qdir-card--right .qdir-card__content {
	align-items: flex-end;
}

.qdir-card__title {
	margin: 0 0 10px;
}

.qdir-card__title a {
	color: inherit;
	text-decoration: none;
}

.qdir-card__subtitle {
	margin: -4px 0 10px;
	opacity: .75;
}

.qdir-card__excerpt {
	margin: 0 0 14px;
}

.qdir-card__fields {
	width: 100%;
	margin: 0 0 14px;
	padding: 0;
	list-style: none;
}

.qdir-card__field {
	display: flex;
	justify-content: space-between;
	gap: 12px;
	margin: 0 0 4px;
	padding: 0;
	font-size: .9em;
}

.qdir-card__field-label {
	opacity: .7;
}

.qdir-card__field-value {
	text-align: right;
}

/* ---------------------------------------------------------------------
 * Blocco 3: etichetta e pulsante
 * ------------------------------------------------------------------ */

.qdir-card__footer {
	position: relative;
	display: flex;
	flex: 0 0 auto;
	flex-direction: column;
	align-items: flex-start;
	padding: 0 16px 16px;
}

.qdir-card--center .qdir-card__footer {
	align-items: center;
}

.qdir-card--right .qdir-card__footer {
	align-items: flex-end;
}

.qdir-card__cta-label {
	margin-bottom: 8px;
	font-size: .9em;
	opacity: .8;
}

.qdir-card__button {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	color: inherit;
	text-decoration: none;
	transition-property: color, background-color, border-color;
	transition-duration: .25s;
	transition-timing-function: ease;
}

.qdir-card__marker {
	display: inline-block;
	line-height: 1;
	transition: transform .25s ease;
}

/* ---------------------------------------------------------------------
 * Barra d'accento
 * ------------------------------------------------------------------ */

/*
 * z-index: l'immagine e' posizionata e viene dopo nel documento, quindi
 * senza questo la barra le finisce sotto e da sopra sparisce del tutto.
 */
.qdir-card__accent {
	position: absolute;
	z-index: 2;
	top: var( --qdir-accent-offset, 0px );
	left: var( --qdir-accent-offset, 0px );
	width: var( --qdir-accent-thickness, 6px );
	height: var( --qdir-accent-length, 100% );
	background-color: currentColor;
	transition: background-color .25s ease;
}

.qdir-card--accent-right .qdir-card__accent {
	right: var( --qdir-accent-offset, 0px );
	left: auto;
}

.qdir-card--accent-top .qdir-card__accent,
.qdir-card--accent-bottom .qdir-card__accent {
	left: var( --qdir-accent-offset, 0px );
	width: var( --qdir-accent-length, 100% );
	height: var( --qdir-accent-thickness, 6px );
}

.qdir-card--accent-bottom .qdir-card__accent {
	top: auto;
	bottom: var( --qdir-accent-offset, 0px );
}

/*
 * Una barra che sporge deve poter uscire dalla card: l'immagine resta
 * comunque tagliata dal proprio contenitore.
 */
.qdir-card--accent {
	overflow: visible;
}

.qdir-card--accent .qdir-card__media {
	overflow: hidden;
	border-radius: inherit;
	border-bottom-right-radius: 0;
	border-bottom-left-radius: 0;
}

@media ( prefers-reduced-motion: reduce ) {
	.qdir-card,
	.qdir-card__image,
	.qdir-card__button,
	.qdir-card__marker,
	.qdir-card__accent {
		transition: none;
	}
}