/* ═══════════════════════════════════════════════════════════
   FitCal Blog — ضبط المقاسات على الجوالات والتابلت
   (يُحمَّل في كل صفحات المدونة؛ لا يمس شكل سطح المكتب)
   ═══════════════════════════════════════════════════════════ */
html{overflow-x:clip}

@media(max-width:620px){
  /* الشريط العلوي: كان يفرض عرضاً 405px فيُحدث تمريراً أفقياً */
  .nav-in{padding:11px 14px!important;gap:9px!important}
  .brand{font-size:17px!important;gap:7px!important}
  .brand img{width:27px!important;height:27px!important}
  .tools{gap:6px!important}
  .tbtn{width:34px!important;height:34px!important}
  .nav-cta{font-size:12.5px!important;padding:8px 13px!important}

  /* هوامش جانبية أنسب للشاشات الضيقة */
  .wrap,.blog-hero,.toolbar,.grid{padding-left:16px!important;padding-right:16px!important}

  /* البطاقات: min 300px كانت تتجاوز الشاشة تحت 332px */
  .grid{grid-template-columns:repeat(auto-fill,minmax(min(300px,100%),1fr))!important}

  /* أهداف لمس أكبر */
  .chip{padding:10px 15px!important}
  .backbtn{padding:10px 16px!important}

  /* أي محتوى عريض داخل المقالات يمرّر أفقياً داخل إطاره فقط */
  article table,article pre{display:block;max-width:100%;overflow-x:auto}
  article img{max-width:100%;height:auto}
}

@media(max-width:400px){
  .nav-cta{font-size:12px!important;padding:8px 11px!important}
  .blog-hero{padding-top:38px!important}
}
/* أضيق من ٣٥٠ بكسل فقط: نُخفي كلمة FitCal ونُبقي الشعار ليتسع الزر */
@media(max-width:350px){
  .brand span{display:none!important}
}