/* ==========================================================================
   Wahat Al-Hijaz — Specialists module (front end)
   --------------------------------------------------------------------------
   Every selector is scoped under .wahat-specialists. No global element
   selectors, no .elementor-button overrides, no !important.

   Brand tokens: define --wah-primary, --wah-dark … on :root (site-wide) to
   re-brand; the module falls back to the Wahat design-system values.

   Breakpoints follow Elementor defaults: tablet ≤ 1024px, mobile ≤ 767px.
   ========================================================================== */

.wahat-specialists {
	--wah-sp-dark: var(--wah-dark, #194246);
	--wah-sp-primary: var(--wah-primary, #109070);
	--wah-sp-primary-hover: var(--wah-primary-hover, #0B755C);
	--wah-sp-text: var(--wah-text, #344C50);
	--wah-sp-muted: var(--wah-muted, #728587);
	--wah-sp-soft-bg: var(--wah-soft-bg, #F3F8F9);
	--wah-sp-mint: var(--wah-mint, #E4EFED);
	--wah-sp-border: var(--wah-border, #E2EBEA);
	--wah-sp-white: var(--wah-white, #FFFFFF);

	--wah-sp-radius-card: 12px;
	--wah-sp-radius-lg: 20px;
	--wah-sp-radius-btn: 30px;
	--wah-sp-shadow: 0 10px 30px rgba(25, 66, 70, 0.06);
	--wah-sp-shadow-hover: 0 14px 34px rgba(25, 66, 70, 0.10);
	--wah-sp-transition: 200ms ease;

	color: var(--wah-sp-text);
	text-align: start;
}

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

.wahat-specialists .wahat-sp-icon {
	display: block;
	width: 1em;
	height: 1em;
	flex: 0 0 auto;
}

/* --------------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------------- */

.wahat-specialists a.wahat-sp-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-height: 46px;
	padding: 10px 16px;
	border: 1px solid transparent;
	border-radius: var(--wah-sp-radius-btn);
	font-size: 0.9rem;
	font-weight: 700;
	line-height: 1.35;
	text-align: center;
	text-decoration: none;
	box-shadow: none;
	cursor: pointer;
	transition: background-color var(--wah-sp-transition), border-color var(--wah-sp-transition), color var(--wah-sp-transition);
}

.wahat-specialists a.wahat-sp-btn .wahat-sp-icon {
	font-size: 1.15em;
}

.wahat-specialists a.wahat-sp-btn--primary,
.wahat-specialists a.wahat-sp-btn--primary:visited {
	background-color: var(--wah-sp-primary);
	border-color: var(--wah-sp-primary);
	color: var(--wah-sp-white);
}

.wahat-specialists a.wahat-sp-btn--primary:hover,
.wahat-specialists a.wahat-sp-btn--primary:focus-visible {
	background-color: var(--wah-sp-primary-hover);
	border-color: var(--wah-sp-primary-hover);
	color: var(--wah-sp-white);
}

.wahat-specialists a.wahat-sp-btn--outline,
.wahat-specialists a.wahat-sp-btn--outline:visited {
	background-color: transparent;
	border-color: var(--wah-sp-primary);
	color: var(--wah-sp-dark);
}

.wahat-specialists a.wahat-sp-btn--outline:hover,
.wahat-specialists a.wahat-sp-btn--outline:focus-visible {
	background-color: var(--wah-sp-mint);
	border-color: var(--wah-sp-primary);
	color: var(--wah-sp-dark);
}

.wahat-specialists a.wahat-sp-btn:focus-visible,
.wahat-specialists .wahat-specialist-card__name a:focus-visible {
	outline: 2px solid var(--wah-sp-primary);
	outline-offset: 3px;
}

.wahat-specialists a.wahat-sp-btn--lg {
	min-height: 54px;
	padding: 14px 32px;
	font-size: 1.05rem;
}

/* --------------------------------------------------------------------------
   Grid (shortcodes)
   -------------------------------------------------------------------------- */

.wahat-specialists .wahat-specialists-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 32px 28px;
	align-items: stretch;
}

/* --------------------------------------------------------------------------
   Card
   -------------------------------------------------------------------------- */

/* Grid palette (cards, filters, search, pagination).
   ONE place to change the team colors — matches the approved card mockup
   (Wahat brand: dark teal + brand green, light-grey photo backdrop). */
.wahat-specialists.wahat-specialists--grid {
	--wah-sp-primary: #109070;
	--wah-sp-primary-hover: #0B755C;
	--wah-sp-dark: #194246;
	--wah-sp-accent: #2E5A5E;
	--wah-sp-text: #1F2D2F;
	--wah-sp-muted: #728587;
	--wah-sp-mint: #E4EFED;
	--wah-sp-border: #EEF1F1;
	--wah-sp-chip-bg: #F3F5F5;
	--wah-sp-photo-bg: #EDEEF0;
	--wah-sp-outline-border: #109070;
	--wah-sp-radius-card: 12px;
	--wah-sp-radius-ctl: 999px;
	--wah-sp-shadow: 0 8px 28px rgba(25, 66, 70, 0.07);
	--wah-sp-shadow-hover: 0 14px 36px rgba(25, 66, 70, 0.11);
}

.wahat-specialists .wahat-specialist-card {
	container-type: inline-size;
	container-name: wah-sp-card;
	display: flex;
	flex-direction: column;
	min-width: 0;
	height: 100%;
	margin: 0;
	overflow: hidden;
	background-color: var(--wah-sp-white);
	border: 1px solid var(--wah-sp-border);
	border-radius: var(--wah-sp-radius-card);
	text-align: center;
}

/* Full-bleed portrait on a light-grey backdrop (near-square, head and shoulders). */
.wahat-specialists .wahat-specialist-card__media {
	display: block;
	position: relative;
	aspect-ratio: 20 / 19;
	overflow: hidden;
	background-color: var(--wah-sp-photo-bg, var(--wah-sp-soft-bg));
	text-decoration: none;
}

.wahat-specialists .wahat-specialist-card__img {
	display: block;
	width: 100%;
	max-width: none;
	height: 100%;
	margin: 0;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	object-fit: cover;
	object-position: center top;
}

.wahat-specialists .wahat-specialist-card__body {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	align-items: center;
	min-width: 0;
	padding: 15px 10px 15px;
}

.wahat-specialists .wahat-specialist-card__name {
	margin: 0 0 12px;
	padding: 0;
	color: var(--wah-sp-dark);
	font-size: clamp(1.25rem, 1.12rem + 0.5vw, 1.55rem);
	font-weight: 800;
	line-height: 1.35;
}

.wahat-specialists .wahat-specialist-card__name a,
.wahat-specialists .wahat-specialist-card__name a:visited {
	color: inherit;
	text-decoration: none;
	transition: color var(--wah-sp-transition);
}

.wahat-specialists .wahat-specialist-card__name a:hover {
	color: var(--wah-sp-primary);
}

.wahat-specialists .wahat-specialist-card__role {
	margin: 0 0 14px;
	color: var(--wah-sp-accent, var(--wah-sp-dark));
	font-size: clamp(1rem, 0.96rem + 0.2vw, 1.1rem);
	font-weight: 500;
	line-height: 1.6;
}

/* Short line: always one visual line. Full text lives on the profile page. */
.wahat-specialists .wahat-specialist-card__line {
	width: 100%;
	max-width: 100%;
	margin: 0;
	overflow: hidden;
	color: var(--wah-sp-text);
	font-size: clamp(0.95rem, 0.92rem + 0.15vw, 1.05rem);
	font-weight: 400;
	line-height: 1.7;
	white-space: nowrap;
	text-overflow: ellipsis;
}

/* Desktop: two equal buttons side by side. In RTL, booking sits on the right. */
.wahat-specialists .wahat-specialist-card__actions {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 10px;
	width: 100%;
	margin-top: auto;
	padding-top: 26px;
}

.wahat-specialists .wahat-specialist-card__actions--single {
	grid-template-columns: minmax(0, 1fr);
}

.wahat-specialists .wahat-specialist-card__actions a.wahat-sp-btn {
	gap: 5px; /* icon ↔ text */
	width: 100%;
	min-width: 0;
	min-height: 0; /* height comes from the padding below */
	padding: 10px 5px;
	font-size: 0.95rem;
	border-radius: var(--wah-sp-radius-ctl, 10px);
}

.wahat-specialists .wahat-specialist-card__actions a.wahat-sp-btn--outline,
.wahat-specialists .wahat-specialist-card__actions a.wahat-sp-btn--outline:visited {
	border-color: var(--wah-sp-outline-border, var(--wah-sp-primary));
	color: var(--wah-sp-dark);
	font-weight: 600;
}

.wahat-specialists .wahat-specialist-card__actions a.wahat-sp-btn--outline:hover,
.wahat-specialists .wahat-specialist-card__actions a.wahat-sp-btn--outline:focus-visible {
	background-color: var(--wah-sp-mint);
	border-color: var(--wah-sp-primary);
}

/* Very narrow cards (e.g. a narrow Elementor column): stack the buttons. */
@container wah-sp-card (max-width: 280px) {
	.wahat-specialists .wahat-specialist-card__actions {
		grid-template-columns: minmax(0, 1fr);
	}
}

.wahat-specialists .wahat-sp-portrait-placeholder {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	background-color: var(--wah-sp-mint);
	color: var(--wah-sp-primary);
	font-size: 64px;
}

/* --------------------------------------------------------------------------
   Team toolbar: specialty filters + search  ([wahat_team] only)
   -------------------------------------------------------------------------- */

.wahat-specialists--team {
	scroll-margin-top: 24px;
}

.wahat-specialists .wahat-sp-toolbar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 16px 24px;
	margin-bottom: clamp(24px, 3vw, 36px);
}

.wahat-specialists .wahat-sp-filters {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	min-width: 0;
}

.wahat-specialists button.wahat-sp-filter {
	display: inline-flex;
	align-items: center;
	min-height: 42px;
	margin: 0;
	padding: 8px 22px;
	background-color: var(--wah-sp-chip-bg, var(--wah-sp-soft-bg));
	border: 1px solid transparent;
	border-radius: 999px;
	box-shadow: 0 2px 8px rgba(30, 43, 55, 0.06);
	color: var(--wah-sp-dark);
	font-family: inherit;
	font-size: 0.95rem;
	font-weight: 600;
	line-height: 1.4;
	white-space: nowrap;
	text-transform: none;
	letter-spacing: 0;
	cursor: pointer;
	transition: background-color var(--wah-sp-transition), color var(--wah-sp-transition), border-color var(--wah-sp-transition);
}

.wahat-specialists button.wahat-sp-filter:hover {
	background-color: var(--wah-sp-mint);
	color: var(--wah-sp-dark);
	border-color: var(--wah-sp-border);
}

.wahat-specialists button.wahat-sp-filter[aria-pressed="true"],
.wahat-specialists button.wahat-sp-filter[aria-pressed="true"]:hover {
	background-color: var(--wah-sp-primary);
	border-color: var(--wah-sp-primary);
	color: var(--wah-sp-white);
}

/* Mobile dropdown for many categories (hidden on desktop; shown via the mobile media query). */
.wahat-specialists .wahat-sp-filter-select {
	display: none;
	position: relative;
}

.wahat-specialists .wahat-sp-filter-select__label {
	position: absolute;
	inset-block-start: 50%;
	inset-inline-start: 18px;
	margin: 0;
	color: var(--wah-sp-muted);
	font-size: 0.9rem;
	font-weight: 600;
	line-height: 1;
	transform: translateY(-50%);
	pointer-events: none;
}

.wahat-specialists select.wahat-sp-filter-select__control {
	display: block;
	width: 100%;
	min-height: 46px;
	margin: 0;
	padding-block: 10px;
	padding-inline: 84px 44px;
	background-color: var(--wah-sp-white);
	border: 1px solid var(--wah-sp-border);
	border-radius: var(--wah-sp-radius-ctl, 10px);
	box-shadow: none;
	color: var(--wah-sp-dark);
	font-family: inherit;
	font-size: 0.95rem;
	font-weight: 700;
	line-height: 1.4;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
}

.wahat-specialists select.wahat-sp-filter-select__control:focus {
	border-color: var(--wah-sp-primary);
	outline: 2px solid var(--wah-sp-mint);
	outline-offset: 0;
}

/* Chevron (static icon points left) rotated to point down, at the inline end. */
.wahat-specialists .wahat-sp-filter-select__arrow {
	position: absolute;
	inset-block-start: 50%;
	inset-inline-end: 16px;
	color: var(--wah-sp-dark);
	font-size: 16px;
	transform: translateY(-50%) rotate(-90deg);
	pointer-events: none;
}

.wahat-specialists .wahat-sp-search {
	position: relative;
	flex: 0 1 340px;
	min-width: 0;
}

.wahat-specialists input.wahat-sp-search__input[type="search"] {
	display: block;
	width: 100%;
	min-height: 46px;
	margin: 0;
	padding-block: 10px;
	padding-inline: 16px 46px;
	background-color: var(--wah-sp-white);
	border: 1px solid var(--wah-sp-border);
	border-radius: var(--wah-sp-radius-ctl, 10px);
	box-shadow: 0 2px 8px rgba(30, 43, 55, 0.05);
	color: var(--wah-sp-dark);
	font-family: inherit;
	font-size: 0.95rem;
	line-height: 1.4;
	-webkit-appearance: none;
	appearance: none;
}

.wahat-specialists input.wahat-sp-search__input[type="search"]::placeholder {
	color: var(--wah-sp-muted);
	opacity: 1;
}

.wahat-specialists input.wahat-sp-search__input[type="search"]:focus {
	border-color: var(--wah-sp-primary);
	outline: 2px solid var(--wah-sp-mint);
	outline-offset: 0;
}

/* Icon at the inline end (left in RTL), as in the mockup. */
.wahat-specialists .wahat-sp-search__icon {
	position: absolute;
	inset-block-start: 50%;
	inset-inline-end: 14px;
	color: var(--wah-sp-dark);
	font-size: 20px;
	transform: translateY(-50%);
	pointer-events: none;
}

.wahat-specialists button.wahat-sp-filter:focus-visible,
.wahat-specialists button.wahat-sp-page:focus-visible,
.wahat-specialists button.wahat-sp-empty__reset:focus-visible {
	outline: 2px solid var(--wah-sp-primary);
	outline-offset: 3px;
}

/* --------------------------------------------------------------------------
   Empty state + pagination
   -------------------------------------------------------------------------- */

.wahat-specialists .wahat-sp-empty {
	padding: 48px 20px;
	background-color: var(--wah-sp-white);
	border: 1px dashed var(--wah-sp-border);
	border-radius: var(--wah-sp-radius-card);
	text-align: center;
}

.wahat-specialists .wahat-sp-empty__text {
	margin: 0 0 16px;
	color: var(--wah-sp-text);
	font-size: 1rem;
}

.wahat-specialists button.wahat-sp-empty__reset {
	min-height: 42px;
	margin: 0;
	padding: 8px 22px;
	background-color: transparent;
	border: 1px solid var(--wah-sp-primary);
	border-radius: var(--wah-sp-radius-ctl, 10px);
	color: var(--wah-sp-dark);
	font-family: inherit;
	font-size: 0.95rem;
	font-weight: 600;
	cursor: pointer;
}

.wahat-specialists button.wahat-sp-empty__reset:hover {
	background-color: var(--wah-sp-mint);
	color: var(--wah-sp-dark);
}

.wahat-specialists .wahat-sp-pagination {
	margin-top: clamp(28px, 4vw, 44px);
}

.wahat-specialists .wahat-sp-pagination__list {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.wahat-specialists .wahat-sp-pagination__list li {
	margin: 0;
}

.wahat-specialists button.wahat-sp-page {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 40px;
	height: 40px;
	margin: 0;
	padding: 0 8px;
	background-color: var(--wah-sp-chip-bg, var(--wah-sp-soft-bg));
	border: 1px solid transparent;
	border-radius: 999px;
	color: var(--wah-sp-dark);
	font-family: inherit;
	font-size: 0.95rem;
	font-weight: 600;
	line-height: 1;
	font-variant-numeric: tabular-nums;
	cursor: pointer;
	transition: background-color var(--wah-sp-transition), color var(--wah-sp-transition), border-color var(--wah-sp-transition);
}

.wahat-specialists button.wahat-sp-page:hover {
	background-color: var(--wah-sp-mint);
	color: var(--wah-sp-dark);
}

.wahat-specialists button.wahat-sp-page[aria-current="page"],
.wahat-specialists button.wahat-sp-page[aria-current="page"]:hover {
	background-color: var(--wah-sp-primary);
	color: var(--wah-sp-white);
}

.wahat-specialists button.wahat-sp-page--arrow {
	background-color: var(--wah-sp-white);
	border-color: var(--wah-sp-border);
	font-size: 18px;
}

/* "Previous" sits on the right in RTL and points right. */
.wahat-specialists button.wahat-sp-page--prev .wahat-sp-icon {
	transform: scaleX(-1);
}

.wahat-specialists button.wahat-sp-page:disabled {
	opacity: 0.4;
	cursor: default;
}

.wahat-specialists .wahat-sp-pagination__gap {
	padding-inline: 4px;
	color: var(--wah-sp-muted);
}


/* --------------------------------------------------------------------------
   Single page — layout primitives
   -------------------------------------------------------------------------- */

.wahat-specialists .wahat-sp-container {
	width: 100%;
	max-width: 1200px;
	margin-inline: auto;
	padding-inline: 20px;
}

.wahat-specialists .wahat-sp-container--narrow {
	max-width: 960px;
}

/* clip (not hidden) keeps position: sticky working for the aside and mobile bar. */
.wahat-specialists.wahat-specialist-single {
	overflow-x: clip;
	background-color: var(--wah-sp-white);
}

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

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */

.wahat-specialists .wahat-specialist-hero {
	position: relative;
	padding-block: clamp(20px, 3vw, 32px) clamp(48px, 6vw, 88px);
	background-color: var(--wah-sp-soft-bg);
	isolation: isolate;
	overflow: hidden;
}

/* Optional background photo (Settings → hero background, desktop + mobile).
   Rendered as <picture> so the browser picks the right file and size. */
.wahat-specialists .wahat-specialist-hero__bg {
	position: absolute;
	inset: 0;
	z-index: -2;
	margin: 0;
	pointer-events: none;
}

.wahat-specialists .wahat-specialist-hero__bg img {
	display: block;
	width: 100%;
	max-width: none;
	height: 100%;
	margin: 0;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	object-fit: cover;
	object-position: center;
}

/* Readability veil: light on the portrait side, stronger behind the text (right in RTL). */
.wahat-specialists .wahat-specialist-hero--has-bg::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: linear-gradient(to left, rgba(255, 255, 255, 0.88) 0%, rgba(255, 255, 255, 0.72) 45%, rgba(255, 255, 255, 0.25) 100%);
	pointer-events: none;
}

/* Breadcrumb */
.wahat-specialists .wahat-sp-breadcrumb {
	margin-block-end: clamp(20px, 3vw, 36px);
	font-size: 0.875rem;
	line-height: 1.6;
}

.wahat-specialists .wahat-sp-breadcrumb ol {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 4px 8px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.wahat-specialists .wahat-sp-breadcrumb li {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin: 0;
	color: var(--wah-sp-dark);
	font-weight: 600;
}

/* Separator: "‹" points toward the next (left) item in RTL. */
.wahat-specialists .wahat-sp-breadcrumb li + li::before {
	content: "‹";
	color: var(--wah-sp-muted);
	font-weight: 400;
}

.wahat-specialists .wahat-sp-breadcrumb a,
.wahat-specialists .wahat-sp-breadcrumb a:visited {
	color: var(--wah-sp-text);
	font-weight: 400;
	text-decoration: none;
}

.wahat-specialists .wahat-sp-breadcrumb a:hover {
	color: var(--wah-sp-primary);
}

.wahat-specialists .wahat-sp-breadcrumb a:focus-visible {
	outline: 2px solid var(--wah-sp-primary);
	outline-offset: 2px;
}

/* DOM order: content first → right column in RTL, portrait on the left. */
.wahat-specialists .wahat-specialist-hero__inner {
	display: grid;
	grid-template-columns: minmax(0, 58fr) minmax(0, 42fr);
	align-items: center;
	gap: clamp(32px, 5vw, 80px);
}

.wahat-specialists .wahat-specialist-hero__media {
	position: relative;
	justify-self: center;
	width: 100%;
	max-width: 430px;
}

/* Mint backing plate + thin accent ring behind the portrait. */
.wahat-specialists .wahat-specialist-hero__media::before,
.wahat-specialists .wahat-specialist-hero__media::after {
	content: "";
	position: absolute;
	z-index: 0;
	pointer-events: none;
}

.wahat-specialists .wahat-specialist-hero__media::before {
	inset-block: 14% -20px;
	inset-inline: 16% -20px;
	background-color: var(--wah-sp-mint);
	border-radius: 32px;
}

.wahat-specialists .wahat-specialist-hero__media::after {
	inset-block-start: -18px;
	inset-inline-start: -18px;
	width: 96px;
	height: 96px;
	border: 2px solid var(--wah-sp-primary);
	border-radius: 50%;
	opacity: 0.18;
}

.wahat-specialists .wahat-specialist-hero__img {
	display: block;
	position: relative;
	z-index: 1;
	width: 100%;
	max-width: none;
	height: auto;
	aspect-ratio: 4 / 5;
	margin: 0;
	border: 6px solid var(--wah-sp-white);
	border-radius: 24px;
	box-shadow: 0 18px 44px rgba(25, 66, 70, 0.12);
	object-fit: cover;
	object-position: center 20%;
}

.wahat-specialists .wahat-specialist-hero__media .wahat-sp-portrait-placeholder {
	position: relative;
	z-index: 1;
	aspect-ratio: 4 / 5;
	height: auto;
	border: 6px solid var(--wah-sp-white);
	border-radius: 24px;
	font-size: 96px;
}

.wahat-specialists .wahat-specialist-hero__content {
	min-width: 0;
}

.wahat-specialists .wahat-specialist-hero__eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	margin: 0 0 12px;
	color: var(--wah-sp-primary);
	font-size: 0.95rem;
	font-weight: 600;
	line-height: 1.5;
}

.wahat-specialists .wahat-specialist-hero__eyebrow::before,
.wahat-specialists .wahat-specialist-hero__eyebrow::after {
	content: "";
	display: block;
	width: 24px;
	height: 2px;
	background-color: currentColor;
	border-radius: 2px;
}

.wahat-specialists .wahat-specialist-hero__name {
	margin: 0 0 8px;
	padding: 0;
	color: var(--wah-sp-dark);
	font-size: clamp(2rem, 1.35rem + 2.4vw, 3.25rem);
	font-weight: 800;
	line-height: 1.2;
	letter-spacing: 0;
}

.wahat-specialists .wahat-specialist-hero__role {
	margin: 0 0 12px;
	color: var(--wah-sp-primary);
	font-size: clamp(1.2rem, 1.02rem + 0.65vw, 1.6rem);
	font-weight: 700;
	line-height: 1.5;
}

.wahat-specialists .wahat-specialist-hero__line {
	max-width: 48ch;
	margin: 0;
	color: var(--wah-sp-text);
	font-size: clamp(1.02rem, 0.98rem + 0.2vw, 1.15rem);
	font-weight: 500;
	line-height: 1.85;
}

.wahat-specialists .wahat-specialist-hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin-top: 28px;
}

.wahat-specialists .wahat-specialist-hero__actions a.wahat-sp-btn--outline {
	background-color: var(--wah-sp-white);
}

.wahat-specialists .wahat-specialist-hero__actions a.wahat-sp-btn--outline:hover,
.wahat-specialists .wahat-specialist-hero__actions a.wahat-sp-btn--outline:focus-visible {
	background-color: var(--wah-sp-mint);
}

.wahat-specialists a.wahat-sp-btn--block {
	display: flex;
	width: 100%;
}

/* --------------------------------------------------------------------------
   Body: content column + sticky side column
   -------------------------------------------------------------------------- */

.wahat-specialists .wahat-specialist-body {
	padding-block: clamp(40px, 5vw, 72px) clamp(24px, 3vw, 40px);
}

.wahat-specialists .wahat-sp-layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(300px, 360px);
	align-items: start;
	gap: clamp(32px, 4vw, 64px);
}

.wahat-specialists .wahat-sp-layout--single {
	grid-template-columns: minmax(0, 1fr);
	max-width: 960px;
}

.wahat-specialists .wahat-sp-main {
	min-width: 0;
}

/* Sections: rhythm from whitespace + hairline separators, not boxes. */
.wahat-specialists .wahat-sp-section {
	padding-block: 0;
}

.wahat-specialists .wahat-sp-section + .wahat-sp-section {
	margin-top: clamp(32px, 4vw, 44px);
	padding-top: clamp(32px, 4vw, 44px);
	border-top: 1px solid var(--wah-sp-border);
}

.wahat-specialists .wahat-sp-section__title,
.wahat-specialists .wahat-sp-panel__title {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 0 0 20px;
	padding: 0;
	color: var(--wah-sp-dark);
	font-size: clamp(1.3rem, 1.12rem + 0.7vw, 1.75rem);
	font-weight: 700;
	line-height: 1.4;
}

.wahat-specialists .wahat-sp-section__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 42px;
	height: 42px;
	background-color: var(--wah-sp-mint);
	border-radius: 12px;
	color: var(--wah-sp-primary);
	font-size: 21px;
}

/* Biography */
.wahat-specialists .wahat-sp-prose {
	max-width: 72ch;
	color: var(--wah-sp-text);
	font-size: clamp(1rem, 0.96rem + 0.2vw, 1.08rem);
	line-height: 2;
}

.wahat-specialists .wahat-sp-prose > :first-child {
	margin-top: 0;
}

.wahat-specialists .wahat-sp-prose > :last-child {
	margin-bottom: 0;
}

.wahat-specialists .wahat-sp-prose p {
	margin: 0 0 1em;
}

/* Lead paragraph reads as an introduction. */
.wahat-specialists .wahat-sp-prose > p:first-child {
	color: var(--wah-sp-dark);
	font-size: 1.08em;
	font-weight: 500;
}

.wahat-specialists .wahat-sp-prose a {
	color: var(--wah-sp-primary);
	text-underline-offset: 3px;
}

/* Qualifications / Experience: one shared list style. */
.wahat-specialists .wahat-sp-list {
	display: grid;
	gap: 14px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.wahat-specialists .wahat-sp-list > li {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	margin: 0;
	color: var(--wah-sp-text);
	font-size: clamp(1rem, 0.96rem + 0.2vw, 1.08rem);
	line-height: 1.8;
}

.wahat-specialists .wahat-sp-list__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 24px;
	height: 24px;
	margin-top: 0.3em;
	background-color: var(--wah-sp-mint);
	border-radius: 50%;
	color: var(--wah-sp-primary);
	font-size: 15px;
}

.wahat-specialists .wahat-sp-list__text {
	min-width: 0;
}

/* Specialties chips */
.wahat-specialists .wahat-sp-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.wahat-specialists .wahat-sp-chip {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin: 0;
	padding: 8px 18px;
	background-color: var(--wah-sp-mint);
	border: 1px solid transparent;
	border-radius: var(--wah-sp-radius-btn);
	color: var(--wah-sp-dark);
	font-size: 0.95rem;
	font-weight: 600;
	line-height: 1.5;
}

.wahat-specialists .wahat-sp-chip::before {
	content: "";
	width: 6px;
	height: 6px;
	background-color: var(--wah-sp-primary);
	border-radius: 50%;
}

/* --------------------------------------------------------------------------
   Side column panels
   -------------------------------------------------------------------------- */

.wahat-specialists .wahat-sp-aside {
	min-width: 0;
	align-self: stretch; /* full row height so the inner panel can stick */
}

.wahat-specialists .wahat-sp-aside__inner {
	position: sticky;
	top: var(--wah-sp-sticky-top, 32px);
	display: grid;
	gap: 20px;
}

.admin-bar .wahat-specialists .wahat-sp-aside__inner {
	top: calc(var(--wah-sp-sticky-top, 32px) + 32px);
}

.wahat-specialists .wahat-sp-panel {
	padding: 24px;
	background-color: var(--wah-sp-white);
	border: 1px solid var(--wah-sp-border);
	border-radius: 16px;
	box-shadow: var(--wah-sp-shadow);
}

.wahat-specialists .wahat-sp-panel__title {
	margin-bottom: 16px;
	font-size: 1.2rem;
}

.wahat-specialists .wahat-sp-panel__title:focus {
	outline: none;
}

.wahat-specialists .wahat-sp-panel__title .wahat-sp-section__icon {
	width: 38px;
	height: 38px;
	font-size: 19px;
}

.wahat-specialists #wahat-sp-hours {
	scroll-margin-top: 96px;
}

/* Working hours: simple rows, hairline separators, no table borders. */
.wahat-specialists .wahat-sp-hours {
	margin: 0;
	padding: 0;
	list-style: none;
}

.wahat-specialists .wahat-sp-hours__row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 4px 12px;
	margin: 0;
	padding: 12px 0;
	border-bottom: 1px dashed var(--wah-sp-border);
}

.wahat-specialists .wahat-sp-hours__row:last-child {
	border-bottom: 0;
}

.wahat-specialists .wahat-sp-hours__day {
	color: var(--wah-sp-dark);
	font-weight: 700;
}

.wahat-specialists .wahat-sp-hours__time {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	color: var(--wah-sp-text);
	font-weight: 500;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

.wahat-specialists .wahat-sp-panel__note {
	margin: 14px 0 0;
	padding: 10px 12px;
	background-color: var(--wah-sp-soft-bg);
	border-radius: 10px;
	color: var(--wah-sp-text);
	font-size: 0.85rem;
	line-height: 1.7;
}

.wahat-specialists .wahat-sp-panel--book {
	background-color: var(--wah-sp-dark);
	border-color: var(--wah-sp-dark);
	color: var(--wah-sp-white);
}

.wahat-specialists .wahat-sp-panel__book-title {
	margin: 0 0 6px;
	color: var(--wah-sp-white);
	font-size: 1.2rem;
	font-weight: 700;
	line-height: 1.5;
}

.wahat-specialists .wahat-sp-panel__book-text {
	margin: 0 0 18px;
	color: rgba(255, 255, 255, 0.85);
	font-size: 0.95rem;
	line-height: 1.8;
}

/* --------------------------------------------------------------------------
   Mobile sticky booking bar (hidden on larger screens)
   -------------------------------------------------------------------------- */

.wahat-specialists .wahat-sp-mobile-bar {
	display: none;
}

/* --------------------------------------------------------------------------
   Final CTA — light mint band
   -------------------------------------------------------------------------- */

.wahat-specialists .wahat-sp-cta {
	padding-block: clamp(16px, 3vw, 24px) clamp(48px, 7vw, 88px);
}

.wahat-specialists .wahat-sp-cta__inner {
	position: relative;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 24px 40px;
	padding: clamp(28px, 4vw, 48px) clamp(24px, 4vw, 56px);
	overflow: hidden;
	background-color: var(--wah-sp-mint);
	border-radius: 20px;
	isolation: isolate;
}

.wahat-specialists .wahat-sp-cta__inner::after {
	content: "";
	position: absolute;
	z-index: -1;
	inset-block-end: -60px;
	inset-inline-end: -40px;
	width: 220px;
	height: 220px;
	background-color: rgba(16, 144, 112, 0.08);
	border-radius: 50%;
	pointer-events: none;
}

.wahat-specialists .wahat-sp-cta__content {
	flex: 1 1 360px;
	min-width: 0;
}

.wahat-specialists .wahat-sp-cta__title {
	margin: 0 0 8px;
	padding: 0;
	color: var(--wah-sp-dark);
	font-size: clamp(1.4rem, 1.2rem + 0.9vw, 2rem);
	font-weight: 700;
	line-height: 1.4;
}

.wahat-specialists .wahat-sp-cta__text {
	max-width: 56ch;
	margin: 0;
	color: var(--wah-sp-text);
	font-size: clamp(1rem, 0.96rem + 0.2vw, 1.1rem);
	line-height: 1.8;
}

.wahat-specialists .wahat-sp-password {
	padding-block: 48px;
}

/* --------------------------------------------------------------------------
   Tablet (≤ 1024px)
   -------------------------------------------------------------------------- */

@media (max-width: 1024px) {
	.wahat-specialists .wahat-specialists-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 28px 24px;
	}

	.wahat-specialists .wahat-specialist-hero__inner {
		grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
	}

	/* Side column drops below the content; panels sit side by side. */
	.wahat-specialists .wahat-sp-layout {
		grid-template-columns: minmax(0, 1fr);
	}

	.wahat-specialists .wahat-sp-aside__inner {
		position: static;
		grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
		align-items: start;
	}
}

/* --------------------------------------------------------------------------
   Mobile (≤ 767px)
   -------------------------------------------------------------------------- */

@media (max-width: 767px) {
	.wahat-specialists .wahat-specialists-grid {
		grid-template-columns: minmax(0, 1fr);
		gap: 24px;
	}

	/* Card buttons stacked, 100% width: profile first, WhatsApp below. */
	.wahat-specialists .wahat-specialist-card__actions {
		grid-template-columns: minmax(0, 1fr);
		gap: 8px;
	}

	/* Toolbar: search on top (full width). Filters never hidden:
	   few categories → two-column grid; many → one-line dropdown. */
	.wahat-specialists .wahat-sp-toolbar {
		flex-direction: column;
		align-items: stretch;
		gap: 12px;
	}

	.wahat-specialists .wahat-sp-search {
		order: -1;
		flex-basis: auto;
	}

	.wahat-specialists .wahat-sp-filters--few {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 8px;
	}

	.wahat-specialists .wahat-sp-filters--few button.wahat-sp-filter {
		justify-content: center;
		width: 100%;
		min-width: 0;
		padding-inline: 10px;
		white-space: normal;
		text-align: center;
	}

	.wahat-specialists .wahat-sp-filters--many {
		display: block;
	}

	.wahat-specialists .wahat-sp-filters--many button.wahat-sp-filter {
		display: none;
	}

	.wahat-specialists .wahat-sp-filters--many .wahat-sp-filter-select {
		display: block;
	}

	/* Hero: portrait → name → specialty → line → CTA. */
	.wahat-specialists .wahat-specialist-hero {
		padding-block-end: 40px;
	}

	/* Text sits below the portrait on phones: even veil top to bottom. */
	.wahat-specialists .wahat-specialist-hero--has-bg::before {
		background: linear-gradient(to bottom, rgba(255, 255, 255, 0.35) 0%, rgba(255, 255, 255, 0.85) 45%, rgba(255, 255, 255, 0.9) 100%);
	}

	.wahat-specialists .wahat-sp-breadcrumb {
		margin-block-end: 20px;
		font-size: 0.8rem;
	}

	.wahat-specialists .wahat-specialist-hero__inner {
		grid-template-columns: minmax(0, 1fr);
		gap: 36px;
	}

	/* Portrait first on phones. */
	.wahat-specialists .wahat-specialist-hero__media {
		order: -1;
		max-width: 300px;
	}

	.wahat-specialists .wahat-specialist-hero__media::before {
		inset-block: 12% -12px;
		inset-inline: 12% -12px;
	}

	.wahat-specialists .wahat-specialist-hero__media::after {
		width: 72px;
		height: 72px;
		inset-block-start: -12px;
		inset-inline-start: -12px;
	}

	.wahat-specialists .wahat-specialist-hero__content {
		text-align: center;
	}

	.wahat-specialists .wahat-specialist-hero__line {
		margin-inline: auto;
	}

	.wahat-specialists .wahat-specialist-hero__actions {
		flex-direction: column;
	}

	.wahat-specialists .wahat-specialist-hero__actions a.wahat-sp-btn,
	.wahat-specialists .wahat-sp-cta a.wahat-sp-btn {
		display: flex;
		width: 100%;
		padding-inline: 20px;
	}

	.wahat-specialists .wahat-sp-section__icon {
		width: 38px;
		height: 38px;
		font-size: 19px;
	}

	.wahat-specialists .wahat-sp-panel {
		padding: 20px;
	}

	/* The bar replaces the side booking card on phones. */
	.wahat-specialists .wahat-sp-panel--book {
		display: none;
	}

	/* Fixed (not sticky): stays on screen for the whole page and is immune to
	   ancestor overflow settings. Body padding below keeps the footer visible. */
	.wahat-specialists .wahat-sp-mobile-bar {
		display: flex;
		position: fixed;
		inset-inline: 0;
		bottom: 0;
		z-index: 9990;
		justify-content: center;
		padding: 0 0 calc(12px + env(safe-area-inset-bottom, 0px));
		background: transparent;
		/* Transparent strip must not block taps on the page behind it. */
		pointer-events: none;
	}

	/* Floating button: 80% width, centered, own shadow instead of a white bar. */
	.wahat-specialists .wahat-sp-mobile-bar a.wahat-sp-btn {
		width: 80%;
		pointer-events: auto;
		box-shadow: 0 8px 22px rgba(25, 66, 70, 0.22);
	}

	/* Reserve space for the fixed bar (class added only on specialist pages with a WhatsApp number). */
	body.wahat-sp-has-mobile-bar {
		padding-bottom: calc(76px + env(safe-area-inset-bottom, 0px));
	}

	.wahat-specialists .wahat-sp-cta__inner {
		flex-direction: column;
		align-items: stretch;
		text-align: center;
	}

	.wahat-specialists .wahat-sp-cta__content {
		flex-basis: auto;
	}

	.wahat-specialists .wahat-sp-cta__text {
		margin-inline: auto;
	}
}

/* --------------------------------------------------------------------------
   Reduced motion
   -------------------------------------------------------------------------- */

/* JS-controlled visibility (filters / pagination). Doubled attribute beats display rules above. */
.wahat-specialists [hidden][hidden] {
	display: none;
}

@media (prefers-reduced-motion: reduce) {
	.wahat-specialists a.wahat-sp-btn,
	.wahat-specialists .wahat-specialist-card__name a {
		transition: none;
	}
}

@media (prefers-reduced-motion: no-preference) {
	html:has(.wahat-specialist-single) {
		scroll-behavior: smooth;
	}
}