/* ANDALUS_SECTION_CARDS_V2 (28 Oct 2026) — one look for the section cards everywhere (أ. محمد: «شكل الأقسام دا المفروض
   مشترك في كل الويب سايت … يتناسق مع ألوان الويب سايت ككل … شكل مودرن أكتر ماشي مع الجلاسي بتاع أبل»).
   Same rules for the home page cards (.categoryPick .catCard--photo, index.php) and the shared block on /24, /live and
   /wheel (.an-sc__card, includes/andalus-showcase.php). Loaded last on those pages.
   - light glass card on the site's cream, photo inset with its own rounded corners (the whole photo, 4:3, as decided 23 Oct)
   - the model count is a glass pill on the photo; the title in ink; «كاش من» in the brand brown
   - a round glass arrow at the card's corner; no empty brown block under short cards
   - Android (html.an-android) has no backdrop-filter (assets/andalus-android-v1.css), so every glass part is readable
     without the blur. */

:root{
  --sc2-ink:#24160f;
  --sc2-muted:#6b584c;
  --sc2-brand:#6f442f;
  --sc2-cream:#f7f3ee;
  --sc2-glass:rgba(255,255,255,.62);
  --sc2-glass-line:rgba(255,255,255,.75);
  --sc2-shadow:0 1px 0 rgba(255,255,255,.9) inset,0 0 0 1px rgba(36,22,15,.07),0 10px 28px rgba(54,31,20,.10);
  --sc2-shadow-hover:0 1px 0 rgba(255,255,255,.9) inset,0 0 0 1px rgba(36,22,15,.09),0 18px 40px rgba(54,31,20,.16);
}

/* ---------- the card ---------- */
html body .categoryPick{grid-auto-rows:auto!important;align-items:stretch}
html body .categoryPick .catCard.catCard--photo,
html body .an-sc .an-sc__card{
  position:relative!important;display:flex!important;flex-direction:column!important;justify-content:flex-start!important;
  min-width:0;height:100%;padding:6px!important;gap:0!important;overflow:hidden;isolation:isolate;
  border-radius:24px!important;border:0!important;text-align:right!important;text-decoration:none!important;
  background:linear-gradient(180deg,rgba(255,255,255,.94) 0%,rgba(255,251,246,.86) 100%)!important;
  -webkit-backdrop-filter:blur(22px) saturate(1.6);backdrop-filter:blur(22px) saturate(1.6);
  box-shadow:var(--sc2-shadow)!important;color:var(--sc2-ink)!important;
  transition:transform .22s cubic-bezier(.2,.8,.2,1),box-shadow .22s ease!important;
}
html body .categoryPick .catCard.catCard--photo::before,
html body .categoryPick .catCard.catCard--photo::after{display:none!important}
@media (hover:hover){
  html body .categoryPick .catCard.catCard--photo:hover,
  html body .an-sc .an-sc__card:hover{transform:translateY(-4px)!important;box-shadow:var(--sc2-shadow-hover)!important}
}
html body .categoryPick .catCard.catCard--photo:active,
html body .an-sc .an-sc__card:active{transform:scale(.985)!important}
html body .categoryPick .catCard.catCard--photo:focus-visible,
html body .an-sc .an-sc__card:focus-visible{outline:3px solid #f0b75a!important;outline-offset:3px}

/* ---------- photo: inset, rounded, whole photo over its blurred copy ---------- */
html body .catCard--photo .catPhoto,
html body .an-sc .an-sc__photo{
  position:relative;display:block;width:100%;aspect-ratio:4/3;flex:0 0 auto;overflow:hidden;
  border-radius:18px;background:#efe6dc!important;
}
html body .catCard--photo .catPhoto i,
html body .an-sc .an-sc__photo i{opacity:.6!important;filter:blur(18px) saturate(1.1)!important}
html body .catCard--photo .catPhoto img,
html body .an-sc .an-sc__photo img{object-fit:contain!important;transition:transform .5s cubic-bezier(.2,.8,.2,1)!important}
/* a soft glass sheen on the photo's top edge */
html body .catCard--photo .catPhoto::after,
html body .an-sc .an-sc__photo::after{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.35);
  background:linear-gradient(180deg,rgba(255,255,255,.18) 0%,rgba(255,255,255,0) 28%);
}

/* ---------- copy ---------- */
html body .categoryPick .catCard--photo .catCardCopy,
html body .an-sc .an-sc__copy{
  position:static!important;flex:1 1 auto;display:flex!important;flex-direction:column!important;align-items:flex-start!important;
  justify-content:flex-start!important;gap:2px!important;width:100%;padding:10px 8px 6px!important;padding-inline-end:50px!important;
  text-align:right!important;
}
html body .categoryPick .catCard.catCard--photo .catCardCopy strong,
html body .an-sc .an-sc__card .an-sc__copy strong{
  color:var(--sc2-ink)!important;font-size:clamp(1rem,1.25vw,1.2rem)!important;font-weight:900!important;line-height:1.35!important;
}
html body .categoryPick .catCard.catCard--photo .catCardCopy > span,
html body .an-sc .an-sc__meta{color:var(--sc2-muted)!important;font-size:.85rem!important;font-weight:700!important;line-height:1.5!important}
html body .catCard--photo .catMeta s,
html body .an-sc .an-sc__meta s{display:none!important}
/* «كاش من …» in the brand brown */
html body .categoryPick .catCard.catCard--photo .catMeta i,
html body .an-sc .an-sc__meta i{display:block!important;color:var(--sc2-brand)!important;font-style:normal!important;font-weight:900!important;font-size:.9rem!important;white-space:nowrap}

/* the model count → a glass pill on the photo (top corner) */
html body .categoryPick .catCard.catCard--photo .catMeta,
html body .an-sc .an-sc__card .an-sc__meta{position:static!important;transform:none!important}
html body .categoryPick .catCard.catCard--photo .catMeta b,
html body .an-sc .an-sc__meta b{
  position:absolute;top:14px;right:14px;z-index:3;display:inline-flex!important;align-items:center;min-height:26px;padding:2px 10px;
  border-radius:999px;font-size:.78rem!important;font-weight:900!important;line-height:1.3;white-space:nowrap;color:var(--sc2-ink)!important;
  background:var(--sc2-glass);border:1px solid var(--sc2-glass-line);
  -webkit-backdrop-filter:blur(14px) saturate(1.7);backdrop-filter:blur(14px) saturate(1.7);
  box-shadow:0 4px 14px rgba(36,22,15,.12);
}

/* ---------- the round glass arrow (the old «عرض الموديلات» text stays for screen readers) ---------- */
html body .categoryPick .catCard.catCard--photo .arrow,
html body .an-sc .an-sc__card .an-sc__go{
  position:absolute!important;left:12px!important;bottom:12px!important;z-index:3;display:grid!important;place-items:center;
  width:36px!important;height:36px!important;min-height:0!important;margin:0!important;padding:0!important;border-radius:50%!important;
  font-size:0!important;line-height:0!important;color:var(--sc2-ink)!important;overflow:hidden;
  background:linear-gradient(180deg,rgba(255,255,255,.9),rgba(247,239,230,.8))!important;border:1px solid rgba(36,22,15,.08)!important;
  box-shadow:0 1px 0 #fff inset,0 4px 12px rgba(36,22,15,.12)!important;
  transition:transform .22s cubic-bezier(.2,.8,.2,1),background .22s ease!important;
}
html body .categoryPick .catCard.catCard--photo .arrow::after,
html body .an-sc .an-sc__card .an-sc__go::after{content:"←";font-size:18px;line-height:1;font-weight:900;font-style:normal}
@media (hover:hover){
  html body .categoryPick .catCard.catCard--photo:hover .arrow,
  html body .an-sc .an-sc__card:hover .an-sc__go{transform:translateX(-3px);background:var(--sc2-ink)!important;color:#fff!important}
}

/* ---------- grid ---------- */
@media (max-width:700px){
  html body .categoryPick,html body .an-sc .an-sc__grid{gap:10px!important}
  html body .categoryPick .catCard.catCard--photo,html body .an-sc .an-sc__card{border-radius:20px!important;padding:5px!important}
  html body .catCard--photo .catPhoto,html body .an-sc .an-sc__photo{border-radius:16px}
  html body .categoryPick .catCard--photo .catCardCopy,html body .an-sc .an-sc__copy{padding:8px 6px 4px!important;padding-inline-end:44px!important}
  html body .categoryPick .catCard.catCard--photo .arrow,html body .an-sc .an-sc__card .an-sc__go{width:32px!important;height:32px!important;left:10px!important;bottom:10px!important}
  html body .categoryPick .catCard.catCard--photo .catMeta b,html body .an-sc .an-sc__meta b{top:11px;right:11px}
}
@media (max-width:360px){
  html body .categoryPick .catCard.catCard--photo .catCardCopy strong,html body .an-sc .an-sc__card .an-sc__copy strong{font-size:.95rem!important}
  html body .categoryPick .catCard.catCard--photo .catMeta i,html body .an-sc .an-sc__meta i{font-size:.82rem!important}
}

/* ---------- Android: no blur → solid enough to read ---------- */
html.an-android body .categoryPick .catCard.catCard--photo,
html.an-android body .an-sc .an-sc__card{background:#fffdfa!important}
html.an-android body .categoryPick .catCard.catCard--photo .catMeta b,
html.an-android body .an-sc .an-sc__meta b{background:rgba(255,255,255,.92)}

@media (prefers-reduced-motion:reduce){
  html body .categoryPick .catCard.catCard--photo,html body .an-sc .an-sc__card,
  html body .catCard--photo .catPhoto img,html body .an-sc .an-sc__photo img,
  html body .categoryPick .catCard.catCard--photo .arrow,html body .an-sc .an-sc__card .an-sc__go{transition:none!important}
}