/* ============================================================
   Botó Artimedia (block: artimedia/button)
   Variants: primary (gradient ring) · secondary · outline
   ============================================================ */

.artimedia-btn {
	--btn-bg: rgba(10, 25, 41, 0.9);
	--btn-radius: 10px;
	--btn-pad-v: 12px;
	--btn-pad-h: 24px;
	--btn-text: rgba(255, 255, 255, 0.9);
	--btn-text-hover: #ffffff;
	--btn-icon-color: #00d0ff;
	--btn-icon-gap: 8px;

	display: inline-flex;
	align-items: center;
	gap: var(--btn-icon-gap);
	position: relative;
	padding: var(--btn-pad-v) var(--btn-pad-h);
	background: var(--btn-bg);
	color: var(--btn-text);
	border-radius: var(--btn-radius);
	font-family: 'Inter', system-ui, sans-serif;
	font-weight: 500;
	font-size: 14px;
	line-height: 20px;
	letter-spacing: -0.15px;
	text-decoration: none;
	cursor: pointer;
	transition: background-color 200ms ease, color 200ms ease;
}

.artimedia-btn:focus-visible {
	outline: 2px solid #00d0ff;
	outline-offset: 2px;
}

.artimedia-btn__icon {
	display: inline-flex;
	width: 16px;
	height: 16px;
	color: var(--btn-icon-color);
	transition: transform 250ms ease, color 200ms ease;
}

/* ── Primary: dark surface + 1px gradient ring (shimmer on hover) ── */

.artimedia-btn--primary::before {
	content: "";
	position: absolute;
	inset: 0;
	padding: 1px;
	border-radius: inherit;
	background:
		linear-gradient(
			90deg,
			#004387 0%, #1f4497 7%, #3344a8 14%, #4243b9 21%,
			#5142ca 29%, #5e3fdb 36%, #6c3ced 43%, #7936ff 50%,
			#7556ff 57%, #706eff 64%, #6984ff 71%, #5f98ff 79%,
			#51abff 86%, #3cbeff 93%, #00d0ff 100%
		);
	background-size: 200% 100%;
	background-position: 0% 50%;
	opacity: 0.4;
	/* Cut out the inner area so only the 1px ring is visible. */
	-webkit-mask:
		linear-gradient(#fff 0 0) content-box,
		linear-gradient(#fff 0 0);
	-webkit-mask-composite: xor;
	        mask-composite: exclude;
	pointer-events: none;
	transition: opacity 300ms ease;
}

.artimedia-btn--primary:hover { color: var(--btn-text-hover); }
.artimedia-btn--primary:hover::before {
	opacity: 1;
	animation: artimedia-btn-shimmer 2.2s linear infinite;
}
.artimedia-btn--primary:hover .artimedia-btn__icon {
	transform: translateX(3px);
	color: var(--btn-text-hover); /* arrow → white on hover, like the mockup (follows scheme) */
}

@keyframes artimedia-btn-shimmer {
	0%   { background-position:   0% 50%; }
	100% { background-position: -200% 50%; }
}

/* ── Secondary: solid brand fill (proposta, no és al Figma) ────── */

.artimedia-btn--secondary {
	background: #26117f;
	color: #ffffff;
}
.artimedia-btn--secondary:hover {
	background: #00d0ff;
	color: #26117f;
}
.artimedia-btn--secondary .artimedia-btn__icon { color: currentColor; }

/* ── CTA: solid cyan fill + dark text (Contacta amb nosaltres) ─── */

.artimedia-btn--cta {
	background: var(--global-palette2, #00d0ff);
	color: var(--global-palette1, #26117f);
	font-weight: 600;
	border: 1px solid transparent;
	transition: background-color 200ms ease, color 200ms ease,
		border-color 200ms ease, box-shadow 200ms ease;
}
.artimedia-btn--cta:hover {
	background: #ffffff;
	color: var(--global-palette1, #26117f);
	border-color: #ffffff;
	box-shadow: 0 0 16px rgba(255, 255, 255, 0.6);
}
.artimedia-btn--cta .artimedia-btn__icon { color: currentColor; }
.artimedia-btn--cta:hover .artimedia-btn__icon { transform: translateX(3px); }

/* ── Outline: transparent + 1px border, MAJÚSCULES (ENVIAR) ────── */

.artimedia-btn--outline {
	background: transparent;
	border: 1px solid rgba(255, 255, 255, 0.3);
	border-radius: 0;
	padding: 13px 48px;
	color: #ffffff;
	font-family: 'Roboto', system-ui, sans-serif;
	font-weight: 500;
	font-size: 16px;
	line-height: 24px;
	letter-spacing: 0.8px;
	text-transform: uppercase;
	transition: background-color 200ms ease, border-color 200ms ease;
}
.artimedia-btn--outline:hover {
	background: rgba(255, 255, 255, 0.08);
	border-color: #ffffff;
}
.artimedia-btn--outline .artimedia-btn__icon { color: currentColor; }

/* ── Block alignment (wp-block-artimedia-button is the wrapper) ── */

.wp-block-artimedia-button.aligncenter { text-align: center; }
.wp-block-artimedia-button.alignright  { text-align: right; }

/* ACF "Centrar horitzontalment" checkbox → centers the button itself
   within its parent flow, independent of the block toolbar alignment. */
.artimedia-btn.is-centered {
	display: flex;
	width: fit-content;
	margin-left: auto;
	margin-right: auto;
}

/* ── Reduce motion ────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
	.artimedia-btn,
	.artimedia-btn::before,
	.artimedia-btn__icon { transition: none; animation: none; }
	.artimedia-btn--primary:hover .artimedia-btn__icon { transform: none; }
}