/* ============================================================
   Poke-IL — פריסת מחשב
   האפליקציה נבנתה לנייד, ועל מסך רחב היא נראתה כמו עמודה
   צרה של 480px באמצע ים ריק. כאן היא נפתחת:
   הניווט עובר לצד כסרגל קבוע, התוכן מתרחב, והרשתות
   מקבלות יותר עמודות.

   נטען אחרון. כל מה שבפנים חי בתוך שאילתת מדיה אחת, כך
   שהנייד לא מושפע כלל.
   ============================================================ */

@media (min-width: 900px){

  :root{ --rail:236px; --deskmax:1180px }

  /* ---------- מעטפת ----------
     .brandrow יושב בתוך .topbar ולא ישירות תחת .shell, ולכן
     הוא לא יכול לקבל grid-area משלו — אזורי גריד חלים רק על
     ילדים ישירים. הניווט תופס את שתי השורות בעמודה השמאלית. */
  .shell{
    width:min(100%, var(--deskmax));
    max-width:none;
    display:grid;
    grid-template-columns:var(--rail) minmax(0, 1fr);
    grid-template-areas:
      "top top"
      "nav main";
    grid-template-rows:auto 1fr;
    column-gap:26px;
    padding-inline:22px;
    box-shadow:none;
    background:transparent;
    /* הכל גדול יותר על מסך מחשב — מרחק הצפייה גדול יותר
       מנייד, וגדלים שנכונים ביד נראים זעירים על שולחן. */
    font-size:16px;
  }

  /* ---------- הסרגל העליון ----------
     נפרס על שתי העמודות, כדי שהלוגו יתמרכז ביחס לעמוד כולו
     ולא ביחס לעמודת התוכן בלבד. */
  .topbar{
    grid-area:top;
    position:sticky; top:0;
    border-radius:0 0 16px 16px;
  }
  .brandmark img{ width:40px; height:40px }
  :root[data-theme="light"] .brand{ font-size:32px }

  /* ---------- ניווט צדדי ---------- */
  .tabbar{
    grid-area:nav;
    position:sticky;
    top:22px;
    bottom:auto;
    width:auto;
    align-self:start;
    display:flex;
    flex-direction:column;
    gap:5px;
    padding:12px 10px;
    border:2px solid rgba(34,48,63,.12);
    border-radius:18px;
    box-shadow:0 6px 20px rgba(20,40,90,.12);
    backdrop-filter:none; -webkit-backdrop-filter:none;
  }
  .tab{
    flex-direction:row;
    justify-content:flex-start;
    gap:11px;
    padding:9px 12px;
    font-size:14.5px;
    border-radius:12px;
    transition:background .16s;
  }
  .tab:hover{ background:color-mix(in srgb, var(--acc) 9%, transparent) }
  .tab[aria-current="page"]{
    background:color-mix(in srgb, var(--acc) 14%, transparent);
  }
  .tab .ti{ width:30px; height:30px }
  .tab .pip{
    position:static; margin-inline-start:auto;
  }
  /* העיגול הצבעוני של הלשונית הפעילה מיותר בסרגל צד —
     הרקע של השורה כבר מסמן אותה, ושניהם יחד רועשים. */
  :root[data-theme="light"] .tab[aria-current="page"] .ti{
    background:none; box-shadow:none;
  }
  :root[data-theme="light"] .tab[aria-current="page"] .ti img{
    transform:none; filter:saturate(1.05);
  }

  /* ---------- תוכן ---------- */
  main{
    grid-area:main;
    padding-bottom:40px !important;
    min-width:0;
  }

  /* הכפתור הצף חוזר לפינה של חלון התוכן */
  .fab{
    inset-inline-end:32px;
    bottom:32px;
    width:58px; height:58px;
  }

  /* ---------- רשתות מתרחבות ---------- */
  .quickgrid{ grid-template-columns:repeat(3, 1fr) }
  .grid2{ grid-template-columns:repeat(3, 1fr) }

  /* מודעות וכתבות.
     auto-fit ולא repeat(2): כשיש פריט אחד בלבד הוא נפרס על כל
     הרוחב במקום להישאר חצי כרטיס תלוש באמצע השורה. */
  .sec .stack.g8,
  .sec .stack.g10,
  main > .stack > .stack.g10{
    display:grid;
    grid-template-columns:repeat(auto-fit, minmax(400px, 1fr));
    gap:14px;
    align-items:start;
  }

  /* ---------- טיפוגרפיה נוחה יותר ---------- */
  .sectitle{ font-size:21px }
  .quick .qt{ font-size:17px }
  .quick .qd{ font-size:13.5px }
  .quick .qi{ width:104px; height:104px }
  .listing .t{ font-size:15.5px }
  .article .at{ font-size:17px; line-height:1.35 }
  .article .ad{ font-size:14px }
  .body-sm{ font-size:14.5px }
  .tiny{ font-size:12.5px }

  /* כותרת כתבה ראשית הייתה תמונה בגובה מסך שלם.
     ביחס של 16:9 על 870px זה 490px של תמונה לפני מילה אחת. */
  .article .cover{ aspect-ratio:auto; height:260px }
  .article.compact .cover{ height:auto }

  /* הגיבור לא צריך למלא את כל הרוחב */
  .hero-img{ width:min(210px, 34%) }

  /* ---------- גיליון: חלון במרכז המסך, לא מגירה ---------- */
  .sheet{
    left:50%;
    bottom:auto; top:50%;
    transform:translate(-50%, -45%) scale(.98);
    width:min(560px, 92vw);
    max-height:88dvh;
    border-radius:20px;
    border:2px solid var(--line);
    opacity:0;
    transition:transform .26s cubic-bezier(.22,.8,.3,1), opacity .2s;
  }
  .sheet.open{
    transform:translate(-50%, -50%) scale(1);
    opacity:1;
  }
  .sheet-foot{ border-radius:0 0 18px 18px }

  /* ---------- הסצנה ---------- */
  /* על מסך רחב הדשא הופך לפס דק מדי ביחס לגובה — מגביהים */
  :root[data-theme="light"] body::after{ height:190px; background-size:100% 190px }
}

/* מסך רחב במיוחד — נותנים לתוכן עוד אוויר במקום למתוח אותו */
@media (min-width: 1400px){
  :root{ --deskmax:1280px }
  .quickgrid{ grid-template-columns:repeat(3, 1fr) }
}