/* ── cards-01 · شبكة كروت بظهور متدرّج مع السكرول ──
   مرجع البنية: قسم `collection` بـ`hagitantebi.co.il/elvea`.
   🔑 `auto-fit` لا عدد أعمدة ثابت: التوزيع بيتحدّد من العرض المتاح، فما
      بينكسر لما يتغيّر عدد الكروت أو طول الأسماء.
   🔴 `min-width:0` على الكرت ضرورية — بلاها حدّ الخانة الأدنى بيصير
      `min-content` تبع أطول كلمة فبتفيض الشبكة. */
.col01{padding-block:var(--s-8)}
.col01 header{text-align:center;max-width:60ch;margin:0 auto var(--s-6)}
.col01 .kicker{font-family:var(--lat);font-size:14px;font-weight:600;
               letter-spacing:.18em;color:var(--accent);margin-bottom:var(--s-2);
               direction:ltr}
.col01 h2{font-size:clamp(26px,3.6vw,40px);line-height:1.25;font-weight:800;
          letter-spacing:-.02em;margin-bottom:var(--s-2);text-wrap:balance}
.col01 h2 b{color:var(--accent);font-weight:800}
.col01 header p{font-size:clamp(15px,1.5vw,17.5px);color:var(--muted);
                line-height:1.8}

.col01 .cards{display:grid;gap:var(--s-3);
              grid-template-columns:repeat(auto-fit,minmax(272px,1fr))}
.col01 .card{min-width:0;border-radius:var(--r);overflow:hidden;
             background:var(--surface);
             box-shadow:inset 0 0 0 1px var(--line);
             display:flex;flex-direction:column}
.col01 .card .ph{aspect-ratio:4/3;overflow:hidden;background:var(--bg-2)}
.col01 .card .ph img{width:100%;height:100%;object-fit:cover;display:block;
                     transition:transform .5s ease}
.col01 .card:hover .ph img{transform:scale(1.04)}
.col01 .card .body{padding:var(--s-3);display:flex;flex-direction:column;
                   gap:6px;flex:1}
.col01 .card .fr{font-family:var(--lat);font-size:13px;font-weight:600;
                 letter-spacing:.14em;color:var(--accent);direction:ltr}
.col01 .card .ar{font-size:19px;font-weight:800;letter-spacing:-.01em}
.col01 .card .t{font-size:15px;color:var(--muted);line-height:1.7}
/* سطر التفاصيل بيلزق تحت مهما اختلفت أطوال النصوص ⇒ الكروت بتضل متساوية */
.col01 .card .meta{margin-top:auto;padding-top:var(--s-2);
                   border-top:1px solid var(--line);
                   font-size:13.5px;color:var(--muted)}

@media(prefers-reduced-motion:reduce){
  .col01 .card:hover .ph img{transform:none}
}