/* ==========================================================================
   IN MOTION — Inner page layer
   נטען *אחרי* style.css. לא משכתב אף טוקן — רק מוסיף את הרכיבים שקיימים
   בעמודי הפנים בלבד. כל עמוד פנימי נשען על אותה מערכת עיצוב של העמוד הראשי.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Page hero — גרסה נמוכה של הירו, לעמודי משנה
   -------------------------------------------------------------------------- */
.pagehero {
  position: relative;
  padding-block: clamp(3rem, 7vw, 5.5rem);
  background: var(--ink);
  color: #fff;
  overflow: hidden;
  isolation: isolate;
}
.pagehero::before {
  content: "";
  position: absolute; z-index: -1;
  inset-block-start: -55%;
  inset-inline-end: -10%;
  width: 620px; aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(7,155,255,.28), transparent 66%);
  filter: blur(30px);
  animation: glow-float 18s ease-in-out infinite alternate;
}
.pagehero::after {
  content: "";
  position: absolute; inset: 0; z-index: -1;
  background-image: var(--grain);
  opacity: .06;
  pointer-events: none;
}
.pagehero h1 {
  font-size: clamp(2.125rem, 5.2vw, 3.75rem);
  color: #fff;
  line-height: 1.05;
}
.pagehero .prose { margin-top: var(--s-5); color: #c5c5d0; }
.pagehero .prose strong { color: #fff; }
.pagehero__actions { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-top: var(--s-6); }

/* פירורי לחם */
.crumbs {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2);
  margin-bottom: var(--s-5);
  font-size: var(--t-xs);
  color: #8f8f9c;
}
.crumbs a { color: #c5c5d0; text-decoration: none; transition: color .2s; }
.crumbs a:hover { color: var(--blue); }
.crumbs li { display: flex; align-items: center; gap: var(--s-2); }
.crumbs li + li::before { content: "‹"; color: #5c5c68; }   /* RTL: החץ מצביע שמאלה */
.crumbs [aria-current="page"] { color: #fff; }

/* --------------------------------------------------------------------------
   2. Trainers — 19 פרופילי המאמנים מעמוד "מי אנחנו"
   -------------------------------------------------------------------------- */
.trainers {
  display: grid;
  /* min() — אחרת עמודה של 292px נשארת 292px גם במסך 320px והגוף נגלל לרוחב */
  grid-template-columns: repeat(auto-fill, minmax(min(292px, 100%), 1fr));
  gap: var(--s-4);
}

.trainer {
  display: flex;
  flex-direction: column;
  padding: var(--s-6);
  border: 1px solid var(--line-2);
  border-radius: var(--r-lg);
  background: #fff;
  box-shadow: var(--shadow-1);
  transition: transform .35s var(--ease), box-shadow .35s, border-color .35s;
}
.trainer:hover { transform: translateY(-5px); box-shadow: var(--shadow-2); border-color: transparent; }

.trainer__top { display: flex; align-items: center; gap: var(--s-4); margin-bottom: var(--s-5); }

/* ראשי תיבות במקום תצלום.
   כמעט כל תצלומי המאמנים באתר החי שבורים (naturalWidth=0), ותג <img>
   שנשבר נראה גרוע בהרבה מאווטאר טיפוגרפי מכוון. כשיגיעו תצלומים אמיתיים
   מחליפים את ה-span ב-<img class="trainer__photo"> ותו לא. */
.trainer__avatar {
  display: grid; place-items: center;
  flex: none;
  width: 64px; height: 64px;
  border-radius: 50%;
  background: var(--blue);
  color: #fff;
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 900;
  line-height: 1;
  user-select: none;
}
.trainer__photo {
  flex: none;
  width: 64px; height: 64px;
  border-radius: 50%;
  object-fit: cover;
  box-shadow: 0 0 0 3px #fff, 0 0 0 5px var(--brand);
}

.trainer__name { font-size: 1.125rem; margin-bottom: .1rem; }
.trainer__role { font-size: var(--t-sm); color: var(--brand-ink); font-weight: 600; }

.trainer__spec {
  margin-bottom: var(--s-4);
  padding: var(--s-3) var(--s-4);
  border-radius: var(--r-sm);
  background: var(--brand-soft);
  font-size: var(--t-sm);
  color: var(--brand-ink);
  font-weight: 600;
}

.trainer__certs { display: grid; gap: .4rem; margin-bottom: var(--s-4); }
.trainer__certs li {
  display: flex; align-items: flex-start; gap: var(--s-2);
  font-size: var(--t-sm);
  color: var(--muted);
  line-height: 1.5;
}
.trainer__certs svg { flex: none; margin-top: 5px; color: var(--blue-ink); }

.trainer__quote {
  margin-bottom: var(--s-4);
  padding-inline-start: var(--s-4);
  border-inline-start: 3px solid var(--brand);
  font-size: var(--t-sm);
  font-style: italic;
  color: var(--ink);
  line-height: 1.6;
}

/* אזורי עבודה — מתקפל, כי חלק מהמאמנים מכסים 18 יישובים */
.trainer__areas { margin-top: auto; }
.trainer__areas summary {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-3);
  padding-top: var(--s-4);
  border-top: 1px solid var(--line-2);
  font-family: var(--font-display);
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: var(--tr-caps);
  text-transform: uppercase;
  color: var(--muted);
  cursor: pointer;
  list-style: none;
}
.trainer__areas summary::-webkit-details-marker { display: none; }
.trainer__areas summary::after {
  content: "";
  flex: none;
  width: 8px; height: 8px;
  border-inline-end: 2px solid var(--brand);
  border-block-end: 2px solid var(--brand);
  transform: rotate(45deg) translateY(-2px);
  transition: transform .3s var(--ease);
}
.trainer__areas[open] summary::after { transform: rotate(225deg) translateY(-2px); }
.trainer__areas summary:hover { color: var(--brand-ink); }
.trainer__areas p { margin-top: var(--s-3); font-size: var(--t-sm); color: var(--muted); line-height: 1.7; }

/* --------------------------------------------------------------------------
   3. Packages — כרטיסי החבילות מעמוד "סוגי אימונים"
   -------------------------------------------------------------------------- */
.packages { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr)); gap: var(--s-4); }

.package {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: var(--s-6);
  border: 1px solid var(--line-2);
  border-radius: var(--r-lg);
  background: #fff;
  overflow: hidden;
  isolation: isolate;
  transition: transform .35s var(--ease), box-shadow .35s, border-color .35s;
}
.package:hover { transform: translateY(-6px); box-shadow: var(--shadow-2); border-color: transparent; }
.package::before {
  content: "";
  position: absolute; inset: 0; z-index: -1;
  background: radial-gradient(320px circle at var(--mx, 100%) var(--my, 0%), rgba(255,90,31,.10), transparent 68%);
  opacity: 0;
  transition: opacity .35s;
}
.package:hover::before { opacity: 1; }

.package__icon {
  display: grid; place-items: center;
  width: 52px; height: 52px;
  margin-bottom: var(--s-4);
  border-radius: var(--r-md);
  background: var(--blue-soft);
  color: var(--blue-ink);
  transition: transform .4s var(--ease), background-color .3s, color .3s;
}
.package:hover .package__icon { transform: translateY(-3px) rotate(-6deg); background: var(--brand); color: var(--ink); }
.package h2 { margin-bottom: var(--s-3); font-size: 1.1875rem; letter-spacing: var(--tr-h3); }
.package p { font-size: var(--t-sm); color: var(--muted); line-height: 1.75; }

.package__link {
  display: inline-flex; align-items: center; gap: var(--s-2);
  /* 44px — יעד המגע המינימלי. הקישור נמוך מזה בטקסט בלבד. */
  min-height: 44px;
  margin-top: calc(var(--s-5) - .5rem);
  font-family: var(--font-display);
  font-size: var(--t-sm);
  font-weight: 700;
  color: var(--brand-ink);
  text-decoration: none;
}
.package__link svg { transition: transform .3s var(--ease); }
.package:hover .package__link svg { transform: translateX(-5px); }

/* --------------------------------------------------------------------------
   3a. Elementor passthrough
   26 מהעמודים באתר בנויים ב-Elementor. הם עוברים דרך כאן כמעט בלי שנגע
   בהם — Elementor מביא את ה-CSS שלו בעצמו, ואנחנו רק דואגים שלא נשבור לו
   את הרוחב ושלא ייצמד להדר הדביק. אין כאן צבע, טיפוגרפיה או ריווח: כל
   כלל כזה היה נלחם בעיצוב הקיים של העמוד.
   -------------------------------------------------------------------------- */
.elementor-passthrough { padding-block-start: var(--s-5); }
.elementor-passthrough > * { max-width: 100%; }

/* --------------------------------------------------------------------------
   3b. Entry — עיצוב פלט the_content() של וורדפרס
   זה מה שנותן ל-12 עמודי המשנה המקודמים את המראה החדש בלי לגעת בתוכן.
   -------------------------------------------------------------------------- */
.entry {
  font-size: var(--t-lead);
  line-height: 1.85;
  color: var(--muted);
}
.entry > * + * { margin-top: var(--s-5); }

.entry h2 {
  margin-top: var(--s-8);
  font-size: clamp(1.5rem, 3vw, 2.125rem);
  letter-spacing: var(--tr-h2);
  color: var(--ink);
}
.entry h3 {
  margin-top: var(--s-7);
  font-size: var(--t-h3);
  color: var(--ink);
}
.entry h4 { margin-top: var(--s-6); color: var(--ink); }
.entry > :is(h2, h3, h4):first-child { margin-top: 0; }

.entry p { margin: 0; }
.entry strong, .entry b { color: var(--ink); font-weight: 700; }
.entry a { font-weight: 600; }

.entry :is(ul, ol) { display: grid; gap: var(--s-3); padding-inline-start: 0; }
.entry ul li, .entry ol li {
  position: relative;
  padding-inline-start: 1.9rem;
  font-size: var(--t-body);
  line-height: 1.7;
}
/* תבליט מותאם — אין list-style, כדי שהמראה יהיה זהה בכל דפדפן ב-RTL */
.entry ul li::before {
  content: "";
  position: absolute;
  inset-inline-start: .35rem;
  inset-block-start: .72em;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--blue);
}
.entry ol { counter-reset: entry-ol; }
.entry ol li { counter-increment: entry-ol; }
.entry ol li::before {
  content: counter(entry-ol);
  position: absolute;
  inset-inline-start: 0;
  font-family: var(--font-display);
  font-size: var(--t-sm);
  font-weight: 800;
  color: var(--brand-ink);
}

.entry blockquote {
  margin: 0;
  padding: var(--s-5) var(--s-6);
  border-inline-start: 3px solid var(--brand);
  border-radius: var(--r-md);
  background: var(--paper-2);
  font-size: var(--t-lead);
  color: var(--ink);
}
.entry blockquote p + p { margin-top: var(--s-4); }

.entry :is(img, figure) { border-radius: var(--r-lg); overflow: hidden; }
.entry figure img { width: 100%; }
.entry figcaption { margin-top: var(--s-3); font-size: var(--t-sm); color: var(--muted); text-align: center; }

/* טבלאות גולשות בתוך עצמן — הגוף לעולם לא נגלל לרוחב */
.entry :is(table) { display: block; width: 100%; overflow-x: auto; border-collapse: collapse; font-size: var(--t-sm); }
.entry :is(th, td) { padding: var(--s-3) var(--s-4); border-bottom: 1px solid var(--line-2); text-align: start; }
.entry th { font-family: var(--font-display); font-weight: 700; color: var(--ink); background: var(--paper-2); }

.entry hr { margin-block: var(--s-7); border: 0; border-top: 1px solid var(--line); }

.entry__hero {
  margin: 0 0 var(--s-7);
  border-radius: var(--r-xl);
  overflow: hidden;
  box-shadow: var(--shadow-2);
}
.entry__hero img { width: 100%; }

.entry__pages { margin-top: var(--s-6); font-size: var(--t-sm); }

/* --------------------------------------------------------------------------
   3c. Blog — רשימת מאמרים וניווט בין פוסטים
   -------------------------------------------------------------------------- */
.posts {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(320px, 100%), 1fr));
  gap: var(--s-5);
}

.postcard {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--line-2);
  border-radius: var(--r-lg);
  background: #fff;
  overflow: hidden;
  transition: transform .35s var(--ease), box-shadow .35s, border-color .35s;
}
.postcard:hover { transform: translateY(-6px); box-shadow: var(--shadow-2); border-color: transparent; }

.postcard__media {
  display: block;
  aspect-ratio: 16 / 10;     /* משריין מקום — אפס CLS גם לפני טעינת התמונה */
  overflow: hidden;
  background: var(--paper-3);
}
.postcard__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s var(--ease); }
.postcard:hover .postcard__media img { transform: scale(1.06); }

/* אין תמונה ראשית — בלוק מותג במקום תג <img> שבור */
.postcard__placeholder {
  display: block;
  width: 100%; height: 100%;
  background: linear-gradient(140deg, var(--ink-3), var(--ink));
}

.postcard__body { display: flex; flex-direction: column; flex: 1; padding: var(--s-5); }
.postcard__meta {
  margin-bottom: var(--s-2);
  font-size: var(--t-xs);
  letter-spacing: var(--tr-caps);
  text-transform: uppercase;
  color: var(--brand-ink);
}
.postcard__title { margin-bottom: var(--s-3); font-size: 1.1875rem; line-height: 1.35; }
.postcard__title a { color: var(--ink); text-decoration: none; }
.postcard__title a:hover { color: var(--brand-ink); }
.postcard__excerpt { font-size: var(--t-sm); color: var(--muted); line-height: 1.7; }
.postcard .package__link { margin-top: auto; padding-top: var(--s-4); }
.postcard:hover .package__link svg { transform: translateX(-5px); }

/* עימוד */
.pagination { margin-top: var(--s-8); }
.pagination .nav-links { display: flex; flex-wrap: wrap; gap: var(--s-2); justify-content: center; }
.pagination .page-numbers {
  display: grid; place-items: center;
  min-width: 44px; height: 44px;
  padding-inline: var(--s-3);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  font-weight: 600;
  color: var(--ink);
  text-decoration: none;
  transition: background-color .25s, border-color .25s, color .25s;
}
.pagination .page-numbers:hover { background: var(--paper-2); border-color: var(--brand); color: var(--brand-ink); }
.pagination .page-numbers.current { background: var(--brand); border-color: var(--brand); color: var(--ink); }

/* ניווט קודם/הבא בפוסט */
.postnav__heading {
  font-size: var(--t-h3);
  letter-spacing: var(--tr-h3);
  margin-top: var(--s-8);
  padding-top: var(--s-6);
  border-top: 1px solid var(--line-2);
}
/* כשיש כותרת, הקו העליון שייך לה ולא לניווט — אחרת מתקבלים שני קווים. */
.postnav__heading + .postnav {
  margin-top: var(--s-4);
  padding-top: 0;
  border-top: 0;
}
.postnav {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
  gap: var(--s-3);
  margin-top: var(--s-8);
  padding-top: var(--s-6);
  border-top: 1px solid var(--line-2);
}

/* H1 שמוזרק מעל תוכן Elementor בעמודים הבודדים שאין להם H1 משלהם */
.passthrough__h1 {
  width: 100%;
  max-width: var(--maxw);
  margin: var(--s-8) auto var(--s-2);
  padding-inline: var(--gutter);
  font-size: var(--t-h2);
  letter-spacing: var(--tr-h2);
}
.postnav__link {
  display: grid; gap: var(--s-1);
  padding: var(--s-5);
  border: 1px solid var(--line-2);
  border-radius: var(--r-md);
  text-decoration: none;
  transition: background-color .25s, border-color .25s, transform .3s var(--ease);
}
.postnav__link:hover { background: var(--paper-2); border-color: var(--brand); transform: translateY(-3px); }
.postnav__dir {
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: var(--tr-caps);
  text-transform: uppercase;
  color: var(--brand-ink);
}
.postnav__title { font-weight: 700; color: var(--ink); line-height: 1.4; }

/* --------------------------------------------------------------------------
   3d. Search form
   -------------------------------------------------------------------------- */
.searchform { max-width: 520px; margin-inline: auto; }
.searchform__row { display: flex; gap: var(--s-2); }
.searchform input[type="search"] {
  flex: 1;
  min-width: 0;
  padding: .95rem 1.05rem;
  border: 1.5px solid var(--line);
  border-radius: var(--r-md);
  background: var(--paper-2);
  font: inherit;
  color: var(--ink);
  transition: border-color .25s, background-color .25s, box-shadow .25s;
}
.searchform input[type="search"]:focus {
  outline: none;
  border-color: var(--brand);
  background: #fff;
  box-shadow: 0 0 0 4px rgba(255,90,31,.15);
}

/* --------------------------------------------------------------------------
   4. Coverage — רשימת אזורי הפעילות
   -------------------------------------------------------------------------- */
.coverage {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
}
.coverage li {
  padding: .45rem 1rem;
  border: 1px solid var(--line-dark);
  border-radius: var(--r-pill);
  font-size: var(--t-sm);
  color: #c5c5d0;
  transition: background-color .25s, border-color .25s, color .25s;
}
.coverage li:hover { background: rgba(255,90,31,.14); border-color: var(--brand); color: #fff; }

/* ==========================================================================
   26. איחוד עיצובי לעמודי Elementor
   ==========================================================================
   12 עמודי "סוגי אימונים" נשארו בנויים ב-Elementor. ההדר והפוטר שלהם הם
   של הערכה החדשה, אבל כל מה שביניהם נראה כמו אתר אחר לגמרי. מדידה של 13
   העמודים החזירה: 3 משפחות גופנים, 15 גדלי כותרת שונים (20px עד 120px)
   ו-10 צבעי כותרת שונים.

   הבלוק הזה מאחד גופן, סולם גדלים, תמונות וטפסים — בלי לגעת בתוכן, בתגיות
   או בכתובות. ה-!important הכרחי: Elementor מזריק CSS לכל אלמנט בנפרד
   דרך post-<id>.css בסלקטורים בעלי ספציפיות גבוהה.

   הצבע מטופל בנפרד, לפי מחלקה ש-main.js מוסיף (im-on-dark/im-on-light),
   כי חלק מהכותרות יושבות על תמונת רקע כהה — ראו הערה 8 ב-main.js.
   -------------------------------------------------------------------------- */

.elementor-passthrough h1,
.elementor-passthrough h2,
.elementor-passthrough h3,
.elementor-passthrough h4,
.elementor-passthrough h5,
.elementor-passthrough h6 {
  font-family: var(--font-display) !important;
  text-wrap: balance;
}
.elementor-passthrough h1 { font-size: var(--t-hero) !important; font-weight: 900 !important; letter-spacing: var(--tr-hero) !important; line-height: 1.02 !important; }
.elementor-passthrough h2 { font-size: var(--t-h2)   !important; font-weight: 800 !important; letter-spacing: var(--tr-h2)   !important; line-height: 1.14 !important; }
.elementor-passthrough h3 { font-size: var(--t-h3)   !important; font-weight: 800 !important; letter-spacing: var(--tr-h3)   !important; line-height: 1.2  !important; }
.elementor-passthrough h4,
.elementor-passthrough h5,
.elementor-passthrough h6 { font-size: 1.0625rem !important; font-weight: 700 !important; letter-spacing: var(--tr-h3) !important; }

/* צבע — רק אחרי ש-main.js קבע על איזה רקע הכותרת יושבת. */
.elementor-passthrough h1.im-on-light,
.elementor-passthrough h2.im-on-light,
.elementor-passthrough h3.im-on-light,
.elementor-passthrough h4.im-on-light { color: var(--ink) !important; }
.elementor-passthrough h1.im-on-dark,
.elementor-passthrough h2.im-on-dark,
.elementor-passthrough h3.im-on-dark,
.elementor-passthrough h4.im-on-dark { color: #fff !important; }

/* גוף הטקסט: גופן וקצב אחידים. הגודל נשאר של Elementor — שינוי גורף שלו
   מזיז פריסות שנבנו ידנית ומייצר גלישות. */
.elementor-passthrough .elementor-widget-text-editor,
.elementor-passthrough .elementor-widget-text-editor p,
.elementor-passthrough .elementor-widget-text-editor li {
  font-family: var(--font-body) !important;
  line-height: 1.75 !important;
}

/* תמונות: פינות ועומק אחידים, ואף פעם לא רחבות מהמיכל. */
.elementor-passthrough .elementor-widget-image img {
  max-width: 100%;
  height: auto;
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-2);
}

/* טופס Elementor — היה שדות שקופים עם מסגרת תכלת וכפתור אפור.
   מקבל בדיוק את מראה .field ו-.btn--primary של הערכה. */
.elementor-passthrough .elementor-field-textual {
  width: 100% !important;
  padding: .95rem 1.05rem !important;
  border: 1.5px solid var(--line) !important;
  border-radius: var(--r-md) !important;
  background: var(--paper-2) !important;
  font-family: var(--font-body) !important;
  font-size: var(--t-body) !important;
  color: var(--ink) !important;
  height: auto !important;
  transition: border-color .25s, background-color .25s, box-shadow .25s;
}
.elementor-passthrough .elementor-field-textual::placeholder { color: #85858f !important; }
.elementor-passthrough .elementor-field-textual:focus {
  outline: none !important;
  border-color: var(--brand) !important;
  background: #fff !important;
  box-shadow: 0 0 0 4px rgba(255,90,31,.15) !important;
}
.elementor-passthrough .elementor-field-label {
  font-family: var(--font-display) !important;
  font-weight: 700 !important;
  color: var(--ink) !important;
}
.elementor-passthrough .elementor-button,
.elementor-passthrough button[type="submit"] {
  padding: .95rem 1.9rem !important;
  border: 2px solid transparent !important;
  border-radius: var(--r-pill) !important;
  background: var(--brand) !important;
  color: var(--ink) !important;
  font-family: var(--font-display) !important;
  font-size: var(--t-body) !important;
  font-weight: 700 !important;
  box-shadow: 0 8px 24px rgba(255,90,31,.36);
  transition: box-shadow .3s var(--ease), transform .3s var(--ease);
}
.elementor-passthrough .elementor-button:hover,
.elementor-passthrough button[type="submit"]:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 38px rgba(255,90,31,.5) !important;
}

/* --------------------------------------------------------------------------
   27. המלצות
   הסקשן מודפס רק כשיש עדויות בעברית — ראו testimonials.php.
   -------------------------------------------------------------------------- */
.quotes {
  display: grid;
  /* min() ולא 300px קבוע — אחרת עמודה של 300px נשארת 300px במסך 320 והגוף נגלל */
  grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
  gap: var(--s-4);
}

.quote {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: var(--s-6);
  padding-top: var(--s-8);
  border: 1px solid var(--line-2);
  border-radius: var(--r-lg);
  background: #fff;
  box-shadow: var(--shadow-1);
  transition: transform .35s var(--ease), box-shadow .35s, border-color .35s;
}
.quote:hover { transform: translateY(-5px); box-shadow: var(--shadow-2); border-color: transparent; }

/* גרש פתיחה דקורטיבי. aria מתעלם ממנו — הוא ::before ולא תוכן. */
.quote::before {
  content: "”";
  position: absolute;
  inset-block-start: .35rem;
  inset-inline-start: var(--s-6);
  font-family: var(--font-display);
  font-size: 4.5rem;
  font-weight: 900;
  line-height: 1;
  color: var(--brand);
  opacity: .22;
  pointer-events: none;
}

.quote__text {
  margin: 0 0 var(--s-5);
  font-size: var(--t-body);
  line-height: 1.75;
  color: var(--ink);
}

.quote__by {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--s-2);
  margin: auto 0 0;
  padding-top: var(--s-4);
  border-top: 1px solid var(--line-2);
}
.quote__name {
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--ink);
}
.quote__where { font-size: var(--t-sm); color: var(--muted); }

/* --------------------------------------------------------------------------
   28. המסגרת האחידה של עמודי "סוגי אימונים"
   -------------------------------------------------------------------------- */

/* פירורי לחם מעל תוכן Elementor. \u200E.crumbs הבסיסי נכתב לרקע הכהה של
   \u200E.pagehero — כאן הרקע בהיר, ולכן הצבעים נדרסים או שהטקסט אפור-על-לבן. */
.passthrough__crumbs {
  padding-block: var(--s-4);
  border-bottom: 1px solid var(--line-2);
  background: var(--paper-2);
}
.passthrough__crumbs .crumbs { margin-bottom: 0; color: var(--muted); }
.passthrough__crumbs .crumbs a { color: var(--brand-ink); }
.passthrough__crumbs .crumbs a:hover { color: var(--ink); }
.passthrough__crumbs .crumbs li + li::before { color: var(--muted); }
.passthrough__crumbs .crumbs [aria-current="page"] { color: var(--ink); font-weight: 600; }

/* כרטיסי "אולי יתאים לך גם" משתמשים ב-h3 ולא ב-h2: הם ניווט, לא סעיפי
   תוכן, ו-12 כותרות h2 בתחתית כל עמוד היו משטחות את היררכיית הכותרות. */
.package h3 { margin-bottom: var(--s-3); font-size: 1.1875rem; letter-spacing: var(--tr-h3); }

/* בעמודי Elementor הסיומת מגיעה מיד אחרי תוכן שלרוב נגמר בלי מרווח תחתון. */
.elementor-passthrough + .section,
.elementor-passthrough + .section--tint { margin-top: var(--s-8); }

/* ==========================================================================
   29. עמוד "מאמן כושר אישי לילדים"
   ==========================================================================
   תשע פסקאות ממוספרות שרצו כטקסט אחד הפכו לתשעה כרטיסים. המספר הוא
   ::before טיפוגרפי ולא תמונה, כדי שיישאר חד בכל רזולוציה ויתרגם לבד
   ל-RTL. שני צבעי המותג משמשים לפי תפקיד ולא לקישוט: כתום = פעולה,
   תכלת = מידע.
   -------------------------------------------------------------------------- */

.kidgrid {
  display: grid;
  /* min() ולא 300px קבוע — אחרת העמודה נשארת 300px גם במסך 320 והגוף נגלל */
  grid-template-columns: repeat(auto-fit, minmax(min(290px, 100%), 1fr));
  gap: var(--s-4);
  counter-reset: kid;
}
.kidgrid--two { grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)); margin-top: var(--s-6); }

.kidcard {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: var(--s-6);
  padding-top: var(--s-7);
  border: 1px solid var(--line-2);
  border-radius: var(--r-lg);
  background: #fff;
  box-shadow: var(--shadow-1);
  overflow: hidden;
  isolation: isolate;
  transition: transform .35s var(--ease), box-shadow .35s, border-color .35s;
}
.kidcard:hover { transform: translateY(-5px); box-shadow: var(--shadow-2); border-color: transparent; }

/* פס הצבע העליון — כתום ותכלת לסירוגין, כדי שהרשת לא תיקרא מונוטונית */
.kidcard::before {
  content: "";
  position: absolute; inset-block-start: 0; inset-inline: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--brand), var(--blue));
  transform: scaleX(0);
  transform-origin: inline-start;
  transition: transform .45s var(--ease);
}
.kidcard:hover::before { transform: scaleX(1); }

.kidcard__num {
  display: grid; place-items: center;
  width: 42px; height: 42px;
  margin-bottom: var(--s-4);
  border-radius: var(--r-sm);
  background: var(--blue-soft);
  color: var(--blue-ink);
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 900;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  transition: background-color .3s, color .3s, transform .4s var(--ease);
}
.kidcard:hover .kidcard__num { background: var(--brand); color: var(--ink); transform: rotate(-6deg); }

.kidcard h3 { margin-bottom: var(--s-3); font-size: 1.125rem; letter-spacing: var(--tr-h3); }
.kidcard p  { font-size: var(--t-sm); color: var(--muted); line-height: 1.75; }

/* --- פסי ה-CTA -------------------------------------------------------------
   .ctaband הבסיסי כהה עם הילה כתומה. שני המודיפיירים משנים את ההילה
   ואת צבע המסגרת, כך ששלושת הפסים בעמוד לא נראים כמו אותו פס שחוזר. */
.ctaband--brand::before { background: radial-gradient(circle, rgba(255,106,0,.40), transparent 66%); }
.ctaband--blue::before  { background: radial-gradient(circle, rgba(7,155,255,.38), transparent 66%); }
.ctaband--blue { background: linear-gradient(135deg, #06263f, var(--ink) 62%); }

/* בפס של עמודי הפנים יש כותרת + טקסט מצד אחד וכפתור מהצד השני, ובנייד זה נערם.
 *
 * חובה לסייג ל-:not(.wrap). הכלל הזה היה גורף, והוא נטען אחרי style.css — כך
 * שהוא דרס את `justify-items:center; text-align:center` של הפס בעמוד הבית.
 * לפס בעמוד הבית יש *ארבעה* ילדים (eyebrow, h2, טלפון, כפתור), לא שניים, אז
 * שתי העמודות פרסו אותם כ-2×2: כותרת-משנה מימין למעלה, H2 משמאל, טלפון מימין
 * באמצע, כפתור משמאל. נראה כאילו שום דבר לא מיושר — כי באמת לא.
 *
 * מתחת ל-780px הכלל חזר לעמודה אחת ממורכזת, ולכן זה נראה תקין בנייד ושבור רק
 * בדסקטופ. נמדד חי ב-2026-09-03: grid-template-columns חושב 597.5px 554.5px.
 *
 * ההבחנה היא אמיתית ולא מקרית: בעמוד הבית ה-div נושא גם .wrap (הוא הרוחב
 * המלא של הסקשן), בעמודי הפנים הוא יושב כבר בתוך .wrap. */
.ctaband__inner:not(.wrap) {
  grid-template-columns: 1fr auto;
  align-items: center;
  justify-items: start;
  text-align: start;
  gap: var(--s-6);
}
.ctaband__inner:not(.wrap) > a { justify-self: end; }
@media (max-width: 780px) {
  .ctaband__inner:not(.wrap) { grid-template-columns: 1fr; justify-items: center; text-align: center; }
  .ctaband__inner:not(.wrap) > a { justify-self: center; }
  .ctaband p { margin-inline: auto; }
}

/* האקורדיון בעמוד הזה מכיל רשת כרטיסים, לא רק פסקאות */
.acc__body .kidgrid { margin-top: var(--s-5); }

/* --------------------------------------------------------------------------
   30. פריסת טקסט־ותמונה בעמוד הילדים
   -------------------------------------------------------------------------- */

/* שתי עמודות שנערמות בנייד. \u200E--flip הופך את הסדר, כדי ששתי פריסות עוקבות
   לא ייראו כמו אותה פריסה שחוזרת. */
.kidsplit {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
  gap: clamp(var(--s-5), 4vw, var(--s-8));
  align-items: center;
}
@media (min-width: 941px) {
  .kidsplit--flip > :first-child { order: 2; }
}

.kidsplit__media { margin: 0; }
.kidsplit__media img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-2);
}

/* התמונה השקופה (PNG על רקע חופשי) לא מקבלת מסגרת וצל — היא איור,
   לא צילום, וקופסה סביבה מסגירה את הרקע הריק. */
.kidsplit__media--art img {
  border-radius: 0;
  box-shadow: none;
  filter: drop-shadow(0 18px 34px rgba(8,8,10,.16));
}

/* רקעים רכים — גרסה בהירה של שני צבעי המותג, לפיסוק בין מקטעים לבנים */
.section--soft-blue  { background: var(--blue-soft); }
.section--soft-brand { background: var(--brand-soft); }

/* פסקה ראשונה במבוא — הצהרת הבידול. גדולה מגוף הטקסט, קטנה מכותרת. */
.prose--lead > p:first-of-type,
.prose .lead {
  font-size: var(--t-lead);
  color: var(--ink);
  font-weight: 500;
}

/* על רקע כהה הפסקה המובילה חייבת להתבהר, אחרת היא שחור-על-שחור.
   קרה בפועל ב-2026-09-04 בהירו של /מאמנת-כושר-אישית/: הכלל שמעל ניצח את
   .pagehero .prose (שצובע רק את המעטפת, לא את ה-p). טקסט שלא נראה הוא גם
   "טקסט מוסתר" בעיני גוגל — לא רק באג עיצובי. */
.pagehero .prose--lead > p:first-of-type,
.section--dark .prose--lead > p:first-of-type,
.ctaband .prose--lead > p:first-of-type,
.hero .prose--lead > p:first-of-type,
.pagehero .prose .lead,
.section--dark .prose .lead,
.ctaband .prose .lead,
.hero .prose .lead {
  color: #fff;
}

/* --------------------------------------------------------------------------
   31. עמוד "סוגי אימונים"
   -------------------------------------------------------------------------- */

/* תשע החבילות הן כותרות H2 מקוריות של העמוד ולכן הן נשארות H2, אבל בתוך
   כרטיס הן צריכות להיקרא כמו כותרת כרטיס ולא כמו כותרת מקטע. */
.kidcard h2 {
  margin-bottom: var(--s-3);
  font-size: 1.125rem;
  letter-spacing: var(--tr-h3);
  line-height: 1.25;
}
.kidcard .package__link { margin-top: auto; padding-top: var(--s-4); }

/* שתי הכותרות שהוספתי — בפס ה-CTA ובמקטע הפריסה — הן h3 בכוונה, כדי
   שקבוצת ה-H2 של העמוד תישאר בדיוק עשר הכותרות המקוריות. ויזואלית
   הן עדיין כותרות מקטע, ולכן הן מקבלות את גודל ה-h2. */
.ctaband h3,
.section--dark .section-head h3 {
  font-size: var(--t-h2);
  letter-spacing: var(--tr-h2);
  color: #fff;
}

/* הירו כהה־תכלת. \u200E.pagehero הבסיסי הוא ink אחיד עם הילה תכלת; המודיפייר
   מוסיף נטייה לכחול־נייבי, שהוא הצבע שנבחר לעמודים שמדברים אל ההורה. */
.pagehero--navy { background: linear-gradient(140deg, #06263f, var(--ink) 66%); }
.pagehero--navy .eyebrow { color: var(--blue); }

/* טקסט לקוראי מסך בלבד — וורדפרס מדפיסה את המחלקה בפגינציה של הבלוג
   (paginate_links → before_page_number) אבל לא מספקת לה כלל CSS בפרונט.
   בלי זה המילה "עמוד" הודפסה לפני כל מספר. */
.screen-reader-text {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%);
  white-space: nowrap; border: 0;
}

/* ═══════════════════════════════════════════════════════════════════════
   עמוד תודה — template-thanks.php
   הירו יורש את .pagehero--navy; כאן רק המרכוז, סימן ה-✓ המצויר ושלושת
   השלבים. הכרטיסים לא משתמשים ב-.step של עמוד הבית בכוונה — שם הספרה
   הרפאים נחתכת בקצה הכרטיס (ראו in-motion-open-thread), וכאן רוצים נקי.
   ═══════════════════════════════════════════════════════════════════════ */
.thanks-hero { text-align: center; }
.thanks-hero__inner { max-width: 760px; margin-inline: auto; }
.thanks-hero .eyebrow { justify-content: center; }
.thanks-hero .prose { margin-inline: auto; font-size: var(--t-lead); }
.thanks-hero .pagehero__actions { justify-content: center; }
.thanks-sign {
  margin-top: var(--s-5);
  color: var(--brand);
  font-weight: 700;
  font-size: var(--t-xs);
  letter-spacing: var(--tr-caps);
  text-transform: uppercase;
}

.thanks-check {
  width: 92px; height: 92px;
  margin: 0 auto var(--s-6);
  display: grid; place-items: center;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, rgba(255,106,0,.35), transparent 70%), rgba(255,255,255,.04);
  box-shadow: 0 0 0 1px var(--line-dark), var(--glow);
}
.thanks-check svg { width: 60px; height: 60px; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.thanks-check__ring { stroke: rgba(255,255,255,.22); stroke-width: 2; }
.thanks-check__mark {
  stroke: var(--brand); stroke-width: 4;
  stroke-dasharray: 40; stroke-dashoffset: 40;
  animation: thanks-draw .8s var(--ease-out) .35s forwards;
}
@keyframes thanks-draw { to { stroke-dashoffset: 0; } }

.thanks-steps {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-5);
}
.thanks-step {
  position: relative;
  padding: var(--s-6) var(--s-5) var(--s-5);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--paper);
  transition: transform .5s var(--ease), box-shadow .5s var(--ease), border-color .3s;
}
.thanks-step:hover { transform: translateY(-4px); box-shadow: var(--shadow-2); border-color: transparent; }
.thanks-step__num {
  display: inline-grid; place-items: center;
  width: 40px; height: 40px;
  margin-bottom: var(--s-4);
  border-radius: 50%;
  background: var(--brand); color: var(--ink);
  font-weight: 800; font-variant-numeric: tabular-nums;
}
.thanks-step h3 { margin-bottom: var(--s-2); font-size: 1.1875rem; }
.thanks-step p { font-size: var(--t-sm); color: var(--muted); line-height: 1.75; }

@media (max-width: 860px) { .thanks-steps { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .thanks-check__mark { animation: none; stroke-dashoffset: 0; } }