/* ═══════════════════════════════════════════════════════════════
   הפרשים בלבד מעל content/ac-attractions.css.

   שני העמודים חולקים את אותו גיליון, ולכן כל כלל כאן תחום ל-.tn-page
   ואינו יכול לגעת בעמוד האטרקציות. הכללים שהם לדסקטופ בלבד עטופים
   ב-min-width: הקובץ הזה נטען אחרי הגיליון המשותף, ובלי העטיפה הם היו
   גוברים גם על בלוק המובייל שלו.

   הסבב: הפתיח היה 497px לפני הכרטיס הראשון, והכרטיס הציג שלוש-עשרה
   יחידות מידע באותו משקל. כאן מצטמצם הפתיח, שורת הנתונים יורדת
   משישה שדות לשלושה, והשם חוזר להיות האלמנט הבולט.
   ═══════════════════════════════════════════════════════════════ */

/* ── פתיח ──────────────────────────────────────────────────────── */
.tn-page h1{ margin-bottom:6px }
.tn-page .g-index-sub{ max-width:56ch;margin-bottom:6px }
.tn-page .ac-updated{ margin:0 0 10px }
.tn-page .ac-picks{ margin:0 0 2px }
.tn-page .ac-gh:first-of-type{ margin-top:16px !important }

/* ── כרטיס ─────────────────────────────────────────────────────── */
/* השם הוא הדבר הראשון שנקרא, גם כשיש תגים מעליו ב-DOM. */
.tn-page .ac-name{ font-size:19px;line-height:1.26;margin-bottom:3px }
.tn-page .ac-where{ font-size:11.5px;margin-bottom:7px }
.tn-page .ac-top{ margin:0 0 8px }

/* תג רמת האנרגיה היה מלבן מלא בצבע כהה, והיה הדבר הכבד ביותר בכרטיס
   אחרי השם. במובייל הוא כבר מתואר בקו; כאן אותו טיפול בכל הרחבים,
   כדי ששני התגים ייקראו כשורה אחת ולא כשני משקלים. */
.tn-page .ac-heat{ background:transparent;border:1.5px solid currentColor;border-radius:4px;padding:1px 7px }
.tn-page .heat-in{ color:var(--teal) }
.tn-page .heat-cond{ color:var(--olive,#5C6B37) }

/* קווים מפרידים: שורת הנתונים והמפתח של הפרטים מספיקים. הקווים שהיו
   מעל "למה כן" ומעל שורת הפעולה יצרו ארבעה קווים בכרטיס אחד. */
.tn-page .ac-good{ font-size:13.8px;border-top:0;padding-top:3px }
.tn-page .ac-links{ border-top:0;padding-top:0;margin-top:0 }
.tn-page .ac-out{ font-size:13px;color:var(--ink-soft) }
.tn-page .ac-out b{ opacity:.9 }

/* קישור האתר הרשמי בתוך הפרטים — שקט יותר מהפעולה המרכזית */
.tn-page .tn-src{ margin:0 }
.tn-page .tn-src .ui-action{ font-size:12px;font-weight:600;min-height:28px }

/* ── שורת גיל · זמן · מחיר, דסקטופ וטאבלט ──────────────────────── */
@media (min-width:700px){
  .tn-page .ac-facts{
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:0 10px;padding:8px 0 0;margin-bottom:1px;
  }
  .tn-page .ac-facts dt{ font-size:10px;margin-bottom:1px }
  .tn-page .ac-facts dd{ font-size:12.5px;line-height:1.35 }
}

/* בשלוש עמודות הכרטיס צר, והשם ארוך. שורה שלישית בשם עדיפה על
   קיצור מלאכותי, אבל הטקסט סביבו נדחס מעט. */
@container (max-width:340px){
  .tn-page .ac-name{ font-size:17.5px }
  .tn-page .ac-facts dd{ font-size:12px }
}

/* ── שורות המידע בפרטים ────────────────────────────────────────────
   "תכנון" ו"במקום" היו שני מקטעים עם כותרת טורקיז משלהם, אחרי הכותרת
   של "כדאי לדעת" ואחרי "עוד פרטים" — ארבע כותרות ברצף. עכשיו התווית
   יושבת בתוך השורה, שקטה, והכותרת הבולטת היחידה היא "כדאי לדעת". */
.tn-page .tn-row b{
  display:inline;color:#7A6647;font-size:11px;font-weight:700;
  letter-spacing:.03em;margin:0;
}
.tn-page .tn-row b::after{ content:':\00a0' }

/* ── מובייל ────────────────────────────────────────────────────── */
@media (max-width:699px){
  .tn-page .ac-name{ font-size:19.5px }
  .tn-page .ac-where{ font-size:12px }
  /* שלוש שורות של תווית וערך — קומפקטי, ובלי טבלה */
  .tn-page .ac-facts{ gap:3px 10px;padding:7px 0 0;margin-bottom:8px }
  .tn-page .ac-out{ font-size:13px;margin-bottom:4px }

  /* ── המצב הפתוח, מובייל בלבד ──
     הגובה נחסך קודם כול מהתוכן (שלוש הערות במקום חמש), וכאן רק
     מהמרווחים שסביבו. אזור הלחיצה של "עוד פרטים" נשאר 44px. */
  .tn-page .ac-more{ padding-top:2px;margin-bottom:4px }
  .tn-page .ac-detail{ margin:0 0 6px;gap:7px }
  .tn-page .ac-blk h4{ margin-bottom:3px }
  .tn-page .ac-blk ul{ gap:4px }
  /* תאריך הבדיקה: קטן ושקט, ובלי קו הפרדה שנועד רק עבורו */
  .tn-page .ac-how-row{ font-size:10.5px;padding-top:0;border-top:0 }
}