/* ==========================================================================
   קטלוג הערבים הפתוחים · אב-טיפוס · 2.11.2026
   שפה עיצובית: design-tokens.css + concepts/concept-final.html
   (רקע night, פעולה sky, גופני Rubik/Assistant, רדיוס כרטיס 14px, פוקוס sky 3px).
   בלי CDN: הגופנים (Rubik, Assistant) נטענים מקומית מתיקיית fonts/ דרך fonts.css (SIL OFL).
   ========================================================================== */
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{font-family:var(--rk-font-body);font-size:var(--rk-size-body);line-height:var(--rk-leading-body);color:var(--rk-text-inverse);background:var(--rk-bg-inverse);-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{display:block;max-width:100%}
a{color:inherit}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
h1,h2,h3{font-family:var(--rk-font-display);line-height:var(--rk-leading-tight);font-weight:var(--rk-weight-display)}
.wrap{width:min(1320px,100% - 2*var(--rk-gutter));margin-inline:auto}
:focus-visible{outline:3px solid var(--rk-focus);outline-offset:3px;border-radius:4px}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;inset-inline-start:12px;top:-60px;z-index:10;background:var(--rk-action);color:var(--rk-action-text);padding:10px 18px;border-radius:var(--rk-radius-pill);font-weight:700;text-decoration:none}
.skip:focus{top:12px}
.link{font-weight:700;color:var(--rk-color-sky);text-decoration:underline;text-underline-offset:5px;text-decoration-thickness:2px}

/* ---------- ראש הדף + חיפוש ---------- */
.cat-head{padding:var(--rk-space-7) 0 var(--rk-space-6);background:linear-gradient(to bottom,#141a5c 0,var(--rk-color-night) 100%)}
.kicker{color:var(--rk-color-sky);font-weight:600;font-size:var(--rk-size-sm)}
.cat-head h1{font-size:clamp(40px,4.4vw + 20px,84px);letter-spacing:-.025em;margin:4px 0 var(--rk-space-5)}
.finder{max-width:760px}
.finder-label{display:block;font-weight:700;font-size:var(--rk-size-sm);margin-bottom:var(--rk-space-2);color:var(--rk-text-inverse)}
.finder-field{position:relative;display:flex;align-items:center}
.finder-field input{width:100%;min-width:0;height:60px;border-radius:var(--rk-radius-pill);border:2px solid rgba(255,255,255,.35);background:rgba(255,255,255,.06);color:#fff;font:inherit;font-size:19px;padding-inline:56px 56px}
.finder-field input::placeholder{color:#a9b3da}
.finder-field input:hover{border-color:rgba(255,255,255,.6)}
.finder-field input:focus{outline:0;border-color:var(--rk-color-sky);background:rgba(255,255,255,.1);box-shadow:0 0 0 3px rgba(183,200,240,.35)}
.finder-field input::-webkit-search-cancel-button{-webkit-appearance:none;appearance:none;display:none}
.finder-icon{position:absolute;inset-inline-start:20px;width:22px;height:22px;color:var(--rk-color-sky);pointer-events:none}
.finder-clear{position:absolute;inset-inline-end:8px;width:44px;height:44px;border-radius:50%;display:grid;place-items:center;color:#fff;transition:background var(--rk-dur)}
.finder-clear:hover{background:rgba(255,255,255,.12)}
.finder-clear svg{width:20px;height:20px}
.finder-clear[hidden]{display:none}
.finder-count{margin-top:var(--rk-space-2);font-size:var(--rk-size-sm);color:var(--rk-text-inverse-muted);min-height:1.65em}
.finder-count b{color:#fff}

/* ---------- רשת ---------- */
.results{padding:var(--rk-space-5) 0 var(--rk-space-9);outline:0}
.grid{list-style:none;display:grid;gap:var(--rk-space-6) var(--rk-space-4);grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr))}
@media (min-width:1024px){.grid{grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:var(--rk-space-7) var(--rk-space-5)}}

/* ---------- כרטיס (כל הכרטיס הוא קישור) ---------- */
.card{position:relative;display:block;text-decoration:none;border-radius:var(--rk-radius-md);outline-offset:4px}
.card-media{position:relative;aspect-ratio:16/9;border-radius:var(--rk-radius-md);overflow:hidden;background:var(--rk-color-ran-blue);transition:transform var(--rk-dur) var(--rk-ease),box-shadow var(--rk-dur) var(--rk-ease)}
.card-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:1}
/* תחליף כשאין תמונה: רקע המותג עם הכותרת */
.ph{position:absolute;inset:0;display:flex;align-items:flex-end;padding:var(--rk-space-4) var(--rk-space-4) var(--rk-space-5);background:
  radial-gradient(120% 90% at 100% 0,rgba(183,200,240,.28) 0,rgba(183,200,240,0) 55%),
  linear-gradient(160deg,var(--rk-color-ran-blue) 0,var(--rk-color-night) 100%)}
.ph::before{content:"";position:absolute;inset-block-start:16px;inset-inline-end:16px;width:34px;height:3px;border-radius:2px;background:var(--rk-color-sky)}
.ph span{font:var(--rk-weight-display) clamp(22px,1.2vw + 14px,28px)/1.1 var(--rk-font-display);letter-spacing:-.01em;color:#fff;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
/* תיאור: שכבה על התמונה, נחשפת בהעברת עכבר / מיקוד. לא משנה גובה, ולכן אין קפיצת פריסה */
.card-desc{position:absolute;inset:0;z-index:2;display:flex;align-items:flex-end;padding:var(--rk-space-4);background:var(--rk-color-night);color:#fff;font-size:var(--rk-size-sm);line-height:1.5;opacity:0;transition:opacity var(--rk-dur) var(--rk-ease)}
.card-desc .desc-title{display:block;font:700 17px/1.3 var(--rk-font-display);margin-bottom:4px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.card-desc p{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.card-desc .go{display:block;margin-top:6px;color:var(--rk-color-sky);font-weight:700}
.card:hover .card-media,.card:focus-visible .card-media{transform:scale(1.035);box-shadow:0 14px 34px rgba(0,0,0,.45)}
.card:hover .card-desc,.card:focus-visible .card-desc{opacity:1}
.card-body{padding-top:var(--rk-space-3)}
.card-meta{display:flex;flex-wrap:wrap;gap:6px 10px;align-items:center;font-size:var(--rk-size-xs);color:var(--rk-text-inverse-muted);font-weight:600}
.card-meta .date{display:inline-flex;align-items:center;gap:6px;color:#fff}
.card-meta .date::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--rk-color-gold)}
.card h3{font-size:var(--rk-size-h3);font-weight:700;line-height:1.25;margin-top:4px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.card.no-img h3{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.card:hover h3{text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:2px}

/* מסכי מגע: אין hover, ולכן התיאור מוצג מתחת לכותרת (שתי שורות) */
@media (hover:none){
  .card-desc{display:none}
  .card-touch-desc{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;margin-top:4px;font-size:var(--rk-size-sm);color:var(--rk-text-inverse-muted);line-height:1.5}
}
@media (hover:hover){.card-touch-desc{display:none}}

/* ---------- אין תוצאות ---------- */
.empty{padding:var(--rk-space-8) 0;text-align:center;color:var(--rk-text-inverse-muted)}
.empty[hidden]{display:none}
.empty-title{font:700 var(--rk-size-h3)/1.3 var(--rk-font-display);color:#fff;margin-bottom:var(--rk-space-2);overflow-wrap:anywhere}

@media (min-width:760px){:root{--rk-gutter:32px}}
@media (prefers-reduced-motion:reduce){
  *{transition:none!important;animation:none!important;scroll-behavior:auto!important}
  .card:hover .card-media,.card:focus-visible .card-media{transform:none}
}