/* ==========================================================================
   40 · Home — بخش‌های صفحهٔ اصلی
   ========================================================================== */

/* ---------- هیرو ---------- */
.wm-hero { position: relative; display: flex; align-items: center; --hero-text: 30rem; min-height: 32.5rem; padding: var(--sp-12) 0 var(--sp-24); background-color: var(--c-hero-base); color: var(--c-white); clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--sp-12)), 60% calc(100% - var(--sp-4)), 0 100%); }
/* عکس فقط در ناحیهٔ چپِ متن قرار می‌گیرد (نه زیر متن) تا کادر نبُرد؛ لبهٔ داخلی نرم محو می‌شود. */
.wm-hero::after { content: ""; position: absolute; z-index: 0; top: 0; bottom: 0; left: 0; width: max(46%, calc(100% - var(--hero-text) - (100% - min(100% - 2rem, var(--container))) / 2 - var(--sp-8))); background: var(--hero-img, none) 50% 18% / cover no-repeat; transform: scaleX(-1); -webkit-mask-image: linear-gradient(to right, transparent 0, #000 16%); mask-image: linear-gradient(to right, transparent 0, #000 16%); }
.wm-hero::before { content: none; }
.wm-hero .wm-wrap { position: relative; z-index: var(--z-raised); }
.wm-hero__inner { max-width: var(--hero-text); }
.wm-hero__eyebrow { display: inline-flex; align-items: center; gap: var(--sp-4); margin-bottom: var(--sp-2); color: var(--c-on-hero); font-size: var(--fs-md); font-weight: var(--fw-semibold); }
.wm-hero__eyebrow::after { content: ""; width: var(--sp-10); height: 2px; background: var(--c-primary-400); }
.wm-hero h1 { margin-bottom: var(--sp-4); color: var(--c-white); font-size: clamp(var(--fs-2xl), 3.6vw, var(--fs-4xl)); line-height: var(--lh-tight); }
.wm-hero p { margin: 0 0 var(--sp-8); color: var(--c-on-hero); font-size: var(--fs-base); line-height: var(--lh-loose); }
.wm-hero__cta { display: flex; flex-wrap: wrap; gap: var(--sp-4); }
.wm-hero .wm-btn { min-height: var(--control-lg); padding-inline: var(--btn-px-lg); }

/* ---------- برای خودم / برای فرزندم ---------- */
.wm-entry { position: relative; z-index: var(--z-raised); display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-8); margin-top: var(--sp-6); margin-bottom: var(--section-pad); }
.wm-entry__card { position: relative; display: flex; min-height: 17rem; overflow: hidden; border-radius: var(--r-xl); background: var(--g-soft); box-shadow: var(--shadow-md); color: var(--c-ink-700); }
.wm-entry__card:hover { color: var(--c-ink-700); }
.wm-entry__card::after { content: ""; position: absolute; top: var(--sp-4); inset-inline-end: 50%; width: 7rem; height: 4.5rem; background: radial-gradient(circle, var(--c-primary-300) 1.3px, transparent 1.8px) 0 0 / 11px 11px; opacity: .55; pointer-events: none; }
.wm-entry__text { position: relative; z-index: var(--z-base); display: flex; flex: 1 1 54%; flex-direction: column; justify-content: center; gap: var(--sp-2); padding: var(--sp-8) var(--sp-8); }
.wm-entry__text h2 { display: flex; align-items: center; gap: var(--sp-4); margin: 0; font-size: var(--fs-xl); }
.wm-entry__icon { display: inline-grid; place-items: center; color: var(--c-primary-600); }
.wm-entry__icon svg { width: var(--icon-2xl); height: var(--icon-2xl); stroke-width: 1.4; }
.wm-entry__text p { margin: 0; font-size: var(--fs-sm); line-height: var(--lh-loose); }
.wm-entry__photo { flex: 0 0 46%; }
.wm-entry__photo img { object-position: center 25%; }

/* ---------- مسیرهای زندگی ---------- */
.wm-paths { display: grid; gap: var(--sp-5); }
.wm-path { display: flex; align-items: stretch; min-height: 7rem; overflow: hidden; border-radius: var(--r-lg); background: var(--g-path-women); }
.wm-path--kid { min-height: 8.125rem; background: var(--g-path-kid); }
.wm-path__label { display: flex; flex: 0 0 10rem; flex-direction: column; align-items: center; justify-content: center; gap: var(--sp-2); padding: var(--sp-4) var(--sp-3); border-radius: 0 var(--r-lg) var(--r-lg) 0; background: var(--g-brand); color: var(--c-white); font-size: var(--fs-base); font-weight: var(--fw-extrabold); line-height: var(--lh-snug); text-align: center; }
.wm-path__label svg { width: var(--icon-xl); height: var(--icon-xl); stroke-width: 1.3; }
.wm-path__items { display: flex; flex: 1; align-items: center; justify-content: space-around; gap: var(--sp-1); padding: var(--sp-4) var(--sp-3); }
.wm-path--kid .wm-chip { font-size: var(--fs-base); font-weight: var(--fw-extrabold); }
.wm-path--kid .wm-chip svg { width: var(--icon-xl); height: var(--icon-xl); }

/* ---------- فروشگاه ---------- */
.wm-shopband { margin: 0; padding: var(--sp-12) 0; background: var(--g-shop); }
.wm-shopband__grid { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: var(--sp-16); }
.wm-shopband__text h2 { margin-bottom: var(--sp-2); font-size: var(--fs-2xl); line-height: var(--lh-snug); }
.wm-shopband__text p { max-width: 29rem; margin: 0 0 var(--sp-6); color: var(--c-ink-500); font-size: var(--fs-sm); }
.wm-shopband__img { position: relative; }
.wm-shopband__img::before, .wm-shopband__img::after { content: ""; position: absolute; width: 8rem; height: 5.5rem; background: radial-gradient(circle, var(--c-primary-300) 1.3px, transparent 1.8px) 0 0 / 11px 11px; opacity: .55; }
.wm-shopband__img::before { top: calc(var(--sp-6) * -1); inset-inline-end: 12%; }
.wm-shopband__img::after { bottom: calc(var(--sp-5) * -1); inset-inline-start: 8%; }
.wm-shopband__img .wm-media { position: relative; z-index: var(--z-base); aspect-ratio: 16 / 8.4; border-radius: var(--r-lg); }

/* ---------- آمار ---------- */
.wm-stats { display: grid; grid-template-columns: repeat(4, 1fr); padding: var(--sp-6) 0; border-radius: var(--r-lg); background: var(--g-stats); color: var(--c-white); }
.wm-stats__item { position: relative; display: flex; flex-direction: column; align-items: center; padding: var(--sp-1) var(--sp-3); text-align: center; }
.wm-stats__item + .wm-stats__item::before { content: ""; position: absolute; inset-block: var(--sp-3); inset-inline-start: 0; width: 1px; background: rgba(255, 255, 255, .35); }
.wm-stats svg { width: var(--icon-xl); height: var(--icon-xl); margin-bottom: var(--sp-1); stroke-width: 1.4; }
.wm-stats strong { font-size: var(--fs-2xl); font-weight: var(--fw-extrabold); line-height: var(--lh-tight); }
.wm-stats span { font-size: var(--fs-sm); opacity: .92; }

/* ---------- محتوای علمی ---------- */
.wm-trust { display: grid; grid-template-columns: 1.15fr .85fr; align-items: center; gap: var(--sp-16); }
.wm-trust__text h2 { font-size: var(--fs-2xl); }
.wm-trust__text > p { color: var(--c-ink-500); font-size: var(--fs-sm); line-height: var(--lh-loose); }
.wm-trust__row { display: flex; align-items: center; gap: var(--sp-8); margin-top: var(--sp-4); }
.wm-trust ul { display: grid; flex: 1; gap: var(--sp-3); list-style: none; color: var(--c-ink-900); font-size: var(--fs-sm); }
.wm-trust li { display: flex; align-items: center; gap: var(--sp-3); }
.wm-trust li span { display: inline-grid; place-items: center; width: var(--icon-md); height: var(--icon-md); border-radius: 50%; background: var(--c-primary-100); color: var(--c-primary-600); }
.wm-trust li svg { width: var(--icon-xs); height: var(--icon-xs); stroke-width: 2.4; }
.wm-trust__badge { display: grid; place-items: center; flex: none; width: 6.75rem; height: 6.75rem; border-radius: var(--r-xl); background: var(--c-primary-100); color: var(--c-primary-600); }
.wm-trust__badge svg { width: 3.5rem; height: 3.5rem; stroke-width: 1.3; }
.wm-trust__photo { position: relative; aspect-ratio: 1.3; overflow: visible; border-radius: var(--r-lg); }
.wm-trust__photo img { border-radius: var(--r-lg); }
.wm-trust__photo::after { content: ""; position: absolute; z-index: -1; bottom: calc(var(--sp-3) * -1); inset-inline-start: calc(var(--sp-3) * -1); width: 7.5rem; height: 5.5rem; background: radial-gradient(circle, var(--c-primary-300) 1.3px, transparent 1.8px) 0 0 / 11px 11px; opacity: .55; }
.wm-trust__photo.wm-media--ph { overflow: hidden; }

/* ---------- متخصصان ---------- */
.wm-experts { --per-view: 4; display: flex; gap: var(--grid-gap); margin-block: calc(var(--sp-3) * -1) 0; padding-block: var(--sp-3) var(--sp-6); overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: none; }
.wm-experts::-webkit-scrollbar { display: none; }
.wm-experts > .wm-expert { flex: 0 0 calc((100% - (var(--per-view) - 1) * var(--grid-gap)) / var(--per-view)); scroll-snap-align: start; }
.wm-dots-nav { display: flex; justify-content: center; gap: var(--sp-1); }
.wm-dots-nav:empty { display: none; }
.wm-dots-nav button { width: var(--sp-6); height: var(--sp-4); padding: 0; border: 0; background: none; cursor: pointer; }
.wm-dots-nav button::before { content: ""; display: block; width: var(--sp-4); height: var(--sp-1); margin: auto; border-radius: var(--r-full); background: var(--c-primary-100); transition: width var(--dur-base) var(--ease), background var(--dur-base) var(--ease); }
.wm-dots-nav button[aria-current="true"]::before { width: var(--sp-6); background: var(--c-primary-600); }
.wm-dots-nav button:focus-visible { outline: 3px solid var(--c-focus); border-radius: var(--r-sm); }
.wm-expert { display: flex; flex-direction: column; align-items: center; padding-bottom: var(--sp-4); overflow: hidden; border-radius: var(--r-lg); background: var(--c-surface); box-shadow: var(--shadow-md); color: var(--c-ink-900); text-align: center; transition: transform var(--dur-base) var(--ease), box-shadow var(--dur-base) var(--ease); }
.wm-expert:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); color: var(--c-primary-600); }
.wm-expert__photo { display: block; width: 100%; aspect-ratio: 16 / 10; overflow: hidden; background: var(--g-photo-bg); }
.wm-expert__photo img { width: 100%; height: 100%; object-fit: cover; object-position: center 22%; }
.wm-expert .wm-avatar-ph { border-radius: 0; }
.wm-expert strong { margin-top: var(--sp-3); color: var(--c-ink-900); font-size: var(--fs-base); }
.wm-expert small { color: var(--c-ink-500); font-size: var(--fs-xs); }

/* ---------- بنر عضویت ---------- */
.wm-cta { position: relative; display: flex; align-items: stretch; min-height: 14.5rem; overflow: hidden; border-radius: var(--r-xl); background: var(--g-dark); }
.wm-cta__text { position: relative; z-index: var(--z-base); display: flex; flex: 0 0 50%; flex-direction: column; justify-content: center; gap: var(--sp-2); padding: var(--panel-pad-y) var(--panel-pad-x); }
.wm-cta h2 { margin-bottom: var(--sp-1); color: var(--c-white); font-size: var(--fs-2xl); }
.wm-cta p { margin: 0 0 var(--sp-4); color: var(--c-on-dark-muted); font-size: var(--fs-sm); line-height: var(--lh-loose); }
.wm-cta .wm-btn { align-self: flex-start; }
.wm-cta__photo { position: relative; flex: 1; }
.wm-cta__photo img { object-position: center 30%; }
.wm-cta__photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to left, var(--c-ink-900-soft) 0%, transparent 40%); }
.wm-cta__photo.wm-media--ph { background: rgba(255, 255, 255, .07); color: var(--c-white); }

/* ---------- تجربهٔ کاربران ---------- */
.wm-testimonial { display: grid; grid-template-columns: 1fr 1.05fr; overflow: hidden; border-radius: var(--r-xl); box-shadow: var(--shadow-md); }
.wm-testimonial__side { display: flex; flex-direction: column; justify-content: center; gap: var(--sp-1); padding: var(--panel-pad-y) var(--panel-pad-x); background: var(--g-panel-brand); color: var(--c-white); }
.wm-testimonial__eyebrow { font-size: var(--fs-sm); opacity: .9; }
.wm-testimonial__side h2 { margin-bottom: var(--sp-2); color: var(--c-white); font-size: var(--fs-2xl); }
.wm-testimonial__side p { margin: 0 0 var(--sp-5); font-size: var(--fs-sm); line-height: var(--lh-loose); opacity: .93; }
.wm-testimonial__side .wm-btn { align-self: flex-start; }
.wm-testimonial__quote { display: flex; flex-direction: column; align-items: center; gap: var(--sp-1); padding: var(--panel-pad-y) var(--panel-pad-x); background: var(--g-quote); color: var(--c-on-dark); text-align: center; }
.wm-testimonial__quote > svg { width: var(--icon-xl); height: var(--icon-xl); fill: var(--c-play); stroke: none; }
.wm-testimonial blockquote { margin: var(--sp-2) 0 var(--sp-5); font-size: var(--fs-base); line-height: var(--lh-loose); }
.wm-testimonial__who { display: flex; align-items: center; justify-content: center; align-self: stretch; gap: var(--sp-3); text-align: start; line-height: var(--lh-snug); }
.wm-testimonial__who strong { display: block; color: var(--c-white); font-size: var(--fs-sm); }
.wm-testimonial__who small { font-size: var(--fs-2xs); opacity: .7; }
.wm-testimonial__line { order: 9; width: 4.5rem; height: 3px; border-radius: 3px; background: var(--c-primary-400); }
.wm-testimonial__av { display: block; flex: none; width: 3.25rem; height: 3.25rem; overflow: hidden; border: 2px solid rgba(255, 255, 255, .35); border-radius: 50%; }
.wm-testimonial__av img { width: 100%; height: 100%; object-fit: cover; object-position: center 20%; }
.wm-testimonial__av .wm-avatar-ph { font-size: var(--fs-lg); }

/* ---------- خبرنامه ---------- */
.wm-newsletter { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sp-6); padding: var(--sp-6) var(--sp-10); border-radius: var(--r-xl); background: var(--g-newsletter); }
.wm-newsletter__text { display: flex; align-items: center; gap: var(--sp-5); }
.wm-newsletter__text > svg { width: 3.75rem; height: 3.75rem; color: var(--c-primary-400); stroke-width: 1.2; }
.wm-newsletter h3 { margin: 0; font-size: var(--fs-lg); }
.wm-newsletter p { margin: 0; color: var(--c-ink-500); font-size: var(--fs-sm); }
.wm-newsletter form { display: flex; flex: 0 1 35rem; }
.wm-newsletter__field { display: flex; align-items: center; flex: 1; gap: var(--sp-3); padding: 0 var(--sp-4); border-radius: 0 var(--r-md) var(--r-md) 0; background: var(--c-white); color: var(--c-ink-500); }
.wm-newsletter__field svg { width: var(--icon-md); height: var(--icon-md); }
.wm-newsletter input[type=email] { flex: 1; min-width: 0; min-height: var(--control-lg); border: 0; outline: 0; background: transparent; font-size: var(--fs-sm); }
.wm-newsletter .wm-btn { min-height: var(--control-lg); border-radius: var(--r-md) 0 0 var(--r-md); }

/* ---------- واکنش‌گرا ---------- */
@media (max-width: 960px) {
	.wm-hero { min-height: 27.5rem; clip-path: polygon(0 0, 100% 0, 100% 90%, 0 100%); }
	/* موبایل/تبلت: عکس کامل بالای متن (بدون روکش) تا مفهوم مادر و کودک بُریده نشود */
	.wm-hero { flex-direction: column; align-items: stretch; min-height: 0; padding-top: 0; }
	.wm-hero::after { position: relative; order: -1; inset: auto; width: 100%; height: 15rem; margin-bottom: var(--sp-6); -webkit-mask-image: none; mask-image: none; background-position: 50% 20%; }
	.wm-entry { grid-template-columns: 1fr; }
	.wm-wrap .wm-grid { grid-template-columns: repeat(2, 1fr); }
	.wm-experts { --per-view: 2; }
	.wm-path { flex-direction: column; }
	.wm-path__label { flex: none; flex-direction: row; justify-content: flex-start; gap: var(--sp-3); padding: var(--sp-3) var(--sp-4); border-radius: 0; }
	.wm-path__label br { display: none; }
	.wm-path__items { flex-wrap: wrap; justify-content: center; }
	.wm-chip { flex: 0 0 22%; }
	.wm-shopband__grid, .wm-trust, .wm-testimonial { grid-template-columns: 1fr; gap: var(--sp-8); }
	.wm-trust__photo { order: -1; }
	.wm-stats { grid-template-columns: repeat(2, 1fr); row-gap: var(--sp-5); }
	.wm-stats__item:nth-child(3)::before { display: none; }
	.wm-cta { flex-direction: column-reverse; }
	.wm-cta__text { flex: none; }
	.wm-cta__photo { flex: none; min-height: 12rem; }
	.wm-cta__photo::after { background: linear-gradient(to top, var(--c-ink-900-soft) 0%, transparent 50%); }
}
@media (max-width: 640px) {
	.wm-wrap .wm-grid { grid-template-columns: 1fr; }
	.wm-experts { --per-view: 1.35; gap: var(--sp-3); }
	.wm-entry__card { flex-direction: column-reverse; min-height: 0; }
	.wm-entry__card::after { display: none; }
	.wm-entry__photo { flex: none; height: 11rem; }
	.wm-entry__text { padding: var(--sp-6); }
	.wm-chip { flex: 0 0 30%; }
	.wm-trust__row { flex-direction: column-reverse; align-items: flex-start; }
	.wm-newsletter { padding: var(--sp-5); }
	.wm-newsletter form { flex: 1 1 100%; flex-direction: column; gap: var(--sp-3); }
	.wm-newsletter__field, .wm-newsletter .wm-btn { border-radius: var(--r-md); }
	.wm-hero .wm-btn { width: 100%; }
}
