/* ============================================================
   home.css — דף הבית: נוף הכותרת, כרטיסי המסע ופס החול
   ------------------------------------------------------------
   הצבעים כולם מגיעים מ-tokens.css. כאן נקבע רק המבנה.
   ============================================================ */

/* ---------- סדר הכותרת העליונה ----------
   הכותרת יורשת את כיוון הדף, ימין־לשמאל, ופשוט מסתדרת לפי סדר ה-DOM:
   שם האתר, דף הבית, שלום תלמיד/ה, התקדמות שלי, ארגז הכלים, מבחן סיום.
   אין כאן direction הפוך, אין row-reverse ואין order, ולכן הסדר על
   המסך, סדר הקריאה וסדר מקש Tab הם אותו סדר אחד בדיוק. */
/* שם האתר נשאר בקצה הימני והניווט נפרש אל הקצה השני, כדי שהכותרת
   לא תיראה כקבוצה קטנה שצפה באמצע מסך רחב. הסדר עצמו אינו משתנה:
   שם האתר, דף הבית, הברכה, התקדמות שלי, ארגז הכלים, מבחן סיום. */
.site-header__inner { justify-content: space-between; }

/* במסך רחב מאוד נותנים לפריטי הניווט מעט יותר אוויר ביניהם */
@media (min-width: 1200px) {
  .site-nav { gap: var(--sp-2); }
  .nav-btn { padding-inline: var(--sp-4); }
}


/* ---------- ברכה בכותרת העליונה ----------
   ברכה, לא כפתור: בלי מסגרת, בלי רקע ובלי סמן עכבר של קישור.
   קו זהב דק מפריד בינה לבין פריטי הניווט. */
.site-hello {
  display: inline-flex;
  align-items: center;
  margin: 0;
  padding-inline: var(--sp-2) var(--sp-4);
  color: #C8B48A;
  font-size: var(--fs-xs);
  letter-spacing: .01em;
  white-space: nowrap;
  border-inline-end: 1px solid rgba(224, 163, 46, .28);
}

.site-hello__text { display: inline-block; }

/* ההתאמות למסך צר באות אחרי כללי הבסיס, אחרת הן מפסידות בקדימות */
@media (max-width: 860px) {
  /* בערימה הכותרת גבוהה: שם האתר, ברכה וארבעה פריטי ניווט. כותרת
     דביקה בגובה כזה מכסה חלק גדול מהמסך ונשארת שם, ובפעילות היא
     הסתירה את האיור עצמו עד שלא היה אפשר ללחוץ על קודקוד הראש.
     במסך צר היא נגללת יחד עם הדף. */
  .site-header { position: static; }

  .site-header__inner {
    flex-direction: column;
    align-items: stretch;
  }
  /* שם האתר כבר ראשון ב-DOM, ולכן אין צורך להזיז אותו */
  .site-nav { flex-direction: column; gap: 2px; }
  .site-nav .nav-btn { justify-content: flex-start; }
  /* בערימה המפריד הופך לקו אופקי מתחת לברכה */
  .site-hello {
    border-inline-end: 0;
    border-block-end: 1px solid rgba(224, 163, 46, .22);
    padding-block-end: var(--sp-2);
    padding-inline: var(--sp-2);
  }
  /* פירמידת הסימון עוברת לצד הפריט במקום מתחתיו */
  .site-nav .nav-btn[aria-current="page"]::after {
    inset-block-end: auto;
    inset-block-start: 50%;
    inset-inline-start: auto;
    inset-inline-end: var(--sp-2);
    translate: 0 -50%;
    rotate: 90deg;
  }
}

/* ============================================================
   הכותרת הגדולה: נוף מדבר מצויר, וטקסט אמיתי מעליו
   ============================================================ */
.hero {
  position: relative;
  isolation: isolate;
  border-radius: var(--r-lg);
  overflow: hidden;
  margin-block-end: var(--sp-6);
  box-shadow: var(--sh-2);
  /* הגובה נגזר מהרוחב, ולכן הנוף נחתך במקום להימתח */
  /* הגובה גדל עם הרוחב, כך שביחס רחב יותר הנוף נחתך פחות.
     object-fit: cover ממשיך לחתוך ולא למתוח. */
  min-block-size: clamp(320px, 30vw, 560px);
  display: grid;
  place-items: center;
  padding: var(--sp-7) var(--sp-5);
}

.hero__scene {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
}

/* object-fit: cover חותך את הנוף לפי המסגרת ואינו מעוות אותו.
   המוקד מעט מעל המרכז, כדי שהפירמידות יישארו בתמונה גם במסך נמוך. */
.hero__bg {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  object-position: 50% 42%;
  display: block;
}

/* דמות החוקר, חיתוך שקוף, יושבת בפינה ואינה מכסה את הכותרת */
.hero__explorer {
  position: absolute;
  z-index: 1;
  inset-block-end: -2%;
  /* הדמות שייכת לצד שמאל של הקומפוזיציה. בתיבה בכיוון ימין־לשמאל
     הצד השמאלי הוא inline-end. */
  inset-inline-end: var(--sp-3);
  z-index: 2;
  inline-size: clamp(120px, 15vw, 210px);
  block-size: auto;
  filter: drop-shadow(0 10px 18px rgba(24, 16, 4, .45));
  pointer-events: none;
}

/* שכבת כהות עדינה, כדי שהכותרת תישאר קריאה מעל הציור */
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    radial-gradient(58% 54% at 50% 48%, rgba(12, 21, 38, .58), rgba(12, 21, 38, 0) 74%),
    linear-gradient(180deg,
      rgba(12, 21, 38, .10) 0%,
      rgba(12, 21, 38, .26) 68%,
      rgba(12, 21, 38, .40) 100%);
}

.hero__body {
  position: relative;
  z-index: 3;
  text-align: center;
  max-inline-size: 30ch;
}

.hero__title {
  font-family: var(--font-display);
  font-size: clamp(2rem, 6vw, var(--fs-3xl));
  line-height: 1.1;
  margin: 0;
  color: var(--gold);
  text-shadow: 0 2px 0 var(--gold-deep), 0 6px 18px rgba(0, 0, 0, .45);
}

.hero__sub {
  margin-block: var(--sp-3) 0;
  font-size: var(--fs-md);
  font-weight: 700;
  color: #FFF7E6;
  text-shadow: 0 2px 10px rgba(0, 0, 0, .55);
}

.hero__meta {
  margin-block: var(--sp-2) 0;
  font-size: var(--fs-sm);
  color: #E4E9F1;
  text-shadow: 0 1px 8px rgba(0, 0, 0, .6);
}

/* פתק הפפירוס עם משפט העידוד */
.hero__note {
  position: absolute;
  z-index: 3;
  inset-block-start: var(--sp-4);
  inset-inline-start: var(--sp-4);
  max-inline-size: 16ch;
  margin: 0;
  padding: var(--sp-3) var(--sp-4);
  background: var(--papyrus);
  color: #6B4A15;
  border: 2px solid var(--papyrus-line);
  border-radius: 4px 14px 6px 12px;
  font-weight: 700;
  font-size: var(--fs-sm);
  line-height: 1.35;
  transform: rotate(-3deg);
  box-shadow: var(--sh-2);
}

@media (max-width: 720px) {
  .hero__note { position: static; transform: none; max-inline-size: none; margin-block-start: var(--sp-5); }
  /* מקום בראש הכותרת לסמל בית הספר שיושב בפינה, כדי שהכותרת
     הראשית לא תיגע בו */
  .hero { padding-block: calc(var(--sp-6) + 58px) var(--sp-6); }
}

/* ============================================================
   כותרת מקטע עם קו קישוט
   ============================================================ */
.section-head--ornate {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--sp-2);
}

.section-head--ornate .section-head__note { max-inline-size: 70ch; }

.section-head--ornate h2 {
  position: relative;
  display: inline-block;
  padding-inline: var(--sp-6);
}

.section-head--ornate h2::before,
.section-head--ornate h2::after {
  content: "◆";
  position: absolute;
  inset-block-start: 50%;
  transform: translateY(-50%);
  color: var(--gold);
  font-size: .7em;
}
.section-head--ornate h2::before { inset-inline-start: 0; }
.section-head--ornate h2::after  { inset-inline-end: 0; }

/* ============================================================
   כרטיסי היחידות
   ============================================================ */
.unit-grid {
  display: grid;
  /* שתי עמודות שוות ברוחב שולחן העבודה, עמודה אחת במסך צר */
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr));
  gap: var(--sp-5);
  margin-block-end: var(--sp-7);
}

@media (min-width: 900px) {
  .unit-grid { grid-template-columns: repeat(2, 1fr); }
}

.unit-card {
  position: relative;
  display: block;
  padding: 0 0 var(--sp-5);
  overflow: hidden;
  border-radius: var(--r-lg);
  border: 2px solid var(--line);
  background: var(--surface);
  color: var(--text);
  text-decoration: none;
  box-shadow: var(--sh-1);
  transition: transform var(--dur-2) var(--ease), box-shadow var(--dur-2) var(--ease);
}

.unit-card:hover { transform: translateY(-3px); box-shadow: var(--sh-3); }

/* פס הצבע של היחידה בראש הכרטיס */
.unit-card::before {
  content: "";
  position: absolute;
  inset-block-start: 0;
  inset-inline: 0;
  block-size: 6px;
  border-start-start-radius: var(--r-lg);
  border-start-end-radius: var(--r-lg);
}
.unit-card--1::before { background: var(--unit-1); }
.unit-card--2::before { background: var(--unit-2); }

.unit-card--1 { background: linear-gradient(180deg, var(--unit-1-wash), var(--surface) 62%); }
.unit-card--2 { background: linear-gradient(180deg, var(--unit-2-wash), var(--surface) 62%); }

/* עיגול מספר היחידה */
/* האיור יושב בראש הכרטיס ביחס גובה־רוחב קבוע, ונחתך ולא נמתח */
.unit-card__art {
  position: relative;
  display: block;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--sand-deep);
}

.unit-card__img {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  object-position: 50% 45%;
  display: block;
}

/* מעבר רך מהאיור אל הטקסט שמתחתיו */
.unit-card__art::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  inset-block-end: 0;
  block-size: 38%;
  background: linear-gradient(180deg, transparent, var(--surface));
  pointer-events: none;
}
.unit-card--1 .unit-card__art::after { background: linear-gradient(180deg, transparent, var(--unit-1-wash)); }
.unit-card--2 .unit-card__art::after { background: linear-gradient(180deg, transparent, var(--unit-2-wash)); }

.unit-card__badge {
  position: absolute;
  z-index: 2;
  inset-block-start: var(--sp-4);
  inset-inline-end: var(--sp-4);
  inline-size: 62px;
  block-size: 62px;
  border-radius: 50%;
  display: grid;
  place-content: center;
  text-align: center;
  color: #fff;
  line-height: 1.05;
  box-shadow: var(--sh-2);
}
.unit-card--1 .unit-card__badge { background: var(--unit-1); }
.unit-card--2 .unit-card__badge { background: var(--unit-2); }

.unit-card__badge-word { display: block; font-size: 11px; font-weight: 500; }
.unit-card__badge-num  { display: block; font-size: 22px; font-weight: 700; font-family: var(--font-display); }

.unit-card__body { padding: var(--sp-5) var(--sp-5) 0; }

.unit-card__title {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--fs-xl);
  line-height: 1.15;
}
.unit-card--1 .unit-card__title { color: var(--unit-1-deep); }
.unit-card--2 .unit-card__title { color: var(--unit-2-deep); }

.unit-card__count {
  margin-block: var(--sp-1) var(--sp-3);
  font-weight: 700;
  color: var(--text-muted);
  font-size: var(--fs-sm);
}

.unit-card__desc {
  margin: 0;
  color: var(--text);
  line-height: var(--lh-body);
  /* הכרטיס רחב, אבל שורת טקסט ארוכה מדי קשה לקריאה */
  max-inline-size: 58ch;
  /* הטקסט יוצא מתחת לעיגול אחרי שתי שורות */
  padding-inline-end: 0;
}



.unit-card__done {
  margin-block: var(--sp-4) var(--sp-2);
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--text-muted);
}

/* ---------- נקודות ההתקדמות ---------- */
.dots {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-block-end: var(--sp-4);
}

.dots__dot {
  inline-size: 13px;
  block-size: 13px;
  border-radius: 50%;
  background: var(--line);
  border: 1px solid var(--line-strong);
}

.unit-card--1 .dots__dot--on { background: var(--unit-1); border-color: var(--unit-1-deep); }
.unit-card--2 .dots__dot--on { background: var(--unit-2); border-color: var(--unit-2-deep); }

@media (max-width: 560px) {
  .unit-card__badge { inline-size: 52px; block-size: 52px; }
  .unit-card__badge-num { font-size: 19px; }
}

/* ============================================================
   שלוש הכניסות הנוספות
   ============================================================ */
.mini-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr));
  gap: var(--sp-5);
  margin-block-end: var(--sp-6);
}

@media (min-width: 900px) {
  .mini-grid { grid-template-columns: repeat(3, 1fr); }
}

.mini-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--sp-2);
  padding: var(--sp-5) var(--sp-4);
  border-radius: var(--r-md);
  border: 2px solid var(--line);
  background: var(--surface);
  color: var(--text);
  text-decoration: none;
  box-shadow: var(--sh-1);
  transition: transform var(--dur-2) var(--ease), box-shadow var(--dur-2) var(--ease);
}

.mini-card:hover { transform: translateY(-3px); box-shadow: var(--sh-2); }

/* איור הכרטיס הקטן שקוף, ולכן הוא מוצג במלואו ולא נחתך */
.mini-card__art {
  display: block;
  inline-size: clamp(96px, 26%, 132px);
  aspect-ratio: 1 / 1;
}

.mini-card__img {
  inline-size: 100%;
  block-size: 100%;
  object-fit: contain;
  display: block;
  filter: drop-shadow(0 6px 10px rgba(24, 16, 4, .18));
}

.mini-card__title {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--fs-lg);
}

.mini-card__desc {
  margin: 0;
  font-size: var(--fs-sm);
  color: var(--text-muted);
  line-height: var(--lh-body);
  flex: 1 1 auto;
}

.mini-card__btn { margin-block-start: var(--sp-2); min-inline-size: 120px; }

.mini-card__btn--unit-1 { color: var(--unit-1-deep); border-color: var(--unit-1); }
.mini-card__btn--unit-2 { color: var(--unit-2-deep); border-color: var(--unit-2); }
.mini-card__btn--gold   { color: var(--gold-deep);   border-color: var(--gold); }

/* ============================================================
   פס החול עם משפט הסיום
   ============================================================ */
.sand-band {
  position: relative;
  margin: 0;
  border-radius: var(--r-md);
  overflow: hidden;
  border: 2px solid var(--stone-shade);
  /* רצועת הפפירוס נפרשת לרוחב ונחתכת בגובה. היא רקע בלבד, והמשפט
     עצמו הוא טקסט אמיתי מעליה. */
  background-image: url("../img/band-parchment.webp");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  min-block-size: 108px;
  display: grid;
  place-items: center;
}

.sand-band__text {
  margin: 0;
  max-inline-size: 70ch;
  padding: var(--sp-5) var(--sp-5);
  text-align: center;
  color: #5A3E16;
  font-weight: 700;
  font-size: var(--fs-md);
  text-shadow: 0 1px 0 rgba(255, 255, 255, .55);
}

/* במסך צר הרצועה נשארת קריאה: פחות חיתוך, יותר מקום לטקסט */
@media (max-width: 560px) {
  .sand-band { background-size: auto 100%; min-block-size: 96px; }
  .sand-band__text { font-size: var(--fs-base); }
}

/* ============================================================
   מסך הסיום של יחידה
   ============================================================ */
.celebrate {
  position: relative;
  overflow: hidden;
  text-align: center;
  padding: var(--sp-6) var(--sp-5) var(--sp-5);
  margin-block: var(--sp-5);
  border-radius: var(--r-lg);
  border: 2px solid var(--gold);
  background: linear-gradient(180deg, var(--gold-wash), var(--surface) 70%);
  box-shadow: var(--sh-2);
}

.celebrate__pyramid {
  inline-size: min(300px, 100%);
  block-size: auto;
  display: block;
  margin-inline: auto;
}

/* כל נדבך עולה למקומו מלמטה */
.celebrate__layer {
  opacity: 0;
  transform: translateY(14px);
  transform-origin: center bottom;
  animation: cel-layer .42s var(--ease) forwards;
}

@keyframes cel-layer {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}

.celebrate__cap {
  opacity: 0;
  animation: cel-cap .5s var(--ease) forwards;
}

@keyframes cel-cap {
  0%   { opacity: 0; }
  60%  { opacity: 1; }
  100% { opacity: 1; }
}

/* הפסגה נדלקת ואז נושמת בשקט */
.celebrate__halo {
  opacity: 0;
  animation: cel-halo .7s var(--ease) forwards, cel-breathe 2.6s var(--ease) 1.4s infinite;
}

@keyframes cel-halo { from { opacity: 0; } to { opacity: 1; } }
@keyframes cel-breathe {
  0%, 100% { opacity: .75; }
  50%      { opacity: 1; }
}

.celebrate__title {
  margin-block: var(--sp-4) 0;
  font-family: var(--font-display);
  font-size: var(--fs-2xl);
  color: var(--gold-deep);
}

.celebrate__unit {
  margin-block: var(--sp-2) 0;
  font-weight: 700;
  font-size: var(--fs-md);
}

.celebrate__note {
  margin-block: var(--sp-2) var(--sp-5);
  color: var(--text-muted);
}

.celebrate__btn { min-inline-size: 240px; }

/* ---------- קונפטי ---------- */
.confetti {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
}

.confetti__bit {
  position: absolute;
  inset-block-start: -14px;
  inline-size: 9px;
  block-size: 14px;
  border-radius: 2px;
  animation: cel-fall 2.4s var(--ease) forwards;
}

@keyframes cel-fall {
  0%   { transform: translateY(0)    rotate(0deg);   opacity: 1; }
  100% { transform: translateY(420px) rotate(420deg); opacity: 0; }
}

/* ---------- ללא תנועה ---------- */
.celebrate--still .celebrate__layer,
.celebrate--still .celebrate__cap,
.celebrate--still .celebrate__halo {
  opacity: 1;
  transform: none;
  animation: none;
}

@media (prefers-reduced-motion: reduce) {
  .celebrate__layer,
  .celebrate__cap,
  .celebrate__halo,
  .confetti__bit {
    animation: none;
    opacity: 1;
    transform: none;
  }
  .confetti { display: none; }
}

/* כפתור ההמשך בראש עמוד היחידה */
.unit-onward-row {
  display: flex;
  justify-content: center;
  margin-block-end: var(--sp-5);
}

.unit-onward { min-inline-size: min(360px, 100%); }

/* ---------- סמל בית הספר ----------
   יושב בפינה השמאלית העליונה של הכותרת הגדולה, מול פתק הפפירוס
   שמימין. הפינה הזאת ריקה באיור, ולכן הסמל אינו מסתיר דבר.
   במסך צר הוא עובר לשורה משלו מתחת לכותרת. */
.hero__logo {
  position: absolute;
  z-index: 3;
  inset-block-start: var(--sp-4);
  /* בתיבה בכיוון ימין־לשמאל, inline-end הוא הצד השמאלי */
  inset-inline-end: var(--sp-4);
  inline-size: clamp(74px, 8vw, 104px);
  block-size: auto;
  filter: drop-shadow(0 4px 12px rgba(24, 16, 4, .45));
}

/* במסך צר הוא נשאר בפינה, קטן יותר. הפינה הזאת היא שמיים בלבד,
   ולכן הוא אינו מתנגש בדמות החוקר שבתחתית. */
@media (max-width: 720px) {
  .hero__logo {
    inset-block-start: var(--sp-3);
    inset-inline-end: var(--sp-3);
    inline-size: 66px;
  }
}