/* ============================================================================
   GroupiApp — card.css · רכיב כרטיס משותף (primitive, G4 גל 2 UX, 06.09.2026)
   ----------------------------------------------------------------------------
   הביקורת מצאה שכרטיסי הפיד/מפה/פרופיל אינם אחידים: radius נע 14/16/22px,
   padding 16/18/26–28px, shadow פעם --shadow ופעם --shadow-1. הקובץ הזה קובע
   *שפה אחת* לכרטיס — טוקני-רכיב (--card-*) הבנויים מהטוקנים הסמנטיים הקיימים
   ב-style.css (--bg-elev, --line, --line-strong, --radius, --shadow*), בלי
   להמציא גוון ובלי לשנות אף ערך טוקן קיים. הטוקנים מוגדרים פעם אחת על :root
   חשוף ומצביעים על טוקנים ש*כבר* מתהפכים לפי theme — ולכן הכרטיס נכון בבהיר
   ובכהה בלי שום בלוק media/[data-theme] נפרד (כלל CLAUDE/הפרויקט: אין צבע
   שמוגדר רק ב-media/[data-theme]).

   שימוש:  <article class="gapp-card">…</article>
           .gapp-card--interactive  כרטיס שלוחצים עליו (hover/press/focus)
           .gapp-card--flush        בלי padding, לכרטיס שמתחיל בתמונה (overflow חתוך)
           .gapp-card--accent       פס קטגוריה בצד ההתחלה (--cc, נופל ל---accent)
           .gapp-card--pad-lg       padding מוגדל ל"פאנל"/כרטיס-תוכן גדול

   אימוץ: כרטיסי הפיד (.act-card ב-style.css), המפה (.act-item ב-map.css)
   והפרופיל בנויים כיום כל אחד לעצמו. גל 2 חסום מלגעת ב-style.css/feed.css/my.js,
   ולכן זהו ה*מקור* האחיד; ההגירה של הכרטיסים הקיימים אליו היא טיקט המשך
   ל-ui-engineer (הערכים כאן נבחרו כך שתהיה drop-in: radius=16, border=--line,
   shadow=--shadow-1 — בדיוק כרטיס-הרשימה הנפוץ באתר).
   ============================================================================ */
:root{
  --card-bg:var(--surface-raised);
  --card-line:var(--line);
  --card-line-strong:var(--line-strong);
  --card-radius:var(--r-card);          /* 28px — «2xl» של ch07 §7.7, ההרשאה
                                            להרחיב אותו לכרטיס ניתנה שם בכתב */
  --card-pad:var(--sp-5);                /* מהסולם, לא ערך גולמי */
  --card-pad-lg:var(--sp-8);
  --card-gap:var(--sp-2);
  --card-shadow:var(--shadow);
  --card-shadow-raised:var(--shadow);
  /* פס הקטגוריה בצד ההתחלה יורד ל-0: בכיוון «כרזה צהובה» הקטלוג מובחן
     ב**תצלום ובתווית**, לא ב-13 גווני קטגוריה שמופיעים יחד ברשימה אחת —
     ch07 §7.11.1. הטוקן נשאר כשם כדי ש-`.gapp-card--accent` לא יישבר. */
  --card-accent-w:0px;
}

/* --- הפינה הא-סימטרית — ch07 §7.7 ---------------------------------------
   שלוש פינות ב-2xl 28, **פינה רביעית ב-0**. אפס הוא היעדר רדיוס ולא ערך
   חדש בסולם. נכתבות **אך ורק במאפייני פינה לוגיים**, כך שהפינה החדה עוברת
   מעצמה מ"שמאל-תחתון" ב-LTR ל"ימין-תחתון" ב-RTL — בלי :dir() ובלי כפילות.
   ⛔ `border-bottom-left-radius` בקוד המוצר הוא **באג**, לא קיצור דרך. */
.gapp-card,
.act-card,
.showcase-tile img,
.card,
.enemy,
.grid3 li,
.hero-cluster figure{
  border-start-start-radius:var(--r-card);
  border-start-end-radius:var(--r-card);
  border-end-end-radius:var(--r-card);
  border-end-start-radius:0;
}

.gapp-card{
  background:var(--card-bg);
  border:0;
  box-shadow:var(--card-shadow);
  padding:var(--card-pad);
  /* stack פנימי אחיד — כותרת, meta, פעולה — בלי שכל כרטיס יגדיר gap משלו */
  display:flex; flex-direction:column; gap:var(--card-gap);
  min-inline-size:0;                     /* מונע גלישה של תוכן ארוך מהכרטיס */
}

/* כרטיס שמתחיל בתמונה/מדיה: בלי padding, פינות חתוכות כך שהתמונה נצמדת לקצה */
.gapp-card--flush{ padding:0; overflow:hidden; gap:0 }

/* padding מוגדל לכרטיס-פאנל/תוכן גדול (מחליף את ה-clamp האד-הוק של .card) */
.gapp-card--pad-lg{ padding:var(--card-pad-lg) }

/* פס קטגוריה בצד ההתחלה (RTL-aware). --cc נקבע ב-JS לפי הקטגוריה, כמו
   ב-.act-item הקיים; נופל ל---accent אם לא הוגדר. */
.gapp-card--accent{ border-inline-start:var(--card-accent-w) solid var(--cc,var(--accent)) }

/* כרטיס אינטראקטיבי — hover מתרומם, press מגיב, פוקוס נראה.
   רק transform/opacity/box-shadow (בלי width/height) — בלי reflow/CLS. */
.gapp-card--interactive{
  cursor:pointer;
  transition:box-shadow var(--dur-ui,200ms) var(--ease-out,ease),
             transform var(--dur-press,120ms) var(--ease-out,ease),
             border-color var(--dur-ui,200ms) var(--ease-out,ease);
}
@media (hover:hover) and (pointer:fine){
  .gapp-card--interactive:hover{
    box-shadow:var(--card-shadow-raised);
    transform:translateY(-1px);
    border-color:var(--card-line-strong);
  }
}
.gapp-card--interactive:active{ transform:scale(.995) }
/* --focus-ring ו-offset 3px, לא --accent ו-2px: על משטח --signal (הכרטיס
   הראשון בפיד, צהוב בשני המצבים) טבעת צהובה במגע ישיר היא 1.00:1. ה-offset
   הוא מה שמציב אותה על רקע העמוד. ראו --focus-ring ב-style.css. */
.gapp-card--interactive:focus-visible{
  outline:3px solid var(--focus-ring); outline-offset:3px;
}
/* כרטיס שכולו לינק — הלינק יורש צבע, לא "כחול לינק" בתוך כרטיס */
.gapp-card a.gapp-card-link{ text-decoration:none; color:inherit; display:block }

@media (prefers-reduced-motion:reduce){
  .gapp-card--interactive{ transition:none }
  .gapp-card--interactive:hover,.gapp-card--interactive:active{ transform:none }
}

/* ===== 13 גווני הקטגוריות — «כרזה צהובה», 17.09.2026 =====================
   **הגוונים הרוויים `--c1..--c13` לא נגעו במכוון.** הם הפלטה של מערכת
   העיצוב. `accessibility-auditor` מדד אותם ב-17.09.2026 והמליץ על **שתי
   גרסאות תפקיד** (הגוון כמילוי-מתחת-לטקסט מול הגוון כ**צורה**), כי כל
   תיקון גורף שובר את הקצה השני: c2/c4/c10 הם הכהים ביותר ונבחרו לשאת
   טקסט לבן (P1 = 7.89/7.03/8.09, הטובים בטבלה) ולכן נכשלים כצורה על רקע
   כהה; c1/c11 הם הבהירים ביותר ולכן נעלמים על הצהוב.
   ⇒ **מומש 20.09.2026** — 13 טוקני `--cN-line` למטה, `ui-engineer`.
   ראו **W-106** ב-DEVIATIONS-WEB.md (לא עוד W-27 — עודכן).
   `SOURCED`: Reports/2026-09-17-e2-a11y-gaps.md §2ד.

   **מה כן השתנה:** 13 ה-`--cN-soft` ממופים כולם ל**קרקע הצהובה**.
   ch07 §7.11.1 — «הקטלוג מובחן בתצלום ובתווית, לא ב-13 גווני קטגוריה
   שמופיעים יחד בפיד». זה גם מבטל את שתי טבלאות ה-soft הכהות שהיו כאן
   (ו-`--c13-soft` שבמכוון לא הוכהה, על ההערה בת 11 השורות שליוותה אותה):
   `--yellow` מתהפך לפיח בכהה מעצמו, ולכן אין יותר שתי טבלאות לתחזק. */
:root{
  --c1:#FF5B2E;  /* קפה ואוכל */
  --c2:#0E5A63;  /* ספורט ותנועה */
  --c3:#2F7D4F;  /* טבע וטיולים */
  --c4:#6A4A8F;  /* משחקים */
  --c5:#A96500;  /* תרבות ואמנות */
  --c6:#1D6FB8;  /* חוגים וקורסים */
  --c7:#A63E86;  /* יצירה ומלאכה */
  --c8:#C2453A;  /* אירועים אישיים ומשפחתיים */
  --c9:#118375;  /* קהילה והתנדבות */
  --c10:#35507D; /* מקצועי ולימודי */
  --c11:#6E8F3B; /* רווחה ובריאות הנפש */
  --c12:#C13E70; /* חברתי ואישי */
  --c13:#5B6570; /* אחר */

  --c1-soft:var(--yellow);  --c2-soft:var(--yellow);  --c3-soft:var(--yellow);
  --c4-soft:var(--yellow);  --c5-soft:var(--yellow);  --c6-soft:var(--yellow);
  --c7-soft:var(--yellow);  --c8-soft:var(--yellow);  --c9-soft:var(--yellow);
  --c10-soft:var(--yellow); --c11-soft:var(--yellow); --c12-soft:var(--yellow);
  --c13-soft:var(--yellow);

  /* 13 גווני-הקטגוריה בתפקיד **צורה** — נקודת צ'יפ, גבול פס .act-item,
     מילוי הצ'יפ הנבחר. שונה מ---cN (מילוי-מתחת-לטקסט): כשהגוון עצמו הוא
     קו/נקודה דקה על משטח העמוד, הסף הוא WCAG 1.4.11 (≥3:1 מול הרקע
     שמאחוריו), לא ניגודיות טקסט. ברירת המחדל זהה ל---cN — 9 מתוך 13
     כבר עוברים כצורה בשני ה-themes ולא זזים כאן. **ארבעה בלבד שונים**,
     ואותו H/S בכל אחד — רק ה-L זז, כדי שהזהות הצבעית תישאר:
       c2/c4/c10 הם שלושת הכהים ביותר בפלטה ⇒ נכשלים כצורה על משטח כהה
       (2.25–2.75 מול 3.0, `getComputedStyle` מדוד); הובהרו.
       c1 הוא הבהיר מבין c1/c11 ⇒ נכשל כמילוי צ'יפ נבחר מול --bg הבהיר
       (2.74 מול 3.0); c11 כבר עובר (3.29) ואינו זז.
     כל ארבעת הערכים אומתו גם מול טקסט לבן/דיו-כהה שיושב עליהם (הצ'יפ
     הנבחר עדיין נושא טקסט) — נשארים ≥4.5:1, כך שאין נסיגה ב-1.4.3.
     `SOURCED`: Reports/2026-09-17-e2-a11y-gaps.md §2ד; מדידה חוזרת
     ואימות טווחים, 20.09.2026 (contrast_calc.mjs ב-scratchpad). */
  --c1-line:#FA3600;   --c2-line:#127682;   --c3-line:var(--c3);
  --c4-line:#7F5AAA;   --c5-line:var(--c5);  --c6-line:var(--c6);
  --c7-line:var(--c7);  --c8-line:var(--c8);  --c9-line:var(--c9);
  --c10-line:#476CA8;  --c11-line:var(--c11); --c12-line:var(--c12);
  --c13-line:var(--c13);
}

.act-thumb{ height:118px; background:var(--band) center/cover no-repeat; position:relative }
/* cat-tag — הטקסט על הזוג הניטרלי var(--ink)/var(--surface), מתהפך עם
   ה-theme ולכן ≥AA לכל 13 בשני המצבים, בלי תלות בגוון הקטגוריה.

   ⚠ **הגבול עבר מ---cc ל---line-strong ב-17.09.2026, וזה תיקון WCAG 1.4.11,
   לא בחירה אסתטית.** `accessibility-auditor` מדד את גבול ה-1px הזה מול
   הקרקע ומול המילוי: **c1 2.24 ו-c11 2.68 על הצהוב בבהיר**, ו-**c2 2.33 ·
   c4 2.62 · c10 2.27 בכהה**, מול סף 3.0. זה גם המקום **היחיד** שבו הגוונים
   הרוויים פוגשים את הצהוב, כי `map.js:435-436` מקפיא `--cc-soft` לרשימת
   המפה בזמן שבפיד התצלום מחליף את המשטח.
   `--line-strong` נמדד על **כל** משטחי הכיוון: 4.20 על נייר · 3.09 על הצהוב ·
   3.79 על הרקע בבהיר; 4.56/4.60/4.83 בכהה. עובר בכולם, בלי תלות בקטגוריה.
   ⚠ **תיקון טענה, G5:** כאן היה כתוב שהגוון «נישא ע"י הסמל וע"י התצלום».
   **התצלום אינו מבחין בין 13 הקטגוריות** — המיפוי למטה שולח 13 קטגוריות
   ל-**9** קבצים (`1`↔`10` שניהם cafe · `6`↔`7` שניהם pottery · `8`↔`9`↔`13`
   שלושתם park). מה שנושא את הקטגוריה בפועל הוא **הטקסט** — `.act-cat`
   ו-`.cat-tag` — ולכן `color-not-only` מתקיים; והסמל, במפה בלבד.
   `SOURCED`: Reports/2026-09-17-e2-a11y-gaps.md §2ד + מדידה כאן, 17.09.2026. */
.act-thumb .cat-tag{ position:absolute; inset-block-start:8px; inset-inline-start:8px;
  background:var(--surface); color:var(--ink); border:1px solid var(--line-strong);
  font-family:var(--font-head); font-weight:700; font-size:11.5px; padding:3px 9px;
  border-radius:99px;
  display:inline-flex; gap:5px; align-items:center; box-shadow:0 1px 4px rgba(20,19,16,.22) }

/* ==========================================================================
   act-thumb — תמונת האובייקט המוצרי, משותפת לפיד ולמפה
   עודכן 18.09.2026 — «כרזה צהובה» + פסק G13 על הכריכות
   --------------------------------------------------------------------------
   ⚠ **המנכ"ל הכריע: תצלומים, לא איורים** (ch07 §7.11.6, שורת `ch16` §16.5 —
   «איור עקבי, לא צילום» → **תצלום**). ברירת המחדל כשאין `cover_url` אינה
   עוד גוון+סמל אלא **תצלום קבוע לקטגוריה** מתוך **`/img/covers/`**.
   בלי זה כל משטח בלי כיסוי היה 300 פיקסלים של צהוב ריק.
   (עד 18.09.2026 ישבו כאן תצלומים מ-`/img/act/`; ראו הבלוק למטה — הם נפסלו
   ככריכה על §16.5:151, ו-`/img/act/` נשאר לגלריה של index.html בלבד.)

   ⚠ **הבורר הוא `[data-cat]` ולא `[data-emoji]`, וזו אינה קוסמטיקה.**
   הקומפ בירר לפי גליף (`.act-hero[data-emoji="☕"]`). `accessibility-auditor`
   נקב בשבירות של הצורה הזו (§5ג בדוח): variation-selector אחר (`🗂` מול
   `🗂️`), החלפת אמוג'י או פלטפורמה שמנרמלת אחרת — והתמונה **נעלמת בשקט**
   והמשטח חוזר לצהוב שטוח, **בלי שאף בדיקה תיפול**. `data-cat` הוא מספר
   מאומת בטווח 1..13 שהשרת כבר גוזר, והוא הצורה הבטוחה.
   `functions/a/[id].js` קיבל `data-cat` באותה עבודה כדי שזה יחול גם על
   `.act-hero` — לפני כן הוא נשא `data-emoji` בלבד.

   ⚠ **תיקון טענה, G5 17.09.2026 — כאן היה כתוב שהסמל נשאר «כ-fallback אחרון
   למקרה שאין גם תצלום». זה שגוי, ומדוד:** `.act-thumb[data-cat]::before{content:none}`
   (למטה) מכבה את הסמל **ללא תנאי**, ו-`feed.js` מציב `data-cat` על **כל** thumb
   נופל. ⇒ **בפיד אין fallback שני.** אם ה-webp לא נטען, המשטח הוא ריבוע צהוב ריק.
   במפה הסמל כן שורד, כי `map.js` אינו מציב `data-cat` — הטענה נכונה למפה בלבד.
   נשאר כך במכוון (תצלום שנכשל הוא תקלת רשת, לא מצב מוצר), אבל **ההערה חייבת
   לתאר את מה שקיים**: מי שיקרא "יש fallback" יבטל בקרה אחרת על סמכה.
   הסמל דקורטיבי טהור (`aria-hidden` על ההורה), ולכן אין כאן מחרוזת שמשתמש
   קורא ואין מפתח t() חדש.
   ========================================================================== */
.act-thumb{
  display:grid; place-items:center;
  background-color:var(--cc-soft,var(--band));
  background-size:cover; background-position:center; background-repeat:no-repeat;
}
.act-thumb--fallback::before{
  content:attr(data-emoji); font-size:34px; line-height:1; opacity:.62;
}
/* כשיש תצלום קטגוריה — הסמל מיותר ומלכלך אותו. */
.act-thumb[data-cat]::before{ content:none }

/* התצלום הקבוע לכל אחת מ-13 הקטגוריות. חל גם על .act-card .act-thumb
   (הפיד) וגם על .act-hero (עמוד הפעילות), כי שניהם נושאים data-cat.

   ⚠ **13 קטגוריות = 13 קבצים שונים. אין שיתוף, וזו דרישת `ch16` §16.5
   («פעם אחת לכל קטגוריה»), לא העדפה.** עד 17.09.2026 הבלוק כיסה 13
   קטגוריות ב-9 תצלומים — `pottery` ל-6+7, `park` ל-8+9+13, `cafe` ל-1+10.
   מי שמוסיף קטגוריה מוסיף קובץ; מי שמצביע שתי שורות לאותו קובץ מחזיר את
   הכפילות. הבלוק הזה הוא המקום **היחיד** בעץ שממפה מספר קטגוריה לשם קובץ:
   `feed.js` ו-`functions/a/[id].js` פולטים `data-cat` בלבד, ו-`map.js`
   אינו פולט אותו כלל (ולכן ברשימת המפה עדיין הסמל, לא התצלום).

   ⚠ **הכריכות יושבות ב-`/img/covers/` ולא ב-`/img/act/`, והפיצול הזה הוא
   פסק G13 מ-18.09.2026** (`Reports/2026-09-18-g13-minors-in-product-imagery.md`).
   `ch16` §16.5:151 דורש שכריכת קטגוריה תהיה **«מקום ואור»** — *«ללא פרצופים
   מזוהים וללא קטינים»*. ‏15 התצלומים ב-`/img/act/` הם כולם **תצלומי אנשים
   עם פנים**, ולכן **אף אחד מהם אינו כשיר ככריכה** — לא רק השלושה שהציגו
   קטינים (`park` · `cooking` · `horses`), אלא גם `community` ו-`professional`
   שהיו מבוגרים בלבד. ‏13 הקבצים כאן הם מקומות ריקים, שעה זהובה, **אפס אנשים**.

   ⇒ **שתי הספריות אינן מתחלפות ואין למזג אותן:**
     `/img/covers/`  כריכת קטגוריה — מקום ריק, נדרש §16.5:151
     `/img/act/`     תצלומי אנשים — הגיבור והגלריה של index.html בלבד
   **מי שיחזיר כאן נתיב `/img/act/` מחזיר את כשל §16.5:151**, גם אם התמונה
   יפה יותר וגם אם אין בה קטין. הקריטריון הוא «בלי פנים», לא «בלי ילדים».

   ⚠ **שמות הקבצים הם `cNN-<slug>`, וה-`slug` מתאר את הקטגוריה — לא את
   התוכן של הקובץ הישן באותו שם.** ‏`c02-training` הוא מגרש כדורסל ריק
   (ספורט ותנועה) ו-`c13-court` הוא **כיכר עירונית עם מזרקה** (אחר).
   הם אינם הפוכים וסידור-מחדש שלהם ישבור את שניהם. */
.act-thumb[data-cat="1"]{ background-image:url('/img/covers/c01-cafe.webp') }
.act-thumb[data-cat="2"]{ background-image:url('/img/covers/c02-training.webp') }
.act-thumb[data-cat="3"]{ background-image:url('/img/covers/c03-nature.webp') }
.act-thumb[data-cat="4"]{ background-image:url('/img/covers/c04-games.webp') }
.act-thumb[data-cat="5"]{ background-image:url('/img/covers/c05-dance.webp') }
.act-thumb[data-cat="6"]{ background-image:url('/img/covers/c06-pilates.webp') }
.act-thumb[data-cat="7"]{ background-image:url('/img/covers/c07-pottery.webp') }
.act-thumb[data-cat="8"]{ background-image:url('/img/covers/c08-park.webp') }
.act-thumb[data-cat="9"]{ background-image:url('/img/covers/c09-community.webp') }
.act-thumb[data-cat="10"]{ background-image:url('/img/covers/c10-professional.webp') }
.act-thumb[data-cat="11"]{ background-image:url('/img/covers/c11-yoga.webp') }
.act-thumb[data-cat="12"]{ background-image:url('/img/covers/c12-folkdance.webp') }
.act-thumb[data-cat="13"]{ background-image:url('/img/covers/c13-court.webp') }
/* ⚠ תצלום ש-`cover_url` אמיתי נטען אליו דורס את הקבוע — applyCovers מציב
   `background-image` ב-style inline, שספציפיות שלו גבוהה מכל כלל כאן. */

/* בתוך כרטיס הפיד התמונה היא **עמודה**, לא רצועה עליונה: הכרטיס עבר
   ל-grid של 100px + תוכן (feed.css/style.css). הפינה הא-סימטרית חלה גם
   כאן, ברדיוס xl 20 — ch07 §7.7 שומר xl ל-thumb בתוך כרטיס, ו-2xl 28
   לכרטיס עצמו. תכונות לוגיות בלבד. */
.act-card .act-thumb{
  margin:0;
  border-start-start-radius:var(--radius-xl);
  border-start-end-radius:var(--radius-xl);
  border-end-end-radius:var(--radius-xl);
  border-end-start-radius:0;
}

/* גוון הקטגוריה נפתר ב-CSS ולא ב-JS, כדי שהיפוך המצב הכהה יחול מאליו.
   13 הכללים האלה הם המקום היחיד שממפה מספר קטגוריה לגוון בכרטיס.
   (כולם מצביעים היום על --yellow; הם נשארים כמיפוי ולא כערך, כדי שהחזרת
   פלטה פר-קטגוריה תהיה שינוי של 13 שורות במקום חיפוש בכל הגיליונות.) */
.act-card[data-cat="1"]{ --cc-soft:var(--c1-soft) }
.act-card[data-cat="2"]{ --cc-soft:var(--c2-soft) }
.act-card[data-cat="3"]{ --cc-soft:var(--c3-soft) }
.act-card[data-cat="4"]{ --cc-soft:var(--c4-soft) }
.act-card[data-cat="5"]{ --cc-soft:var(--c5-soft) }
.act-card[data-cat="6"]{ --cc-soft:var(--c6-soft) }
.act-card[data-cat="7"]{ --cc-soft:var(--c7-soft) }
.act-card[data-cat="8"]{ --cc-soft:var(--c8-soft) }
.act-card[data-cat="9"]{ --cc-soft:var(--c9-soft) }
.act-card[data-cat="10"]{ --cc-soft:var(--c10-soft) }
.act-card[data-cat="11"]{ --cc-soft:var(--c11-soft) }
.act-card[data-cat="12"]{ --cc-soft:var(--c12-soft) }
.act-card[data-cat="13"]{ --cc-soft:var(--c13-soft) }

/* ==========================================================================
   .act-head / .act-photo — ראש עמוד הפעילות (08.10.2026, בקשת המנכ"ל)
   --------------------------------------------------------------------------
   החליף את `.act-hero`: רצועת-רקע רחבה של תצלום הקטגוריה בראש הכרטיס הצהוב,
   שהסתירה את התמונה שהמארח העלה (functions/a/[id].js — root cause שם).
   עכשיו הכותרת פותחת את הכרטיס, והתמונה — של המארח — ממוסגרת בצד השני של
   השורה, על הצהוב. הטקסט ראשון ב-DOM והתמונה אחריו, ולכן הגריד הלוגי שם
   את התמונה בצד שמאל של המסך בעברית (RTL) ובצד ימין באנגלית (LTR), בלי
   :dir() ובלי כפילות.

   המסגרת זהה בשפתה לאשכול הדף הראשי (.hero-cluster figure): שלוש פינות
   ב---r-card, אחת חדה, וצל רך. תכונות לוגיות בלבד. הטוקנים בלבד — אפס hex
   חדש; הצל הוא אותו ערך כמו באשכול. */
.act-head{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  align-items:center;
  gap:var(--sp-8);
  margin-block:var(--sp-8);
}
.act-head-text{ min-inline-size:0 }
/* בתוך הכותרת המרווחים האנכיים שייכים לשורה, לא לטקסט. */
.act-page .act-head .eyebrow{ margin-block-start:0 }
.act-page .act-head h1{ margin-block-end:0; overflow-wrap:anywhere }

.act-photo{
  margin:0; position:relative; overflow:hidden;
  inline-size:clamp(176px,22vw,248px);
  aspect-ratio:6/7;
  background:var(--surface);
  box-shadow:0 12px 32px -14px rgba(26,26,23,.42);
  border-start-start-radius:var(--r-card);
  border-start-end-radius:var(--r-card);
  border-end-end-radius:var(--r-card);
  border-end-start-radius:0;
}
.act-photo-img{
  display:block; inline-size:100%; block-size:100%;
  object-fit:cover;
}
/* מסגרת תצלום-הקטגוריה (אין cover_url תקין): אותו חיתוך; התצלום עצמו בא מ-.act-thumb[data-cat] למעלה. */
/* תגית «נוצר ב-AI» — ch34.7. זוג ניטרלי --surface/--ink כמו .cat-tag, ≥AA בשני המצבים. */
.act-photo-ai{
  position:absolute; inset-block-end:8px; inset-inline-start:8px;
  background:var(--surface); color:var(--ink); border:1px solid var(--line-strong);
  font-family:var(--font-head); font-weight:700; font-size:11.5px; line-height:1.2;
  padding:3px 9px; border-radius:99px;
  box-shadow:0 1px 4px rgba(20,19,16,.22);
}
/* מובייל: אין רוחב לשתי עמודות ליד כותרת ארוכה — התמונה עוברת מעל הכותרת, ברוחב
   מלא ובחיתוך רחב יותר, כך שאינה דוחפת את הכותרת מתחת לקפל. */
@media (max-width:560px){
  .act-head{ grid-template-columns:minmax(0,1fr); gap:var(--sp-6); margin-block:var(--sp-6) var(--sp-7) }
  .act-photo{ order:-1; inline-size:100%; aspect-ratio:4/3 }
}