/**
 * Widget Service — Frontend styles.
 * All styles are scoped to .ws- prefixed wrapper classes.
 * RTL-first (Arabic).
 *
 * Animation policy: one-shot entrance fades only, plus short hover
 * transitions. No infinite/looping animations (see the reduced-motion
 * rule at the end).
 */

/* ==========================================================================
   Design tokens (CSS variables, overridable per-widget from Elementor)
   ========================================================================== */
.ws-header,
.ws-hero,
.ws-teacher-tabs,
.ws-teachers-section,
.ws-reviews,
.ws-posts,
.ws-services,
.ws-service-hero,
.ws-service-features,
.ws-service-audience,
.ws-service-steps,
.ws-service-related,
.ws-service-cta,
.ws-cta,
.ws-resources {
	--ws-primary: var(--e-global-color-primary,#2563eb);
	--ws-dark: var(--e-global-color-secondary,#111827);
	--ws-soft-green: color-mix(in srgb,var(--ws-primary) 9%,#fff);
	--ws-mint: color-mix(in srgb,var(--ws-primary) 5%,#fff);
	--ws-gold: var(--e-global-color-accent,#f59e0b);
	--ws-soft-gold: color-mix(in srgb,var(--ws-gold) 24%,#fff);
	--ws-text: var(--e-global-color-text,#1f2937);
	--ws-muted: color-mix(in srgb,var(--ws-text) 68%,transparent);
	--ws-border: color-mix(in srgb,var(--ws-primary) 18%,transparent);
	--ws-white: #FFFFFF;

	font-family: "Tajawal", "Cairo", "Tahoma", Arial, sans-serif;
	box-sizing: border-box;
	direction: rtl;
}

.ws-header[dir="ltr"],
.ws-hero[dir="ltr"],
.ws-teacher-tabs[dir="ltr"],
.ws-teachers-section[dir="ltr"],
.ws-reviews[dir="ltr"],
.ws-posts[dir="ltr"],
.ws-services[dir="ltr"],
.ws-service-hero[dir="ltr"],
.ws-service-features[dir="ltr"],
.ws-service-audience[dir="ltr"],
.ws-service-steps[dir="ltr"],
.ws-service-related[dir="ltr"],
.ws-service-cta[dir="ltr"],
.ws-cta[dir="ltr"],
.ws-resources[dir="ltr"] {
	direction: ltr;
}

.ws-header *,
.ws-hero *,
.ws-teacher-tabs *,
.ws-teachers-section *,
.ws-reviews *,
.ws-posts *,
.ws-services *,
.ws-service-hero *,
.ws-service-features *,
.ws-service-audience *,
.ws-service-steps *,
.ws-service-related *,
.ws-service-cta *,
.ws-cta *,
.ws-resources * {
	box-sizing: border-box;
}

@keyframes wsFadeUp {
	from { opacity: 0; transform: translateY(18px); }
	to   { opacity: 1; transform: translateY(0); }
}

/* ==========================================================================
   Shared: buttons, titles, stars, placeholders, page sections
   ========================================================================== */
.ws-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 10px 26px;
	border-radius: 12px;
	font-family: inherit;
	font-size: 15px;
	font-weight: 700;
	line-height: 1.4;
	text-decoration: none;
	cursor: pointer;
	transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease, color 0.2s ease;
}

.ws-btn-solid {
	background: var(--ws-primary);
	color: var(--ws-white);
	border: 2px solid var(--ws-primary);
}
.ws-btn-solid:hover {
	background: var(--ws-dark);
	border-color: var(--ws-dark);
	color: var(--ws-white);
	transform: translateY(-2px);
}

.ws-btn-outline {
	background: var(--ws-white);
	color: var(--ws-text);
	border: 2px solid var(--ws-border);
}
.ws-btn-outline:hover {
	border-color: var(--ws-primary);
	color: var(--ws-primary);
	transform: translateY(-2px);
}

.ws-btn-ghost {
	background: var(--ws-white);
	color: var(--ws-text);
	border: 1.5px solid var(--ws-border);
	border-radius: 14px;
	padding: 12px 34px;
	box-shadow: 0 2px 10px rgba(38, 50, 56, 0.06);
}
.ws-btn-ghost:hover {
	border-color: var(--ws-section-accent, var(--ws-primary));
	color: var(--ws-section-accent, var(--ws-primary));
	transform: translateY(-2px);
	box-shadow: 0 8px 20px rgba(38, 50, 56, 0.1);
}

/* Section title + subtitle (shared by most section widgets) */
.ws-section-title {
	margin: 0 0 10px;
	text-align: center;
	color: var(--ws-primary);
	font-size: 34px;
	font-weight: 800;
	line-height: 1.3;
}
.ws-title-orn {
	color: var(--ws-gold);
	font-size: 0.55em;
	vertical-align: middle;
	margin: 0 12px;
}
.ws-section-subtitle {
	margin: 0 auto 28px;
	max-width: 620px;
	text-align: center;
	color: var(--ws-muted);
	font-size: 16px;
	line-height: 1.8;
}

/* Long-text clamping shared across cards */
.ws-teacher-name,
.ws-teacher-specialty,
.ws-review-text,
.ws-review-name,
.ws-post-title,
.ws-post-excerpt,
.ws-service-title,
.ws-service-desc,
.ws-resource-title,
.ws-resource-desc {
	overflow: hidden;
	text-overflow: ellipsis;
	overflow-wrap: break-word;
	word-break: break-word;
}

/* Stars */
.ws-stars { display: inline-flex; gap: 2px; }
.ws-star { color: #E3E8E6; font-size: 15px; line-height: 1; }
.ws-star.is-on { color: var(--ws-gold, #D99A21); }

/* Image placeholder (missing images) */
.ws-img-placeholder {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	min-height: 120px;
	background: repeating-linear-gradient(
		45deg,
		color-mix(in srgb,var(--ws-primary) 9%,#fff),
		color-mix(in srgb,var(--ws-primary) 9%,#fff) 12px,
		color-mix(in srgb,var(--ws-primary) 5%,#fff) 12px,
		color-mix(in srgb,var(--ws-primary) 5%,#fff) 24px
	);
	border: 1.5px dashed color-mix(in srgb,var(--ws-primary) 35%,transparent);
	border-radius: 12px;
	color: var(--ws-primary);
}
.ws-img-placeholder-label {
	font-family: "Tajawal", "Cairo", "Tahoma", Arial, sans-serif;
	font-size: 14px;
	font-weight: 700;
	opacity: 0.75;
}

/* Full-width page sections */
.ws-reviews,
.ws-posts,
.ws-services,
.ws-resources,
.ws-service-features,
.ws-service-audience,
.ws-service-steps,
.ws-service-related {
	max-width: 1200px;
	margin: 48px auto;
	padding: 0 20px;
}
.ws-reviews { margin-top: 50px; margin-bottom: 50px; }
.ws-posts { margin-top: 56px; margin-bottom: 56px; }

/* ==========================================================================
   1. Header
   ========================================================================== */
.ws-header {
	background: var(--ws-white);
	border-bottom: 1px solid var(--ws-border);
	position: relative;
	z-index: 50;
}

.ws-header-inner {
	max-width: 1280px;
	margin: 0 auto;
	min-height: 88px;
	padding: 12px 28px;
	display: flex;
	align-items: center;
	gap: 28px;
}

.ws-header-logo {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 64px;
	height: 64px;
	flex: 0 0 auto;
	border-radius: 50%;
	overflow: hidden;
	background: var(--ws-mint);
	border: 2px solid var(--ws-border);
	text-decoration: none;
}
.ws-header-logo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.ws-header-logo-fallback {
	color: var(--ws-primary);
	font-weight: 800;
	font-size: 14px;
}

.ws-header-nav {
	flex: 1 1 auto;
	display: flex;
	justify-content: center;
}
.ws-header-nav ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	align-items: center;
	gap: 6px;
	flex-wrap: wrap;
}
.ws-header-nav-link {
	display: inline-block;
	padding: 9px 18px;
	border-radius: 999px;
	color: var(--ws-text);
	font-size: 15px;
	font-weight: 700;
	text-decoration: none;
	transition: color 0.2s ease, background-color 0.2s ease;
}
.ws-header-nav-link:hover {
	color: var(--ws-primary);
	background: var(--ws-soft-green);
}
.ws-header-nav-link.is-active {
	background: var(--ws-primary);
	color: var(--ws-white);
}

.ws-header-actions {
	display: flex;
	align-items: center;
	gap: 10px;
	flex: 0 0 auto;
}

/* Burger (hidden on desktop) */
.ws-header-burger {
	display: none;
	flex-direction: column;
	justify-content: center;
	gap: 5px;
	width: 44px;
	height: 44px;
	padding: 10px;
	margin-inline-start: auto;
	background: transparent;
	border: 1.5px solid var(--ws-border);
	border-radius: 10px;
	cursor: pointer;
}
.ws-header-burger span {
	display: block;
	height: 2px;
	width: 100%;
	background: var(--ws-primary);
	border-radius: 2px;
}

/* ==========================================================================
   2. Hero
   ========================================================================== */
.ws-hero {
	position: relative;
	max-width: 1200px;
	margin: 24px auto;
	padding: 56px 60px;
	border-radius: 32px;
	background: linear-gradient(135deg, var(--ws-hero-bg1,var(--ws-primary)) 0%, var(--ws-hero-bg2,var(--ws-dark)) 100%);
	color: var(--ws-hero-text, #FFFFFF);
	overflow: hidden;
}

.ws-hero-grid {
	position: relative;
	display: grid;
	grid-template-columns: 1.15fr 0.85fr;
	gap: 48px;
	align-items: center;
}

.ws-hero-content { animation: wsFadeUp 0.7s ease both; }

.ws-hero-heading {
	margin: 0 0 16px;
	font-size: 52px;
	font-weight: 800;
	line-height: 1.2;
	color: inherit;
}
.ws-hero-orn {
	color: var(--ws-accent, #D99A21);
	font-size: 0.4em;
	vertical-align: middle;
	margin: 0 14px;
}

.ws-hero-subtitle {
	margin: 0 0 8px;
	font-size: 20px;
	font-weight: 700;
	line-height: 1.7;
	opacity: 0.95;
}
.ws-hero-desc {
	margin: 0 0 34px;
	font-size: 16px;
	line-height: 1.8;
	opacity: 0.85;
}

.ws-hero-features {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 22px;
}
.ws-hero-feature {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: 6px;
}
.ws-hero-feature-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 52px;
	height: 52px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.12);
	border: 1.5px solid rgba(255, 255, 255, 0.35);
	font-size: 20px;
	margin-bottom: 4px;
}
.ws-hero-feature-title {
	font-size: 16px;
	font-weight: 800;
}
.ws-hero-feature-desc {
	font-size: 13px;
	opacity: 0.8;
}

.ws-hero-media {
	position: relative;
	display: flex;
	justify-content: center;
}
.ws-hero-media-float {
	width: 100%;
	max-width: 380px;
}
.ws-hero-img,
.ws-hero-media .ws-img-placeholder {
	width: 100%;
	height: 280px;
	object-fit: contain;
	display: block;
	border-radius: 18px;
}
.ws-hero-decor-img {
	position: absolute;
	inset-inline-start: -10px;
	top: -10px;
	width: 90px;
	opacity: 0.7;
	pointer-events: none;
}

/* Static decorative dots + leaves */
.ws-hero-dot {
	position: absolute;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(246, 227, 177, 0.9), rgba(246, 227, 177, 0));
	pointer-events: none;
}
.ws-hero-dot-1 { width: 60px; height: 60px; top: 12%; inset-inline-start: 8%; }
.ws-hero-dot-2 { width: 34px; height: 34px; bottom: 16%; inset-inline-start: 30%; }

.ws-hero-leaf {
	position: absolute;
	width: 26px;
	height: 26px;
	background: rgba(234, 247, 243, 0.35);
	border-radius: 0 60% 0 60%;
	transform: rotate(35deg);
	pointer-events: none;
}
.ws-hero-leaf-1 { top: 18%; inset-inline-end: 6%; }
.ws-hero-leaf-2 { bottom: 12%; inset-inline-end: 18%; }

/* ==========================================================================
   3. Teacher tabs
   ========================================================================== */
.ws-teacher-tabs {
	max-width: 1200px;
	margin: 44px auto 26px;
	padding: 0 20px;
}

.ws-teacher-tabs-row {
	display: flex;
	justify-content: center;
	gap: 12px;
	flex-wrap: wrap;
}

.ws-tab {
	font-family: inherit;
	font-size: 15px;
	font-weight: 700;
	color: var(--ws-text);
	background: var(--ws-tab-inactive, #FFFFFF);
	border: 1.5px solid var(--ws-border);
	border-radius: 12px;
	padding: 12px 30px;
	cursor: pointer;
	transition: all 0.2s ease;
}
.ws-tab:hover {
	border-color: var(--ws-tab-active,var(--ws-primary));
	color: var(--ws-tab-active,var(--ws-primary));
}
.ws-tab.is-active {
	background: var(--ws-tab-active,var(--ws-primary));
	border-color: var(--ws-tab-active,var(--ws-primary));
	color: #FFFFFF;
	box-shadow: 0 6px 16px color-mix(in srgb,var(--ws-tab-active,var(--ws-primary)) 25%,transparent);
}

/* ==========================================================================
   4 + 5. Teachers sections (male & female)
   ========================================================================== */
.ws-teachers-section {
	max-width: 1200px;
	margin: 26px auto;
	padding: 45px 40px;
	background: var(--ws-white);
	border: 1.5px solid var(--ws-section-border, var(--ws-border));
	border-radius: 28px;
	box-shadow: 0 6px 28px rgba(38, 50, 56, 0.05);
}

.ws-teachers-section.ws-is-hidden { display: none; }

.ws-teachers-title {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0 0 30px;
	color: var(--ws-section-accent, var(--ws-primary));
	font-size: 26px;
	font-weight: 800;
}
.ws-teachers-title-icon {
	font-size: 22px;
	color: var(--ws-section-accent, var(--ws-primary));
}

.ws-teachers-grid {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: 18px;
}

/* ---- Carousels (Swiper): shell shared by teachers + reviews ---- */
.ws-teachers-carousel,
.ws-reviews-carousel {
	display: flex;
	flex-direction: column;
}

.ws-teachers-stage,
.ws-reviews-stage {
	position: relative;
}

.ws-teachers-viewport,
.ws-reviews-viewport {
	padding: 8px 4px 16px;
}

/* Progressive carousel fallback. Elementor can paint the widget before
   Swiper is ready; keep the selected card count visible instead of showing
   one full-width slide. Swiper replaces this grid as soon as it initializes. */
.ws-teachers-viewport:not(.swiper-initialized),
.ws-reviews-viewport:not(.swiper-initialized) {
	overflow: hidden;
}
.ws-teachers-viewport:not(.swiper-initialized) .swiper-wrapper,
.ws-reviews-viewport:not(.swiper-initialized) .swiper-wrapper {
	display: grid;
	gap: var(--ws-carousel-gap, 18px);
	width: 100%;
	transform: none !important;
}
.ws-teachers-viewport:not(.swiper-initialized) .swiper-slide,
.ws-reviews-viewport:not(.swiper-initialized) .swiper-slide {
	width: auto !important;
	margin: 0 !important;
}
.ws-teachers-viewport .swiper-wrapper,
.ws-reviews-viewport .swiper-wrapper {
	align-items: stretch;
}
.ws-teachers-viewport .swiper-slide,
.ws-reviews-viewport .swiper-slide {
	height: auto;
}

.ws-teachers-arrow,
.ws-reviews-arrow {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 44px;
	height: 44px;
	padding: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	border: 1.5px solid var(--ws-section-border, var(--ws-border));
	background: var(--ws-white);
	color: var(--ws-rev-accent, var(--ws-section-accent, var(--ws-primary)));
	font-size: 22px;
	line-height: 1;
	cursor: pointer;
	box-shadow: 0 4px 14px rgba(38, 50, 56, 0.1);
	transition: background-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
	z-index: 2;
}
.ws-teachers-arrow:hover:not(.swiper-button-disabled),
.ws-reviews-arrow:hover:not(.swiper-button-disabled) {
	background: var(--ws-rev-accent, var(--ws-section-accent, var(--ws-primary)));
	color: var(--ws-white);
	box-shadow: 0 8px 20px color-mix(in srgb,var(--ws-rev-accent,var(--ws-primary)) 22%,transparent);
}
.ws-teachers-arrow.swiper-button-disabled,
.ws-reviews-arrow.swiper-button-disabled {
	opacity: 0.35;
	cursor: default;
	box-shadow: none;
}
.ws-teachers-prev,
.ws-reviews-prev { inset-inline-start: -14px; }
.ws-teachers-next,
.ws-reviews-next { inset-inline-end: -14px; }

.ws-teachers-dots,
.ws-reviews-dots {
	display: flex;
	justify-content: center;
	gap: 8px;
	margin-top: 20px;
}
.ws-reviews-dots { margin-top: 28px; }

.ws-dot {
	width: 9px;
	height: 9px;
	padding: 0;
	border: none;
	border-radius: 50%;
	background: var(--ws-border);
	cursor: pointer;
	transition: background-color 0.2s ease, width 0.2s ease;
}
.ws-dot:hover { background: var(--ws-rev-accent, var(--ws-section-accent, var(--ws-primary))); }
.ws-dot:focus-visible {
	outline: 2px solid var(--ws-rev-accent, var(--ws-section-accent, var(--ws-primary)));
	outline-offset: 3px;
}
.ws-dot.is-active {
	background: var(--ws-rev-accent, var(--ws-section-accent, var(--ws-primary)));
	width: 22px;
	border-radius: 999px;
}

/* ---- Teacher card ---- */
.ws-teacher-card {
	display: flex;
	flex-direction: column;
	background: var(--ws-white);
	border: 1px solid var(--ws-border);
	border-radius: 16px;
	overflow: hidden;
	box-shadow: 0 4px 14px rgba(38, 50, 56, 0.07);
	transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.ws-teacher-card:hover {
	transform: translateY(-6px);
	box-shadow: 0 14px 30px rgba(38, 50, 56, 0.13);
}

.ws-teacher-media {
	position: relative;
	height: 220px;
	max-height: 220px;
	overflow: hidden;
	background: var(--ws-mint);
	flex-shrink: 0;
}
.ws-teacher-img,
.ws-teacher-media .ws-img-placeholder {
	width: 100%;
	height: 100%;
	max-height: 220px;
	object-fit: cover;
	display: block;
	border-radius: 0;
	border-width: 0 0 1.5px 0;
}

.ws-teacher-play {
	position: absolute;
	bottom: 12px;
	inset-inline-start: 12px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	border-radius: 50%;
	background: var(--ws-primary);
	color: #FFFFFF;
	box-shadow: 0 4px 12px color-mix(in srgb,var(--ws-primary) 40%,transparent);
	transition: transform 0.2s ease, background-color 0.2s ease;
	cursor: pointer;
	text-decoration: none;
}
.ws-teacher-card:hover .ws-teacher-play {
	transform: scale(1.12);
	background: var(--ws-dark);
}

.ws-teacher-body {
	padding: 16px 14px 18px;
	text-align: center;
}
.ws-teacher-name {
	margin: 0 0 6px;
	font-size: 16px;
	font-weight: 800;
	color: var(--ws-primary);
}
.ws-teacher-name-link {
	color: inherit;
	text-decoration: none;
}
.ws-teacher-name-link:hover { color: var(--ws-dark); }

/* Primary info: name + what they teach, shown first and most prominent */
.ws-teacher-primary { margin: 0 0 12px; }
.ws-teacher-specialty {
	margin: 0;
	font-size: 13.5px;
	font-weight: 700;
	color: var(--ws-section-accent, var(--ws-primary));
}

/* Secondary info: Country / Languages / Experience, grouped in a
   clearly separated labeled block */
.ws-teacher-info {
	margin: 0 0 12px;
	padding: 10px 12px;
	background: var(--ws-mint);
	border: 1px solid var(--ws-border);
	border-radius: 12px;
	text-align: start;
}
.ws-teacher-info-row {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 10px;
}
.ws-teacher-info-row + .ws-teacher-info-row {
	margin-top: 5px;
	padding-top: 5px;
	border-top: 1px dashed var(--ws-border);
}
.ws-teacher-info-label {
	margin: 0;
	font-size: 11.5px;
	font-weight: 700;
	color: var(--ws-muted);
	white-space: nowrap;
}
.ws-teacher-info-value {
	margin: 0;
	font-size: 12.5px;
	font-weight: 700;
	color: var(--ws-text);
	text-align: end;
}

.ws-teacher-rating {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding-top: 10px;
	padding-bottom: 10px;
	border-top: 1px dashed var(--ws-border);
}
.ws-teacher-rating-num {
	font-size: 13px;
	font-weight: 800;
	color: var(--ws-text);
}

.ws-teacher-book-btn {
	width: 100%;
	padding: 9px 12px;
	font-size: 13px;
	gap: 6px;
	background: var(--ws-section-accent,var(--ws-primary));
	border-color: var(--ws-section-accent,var(--ws-primary));
}
.ws-teacher-book-btn:hover {
	background: var(--ws-dark);
	border-color: var(--ws-dark);
	color: #FFFFFF;
}
.ws-teacher-book-icon { flex-shrink: 0; }

.ws-teachers-footer {
	margin-top: 30px;
	text-align: center;
}

/* Female accent variant */
.ws-female-teachers {
	--ws-section-border: #F6E3B1;
	--ws-section-accent: #D99A21;
}
.ws-female-teachers .ws-teacher-name { color: var(--ws-primary); }
.ws-female-teachers .ws-img-placeholder {
	background: repeating-linear-gradient(
		45deg,
		#FDF6E5,
		#FDF6E5 12px,
		#FFFBF0 12px,
		#FFFBF0 24px
	);
	border-color: #E5C77E;
	color: #B07B12;
}

/* ==========================================================================
   6. Reviews
   ========================================================================== */
.ws-review-card {
	position: relative;
	height: auto;
	background: var(--ws-white);
	border: 1px solid var(--ws-border);
	border-radius: 22px;
	padding: 46px 26px 26px;
	text-align: center;
	box-shadow: 0 6px 24px rgba(38, 50, 56, 0.06);
	transition: transform 0.25s ease, box-shadow 0.25s ease;
	overflow: hidden;
}
.ws-review-card:hover {
	transform: translateY(-5px);
	box-shadow: 0 14px 32px rgba(38, 50, 56, 0.1);
}
.ws-review-avatar {
	display: block;
	width: 72px;
	height: 72px;
	margin: 0 auto 16px;
	object-fit: cover;
	border-radius: 50%;
}

.ws-review-quote {
	position: absolute;
	top: 6px;
	inset-inline-start: 50%;
	transform: translateX(50%);
	font-size: 64px;
	line-height: 1;
	font-family: Georgia, serif;
	color: var(--ws-rev-accent, var(--ws-primary));
	opacity: 0.9;
}

.ws-review-text {
	margin: 0 0 16px;
	font-size: 15px;
	line-height: 1.9;
	color: var(--ws-text);
}
.ws-review-rating { margin-bottom: 12px; }
.ws-review-name {
	margin: 0 0 4px;
	font-size: 17px;
	font-weight: 800;
	color: var(--ws-rev-accent, var(--ws-primary));
}
.ws-review-country {
	margin: 0;
	font-size: 13.5px;
	color: var(--ws-muted);
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
}
.ws-review-flag { font-size: 16px; }

/* ==========================================================================
   7. Posts (blog grid)
   ========================================================================== */
.ws-posts-head {
	display: flex;
	align-items: flex-end;
	justify-content: center;
	margin-bottom: 28px;
	text-align: center;
}

.ws-posts-head-text {
	max-width: 720px;
}

.ws-posts .ws-section-subtitle {
	margin-bottom: 0;
}

.ws-posts-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
	align-items: stretch;
}

.ws-post-card {
	position: relative;
	display: flex;
	flex-direction: column;
	background: var(--ws-white);
	border: 1px solid var(--ws-border);
	border-radius: 8px;
	overflow: hidden;
	box-shadow: 0 10px 28px rgba(38, 50, 56, 0.08);
	min-height: 100%;
	transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}
.ws-post-card:hover {
	border-color: color-mix(in srgb,var(--ws-posts-accent,var(--ws-primary)) 28%,transparent);
	transform: translateY(-5px);
	box-shadow: 0 18px 42px rgba(38, 50, 56, 0.14);
}

.ws-post-media {
	position: relative;
	display: block;
	height: 210px;
	aspect-ratio: 16 / 10;
	background: linear-gradient(135deg, var(--ws-mint), var(--ws-soft-green));
	text-decoration: none;
	overflow: hidden;
}
.ws-post-img,
.ws-post-media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 0.4s ease;
}
.ws-post-card:hover .ws-post-media img {
	transform: scale(1.05);
}
.ws-post-img-placeholder {
	height: 100%;
	border-radius: 0;
	border-width: 0 0 1.5px 0;
}

.ws-post-media-shade {
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, transparent 42%, color-mix(in srgb,var(--ws-dark) 34%,transparent) 100%);
	pointer-events: none;
}

.ws-post-cat {
	position: absolute;
	top: 14px;
	inset-inline-start: 14px;
	max-width: calc(100% - 28px);
	padding: 6px 13px;
	border-radius: 999px;
	background: var(--ws-posts-accent, var(--ws-primary));
	color: #FFFFFF;
	font-size: 12px;
	font-weight: 700;
	line-height: 1.4;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	box-shadow: 0 8px 18px color-mix(in srgb,var(--ws-posts-accent,var(--ws-primary)) 28%,transparent);
}

.ws-post-body {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	gap: 12px;
	padding: 20px;
}

.ws-post-meta {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 8px;
	font-size: 12.5px;
	color: var(--ws-muted);
	line-height: 1.5;
}

.ws-post-date,
.ws-post-readtime {
	display: inline-flex;
	align-items: center;
}

.ws-post-meta-dot {
	width: 5px;
	height: 5px;
	border-radius: 50%;
	background: var(--ws-posts-accent, var(--ws-primary));
	opacity: 0.45;
}

.ws-post-title {
	margin: 0;
	font-size: 19px;
	font-weight: 800;
	line-height: 1.45;
}
.ws-post-title a {
	color: var(--ws-text);
	text-decoration: none;
	transition: color 0.2s ease;
}
.ws-post-title a:hover {
	color: var(--ws-posts-accent, var(--ws-primary));
}

.ws-post-excerpt {
	margin: 0;
	font-size: 14px;
	line-height: 1.85;
	color: var(--ws-muted);
	flex: 1 1 auto;
}

.ws-post-actions {
	display: flex;
	align-items: center;
	margin-top: 6px;
	padding-top: 14px;
	border-top: 1px solid rgba(220, 235, 231, 0.9);
}

.ws-post-more {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	min-height: 38px;
	padding: 8px 14px;
	border-radius: 999px;
	background: var(--ws-soft-green);
	font-size: 14px;
	font-weight: 800;
	color: var(--ws-posts-accent, var(--ws-primary));
	text-decoration: none;
	transition: background-color 0.2s ease, color 0.2s ease, gap 0.2s ease, transform 0.2s ease;
}
.ws-post-more:hover,
.ws-post-more:focus {
	background: var(--ws-posts-accent, var(--ws-primary));
	color: #FFFFFF;
	gap: 10px;
	transform: translateX(-2px);
}
.ws-post-more-arrow { font-size: 18px; line-height: 1; }

.ws-posts-empty {
	text-align: center;
	color: var(--ws-muted);
	font-size: 15px;
	padding: 30px 0;
}

.ws-posts-footer {
	margin-top: 34px;
	text-align: center;
}

.ws-posts-more-link {
	border-color: color-mix(in srgb,var(--ws-posts-accent,var(--ws-primary)) 28%,transparent);
	color: var(--ws-posts-accent, var(--ws-primary));
}

.ws-posts-more-link:hover,
.ws-posts-more-link:focus {
	border-color: var(--ws-posts-accent, var(--ws-primary));
	background: var(--ws-posts-accent, var(--ws-primary));
	color: #FFFFFF;
}

.ws-posts-more-arrow {
	font-size: 20px;
	line-height: 1;
}

/* ==========================================================================
   8. CTA
   ========================================================================== */
.ws-cta {
	position: relative;
	max-width: 1200px;
	margin: 40px auto 60px;
	padding: 42px 55px;
	border-radius: 26px;
	background: linear-gradient(120deg, var(--ws-cta-bg1,color-mix(in srgb,var(--ws-primary) 5%,#fff)) 0%, var(--ws-cta-bg2,color-mix(in srgb,var(--ws-primary) 9%,#fff)) 100%);
	border: 1.5px solid var(--ws-border);
	overflow: hidden;
}

.ws-cta-bg-img {
	position: absolute;
	inset: 0;
	background-size: cover;
	background-position: center;
	opacity: 0.1;
	pointer-events: none;
}

.ws-cta-leaf {
	position: absolute;
	width: 30px;
	height: 30px;
	background: color-mix(in srgb,var(--ws-primary) 15%,transparent);
	border-radius: 0 60% 0 60%;
	transform: rotate(35deg);
	pointer-events: none;
}
.ws-cta-leaf-1 { top: 14%; inset-inline-end: 4%; }
.ws-cta-leaf-2 { bottom: 14%; inset-inline-start: 40%; }

.ws-cta-grid {
	position: relative;
	display: grid;
	grid-template-columns: auto 1fr auto;
	gap: 36px;
	align-items: center;
}

.ws-cta:not(.ws-cta-has-media) .ws-cta-grid {
	grid-template-columns: 1fr auto;
}

.ws-cta-media { width: 150px; }
.ws-cta-img,
.ws-cta-media .ws-img-placeholder {
	width: 150px;
	height: 120px;
	object-fit: contain;
	display: block;
}

.ws-cta-heading {
	margin: 0 0 8px;
	font-size: 30px;
	font-weight: 800;
	color: var(--ws-primary);
	line-height: 1.35;
}
.ws-cta-subtitle {
	margin: 0;
	font-size: 16px;
	color: var(--ws-muted);
	line-height: 1.8;
}

.ws-btn-cta {
	background: var(--ws-cta-btn, var(--ws-primary));
	color: #FFFFFF;
	border: none;
	border-radius: 14px;
	padding: 15px 34px;
	font-size: 16px;
}
.ws-btn-cta:hover {
	transform: translateY(-2px);
	color: #FFFFFF;
	filter: brightness(1.08);
}
.ws-btn-cta-arrow { font-size: 20px; line-height: 1; }

/* ==========================================================================
   9. Services (ws_service CPT)
   ========================================================================== */
.ws-services-head { margin-bottom: 30px; }

/* --- Mosaic: two side columns around a large featured card --- */
.ws-services-mosaic {
	display: grid;
	grid-template-columns: 1fr 1.18fr 1fr;
	gap: 26px;
	align-items: start;
}

.ws-services-col {
	display: flex;
	flex-direction: column;
	gap: 26px;
}

/* --- Plain grid fallback layout --- */
.ws-services-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 26px;
}
.ws-services-carousel {
	display: flex;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scrollbar-width: thin;
	padding-block-end: 12px;
}
.ws-services-carousel > .ws-service-card {
	flex: 0 0 min(360px, 86vw);
	scroll-snap-align: start;
}
.ws-service-manual-link {
	color: var(--ws-services-accent, var(--ws-primary));
	font-weight: 700;
	text-decoration: none;
}

/* --- Card --- */
.ws-service-card {
	--ws-service-img-h: 200px;
	position: relative;
	background: var(--ws-white);
	border: 1.5px solid var(--ws-services-border, var(--ws-border));
	border-radius: 18px;
	padding: 14px 14px 22px;
	text-align: center;
	box-shadow: 0 4px 18px rgba(38, 50, 56, 0.06);
	transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
	overflow: hidden;
}
.ws-service-card:hover {
	transform: translateY(-6px);
	border-color: var(--ws-services-accent, var(--ws-primary));
	box-shadow: 0 14px 32px color-mix(in srgb,var(--ws-services-accent,var(--ws-primary)) 14%,transparent);
}

/* Subtle gold corner ornament */
.ws-service-card::after {
	content: "";
	position: absolute;
	top: 0;
	inset-inline-start: 24px;
	width: 46px;
	height: 4px;
	border-radius: 0 0 4px 4px;
	background: linear-gradient(90deg, var(--ws-gold), var(--ws-soft-gold));
	opacity: 0;
	transition: opacity 0.25s ease;
}
.ws-service-card:hover::after { opacity: 1; }

.ws-service-media {
	height: var(--ws-service-img-h);
	border-radius: 12px;
	overflow: hidden;
	margin-bottom: 18px;
	background: var(--ws-mint);
}
.ws-service-img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 0.45s ease;
}
.ws-service-card:hover .ws-service-img { transform: scale(1.05); }
.ws-service-img-placeholder { height: 100%; }

.ws-service-title {
	margin: 0 6px 10px;
	font-size: 20px;
	font-weight: 800;
	line-height: 1.45;
	color: var(--ws-services-accent, var(--ws-primary));
}
.ws-service-title a {
	color: inherit;
	text-decoration: none;
	transition: color 0.2s ease;
}
.ws-service-title a:hover { color: var(--ws-dark); }

.ws-service-divider {
	display: block;
	width: 44px;
	height: 3px;
	margin: 0 auto 12px;
	border-radius: 3px;
	background: linear-gradient(90deg, var(--ws-gold), var(--ws-soft-gold));
}

.ws-service-desc {
	margin: 0 8px;
	font-size: 15px;
	line-height: 1.9;
	color: var(--ws-muted);
}

/* Featured (center) card */
.ws-service-featured {
	--ws-service-img-h: 340px;
	padding-bottom: 26px;
	border-width: 2px;
}
.ws-service-featured .ws-service-title { font-size: 23px; }
.ws-service-featured .ws-service-desc { font-size: 15.5px; }

/* Center logo under the featured card */
.ws-services-logo {
	text-align: center;
	padding-top: 6px;
}
.ws-services-logo-img,
.ws-services-logo .ws-img-placeholder {
	width: 190px;
	max-width: 100%;
	height: auto;
	min-height: 0;
	margin: 0 auto;
	display: inline-block;
}

.ws-services-empty {
	text-align: center;
	color: var(--ws-muted);
	font-size: 16px;
	padding: 30px 0;
}

/* ==========================================================================
   9b. Service detail sections
   ========================================================================== */
.ws-service-empty {
	margin: 0;
	padding: 36px 20px;
	border: 1.5px dashed var(--ws-border);
	border-radius: 16px;
	background: var(--ws-mint);
	color: var(--ws-muted);
	text-align: center;
	font-size: 15px;
}

/* --- Dynamic service hero --- */
.ws-service-hero {
	position: relative;
	max-width: 1200px;
	margin: 24px auto;
	padding: 24px 48px 52px;
	border-radius: 28px;
	background: linear-gradient(135deg, var(--ws-service-hero-bg1,var(--ws-primary)), var(--ws-service-hero-bg2,var(--ws-dark)));
	color: var(--ws-service-hero-text, #FFFFFF);
	overflow: hidden;
}
.ws-service-hero-content { position: relative; }
.ws-service-hero-title {
	margin: 0 0 18px;
	color: inherit;
	font-size: 48px;
	font-weight: 800;
	line-height: 1.25;
	word-break: break-word;
}
.ws-service-hero-title::after {
	content: "✦";
	display: inline-block;
	margin-inline-start: 14px;
	color: var(--ws-service-hero-accent, #D99A21);
	font-size: 0.42em;
	vertical-align: middle;
}
.ws-service-hero-description {
	max-width: 680px;
	margin: 0 0 28px;
	color: rgba(255, 255, 255, 0.86);
	font-size: 17px;
	line-height: 1.95;
}
.ws-service-hero-button {
	background: var(--ws-service-hero-accent, #D99A21);
	border-color: var(--ws-service-hero-accent, #D99A21);
	color: #FFFFFF;
}
.ws-service-hero-button:hover {
	background: #B67E12;
	border-color: #B67E12;
	color: #FFFFFF;
}
.ws-service-hero-media {
	min-width: 0;
	border-radius: 18px;
	overflow: hidden;
	background: rgba(255, 255, 255, 0.1);
	box-shadow: 0 16px 34px rgba(0, 0, 0, 0.15);
}
.ws-service-hero-image,
.ws-service-hero-media .ws-img-placeholder {
	display: block;
	width: 100%;
	height: 360px;
	object-fit: cover;
	border: 0;
	border-radius: 0;
}
.ws-service-hero-media .ws-img-placeholder {
	background: rgba(255, 255, 255, 0.12);
	color: #FFFFFF;
}

.ws-service-breadcrumb {
	position: relative;
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 8px;
	margin-bottom: 34px;
	font-size: 13px;
	line-height: 1.6;
	color: rgba(255, 255, 255, 0.78);
}
.ws-service-breadcrumb a {
	color: inherit;
	text-decoration: none;
}
.ws-service-breadcrumb a:hover { color: #FFFFFF; }
.ws-service-breadcrumb span[aria-current="page"] {
	max-width: 38ch;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.ws-service-hero-grid {
	position: relative;
	display: grid;
	grid-template-columns: 1.05fr 0.95fr;
	gap: 48px;
	align-items: center;
}

/* --- Shared section heading --- */
.ws-service-section-head { margin-bottom: 30px; }

/* --- Features and audience cards --- */
.ws-service-features-grid,
.ws-service-audience-grid,
.ws-service-steps-grid,
.ws-service-related-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 20px;
}
.ws-service-feature-card,
.ws-service-audience-card {
	position: relative;
	padding: 28px 22px;
	border: 1.5px solid var(--ws-border);
	border-radius: 18px;
	background: var(--ws-white);
	text-align: center;
	box-shadow: 0 5px 20px rgba(38, 50, 56, 0.06);
	transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}
.ws-service-feature-card:hover,
.ws-service-audience-card:hover {
	transform: translateY(-3px);
	border-color: var(--ws-service-features-accent, var(--ws-service-audience-accent, var(--ws-primary)));
	box-shadow: 0 14px 30px color-mix(in srgb,var(--ws-service-features-accent,var(--ws-service-audience-accent,var(--ws-primary))) 12%,transparent);
}
.ws-service-feature-icon,
.ws-service-audience-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 58px;
	height: 58px;
	margin-bottom: 14px;
	border-radius: 50%;
	background: var(--ws-soft-green);
	border: 1.5px solid var(--ws-border);
	color: var(--ws-service-features-accent, var(--ws-service-audience-accent, var(--ws-primary)));
	font-size: 22px;
}
.ws-service-feature-icon i,
.ws-service-audience-icon i { line-height: 1; }
.ws-service-feature-card h3,
.ws-service-audience-card h3 {
	margin: 0 0 9px;
	color: var(--ws-service-features-accent, var(--ws-service-audience-accent, var(--ws-primary)));
	font-size: 19px;
	font-weight: 800;
	line-height: 1.45;
	word-break: break-word;
}
.ws-service-feature-card p,
.ws-service-audience-card p {
	margin: 0;
	color: var(--ws-muted);
	font-size: 14px;
	line-height: 1.85;
	word-break: break-word;
}

/* --- Numbered process --- */
.ws-service-steps-grid { grid-template-columns: repeat(4, 1fr); }
.ws-service-step {
	position: relative;
	padding: 24px 18px 26px;
	border: 1.5px solid var(--ws-border);
	border-radius: 18px;
	background: var(--ws-white);
	text-align: center;
	box-shadow: 0 5px 20px rgba(38, 50, 56, 0.05);
}
.ws-service-step:not(:last-child)::after {
	content: "←";
	position: absolute;
	top: 46px;
	inset-inline-end: -22px;
	color: var(--ws-service-steps-accent, var(--ws-primary));
	font-size: 22px;
	font-weight: 800;
	z-index: 1;
}
.ws-service-step-number {
	margin-bottom: 10px;
	color: var(--ws-service-steps-accent, var(--ws-primary));
	font-size: 30px;
	font-weight: 900;
	letter-spacing: 0.05em;
	line-height: 1;
}
.ws-service-step-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 42px;
	height: 42px;
	margin-bottom: 13px;
	border-radius: 12px;
	background: var(--ws-soft-green);
	color: var(--ws-service-steps-accent, var(--ws-primary));
	font-size: 17px;
}
.ws-service-step h3 {
	margin: 0 0 8px;
	color: var(--ws-text);
	font-size: 17px;
	font-weight: 800;
	line-height: 1.5;
	word-break: break-word;
}
.ws-service-step p {
	margin: 0;
	color: var(--ws-muted);
	font-size: 13.5px;
	line-height: 1.8;
	word-break: break-word;
}

/* --- Related services --- */
.ws-service-related-grid { grid-template-columns: repeat(3, 1fr); }
.ws-service-related-card {
	overflow: hidden;
	border: 1.5px solid var(--ws-border);
	border-radius: 18px;
	background: var(--ws-white);
	box-shadow: 0 5px 20px rgba(38, 50, 56, 0.06);
	transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}
.ws-service-related-card:hover {
	transform: translateY(-3px);
	border-color: var(--ws-service-related-accent, var(--ws-primary));
	box-shadow: 0 14px 30px color-mix(in srgb,var(--ws-service-related-accent,var(--ws-primary)) 12%,transparent);
}
.ws-service-related-media {
	display: block;
	height: 210px;
	overflow: hidden;
	background: var(--ws-mint);
	text-decoration: none;
}
.ws-service-related-media .ws-img-placeholder {
	height: 100%;
	border: 0;
	border-radius: 0;
}
.ws-service-related-image {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.22s ease;
}
.ws-service-related-card:hover .ws-service-related-image { transform: scale(1.025); }
.ws-service-related-body { padding: 20px 18px 24px; text-align: center; }
.ws-service-related-body h3 {
	margin: 0 0 10px;
	font-size: 19px;
	font-weight: 800;
	line-height: 1.5;
	word-break: break-word;
}
.ws-service-related-body h3 a {
	color: var(--ws-service-related-accent, var(--ws-primary));
	text-decoration: none;
}
.ws-service-related-body h3 a:hover { color: var(--ws-dark); }
.ws-service-related-body .ws-service-divider { margin-bottom: 12px; }
.ws-service-related-body p {
	margin: 0;
	color: var(--ws-muted);
	font-size: 14px;
	line-height: 1.85;
	word-break: break-word;
}
.ws-service-related-empty {
	padding: 26px 0;
	color: var(--ws-muted);
	text-align: center;
}

/* --- Dynamic final CTA --- */
.ws-service-cta {
	position: relative;
	display: grid;
	grid-template-columns: 1fr auto;
	gap: 28px;
	align-items: center;
	max-width: 1200px;
	margin: 48px auto;
	padding: 42px 52px;
	border-radius: 24px;
	background: linear-gradient(135deg, var(--ws-service-cta-bg1,var(--ws-dark)), var(--ws-service-cta-bg2,var(--ws-primary)));
	color: #FFFFFF;
	overflow: hidden;
}
.ws-service-cta-content,
.ws-service-cta-action { position: relative; z-index: 1; }
.ws-service-cta h2 {
	margin: 0 0 9px;
	color: inherit;
	font-size: 30px;
	font-weight: 800;
	line-height: 1.35;
}
.ws-service-cta p {
	max-width: 720px;
	margin: 0;
	color: rgba(255, 255, 255, 0.84);
	font-size: 16px;
	line-height: 1.85;
}
.ws-service-cta-button {
	min-width: 150px;
	background: var(--ws-service-cta-button, #D99A21);
	border-color: var(--ws-service-cta-button, #D99A21);
	color: #FFFFFF;
}
.ws-service-cta-button:hover {
	background: #B67E12;
	border-color: #B67E12;
	color: #FFFFFF;
}

/* ==========================================================================
   10. Resources & Test cards (downloadable files / online level test)
   ========================================================================== */
.ws-resources-head { margin-bottom: 30px; }

.ws-resources-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 26px;
}

.ws-resource-card {
	position: relative;
	background: var(--ws-white);
	border: 1.5px solid var(--ws-border);
	border-radius: 18px;
	padding: 32px 28px;
	text-align: center;
	box-shadow: 0 4px 18px rgba(38, 50, 56, 0.06);
	transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
	overflow: hidden;
}
.ws-resource-card:hover {
	transform: translateY(-6px);
	border-color: var(--ws-res-accent, var(--ws-primary));
	box-shadow: 0 14px 32px color-mix(in srgb,var(--ws-res-accent,var(--ws-primary)) 14%,transparent);
}

.ws-resource-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 68px;
	height: 68px;
	margin-bottom: 18px;
	border-radius: 50%;
	background: var(--ws-mint);
	color: var(--ws-res-accent, var(--ws-primary));
	font-size: 28px;
}

:is(
	.ws-hero-feature-icon,
	.ws-teachers-title-icon,
	.ws-teacher-book-icon,
	.ws-service-feature-icon,
	.ws-service-audience-icon,
	.ws-service-step-icon,
	.ws-resource-icon,
	.ws-resource-btn-icon
) :is(i, svg) {
	width: 1em;
	height: 1em;
	color: inherit;
	fill: currentColor;
}
:is(
	.ws-hero-feature-icon,
	.ws-teacher-book-icon,
	.ws-service-feature-icon,
	.ws-service-audience-icon,
	.ws-service-step-icon,
	.ws-resource-icon,
	.ws-resource-btn-icon
) svg * {
	color: inherit;
	fill: currentColor;
}

.ws-resource-title {
	margin: 0 0 12px;
	font-size: 21px;
	font-weight: 800;
	line-height: 1.45;
	color: var(--ws-res-accent, var(--ws-primary));
}

.ws-resource-desc {
	margin: 0 0 22px;
	font-size: 15.5px;
	line-height: 1.9;
	color: var(--ws-muted);
}

.ws-resource-actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 12px;
}

.ws-resource-btn-icon { font-size: 15px; }

/* ==========================================================================
   Islamic-style pattern overlay (pure CSS, shared by the 4 banner widgets)
   ========================================================================== */
.ws-hero.ws-has-pattern::before,
.ws-cta.ws-has-pattern::before,
.ws-service-hero::before,
.ws-service-cta.ws-has-pattern::before {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	opacity: 0.08;
	background-image:
		radial-gradient(circle at center, transparent 8px, currentColor 8px, currentColor 9px, transparent 9px),
		radial-gradient(circle at center, transparent 8px, currentColor 8px, currentColor 9px, transparent 9px);
	background-size: 56px 56px;
	background-position: 0 0, 28px 28px;
}
.ws-cta.ws-has-pattern::before {
	opacity: 0.05;
	color: var(--ws-primary);
}
.ws-service-hero::before,
.ws-service-cta.ws-has-pattern::before {
	opacity: 0.09;
}

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 1024px) {

	.ws-hero { padding: 44px 36px; }
	.ws-hero-heading { font-size: 40px; }
	.ws-hero-grid { grid-template-columns: 1fr; gap: 34px; }
	.ws-hero-media { order: -1; }

	.ws-teachers-grid { grid-template-columns: repeat(3, 1fr); }

	.ws-posts-grid { grid-template-columns: repeat(2, 1fr); }

	/* Mosaic: featured card moves on top, side cards flow in 2 columns */
	.ws-services-mosaic { grid-template-columns: 1fr 1fr; }
	.ws-services-col-center {
		grid-column: 1 / -1;
		order: -1;
	}
	.ws-service-featured { --ws-service-img-h: 300px; }

	.ws-cta-grid {
		grid-template-columns: 1fr;
		text-align: center;
		gap: 22px;
	}
	.ws-cta-media { margin: 0 auto; }

	.ws-resources-grid { grid-template-columns: 1fr 1fr; }

	/* Service-detail layout */
	.ws-service-hero {
		margin: 22px 20px;
		padding: 24px 34px 42px;
	}
	.ws-service-hero-grid { grid-template-columns: 1fr; gap: 30px; }
	.ws-service-hero-media { order: -1; max-width: 680px; width: 100%; margin: 0 auto; }
	.ws-service-hero-content { text-align: center; }
	.ws-service-hero-description { margin-inline: auto; }
	.ws-service-features-grid,
	.ws-service-related-grid { grid-template-columns: repeat(2, 1fr); }
	.ws-service-audience-grid { grid-template-columns: repeat(3, 1fr); }
	.ws-service-steps-grid { grid-template-columns: repeat(2, 1fr); }
	.ws-service-step:nth-child(2)::after { display: none; }
	.ws-service-step:nth-child(odd)::after { display: block; }
	.ws-service-cta { margin-inline: 20px; padding: 36px 38px; }
}

@media (max-width: 767px) {

	/* Header collapses to burger menu */
	.ws-header-inner {
		flex-wrap: wrap;
		gap: 12px;
		padding: 12px 16px;
	}
	.ws-header-burger { display: flex; }
	.ws-header-nav {
		display: none;
		flex-basis: 100%;
		order: 4;
	}
	.ws-header.ws-nav-open .ws-header-nav { display: block; }
	.ws-header-nav ul {
		flex-direction: column;
		align-items: stretch;
		gap: 4px;
		padding: 8px 0 14px;
	}
	.ws-header-nav-link { display: block; text-align: center; }
	.ws-header-actions {
		flex-basis: 100%;
		order: 5;
		justify-content: center;
		display: none;
	}
	.ws-header.ws-nav-open .ws-header-actions { display: flex; }

	.ws-hero {
		margin: 14px 12px;
		padding: 34px 22px;
		border-radius: 24px;
	}
	.ws-hero-heading { font-size: 32px; }
	.ws-hero-features { grid-template-columns: 1fr; gap: 16px; }

	.ws-teachers-section {
		margin: 20px 12px;
		padding: 28px 18px;
	}
	.ws-teachers-grid { grid-template-columns: 1fr; }

	.ws-section-title { font-size: 27px; }

	.ws-reviews { padding: 0 12px; }
	.ws-reviews-arrow {
		width: 36px;
		height: 36px;
		font-size: 18px;
	}
	.ws-reviews-prev { inset-inline-start: 2px; }
	.ws-reviews-next { inset-inline-end: 2px; }

	.ws-posts {
		margin: 36px auto;
		padding: 0 12px;
	}
	.ws-posts-head { margin-bottom: 22px; }
	.ws-posts-grid {
		grid-template-columns: 1fr;
		gap: 18px;
	}
	.ws-post-media { height: 190px; }
	.ws-post-body { padding: 18px; }
	.ws-post-title { font-size: 17px; }
	.ws-post-actions { padding-top: 12px; }
	.ws-posts-footer { margin-top: 26px; }

	.ws-services {
		margin: 32px auto;
		padding: 0 12px;
	}
	.ws-services-mosaic { grid-template-columns: 1fr; gap: 18px; }
	.ws-services-col { gap: 18px; }
	.ws-services-grid { grid-template-columns: 1fr; gap: 18px; }
	.ws-service-card { --ws-service-img-h: 190px; }
	.ws-service-featured { --ws-service-img-h: 230px; }

	.ws-cta {
		margin: 24px 12px 40px;
		padding: 30px 22px;
	}
	.ws-cta-heading { font-size: 24px; }

	.ws-resources {
		margin: 32px auto;
		padding: 0 12px;
	}
	.ws-resources-grid { grid-template-columns: 1fr; gap: 18px; }
	.ws-resource-card { padding: 26px 22px; }

	/* Service-detail layout */
	.ws-service-hero {
		margin: 14px 12px;
		padding: 20px 22px 30px;
		border-radius: 22px;
	}
	.ws-service-breadcrumb { margin-bottom: 24px; font-size: 12px; }
	.ws-service-hero-title { font-size: 32px; }
	.ws-service-hero-description { font-size: 15px; }
	.ws-service-features,
	.ws-service-audience,
	.ws-service-steps,
	.ws-service-related {
		margin: 32px auto;
		padding: 0 12px;
	}
	.ws-service-features-grid,
	.ws-service-audience-grid,
	.ws-service-steps-grid,
	.ws-service-related-grid { grid-template-columns: 1fr; gap: 16px; }
	.ws-service-step::after,
	.ws-service-step:nth-child(2)::after,
	.ws-service-step:nth-child(odd)::after { display: none; }
	.ws-service-related-media { height: 190px; }
	.ws-service-cta {
		display: block;
		margin: 28px 12px 40px;
		padding: 30px 22px;
		text-align: center;
	}
	.ws-service-cta h2 { font-size: 25px; }
	.ws-service-cta-action { margin-top: 22px; }
}

/* ==========================================================================
   Reduced motion: keep the layout static for users who ask for it.
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
	.ws-hero,
	.ws-hero *,
	.ws-service-hero,
	.ws-service-hero *,
	.ws-btn,
	.ws-btn *,
	.ws-tab,
	.ws-teacher-card,
	.ws-review-card,
	.ws-post-card,
	.ws-service-card,
	.ws-service-related-card,
	.ws-resource-card,
	.ws-post-media img,
	.ws-service-img,
	.ws-service-related-image,
	.ws-post-more,
	.ws-dot {
		animation: none !important;
		transition: none !important;
	}
}