/**
 * Sofyia Theme — Elementor Widgets CSS
 *
 * Stili per i widget Elementor custom del tema Sofyia.
 * I selettori usano il prefisso .elementor-widget-sofyia-categories-slider
 * per sovrascrivere con certezza qualsiasi reset di Elementor.
 *
 * Struttura DOM reale:
 *   .elementor-widget-sofyia-categories-slider   (Elementor)
 *     └── .elementor-widget-container            (Elementor)
 *           └── .sofyia-categories-slider
 *                 └── .sofyia-slider-viewport
 *                       └── .sofyia-categories-slider__track
 *                             └── .sofyia-category-card × N
 *
 * @package SofyiaTheme
 */

/* ============================================================
   RESET LIVELLI INTERMEDI ELEMENTOR
   Garantisce che nessun wrapper Elementor forzi layout verticale
   ============================================================ */
.elementor-widget-sofyia-categories-slider,
.elementor-widget-sofyia-categories-slider .elementor-widget-container {
	width: 100% !important;
	max-width: 100% !important;
}

/* ============================================================
   SLIDER WRAPPER
   ============================================================ */
.elementor-widget-sofyia-categories-slider .sofyia-categories-slider {
	width: 100% !important;
	max-width: 100% !important;
	overflow: visible !important; /* visible per non tagliare le frecce absolute */
}

/* ============================================================
   SLIDER HEADER
   ============================================================ */
.sofyia-slider-header {
	text-align: center;
	margin-bottom: 36px;
}

.sofyia-slider-header__title {
	font-family: var(--font-serif);
	font-size: clamp(1.85rem, 3vw, 2.6rem);
	font-weight: 400;
	color: var(--sofyia-text);
	margin-bottom: 0.5rem;
}

.sofyia-slider-header__subtitle {
	font-family: var(--font-sans);
	font-size: 16px;
	color: var(--sofyia-text-light);
	margin: 0;
}

/* ============================================================
   SLIDER VIEWPORT & ARROWS
   ============================================================ */
.elementor-widget-sofyia-categories-slider .sofyia-slider-viewport {
	position: relative;
	width: 100% !important;
	overflow: hidden !important; /* nasconde scroll nativo, le frecce stano dentro */
}

.sofyia-slider-arrow {
	position: absolute;
	top: 40%;
	transform: translateY(-50%);
	z-index: 2;
	background: var(--sofyia-white);
	border: 1px solid var(--sofyia-border);
	border-radius: 50%;
	width: 40px;
	height: 40px;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--sofyia-gold);
	cursor: pointer;
	transition: var(--transition);
	padding: 0;
	box-shadow: var(--shadow-card);
}

.sofyia-slider-arrow:hover {
	background: var(--sofyia-gold);
	color: var(--sofyia-white);
	border-color: var(--sofyia-gold);
	box-shadow: var(--shadow-hover);
}

.sofyia-slider-arrow--prev { left: 0; }
.sofyia-slider-arrow--next { right: 0; }

/* ============================================================
   SLIDER TRACK — scroll-snap CSS nativo
   Selettori doppi (generico + prefissato Elementor) per massima
   specificità senza dipendere dall'ordine di caricamento CSS.
   ============================================================ */
.sofyia-categories-slider__track,
.elementor-widget-sofyia-categories-slider .sofyia-categories-slider__track {
	display: flex !important;
	flex-direction: row !important;
	flex-wrap: nowrap !important;
	overflow-x: auto !important;
	overflow-y: visible !important;
	scroll-snap-type: x mandatory !important;
	scroll-behavior: smooth !important;
	-webkit-overflow-scrolling: touch !important;
	scrollbar-width: none !important;
	gap: 20px !important;
	width: 100% !important;
	box-sizing: border-box !important;
	padding: 4px 4px 8px !important; /* padding laterale 4px per non tagliare shadow card */
}

.sofyia-categories-slider__track::-webkit-scrollbar,
.elementor-widget-sofyia-categories-slider .sofyia-categories-slider__track::-webkit-scrollbar {
	display: none;
}

/* ============================================================
   CATEGORY CARD
   ============================================================ */
.sofyia-category-card,
.elementor-widget-sofyia-categories-slider .sofyia-category-card {
	flex: 0 0 calc(25% - 15px) !important; /* 4 colonne default */
	max-width: calc(25% - 15px) !important;
	scroll-snap-align: start !important;
	min-width: 0 !important;
	box-sizing: border-box !important;
	background: var(--sofyia-white);
	border-radius: var(--radius-md);
	overflow: hidden;
	box-shadow: var(--shadow-card);
	transition: var(--transition);
}

/* 3 colonne */
.sofyia-categories-slider[data-cols="3"] .sofyia-category-card,
.elementor-widget-sofyia-categories-slider .sofyia-categories-slider[data-cols="3"] .sofyia-category-card {
	flex: 0 0 calc(33.33% - 14px) !important;
	max-width: calc(33.33% - 14px) !important;
}

.sofyia-category-card:hover {
	box-shadow: var(--shadow-hover);
	transform: translateY(-4px);
}

.sofyia-category-card__link {
	display: block;
	text-decoration: none;
	color: inherit;
}

/* Immagine — aspect-ratio 3/4 */
.sofyia-category-card__img-wrap {
	aspect-ratio: 3 / 4;
	overflow: hidden;
	background: var(--sofyia-cream);
}

.sofyia-category-card__img-wrap img,
.sofyia-category-card__img-wrap .sofyia-category-card__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 0.5s ease;
}

.sofyia-category-card:hover .sofyia-category-card__img-wrap img {
	transform: scale(1.05);
}

/* Body card — nome categoria */
.sofyia-category-card__body {
	padding: 16px 12px 18px;
}

.sofyia-category-card__name {
	font-family: var(--font-serif);
	font-size: 1.1rem;
	font-weight: 400;
	color: var(--sofyia-text);
	text-align: center;
	margin: 0;
	line-height: 1.3;
}

/* ============================================================
   DOT NAVIGAZIONE
   ============================================================ */
.sofyia-slider-dots {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 8px;
	margin-top: 24px;
}

.sofyia-slider-dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	border: 1.5px solid var(--sofyia-border);
	background: transparent;
	padding: 0;
	cursor: pointer;
	transition: var(--transition);
	flex-shrink: 0;
}

.sofyia-slider-dot.is-active,
.sofyia-slider-dot:hover {
	background: var(--sofyia-gold);
	border-color: var(--sofyia-gold);
}

/* ============================================================
   RESPONSIVE
   I selettori ripetono la classe (.sofyia-category-card.sofyia-category-card)
   per alzare la specificity e battere lo style="flex:..." inline iniettato dal
   PHP del widget anche dove !important non basterebbe per via dell'inline.
   ============================================================ */

/* Tablet — 2 card visibili (50% larghezza con metà gap di sottrazione) */
@media (max-width: 1024px) {
	.sofyia-category-card.sofyia-category-card,
	.elementor-widget-sofyia-categories-slider .sofyia-category-card.sofyia-category-card {
		flex: 0 0 calc(50% - 10px) !important;
		max-width: calc(50% - 10px) !important;
		min-width: 0 !important;
	}
}

/* Mobile ≤768 — card più fini: ~2,2 visibili (peek = swipe evidente),
   rimpicciolite proporzionalmente (immagine 3/4 invariata → scala da sola). */
@media (max-width: 768px) {
	.sofyia-category-card.sofyia-category-card,
	.elementor-widget-sofyia-categories-slider .sofyia-category-card.sofyia-category-card {
		flex: 0 0 35% !important;
		max-width: 35% !important;
		min-width: 0 !important;
		border-radius: var(--radius-sm) !important;
	}

	.sofyia-categories-slider__track,
	.elementor-widget-sofyia-categories-slider .sofyia-categories-slider__track {
		gap: 12px !important;
	}

	.sofyia-category-card__body {
		padding: 10px 8px 12px !important;
	}

	.sofyia-slider-arrow {
		display: none;
	}

	.sofyia-slider-header {
		margin-bottom: 24px;
	}

	.sofyia-category-card__name,
	.elementor-widget-sofyia-categories-slider .sofyia-category-card span {
		font-size: 0.85rem !important;
	}
}

/* Mobile piccolo ≤480 — card ancora più fini (peek più marcato) */
@media (max-width: 480px) {
	.sofyia-category-card.sofyia-category-card,
	.elementor-widget-sofyia-categories-slider .sofyia-category-card.sofyia-category-card {
		flex: 0 0 33% !important;
		max-width: 33% !important;
	}

	.sofyia-categories-slider__track,
	.elementor-widget-sofyia-categories-slider .sofyia-categories-slider__track {
		gap: 10px !important;
		padding: 4px 4px 8px !important;
	}

	.sofyia-category-card__body {
		padding: 9px 7px 11px !important;
	}

	.sofyia-category-card__name,
	.elementor-widget-sofyia-categories-slider .sofyia-category-card span {
		font-size: 0.8rem !important;
	}
}

/* =============================================
   WIDGET: TICKER SCORREVOLE
   Loop seamless su 4 copie del contenuto (translateX -25%).
   Pausa on hover. Rispetta prefers-reduced-motion.
   Full-width gestita da style.css globale.
   ============================================= */

.sofyia-ticker {
	--sofyia-ticker-gap: 40px;
	position: relative;
	overflow: hidden;
	box-sizing: border-box;
	display: block;
}

.sofyia-ticker__inner {
	display: inline-flex;
	flex-wrap: nowrap;
	width: max-content;
	animation: sofyia-ticker-move 30s linear infinite;
	will-change: transform;
}

.sofyia-ticker--dir-right .sofyia-ticker__inner {
	animation-direction: reverse;
}

.sofyia-ticker[data-pause-on-hover="yes"]:hover .sofyia-ticker__inner,
.sofyia-ticker:hover .sofyia-ticker__inner {
	animation-play-state: paused;
}

.sofyia-ticker__group {
	display: inline-flex;
	align-items: center;
	flex-shrink: 0;
	gap: var(--sofyia-ticker-gap);
	padding-right: var(--sofyia-ticker-gap);
}

.sofyia-ticker__item {
	display: inline-flex;
	align-items: center;
	flex-shrink: 0;
	white-space: nowrap;
	font-family: var(--font-sans);
	line-height: 1.4;
}

.sofyia-ticker__separator {
	display: inline-flex;
	flex-shrink: 0;
	opacity: 0.5;
	user-select: none;
}

@keyframes sofyia-ticker-move {
	0%   { transform: translate3d(0, 0, 0); }
	100% { transform: translate3d(-25%, 0, 0); }
}

@media (prefers-reduced-motion: reduce) {
	.sofyia-ticker__inner {
		animation: none;
		transform: none;
	}
}

/* =============================================
   SHORTCODE TICKER — forza sfondo trasparente
   Il bg viene sempre dal container Elementor/sezione.
   ============================================= */
.sofyia-ticker-wrap,
.sofyia-ticker-wrap *,
div.sofyia-ticker-wrap {
	background: transparent !important;
	background-color: transparent !important;
	background-image: none !important;
}