/* =========================================================================
   SOHA Larynx Cards — frontend stylesheet
   Every visual value is driven by a CSS custom property on `.slc`, which is
   what the Elementor controls write to. Size controls that also appear in the
   auto-tuning media queries below intentionally ship without an Elementor
   default, so these defaults stay in charge until the user overrides them.

   Performance note: `backdrop-filter` is used on ONE element only (the outer
   panel) and is dropped on mobile unless the user forces it on. The decorative
   glows use soft radial gradients instead of `filter: blur()`.
   ========================================================================= */

.slc,
.slc *,
.slc *::before,
.slc *::after { box-sizing: border-box; }

.slc {
	/* ---- background ------------------------------------------------ */
	--slc-bg-1: #eef6ff;
	--slc-bg-2: #dbebfd;
	--slc-bg-3: #c9e0fb;
	--slc-bg-angle: 200deg;
	--slc-glow-1: rgba(255, 255, 255, .9);
	--slc-glow-2: rgba(158, 205, 255, .75);
	--slc-glow-strength: .55;
	--slc-wave-color: rgba(255, 255, 255, .75);

	/* ---- glass ----------------------------------------------------- */
	--slc-panel-bg: rgba(255, 255, 255, .26);
	--slc-panel-fallback: rgba(255, 255, 255, .52);
	--slc-panel-border: rgba(255, 255, 255, .55);
	--slc-panel-radius: 38px;
	--slc-panel-pad: 38px;
	--slc-panel-max: 1440px;
	--slc-blur: 14px;
	--slc-highlight: rgba(255, 255, 255, .7);

	/* ---- cards ------------------------------------------------------ */
	--slc-card-bg: rgba(255, 255, 255, .42);
	--slc-card-border: rgba(255, 255, 255, .72);
	--slc-card-radius: 30px;
	--slc-card-pad: 26px;
	--slc-card-shadow: 0 24px 50px -28px rgba(48, 102, 178, .45);
	--slc-card-hover-bg: rgba(255, 255, 255, .54);
	--slc-card-hover-border: rgba(255, 255, 255, .95);
	--slc-card-hover-lift: -4px;

	/* ---- header ----------------------------------------------------- */
	--slc-badge-size: 68px;
	--slc-badge-bg: linear-gradient(160deg, rgba(255, 255, 255, .95), rgba(255, 255, 255, .6));
	--slc-badge-border: rgba(255, 255, 255, .95);
	--slc-badge-icon: 34px;
	--slc-title-color: #3f83d6;
	--slc-title-size: 20px;
	--slc-title-weight: 800;
	--slc-title-align: center;
	--slc-header-gap: 18px;

	/* ---- items ------------------------------------------------------- */
	--slc-item-h: 54px;
	--slc-item-pad-y: 8px;
	--slc-item-pad-x: 14px;
	--slc-item-radius: 15px;
	--slc-item-bg: rgba(255, 255, 255, .46);
	--slc-item-border: rgba(255, 255, 255, .62);
	--slc-item-gap: 10px;
	--slc-item-hover-bg: rgba(255, 255, 255, .78);
	--slc-item-hover-border: rgba(255, 255, 255, 1);
	--slc-item-hover-shift: -5px;

	--slc-text-color: #4d6389;
	--slc-text-size: 14.5px;
	--slc-text-weight: 600;

	--slc-icon-color: #5c9ae7;
	--slc-icon-hover: #3f83d6;
	--slc-icon-size: 26px;
	--slc-icon-stroke: 1.4;

	--slc-num-size: 28px;
	--slc-num-bg: rgba(255, 255, 255, .72);
	--slc-num-color: #7c9ac9;
	--slc-num-font: 13px;

	/* ---- anatomy ------------------------------------------------------ */
	--slc-anat-line-color: rgba(93, 150, 215, .65);
	--slc-anat-dot-color: #5b9ae0;
	--slc-anat-img-w: 100%;
	--slc-anat-img-x: 0%;
	--slc-anat-img-y: 0%;
	--slc-anat-img-opacity: 1;
	--slc-anat-img-fit: contain;
	--slc-anat-img-pos: center;
	--slc-anat-img-radius: 20px;
	--slc-anat-stage-h: 340px;

	--slc-gap: 26px;
	--slc-cols: 1.42fr 1fr 1fr;
	--slc-pad: 34px;

	direction: rtl;
	position: relative;
	isolation: isolate;
	color: var(--slc-text-color);
	padding: var(--slc-pad);
	overflow: hidden;
	background:
		radial-gradient(120% 90% at 88% 8%, rgba(255, 255, 255, .85) 0%, rgba(255, 255, 255, 0) 55%),
		radial-gradient(90% 70% at 10% 95%, rgba(255, 255, 255, .55) 0%, rgba(255, 255, 255, 0) 60%),
		linear-gradient(var(--slc-bg-angle), var(--slc-bg-1) 0%, var(--slc-bg-2) 45%, var(--slc-bg-3) 100%);
}

/* ---- decorative background -----------------------------------------------
   Soft radial gradients instead of `filter: blur()` — same look, no per-frame
   blur pass on a very large element.
   ------------------------------------------------------------------------ */
.slc__decor { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }

.slc__glow { position: absolute; opacity: var(--slc-glow-strength); }

.slc__glow--a {
	width: 62%;
	aspect-ratio: 1;
	inset-inline-start: -14%;
	top: -26%;
	background: radial-gradient(closest-side, var(--slc-glow-1) 0%, transparent 100%);
}

.slc__glow--b {
	width: 52%;
	aspect-ratio: 1;
	inset-inline-end: -12%;
	bottom: -20%;
	background: radial-gradient(closest-side, var(--slc-glow-2) 0%, transparent 100%);
}

.slc__waves { position: absolute; inset-inline: 0; bottom: 0; height: 22%; width: 100%; display: block; }
.slc__waves path { fill: none; stroke: var(--slc-wave-color); stroke-width: 1.2; }
.slc__waves path:nth-child(even) { opacity: .6; }

/* ---- optional widget heading ------------------------------------------ */
.slc__heading {
	position: relative;
	z-index: 1;
	margin: 0 0 22px;
	text-align: center;
	color: var(--slc-title-color);
	font-size: calc(var(--slc-title-size) + 8px);
	font-weight: var(--slc-title-weight);
}

/* ---- outer glass panel — the only backdrop-filter in the widget -------- */
.slc__panel {
	position: relative;
	z-index: 1;
	max-width: var(--slc-panel-max);
	margin-inline: auto;
	background: var(--slc-panel-bg);
	border: 1px solid var(--slc-panel-border);
	border-radius: var(--slc-panel-radius);
	padding: var(--slc-panel-pad);
	-webkit-backdrop-filter: blur(var(--slc-blur));
	backdrop-filter: blur(var(--slc-blur));
	box-shadow: 0 40px 80px -50px rgba(48, 102, 178, .55), inset 0 1px 0 var(--slc-highlight);
}

/* graceful fallback where backdrop-filter is unavailable */
@supports not ((backdrop-filter: blur(2px)) or (-webkit-backdrop-filter: blur(2px))) {
	.slc__panel { background: var(--slc-panel-fallback); }
}

/* glass quality: "off" removes the blur pass entirely */
.slc--glass-off .slc__panel {
	-webkit-backdrop-filter: none;
	backdrop-filter: none;
	background: var(--slc-panel-fallback);
}

.slc__grid {
	display: grid;
	grid-template-columns: var(--slc-cols);
	gap: var(--slc-gap);
	align-items: stretch;
}

/* ---- card -------------------------------------------------------------- */
.slc-card {
	position: relative;
	display: flex;
	flex-direction: column;
	margin-top: 34px;
	background: var(--slc-card-bg);
	border: 1px solid var(--slc-card-border);
	border-radius: var(--slc-card-radius);
	padding: var(--slc-card-pad);
	box-shadow: var(--slc-card-shadow), inset 0 1px 0 rgba(255, 255, 255, .85);
	transition: transform .35s ease, background-color .35s ease, border-color .35s ease, box-shadow .35s ease;
}

.slc-card:hover {
	transform: translateY(var(--slc-card-hover-lift));
	background: var(--slc-card-hover-bg);
	border-color: var(--slc-card-hover-border);
	box-shadow: 0 34px 60px -30px rgba(48, 102, 178, .5), inset 0 1px 0 rgba(255, 255, 255, .95);
}

.slc-card--list { padding-top: calc(var(--slc-card-pad) + 26px); }

/* ---- floating circular header badge ------------------------------------ */
.slc-badge {
	position: absolute;
	top: calc(var(--slc-badge-size) / -2);
	inset-inline-start: 50%;
	transform: translateX(50%);
	width: var(--slc-badge-size);
	height: var(--slc-badge-size);
	border-radius: 50%;
	display: grid;
	place-items: center;
	background: var(--slc-badge-bg);
	border: 1px solid var(--slc-badge-border);
	box-shadow: 0 16px 30px -16px rgba(48, 102, 178, .65), inset 0 1px 0 #fff;
	color: var(--slc-badge-color, var(--slc-icon-color));
	transition: transform .35s ease;
}

.slc-card:hover .slc-badge { transform: translateX(50%) translateY(-3px); }
.slc-badge svg { width: var(--slc-badge-icon); height: var(--slc-badge-icon); stroke-width: var(--slc-icon-stroke); }

.slc-card__title {
	margin: 0 0 var(--slc-header-gap);
	text-align: var(--slc-title-align);
	font-size: var(--slc-title-size);
	font-weight: var(--slc-title-weight);
	color: var(--slc-title-color);
	letter-spacing: .2px;
	line-height: 1.6;
}

/* ---- list --------------------------------------------------------------- */
.slc-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: var(--slc-item-gap);
}

.slc-item { display: block; }

.slc-item__inner {
	display: grid;
	grid-template-columns: var(--slc-num-size) 1fr var(--slc-icon-size);
	align-items: center;
	gap: 12px;
	min-height: var(--slc-item-h);
	padding: var(--slc-item-pad-y) var(--slc-item-pad-x);
	border-radius: var(--slc-item-radius);
	background: var(--slc-item-bg);
	border: 1px solid var(--slc-item-border);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, .7);
	text-decoration: none;
	color: inherit;
	transition: transform .3s ease, background-color .3s ease, border-color .3s ease, box-shadow .3s ease;
}

.slc-item__inner:where(a):hover,
.slc-item__inner:where(a):focus-visible {
	background: var(--slc-item-hover-bg);
	border-color: var(--slc-item-hover-border);
	transform: translateX(var(--slc-item-hover-shift));
	box-shadow: 0 12px 22px -14px rgba(48, 102, 178, .6), inset 0 1px 0 #fff;
}

.slc-item__inner:where(a):focus-visible {
	outline: 2px solid var(--slc-title-color);
	outline-offset: 2px;
}

.slc-item__inner:where(a):hover .slc-item__icon { transform: translateX(-3px); color: var(--slc-icon-hover); }

.slc-item__num {
	width: var(--slc-num-size);
	height: var(--slc-num-size);
	border-radius: 50%;
	display: grid;
	place-items: center;
	background: var(--slc-num-bg);
	color: var(--slc-num-color);
	font-size: var(--slc-num-font);
	font-weight: 700;
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9);
}

.slc-item__num:empty { background: none; box-shadow: none; }

.slc-item__text {
	font-size: var(--slc-text-size);
	font-weight: var(--slc-text-weight);
	color: var(--slc-text-color);
	text-align: start;
	line-height: 1.6;
}

.slc-item__icon {
	width: var(--slc-icon-size);
	height: var(--slc-icon-size);
	color: var(--slc-icon-color);
	transition: transform .3s ease, color .3s ease;
}

.slc-item__icon svg { width: 100%; height: 100%; display: block; stroke-width: var(--slc-icon-stroke); }

/* ---- user-uploaded icons (SVG / PNG) ----------------------------------- */
.slc-icon-img { width: 100%; height: 100%; object-fit: contain; display: block; }
.slc-badge .slc-icon-img { width: var(--slc-badge-icon); height: var(--slc-badge-icon); }

/* ---- anatomy card — one full-bleed image area, no labels or lines ------- */
.slc-anatomy__head { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }

.slc-anatomy__head::before,
.slc-anatomy__head::after {
	content: "";
	flex: 1;
	height: 1px;
	background: repeating-linear-gradient(to left, var(--slc-anat-line-color) 0 8px, transparent 8px 16px);
}

.slc-anatomy__head .slc-card__title { margin: 0; white-space: nowrap; }
.slc-anatomy__dot { width: 6px; height: 6px; border-radius: 50%; background: var(--slc-anat-dot-color); flex: none; }

.slc-anatomy__stage { position: relative; flex: 1; min-height: var(--slc-anat-stage-h); }

.slc-anatomy__media {
	position: absolute;
	inset-inline-end: var(--slc-anat-img-x);
	top: var(--slc-anat-img-y);
	bottom: var(--slc-anat-img-y);
	width: var(--slc-anat-img-w);
	opacity: var(--slc-anat-img-opacity);
}

.slc-anatomy__media img {
	width: 100%;
	height: 100%;
	object-fit: var(--slc-anat-img-fit);
	object-position: var(--slc-anat-img-pos);
	border-radius: var(--slc-anat-img-radius);
	display: block;
}

.slc-anatomy__placeholder {
	width: 100%;
	height: 100%;
	border: 1.6px dashed rgba(120, 172, 228, .55);
	border-radius: var(--slc-anat-img-radius);
	background: linear-gradient(180deg, rgba(255, 255, 255, .30), rgba(255, 255, 255, .12));
	display: grid;
	place-items: center;
	gap: 8px;
	text-align: center;
	padding: 16px;
	color: #6e88b4;
}

.slc-anatomy__placeholder span { display: block; font-size: 12.5px; font-weight: 600; line-height: 1.9; opacity: .9; }
.slc-anatomy__placeholder small { font-size: 11px; opacity: .7; font-weight: 500; }

/* ============================== RESPONSIVE ================================ */

/* wide desktop */
@media (min-width: 1600px) {
	.slc {
		--slc-gap: 32px;
		--slc-title-size: 22px;
		--slc-text-size: 15px;
		--slc-item-h: 58px;
		--slc-icon-size: 28px;
	}
}

/* small desktop — a little more room for the services column */
@media (max-width: 1499px) {
	.slc {
		--slc-cols: 1.38fr 1.16fr 1fr;
		--slc-text-size: 13.5px;
		--slc-gap: 22px;
	}
}

/* laptop */
@media (max-width: 1279px) {
	.slc {
		--slc-pad: 24px;
		--slc-gap: 18px;
		--slc-panel-pad: 26px;
		--slc-card-pad: 20px;
		--slc-title-size: 18px;
		--slc-text-size: 13.5px;
		--slc-item-h: 48px;
		--slc-icon-size: 23px;
		--slc-num-size: 25px;
		--slc-num-font: 12px;
		--slc-cols: 1.42fr 1.16fr 1fr;
	}
}

/* tablet — anatomy full width on top, the two lists below */
@media (max-width: 1023px) {
	.slc {
		--slc-cols: 1fr 1fr;
		--slc-gap: 20px;
		--slc-title-size: 18px;
		--slc-text-size: 14px;
		--slc-item-h: 50px;
		--slc-anat-stage-h: 420px;
	}

	.slc-card--anatomy { grid-column: 1 / -1; order: -1; }
}

/* mobile — single column */
@media (max-width: 767px) {
	.slc {
		--slc-pad: 16px;
		--slc-cols: 1fr;
		--slc-gap: 44px;
		--slc-panel-pad: 16px;
		--slc-panel-radius: 26px;
		--slc-card-pad: 18px;
		--slc-card-radius: 24px;
		--slc-title-size: 17px;
		--slc-text-size: 13.5px;
		--slc-item-h: 50px;
		--slc-icon-size: 22px;
		--slc-num-size: 24px;
	}

	/* the blur pass is the single most expensive thing on low-end phones */
	.slc:not(.slc--glass-full) .slc__panel {
		-webkit-backdrop-filter: none;
		backdrop-filter: none;
		background: var(--slc-panel-fallback);
	}

	.slc-anatomy__stage { min-height: 0; }

	.slc-anatomy__media {
		position: static;
		width: 100%;
		aspect-ratio: 3 / 4;
		margin-inline: auto;
	}

	.slc-anatomy__head::before,
	.slc-anatomy__head::after { max-width: 40px; }
}

/* ---- fewer than three visible cards ------------------------------------- */
.slc--cols-2 .slc__grid { grid-template-columns: 1.42fr 1fr; }
.slc--cols-1 .slc__grid { grid-template-columns: 1fr; }

@media (max-width: 1023px) {
	.slc--cols-2 .slc__grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 767px) {
	.slc--cols-2 .slc__grid,
	.slc--cols-1 .slc__grid { grid-template-columns: 1fr; }
}

/* ---- optional entrance animation (opt-in, JS adds `slc--reveal`) --------- */
.slc--reveal .slc-card { opacity: 0; transform: translateY(14px); }
.slc--reveal .slc-card.is-in { opacity: 1; transform: none; transition: opacity .6s ease, transform .6s ease; }
.slc--reveal .slc-card.is-in:hover { transform: translateY(var(--slc-card-hover-lift)); }

/* ---- animations disabled via the widget control ------------------------- */
.slc--no-anim .slc-card,
.slc--no-anim .slc-item__inner,
.slc--no-anim .slc-item__icon,
.slc--no-anim .slc-badge { transition: none; }

.slc--no-anim .slc-card:hover,
.slc--no-anim .slc-item__inner:where(a):hover { transform: none; }

.slc--no-anim .slc-card:hover .slc-badge { transform: translateX(50%); }

/* ---- reduced motion ------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
	.slc *,
	.slc *::before,
	.slc *::after { transition: none !important; animation: none !important; }

	.slc-card, .slc--reveal .slc-card { opacity: 1 !important; }
	.slc-card:hover, .slc-item__inner:where(a):hover { transform: none; }
	.slc-card:hover .slc-badge { transform: translateX(50%); }
}