/* ============================================================
   קונספט ב׳ — «רקמה»
   השראה: newchildrenshospital.ie — אתר של בית חולים בהקמה,
   עורכי, אנושי, הרבה אוויר.
   רקע חול/שמנת, כרטיסים בצורת עלי הכותרת של הסמל, טורקיז מוביל.
   ============================================================ */

/* ---------- גיבור ---------- */
.rikma-hero { padding-block: var(--sp-8) var(--sp-7); }
@media (min-width: 900px) { .rikma-hero { padding-block: var(--sp-9) var(--sp-8); } }
.rikma-hero__grid { display: grid; gap: var(--sp-6); align-items: center; }
@media (min-width: 900px) { .rikma-hero__grid { grid-template-columns: 1.08fr .92fr; gap: var(--sp-8); } }
.rikma-hero h1 { font-size: var(--step-4); line-height: 1.08; letter-spacing: -.03em; max-width: 15ch; }
.rikma-hero__lead { font-size: var(--step-1); color: var(--text-soft); max-width: 44ch; margin-bottom: var(--sp-5); }
.rikma-hero__cta { display: flex; flex-wrap: wrap; gap: var(--sp-3); }

/* עלה כותרת — הצורה מהסמל של הלוגו, כמסגרת לתמונה.
   נעשה עם mask ולא עם clip-path: path() — path() משתמש בפיקסלים
   מוחלטים ואינו נמתח עם האלמנט, כך שהצורה יצאה בגודל 100px בלבד. */
.petal {
  position: relative; aspect-ratio: 1/1; width: 100%;
  background: linear-gradient(155deg, var(--pn-blue) 0%, var(--pn-teal) 52%, var(--pn-sand) 100%);
  display: grid; place-items: center; text-align: center; padding: 15%;
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><path d='M50 2c8 0 14 5 17 12 2 5 6 8 11 8 8 0 15 3 19 10 4 7 3 15-1 21-3 4-3 9 0 13 4 6 5 14 1 21-4 7-11 10-19 10-5 0-9 3-11 8-3 7-9 12-17 12s-14-5-17-12c-2-5-6-8-11-8-8 0-15-3-19-10-4-7-3-15 1-21 3-4 3-9 0-13-4-6-5-14-1-21 4-7 11-10 19-10 5 0 9-3 11-8C36 7 42 2 50 2z' fill='black'/></svg>");
          mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><path d='M50 2c8 0 14 5 17 12 2 5 6 8 11 8 8 0 15 3 19 10 4 7 3 15-1 21-3 4-3 9 0 13 4 6 5 14 1 21-4 7-11 10-19 10-5 0-9 3-11 8-3 7-9 12-17 12s-14-5-17-12c-2-5-6-8-11-8-8 0-15-3-19-10-4-7-3-15 1-21 3-4 3-9 0-13-4-6-5-14-1-21 4-7 11-10 19-10 5 0 9-3 11-8C36 7 42 2 50 2z' fill='black'/></svg>");
  -webkit-mask-size: 100% 100%;  mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;  mask-repeat: no-repeat;
  -webkit-mask-position: center;   mask-position: center;
}
@supports not ((mask-image: url("#a")) or (-webkit-mask-image: url("#a"))) {
  .petal { border-radius: 42% 58% 55% 45% / 50% 42% 58% 50%; }
}
.petal__note { color: #fff; font-weight: 700; font-size: var(--step--1); max-width: 20ch; text-shadow: 0 1px 6px rgba(0,0,0,.28); }

/* ---------- ערכי המותג ---------- */
.value-card {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: 26px 26px 26px 6px; padding: var(--sp-5);
  transition: transform .2s ease, box-shadow .2s ease;
}
.value-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
/* המשבצת נשאה גרדיאנט מסתובב לפי nth-child ואת עלה הכותרת מהסמל.
   מ-10/09/2026 היא נושאת אייקון שמתאר את המערך עצמו, לבקשת הלקוחה,
   ולכן הרקע אחיד: צבע מסתובב מתחת לאייקונים שונים קרא כרעש. */
.value-card__mark {
  inline-size: 42px; block-size: 42px; border-radius: 14px 14px 14px 4px;
  background: var(--pn-teal-100); color: var(--pn-teal);
  display: grid; place-items: center; flex: none;
  margin-bottom: var(--sp-4);
}
.value-card__mark svg { inline-size: 22px; block-size: 22px; }
.value-card h3 { font-size: var(--step-0); margin-bottom: .4rem; }
.value-card p { font-size: var(--step--1); color: var(--text-soft); }

/* ---------- מספרים בכרטיסים רכים ---------- */
.c-rikma .stat {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: 24px 24px 24px 6px; padding: var(--sp-5) var(--sp-4);
}
.c-rikma .stat__num { color: var(--pn-teal); font-size: var(--step-3); }

/* ---------- ציטוט ----------
   מיושר לאמצע ובכתב נטוי, לבקשת הלקוחה (10/09/2026).
   הגרסה הקודמת כאן הייתה פס צד ברוחב 24ch, והיא לא הייתה בשימוש באף עמוד. */
.rikma-quote { margin: 0; text-align: center; }
.rikma-quote__text {
  margin: 0;
  font-style: italic;
  font-size: var(--step-2); line-height: 1.5; font-weight: 600; color: #10313a;
  text-wrap: balance;
}
.rikma-quote__by {
  margin-block-start: var(--sp-4);
  font-size: var(--step--1); font-weight: 800; color: var(--pn-teal);
  letter-spacing: .02em;
}
/* קו קצר בצבע החול מפריד בין הציטוט לשם, במקום מקף */
.rikma-quote__by::before {
  content: ""; display: block; inline-size: 46px; block-size: 3px;
  margin: 0 auto var(--sp-4); border-radius: 2px; background: var(--pn-sand);
}

/* ---------- ספירה לאחור ---------- */
.cd {
  position: relative; background: #fff; border: 1px solid var(--line);
  border-radius: var(--r-xl); padding: var(--sp-6) var(--sp-5) var(--sp-5);
  overflow: hidden; box-shadow: var(--shadow-sm);
}
.cd__ribbon {
  position: absolute; inset-block-start: 26px; inset-inline-end: -58px;
  transform: rotate(45deg); background: var(--pn-ribbon); color: #fff;
  font-weight: 800; font-size: .8rem; letter-spacing: .04em;
  padding: .45rem 4.5rem; box-shadow: 0 6px 18px rgba(200,16,46,.28);
}
.cd__title { font-weight: 800; font-size: var(--step-1); margin-bottom: .35rem; color: #10313a; }
.cd__sub { color: var(--text-soft); font-size: var(--step--1); margin-bottom: var(--sp-5); }
.cd__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: .5rem; }
.cd__cell { background: var(--pn-teal-100); border: 1px solid #d5e6e3; border-radius: var(--r-md); padding: var(--sp-4) .3rem; text-align: center; }
.cd__num {
  display: block; font-size: clamp(1.4rem, 1rem + 2.2vw, 2.6rem); font-weight: 800;
  line-height: 1; color: var(--pn-teal-700); font-variant-numeric: tabular-nums; letter-spacing: -.02em;
}
.cd__unit { display: block; margin-top: .45rem; font-size: .78rem; font-weight: 600; color: var(--text-soft); }

/* ---------- ציר זמן אנכי רך ---------- */
.rikma-timeline { position: relative; padding-inline-start: var(--sp-6); }
.rikma-timeline::before {
  content: ""; position: absolute; inset-inline-start: 7px; inset-block: 8px 8px;
  inline-size: 2px; background: linear-gradient(180deg, var(--pn-teal), var(--pn-sand));
}
.rikma-step { position: relative; padding-block-end: var(--sp-5); }
.rikma-step::before {
  content: ""; position: absolute; inset-inline-start: calc(-1 * var(--sp-6) + 1px);
  inset-block-start: 8px; inline-size: 16px; block-size: 16px;
  border-radius: 42% 58% 55% 45% / 50% 42% 58% 50%;
  background: #fff; border: 3px solid var(--pn-teal);
}
.rikma-step[data-now="true"]::before { background: var(--pn-sand); border-color: var(--pn-sand); box-shadow: 0 0 0 6px rgba(252,186,107,.28); }
.rikma-step__year { font-weight: 800; font-size: var(--step-1); color: #10313a; line-height: 1.1; }
.rikma-step__text { color: var(--text-soft); margin-top: .3rem; }

/* ---------- תקשורת ---------- */
.press-row { display: grid; gap: var(--sp-3); }
@media (min-width: 700px) { .press-row { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); } }
.press-item {
  display: block; text-decoration: none; padding: var(--sp-4);
  border: 1px solid var(--line); border-radius: 20px 20px 20px 5px;
  background: #fff; color: var(--text);
}
.press-item:hover { border-color: var(--pn-teal); }
.press-item__outlet { font-weight: 800; color: var(--pn-teal); font-size: var(--step--1); }
.press-item__title { display: block; margin-top: .35rem; font-weight: 600; line-height: 1.4; }

/* הסרט האדום היה 163×163 על כרטיס ברוחב 372 — כמעט חמישית מהכרטיס,
   הזנב נחת על אריח «שניות» והטקסט המסובב לא נקרא. הוקטן ומוקם מחדש. */
.cd__ribbon {
  inset-block-start: 18px; inset-inline-end: -46px;
  padding: .3rem 3.2rem; font-size: .72rem; letter-spacing: .02em;
}
@media (max-width: 520px) {
  .cd__ribbon { inset-block-start: 14px; inset-inline-end: -52px; padding: .26rem 3.4rem; font-size: .66rem; }
}

/* מסגרות השדות כמעט לא נראו על הכרטיס הקרם */
.c-rikma .field input, .c-rikma .field textarea, .c-rikma .field select {
  border-color: #cdbba4;
}

/* הסרט האדום — רצועה ברוחב קבוע שהכרטיס חותך משני צדדיה. בלי צל שדולף החוצה. */
.cd { overflow: hidden; }
.cd__ribbon {
  inset-block-start: 26px; inset-inline-end: -62px;
  inline-size: 210px; padding: .32rem 0; text-align: center;
  font-size: .74rem; letter-spacing: .03em; box-shadow: none;
}
@media (max-width: 520px) {
  .cd__ribbon { inset-block-start: 20px; inset-inline-end: -66px; inline-size: 200px; font-size: .68rem; }
}

/* הדמיה בתוך צורת עלה הכותרת */
.petal img { inline-size: 100%; block-size: 100%; object-fit: cover; display: block; }
.petal--photo { padding: 0; }


/* ============================================================
   ספירה לאחור — ריבוע צף שמקובע בגלילה, בצבעי הלוגו.
   (בקשת עדן 10/09/2026: «עדיין מקובע בגלילה, פשוט כריבוע/מלבן ולא
   לאורך כל התחתית». הצבעים אושרו ולא שונו — נייבי/טורקיז/תכלת/חול,
   לפי הטיימר שדני עיצב.)

   הכל יושב בעמודה אחת בצד ימין (בקשת הבעלים 10/09), מלמטה למעלה:
   הספירה, מעליה עיגול המעטפה, ומעליו עיגול הנגישות הקטן. ב-RTL הצד
   הימני הוא inset-inline-START.

   ⚠️ שלושה אלמנטים צפים באותה עמודה חייבים להכיר את הגבהים אחד של
   השני, אחרת אחד יושב על השני — וכשזה כפתור הנגישות, התקלה לא מדווחת
   בשום מקום: הכפתור קיים ב-DOM, נראה תקין בבדיקה אוטומטית, ופשוט לא
   ניתן ללחיצה. מיקומי העמודה מרוכזים ב-base.css תחת «העמודה הימנית»,
   ונשלטים ב-data-cdsquare על <html> ולא ב-:has() — כלל שמזיז כפתור
   נגישות לא נשען על תמיכת סלקטור.
   ============================================================ */
.cd-square {
  position: fixed; z-index: 80;
  inset-block-end: 18px; inset-inline-start: 18px;   /* ב-RTL: הצד הימני */
  inline-size: min(286px, calc(100vw - 36px));
  background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: var(--sp-3) var(--sp-4) calc(var(--sp-3) - 2px);
  box-shadow: var(--shadow-lg);
}
.cd-square__title { font-weight: 800; font-size: var(--step--1); color: #10313a; margin: 0; line-height: 1.35; }
.cd-square__sub { color: var(--text-soft); font-size: .74rem; margin: .1rem 0 var(--sp-3); }
/* ימים בצד שמאל ואז שעות/דקות/שניות (בקשת הלקוחה): הרשת LTR, כך
   שסדר ה-DOM (ימים→שניות) נקרא משמאל לימין. הספרות עצמן ממילא LTR. */
.cd-square__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: .4rem; direction: ltr; }
.cd-square__cell { text-align: center; position: relative; }
.cd-square__cell:not(:last-child)::after {
  content: ""; position: absolute; inset-block: 6% 26%; inset-inline-start: -3%;
  inline-size: 1px; background: var(--line);
}
.cd-square__cell .cd__num {
  display: block; font-size: clamp(1.2rem, .95rem + .9vw, 1.5rem); font-weight: 800;
  line-height: 1; font-variant-numeric: tabular-nums; letter-spacing: -.02em;
}
.cd-square__cell:nth-child(1) .cd__num { color: var(--pn-navy); }
.cd-square__cell:nth-child(2) .cd__num { color: var(--pn-teal); }
.cd-square__cell:nth-child(3) .cd__num { color: var(--pn-blue); }
.cd-square__cell:nth-child(4) .cd__num { color: #d98f2b; }  /* חול כהה, שעובר ניגודיות על לבן */
.cd-square__unit { display: block; margin-top: .25rem; font-size: .62rem; font-weight: 700; letter-spacing: .03em; color: var(--text-soft); }

/* מסך נמוך (מובייל בלנדסקייפ, חלון קטן): הכרטיס מתכווץ במקום לכסות
   את התוכן. לא מוסתר — הלקוחה ביקשה שיהיה מקובע בגלילה. */
@media (max-height: 560px), (max-width: 420px) {
  .cd-square { inline-size: min(248px, calc(100vw - 24px)); inset-block-end: 12px; inset-inline-start: 12px; padding: var(--sp-3); }
  .cd-square__sub { display: none; }
}
@media print { .cd-square { display: none; } }