/* Widget: banda derulanta de servicii. */

.icc-mq {
	--icc-mq-durata: 120s;
	--icc-mq-gap: 40px;
	--icc-mq-rand-gap: 24px;
	--icc-mq-ink: #fff;
	--icc-mq-cross: var(--icc-color-orange, #bf592d);
	--icc-mq-cross-size: 21px;

	/* Benzile si panoul stau in aceeasi celula de grid, deci panoul se
	   centreaza. */
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	align-items: center;
	justify-items: center;
	width: 100%;
}

.icc-mq__randuri,
.icc-mq__panou {
	grid-column: 1;
	grid-row: 1;
}

.icc-mq__randuri {
	display: flex;
	flex-direction: column;
	gap: var(--icc-mq-rand-gap);
	width: 100%;
	min-width: 0;
}

.icc-mq__rand {
	overflow: hidden;
}

.icc-mq__track {
	display: flex;
	align-items: center;
	gap: var(--icc-mq-gap);
	width: max-content;
	animation: icc-mq-scroll var(--icc-mq-durata) linear infinite;
}

.icc-mq__rand--invers .icc-mq__track {
	animation-direction: reverse;
}

@keyframes icc-mq-scroll {
	from {
		transform: translateX(0);
	}

	to {
		transform: translateX(var(--icc-mq-shift, -50%));
	}
}

.icc-mq.is-pauza-hover:hover .icc-mq__track {
	animation-play-state: paused;
}

/* ------------------------------------------------------------- Serviciu --- */

.icc-mq__item {
	display: inline-flex;
	flex: 0 0 auto;
	align-items: center;
	gap: 12px;
	color: var(--icc-mq-ink);
	font-family: var(--icc-font-sans);
	font-size: var(--icc-fs-body, 1.125rem);
	font-weight: 400;
	line-height: 1.2;
	text-decoration: none;
	white-space: nowrap;
}

a.icc-mq__item:hover {
	text-decoration: underline;
	text-underline-offset: 3px;
}

.icc-mq__cross {
	flex: 0 0 auto;
	width: var(--icc-mq-cross-size);
	height: var(--icc-mq-cross-size);
	color: var(--icc-mq-cross);
}

.icc-mq--capitalizat .icc-mq__eticheta {
	text-transform: capitalize;
}

/* ---------------------------------------------------------------- Panou --- */

.icc-mq__panou {
	--icc-mq-panou-bg: rgba(255, 255, 255, 0.82);
	--icc-mq-panou-blur: 10px;
	--icc-mq-panou-ink: var(--icc-color-navy, #0c202f);
	--icc-mq-panou-pad: 26px 40px;
	--icc-mq-panou-gap: 20px;
	/* Mobilul are variabile separate: cele de sus vin din panou, mai specifice. */
	--icc-mq-panou-pad-mobil: 22px;
	--icc-mq-panou-gap-mobil: 12px;
	--icc-mq-panou-lat-mobil: 80%;

	position: relative;
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--icc-mq-panou-gap);
	max-width: calc(100% - 2 * var(--icc-gutter, 20px));
	padding: var(--icc-mq-panou-pad);
	border-radius: 12px;
	background-color: var(--icc-mq-panou-bg);
	backdrop-filter: blur(var(--icc-mq-panou-blur));
	-webkit-backdrop-filter: blur(var(--icc-mq-panou-blur));
	color: var(--icc-mq-panou-ink);
	text-decoration: none;
}

.icc-mq__panou-logo {
	display: inline-flex;
	flex: 0 0 auto;
	align-items: center;
}

.icc-mq__panou-logo img {
	display: block;
	width: auto;
	height: var(--icc-mq-logo-h, 44px);
}

.icc-mq .icc-mq__panou-text {
	margin: 0;
	font-family: var(--icc-font-serif);
	font-size: var(--icc-fs-h3, 2rem);
	font-weight: 500;
	line-height: 1.1;
	letter-spacing: var(--icc-ls-display, -0.03em);
	color: inherit;
	white-space: nowrap;
}

a.icc-mq__panou:hover {
	filter: brightness(0.97);
}

.icc-mq__panou:focus-visible,
.icc-mq__item:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 3px;
}

.icc-mq .icc-mq__gol {
	margin: 0;
	font-size: var(--icc-fs-ui, 1rem);
	color: var(--icc-mq-ink);
	text-align: center;
	opacity: 0.7;
}

@media (max-width: 767px) {
	.icc-mq__panou {
		flex-direction: column;
		width: var(--icc-mq-panou-lat-mobil);
		padding: var(--icc-mq-panou-pad-mobil);
		gap: var(--icc-mq-panou-gap-mobil);
		text-align: center;
	}

	.icc-mq .icc-mq__panou-text {
		font-size: var(--icc-fs-card-title, 1.25rem);
		white-space: normal;
	}
}

@media (prefers-reduced-motion: reduce) {
	.icc-mq__track {
		animation: none;
	}
}