/*
 * MedWise Anatomy Hotspots
 * Every colour and measure is a custom property, so the Elementor style
 * controls (or a child theme) can re-skin the section without touching this file.
 */

.mwah {
	--mwah-ink: #092122;
	--mwah-accent: #235354;
	--mwah-active: #E2F3A9;
	--mwah-on-active: #092122;
	--mwah-surface: #F4F8E8;
	--mwah-muted: #41534F;
	--mwah-rule: rgba(9, 33, 34, 0.14);
	/*
	 * Μέγεθος σημείου. Το --mwah-hot-size είναι το ΜΕΓΙΣΤΟ· το πραγματικό
	 * μέγεθος κλιμακώνεται με το πλάτος της εικόνας (cqw) και περιορίζεται
	 * ανάμεσα σε min και max. Έτσι οι κύκλοι κρατούν την ίδια αναλογία με το
	 * πρόσωπο σε κάθε οθόνη, αντί να γιγαντώνονται όταν η εικόνα μικραίνει.
	 */
	--mwah-hot-size: 44px;
	--mwah-hot-size-min: 26px;
	--mwah-hot-fluid: 7cqw;
	--mwah-hot-size-mobile: 36px;
	/* Δαχτυλίδι ευκρίνειας: 0 = όπως το mockup. Ανέβασέ το όταν ένα σημείο
	   πέφτει πάνω σε σκούρο μέρος της εικόνας και χάνεται. */
	--mwah-hot-ring: 0px;
	--mwah-hot-ring-color: rgba(255, 255, 255, 0.92);
	--mwah-gap: 52px;
	--mwah-max: 1440px;
	--mwah-pad: 40px;

	/*
	 * Διάταξη: δύο στήλες, η εικόνα η μεγάλη. Ολόκληρη η λίστα στηλών είναι μία
	 * μεταβλητή επειδή οι μονάδες fr ΔΕΝ επιτρέπονται μέσα σε calc() — ένα
	 * calc(var(--x) * 1fr) είναι άκυρο, ο browser πετάει τη δήλωση, και το grid
	 * καταρρέει σε μία στήλη. Έτσι γράφεται η τιμή ατόφια, χωρίς αριθμητική.
	 */
	--mwah-cols: minmax(0, 0.66fr) minmax(0, 1.34fr);
	--mwah-align: center;

	/* Η εικόνα. --mwah-ratio: auto σημαίνει «όπως το αρχείο, χωρίς crop». */
	--mwah-figure-width: 87%;
	--mwah-figure-max: 100%;
	--mwah-figure-margin: 0 0 0 auto;
	--mwah-ratio: auto;
	--mwah-img-height: auto;
	--mwah-img-fit: cover;
	--mwah-img-pos: center center;
	/* Για φωτογραφίες με λευκό φόντο πάνω σε ανοιχτόχρωμο section: το multiply
	   κάνει το λευκό να χαθεί μέσα στο φόντο. Λύση ανάγκης — το σωστό είναι
	   κομμένη εικόνα με διαφάνεια. */
	--mwah-img-blend: normal;

	background: var(--mwah-surface);
	color: var(--mwah-ink);
	padding: 104px 0 118px;
}

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

/* Themes love to set display on generic selectors; hidden must stay hidden. */
.mwah [hidden] {
	display: none !important;
}

.mwah__in {
	max-width: var(--mwah-max);
	margin: 0 auto;
	padding-inline: var(--mwah-pad);
}

/* ---------- head ---------- */

.mwah__head {
	text-align: center;
	margin-bottom: 44px;
}

.mwah__eyebrow {
	margin: 0 0 16px;
	font-size: 0.8rem;
	font-weight: 500;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--mwah-accent);
}

.mwah__title {
	margin: 0 0 16px;
	font-size: clamp(2rem, 3.6vw, 3.1rem);
	font-weight: 600;
	line-height: 1.12;
	letter-spacing: -0.03em;
	text-wrap: balance;
	color: inherit;
}

.mwah__intro {
	margin: 0 auto;
	max-width: 52ch;
	font-size: 1.06rem;
	line-height: 1.6;
	color: var(--mwah-muted);
}

/* ---------- tabs ---------- */

.mwah__tabs {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 6px;
	margin-bottom: 58px;
}

.mwah__tab {
	font: inherit;
	font-size: 1rem;
	font-weight: 500;
	cursor: pointer;
	padding: 13px 30px;
	border-radius: 100px;
	border: 1px solid transparent;
	background: transparent;
	color: var(--mwah-ink);
	transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}

.mwah__tab:hover {
	border-color: rgba(9, 33, 34, 0.2);
}

.mwah__tab[aria-selected="true"] {
	background: var(--mwah-accent);
	color: #fff;
}

/* ---------- layout ---------- */

.mwah__grid {
	display: grid;
	grid-template-columns: var(--mwah-cols);
	gap: var(--mwah-gap);
	align-items: var(--mwah-align);
}

/*
 * Full-bleed: το φόντο βγαίνει έξω από το container του Elementor και πιάνει
 * όλο το πλάτος. Δεν αλλάζει το πλάτος του περιεχομένου — αυτό συνεχίζει να
 * περιορίζεται από το .mwah__in.
 */
.mwah--bleed {
	margin-inline: calc(50% - 50vw);
}

/* ---------- διάταξη ---------- */

/*
 * Η σειρά στο DOM είναι πάντα accordion → εικόνα, ώστε ένας screen reader και
 * ένας crawler να διαβάζουν πρώτα το κείμενο. Η οπτική σειρά αλλάζει με order.
 */
.mwah--image-left {
	--mwah-figure-margin: 0 auto 0 0;
}

.mwah--image-left .mwah__media {
	order: -1;
}

.mwah--image-top,
.mwah--image-bottom {
	--mwah-figure-margin: 0 auto;
}

.mwah--image-top .mwah__grid,
.mwah--image-bottom .mwah__grid {
	grid-template-columns: minmax(0, 1fr);
}

.mwah--image-top .mwah__media {
	order: -1;
}

.mwah--image-bottom .mwah__media {
	order: 1;
}

/* ---------- accordion ---------- */

.mwah__list {
	border-top: 1px solid var(--mwah-rule);
}

.mwah__item {
	border-bottom: 1px solid var(--mwah-rule);
}

.mwah__item-head {
	margin: 0;
	font: inherit;
}

.mwah__btn {
	width: 100%;
	background: none;
	border: 0;
	font: inherit;
	cursor: pointer;
	text-align: left;
	display: flex;
	align-items: center;
	gap: 16px;
	padding: 22px 0;
	color: var(--mwah-ink);
}

.mwah__mark {
	width: 34px;
	height: 34px;
	flex: none;
	border-radius: 50%;
	background: var(--mwah-ink);
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 1.05rem;
	line-height: 1;
	transition: background 0.18s ease, color 0.18s ease;
}

.mwah__item.is-open .mwah__mark {
	background: var(--mwah-active);
	color: var(--mwah-on-active);
}

.mwah__label {
	font-size: 1.12rem;
	font-weight: 500;
}

.mwah__body {
	padding: 0 0 24px 50px;
}

.mwah__points {
	list-style: none;
	margin: 0 0 18px;
	padding: 0;
}

.mwah__points li {
	position: relative;
	padding: 6px 0 6px 18px;
	font-size: 1rem;
	color: var(--mwah-muted);
}

.mwah__points li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 15px;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--mwah-accent);
}

.mwah__more {
	display: inline-block;
	font-weight: 600;
	color: var(--mwah-accent);
	text-decoration: none;
	border-bottom: 2px solid var(--mwah-active);
	padding-bottom: 4px;
}

.mwah__more:hover {
	border-bottom-color: var(--mwah-accent);
}

/* ---------- figure ---------- */

.mwah__figure {
	position: relative;
	width: var(--mwah-figure-width);
	max-width: var(--mwah-figure-max);
	margin: var(--mwah-figure-margin);
	aspect-ratio: var(--mwah-ratio);
}

/*
 * A group with no image still has hotspots. Without a box to sit in they would
 * all collapse onto the same point, so give the empty figure a placeholder.
 */
.mwah__figure--empty {
	aspect-ratio: 4 / 5;
	background: rgba(9, 33, 34, 0.06);
	border-radius: 10px;
}

/*
 * container-type κάνει το figure μονάδα μέτρησης: το 1cqw είναι το 1% του
 * πλάτους ΤΗΣ ΕΙΚΟΝΑΣ, όχι της οθόνης. Γι' αυτό τα σημεία κλιμακώνονται σωστά
 * ακόμη κι όταν η εικόνα αλλάζει στήλη ή πλάτος χωρίς να αλλάξει η οθόνη.
 */
.mwah__figure {
	container-type: inline-size;
}

/* Positioning context for the hotspots, stated rather than inherited by luck. */
.mwah__hots {
	position: absolute;
	inset: 0;
}

.mwah__img {
	width: 100%;
	max-width: 100%;
	/* height μένει auto όσο δεν έχει οριστεί αναλογία· με αναλογία γίνεται 100%
	   ώστε το object-fit να έχει πλαίσιο να γεμίσει. */
	height: var(--mwah-img-height);
	object-fit: var(--mwah-img-fit);
	object-position: var(--mwah-img-pos);
	mix-blend-mode: var(--mwah-img-blend);
	display: block;
}

.mwah__hot {
	position: absolute;
	left: var(--mwah-x, 50%);
	top: var(--mwah-y, 50%);
	transform: translate(-50%, -50%);
	width: var(--mwah-hot-size);
	height: var(--mwah-hot-size);
	border-radius: 50%;
	border: 0;
	cursor: pointer;
	background: var(--mwah-ink);
	color: #fff;
	font: inherit;
	font-size: 1.02rem;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 0 0 var(--mwah-hot-ring) var(--mwah-hot-ring-color);
	transition: background 0.18s ease, color 0.18s ease, transform 0.18s ease;
}

.mwah__hot:hover {
	transform: translate(-50%, -50%) scale(1.08);
}

.mwah__hot.is-on {
	background: var(--mwah-active);
	color: var(--mwah-on-active);
}

.mwah__hot.is-on::after {
	content: "";
	position: absolute;
	inset: calc(var(--mwah-hot-current, 44px) * -0.18);
	border-radius: 50%;
	border: 1.5px solid var(--mwah-active);
}

.mwah__note {
	margin-top: 16px;
	font-size: 0.86rem;
	color: var(--mwah-muted);
	text-align: center;
}

/*
 * Σε browser χωρίς container queries τα παραπάνω σταθερά μεγέθη ισχύουν ως έχουν.
 * Όπου υποστηρίζονται, το μέγεθος γίνεται αναλογικό του πλάτους της εικόνας.
 */
@supports (container-type: inline-size) {
	.mwah__hot {
		--mwah-hot-current: clamp(var(--mwah-hot-size-min), var(--mwah-hot-fluid), var(--mwah-hot-size));

		width: var(--mwah-hot-current);
		height: var(--mwah-hot-current);
		font-size: calc(var(--mwah-hot-current) * 0.42);
	}
}

/* ---------- a11y ---------- */

.mwah__sr {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.mwah__tab:focus-visible,
.mwah__btn:focus-visible,
.mwah__hot:focus-visible,
.mwah__more:focus-visible {
	outline: 2px solid var(--mwah-accent);
	outline-offset: 3px;
}

/* ---------- responsive ---------- */

@media (max-width: 980px) {
	.mwah {
		padding: 70px 0 80px;
	}

	.mwah__in {
		padding-inline: 20px;
	}

	.mwah {
		--mwah-figure-width: 100%;
		--mwah-figure-margin: 0 auto;
		--mwah-gap: 40px;
	}

	.mwah__grid,
	.mwah--image-top .mwah__grid,
	.mwah--image-bottom .mwah__grid {
		grid-template-columns: minmax(0, 1fr);
	}

	/* Σε μία στήλη η εικόνα πάει πάντα πάνω, όποια κι αν είναι η διάταξη. */
	.mwah__media,
	.mwah--image-bottom .mwah__media {
		order: -1;
	}

	.mwah {
		/* Το κινητό ορίζει μικρότερο ταβάνι, όχι σταθερό μέγεθος. */
		--mwah-hot-size: var(--mwah-hot-size-mobile);
	}

	.mwah__hot {
		width: var(--mwah-hot-size);
		height: var(--mwah-hot-size);
		font-size: 0.92rem;
		left: var(--mwah-xm, var(--mwah-x, 50%));
		top: var(--mwah-ym, var(--mwah-y, 50%));
	}
}

@media (prefers-reduced-motion: reduce) {
	.mwah__tab,
	.mwah__mark,
	.mwah__hot {
		transition: none;
	}

	.mwah__hot:hover {
		transform: translate(-50%, -50%);
	}
}