/* ==========================================================================
   Salmod slider (home hero + [salmod_slider]). Colours: --salmod-* tokens only.
   Each device has its own aspect ratio (--ar-d / --ar-t / --ar-m) and its own layer group.
   Layers are placed in % and sized in container-width units, so the admin preview is 1:1.
   ========================================================================== */

.salmod-hero { --sl-r: 18px; --sl-ease: cubic-bezier(.2, .7, .2, 1); position: relative; }
.salmod-hero__viewport {
	position: relative; overflow: hidden;
	border-radius: var(--sl-r);
	background: var(--salmod-ivory);
	touch-action: pan-y;
	user-select: none; -webkit-user-select: none;
	cursor: grab;
	isolation: isolate;
}
.salmod-hero.is-dragging .salmod-hero__viewport { cursor: grabbing; }
.salmod-hero__track { display: flex; will-change: transform; }

/* One slide = one canvas (reserves its height: no layout shift). */
.salmod-hero__slide, .sle-canvas {
	position: relative; overflow: hidden;
	container-type: inline-size;
	aspect-ratio: var(--ar-d, 3 / 1);
}
.salmod-hero__slide { flex: 0 0 100%; }
.salmod-hero__link { position: absolute; inset: 0; display: block; color: inherit !important; text-decoration: none !important; -webkit-user-drag: none; }
.salmod-hero__media, .salmod-hero__media img { display: block; width: 100%; height: 100%; }
.salmod-hero__media img { object-fit: cover; pointer-events: none; -webkit-user-drag: none; }

.salmod-hero__overlay { position: absolute; inset: 0; pointer-events: none; }
.salmod-hero__overlay--dark { background: linear-gradient(to left, rgba(12,10,9,.55), rgba(12,10,9,.15) 50%, transparent 75%); }
.salmod-hero__overlay--light { background: linear-gradient(to left, rgba(255,255,255,.78), rgba(255,255,255,.25) 50%, transparent 75%); }

/* ---------------- Layers ---------------- */
.sl-layers { position: absolute; inset: 0; display: none; pointer-events: none; }
.sl-item {
	position: absolute;
	left: var(--x); top: var(--y);
	width: var(--w);
	transform: translate(-50%, -50%);
	font-size: calc(var(--fs) * 1vw);   /* fallback for very old browsers */
	font-size: calc(var(--fs) * 1cqw);
	line-height: 1.35;
	direction: rtl;
	pointer-events: none;
}
.sl-a--right { text-align: right; }
.sl-a--center { text-align: center; }
.sl-a--left { text-align: left; }
.sl-item__in { display: inline-block; max-width: 100%; overflow-wrap: anywhere; }
a.sl-item__in { pointer-events: auto; }

.sl-item--heading { font-weight: 900; line-height: 1.25; text-wrap: balance; }
.sl-item--text { font-weight: 500; line-height: 1.8; }
.sl-item--heading.sl-c--light, .sl-item--text.sl-c--light { color: var(--salmod-on-primary); text-shadow: 0 1px 12px rgba(12,10,9,.35); }
.sl-item--heading.sl-c--dark, .sl-item--text.sl-c--dark { color: var(--salmod-fg); }
.sl-item--heading.sl-c--brand, .sl-item--text.sl-c--brand { color: var(--salmod-brand); }

.sl-item--button .sl-item__in, .sl-item--badge .sl-item__in {
	border-radius: 999px; font-weight: 800; line-height: 1.2; white-space: nowrap;
	text-decoration: none !important;
}
.sl-item--button .sl-item__in { padding: .85em 1.6em; transition: transform .15s ease, opacity .2s ease; }
.sl-item--button.sl-c--light .sl-item__in { background: var(--salmod-surface); color: var(--salmod-primary) !important; }
.sl-item--button.sl-c--dark .sl-item__in { background: var(--salmod-primary); color: var(--salmod-on-primary) !important; }
.sl-item--button.sl-c--brand .sl-item__in { background: var(--salmod-brand); color: var(--salmod-on-brand) !important; }
.salmod-hero__link:hover .sl-item--button .sl-item__in, a.sl-item__in:hover { opacity: .9; }
.salmod-hero__link:active .sl-item--button .sl-item__in, a.sl-item__in:active { transform: scale(.98); }
.sl-item--badge .sl-item__in { padding: .45em 1em; }
.sl-item--badge.sl-c--light .sl-item__in { background: var(--salmod-surface); color: var(--salmod-brand-ink); }
.sl-item--badge.sl-c--dark .sl-item__in { background: var(--salmod-primary); color: var(--salmod-on-primary); }
.sl-item--badge.sl-c--brand .sl-item__in { background: var(--salmod-brand); color: var(--salmod-on-brand); }

/* Entrance of the active slide's layers */
.salmod-hero__slide:not(.is-active) .sl-item { opacity: 0; }
.salmod-hero__slide .sl-item { transition: opacity .5s ease .12s; }

/* Device switch: desktop ≥1025 · tablet 768–1024 · mobile ≤767 */
@media (min-width: 1025px) { .sl-layers.is-d { display: block; } }
@media (min-width: 768px) and (max-width: 1024px) {
	.salmod-hero__slide { aspect-ratio: var(--ar-t, 5 / 2); }
	.sl-layers.is-t { display: block; }
}
@media (max-width: 767px) {
	.salmod-hero { --sl-r: 14px; }
	.salmod-hero__slide { aspect-ratio: var(--ar-m, 6 / 5); }
	.sl-layers.is-m { display: block; }
	.salmod-hero__overlay--dark { background: linear-gradient(to top, rgba(12,10,9,.62), rgba(12,10,9,.15) 55%, transparent 80%); }
	.salmod-hero__overlay--light { background: linear-gradient(to top, rgba(255,255,255,.85), rgba(255,255,255,.3) 55%, transparent 80%); }
}

/* ---------------- Arrows + dots ---------------- */
.salmod-hero__arrow {
	all: unset; position: absolute; top: 50%; z-index: 2;
	width: 48px; height: 48px; margin-top: -24px;
	border-radius: 999px; background: var(--salmod-surface); color: var(--salmod-primary);
	box-shadow: 0 6px 20px rgba(12,10,9,.15);
	display: inline-flex; align-items: center; justify-content: center;
	cursor: pointer; opacity: 0; transition: opacity .2s ease, background-color .2s ease;
}
.salmod-hero__arrow svg { width: 20px; height: 20px; }
.salmod-hero:hover .salmod-hero__arrow, .salmod-hero__arrow:focus-visible { opacity: 1; }
.salmod-hero__arrow:hover { background: var(--salmod-brand-soft); }
.salmod-hero__arrow:focus-visible { outline: 2px solid var(--salmod-ring); outline-offset: 2px; }
.salmod-hero__arrow--prev { right: 16px; }
.salmod-hero__arrow--next { left: 16px; }
.salmod-hero__bar { display: flex; align-items: center; justify-content: center; margin-top: 10px; }
.salmod-hero__dots { display: flex; align-items: center; gap: 2px; }
.salmod-hero__dots button { all: unset; position: relative; cursor: pointer; width: 24px; height: 24px; display: inline-flex; align-items: center; justify-content: center; }
.salmod-hero__dots button::before { content: ""; width: 8px; height: 8px; border-radius: 999px; background: var(--salmod-border); transition: width .3s var(--sl-ease), background-color .2s ease; }
.salmod-hero__dots button[aria-current="true"] { width: 44px; }
.salmod-hero__dots button[aria-current="true"]::before { width: 36px; }
.salmod-hero__dots button span { display: none; position: absolute; top: 8px; right: 4px; width: 36px; height: 8px; border-radius: 999px; background: var(--salmod-brand); transform-origin: right; }
.salmod-hero__dots button[aria-current="true"] span { display: block; }
.salmod-hero__dots button:focus-visible { outline: 2px solid var(--salmod-ring); outline-offset: 1px; border-radius: 6px; }
@media (max-width: 1024px) { .salmod-hero__arrow { display: none; } }
@media (max-width: 767px) { .salmod-hero__bar { margin-top: 6px; } }

@media (prefers-reduced-motion: reduce) {
	.salmod-hero__slide .sl-item, .salmod-hero__slide:not(.is-active) .sl-item { opacity: 1; transition: none; }
}