/* ═══════════════════════════════════════════════════════════════
   لتبقى — Employee Resource Hub · Mobile Stylesheet (v2)
   ═══════════════════════════════════════════════════════════════ */

/* ── BURGER ── */
.burger {
  display:none; position:fixed; top:14px; right:14px; z-index:4000;
  width:46px; height:46px; border-radius:14px; border:1px solid rgba(255,255,255,.08);
  background:rgba(12,43,30,.92); -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px);
  cursor:pointer; flex-direction:column; align-items:center; justify-content:center; gap:5px;
  box-shadow:0 10px 30px -10px rgba(0,0,0,.5);
  transition:transform .18s var(--ease), background .2s; -webkit-tap-highlight-color:transparent;
}
.burger:active { transform:scale(.92); }
.burger span { display:block; width:20px; height:2px; background:#fff; border-radius:3px; transition:transform .4s var(--ease), opacity .25s; transform-origin:center; }
.burger.open span:nth-child(1) { transform:translateY(7px) rotate(45deg); }
.burger.open span:nth-child(2) { opacity:0; transform:scaleX(0); }
.burger.open span:nth-child(3) { transform:translateY(-7px) rotate(-45deg); }

/* ── OVERLAY ── */
.mob-overlay { display:none; position:fixed; inset:0; z-index:3000; background:rgba(7,26,18,.4); -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); opacity:0; pointer-events:none; transition:opacity .35s var(--ease); }
.mob-overlay.active { opacity:1; pointer-events:all; }

/* ═════════════════════════════════════
   ≤ 860px
═════════════════════════════════════ */
@media (max-width:860px) {
  :root { --sb-w:0px; --gutter:18px; }
  .burger { display:flex; }
  .mob-overlay { display:block; }
  .progress { right:0; }

  /* ── sidebar becomes a sheet ── */
  .sidebar {
    width:min(86vw, 360px); height:100vh; height:100dvh;
    transform:translateX(104%); box-shadow:none; z-index:3500;
    border-left:1px solid rgba(255,255,255,.08);
    transition:transform .5s var(--ease);
  }
  .sidebar.mob-open { transform:translateX(0); box-shadow:-30px 0 60px rgba(0,0,0,.35); }
  .sb-header { padding:max(64px, calc(44px + env(safe-area-inset-top,0px))) 26px 20px; }
  .sb-logo { height:42px; }
  .sb-nav { padding:12px 16px 90px; }
  .sb-section { padding:20px 12px 8px; font-size:10.5px; }
  .nav-item { padding:13px 14px; font-size:16px; font-weight:600; border-radius:12px; min-height:50px;
    opacity:0; transform:translateX(18px); transition:opacity .4s var(--ease), transform .5s var(--ease), color .2s, background .2s; }
  .sidebar.mob-open .nav-item { opacity:1; transform:none; transition-delay:calc(var(--n,0) * 32ms + 120ms); }
  .nav-item.active::after { right:-16px; }
  .nav-icon { width:19px; height:19px; }
  .nav-pill { right:16px; left:16px; }
  .sb-footer { padding:16px 26px calc(18px + env(safe-area-inset-bottom,0px)); }
  body.menu-open { overflow:hidden; }

  /* ── layout ── */
  .main { margin-right:0; }
  body { font-size:15.5px; }

  .hero { padding:max(84px, calc(66px + env(safe-area-inset-top,0px))) var(--gutter) 40px; }
  .hero-label { font-size:10.5px; margin-bottom:12px; }
  .hero h1 { font-size:clamp(28px,8vw,36px); margin-bottom:14px; }
  .hero p { font-size:15px; }
  .hero-meta { gap:16px; margin-top:22px; }
  .hm b { font-size:19px; }
  .hero::before { width:420px; height:420px; }

  .content { padding:26px var(--gutter) 64px; }
  .cs { margin-bottom:40px; }
  .st { font-size:23px; }
  .ss { font-size:14.5px; margin-bottom:20px; }

  /* ── components ── */
  .stats { grid-template-columns:repeat(3,1fr); gap:10px; }
  .stat-card { padding:18px 10px; border-radius:14px; }
  .stat-num { font-size:27px; }
  .stat-lbl { font-size:11px; line-height:1.4; }

  .g2, .g3 { grid-template-columns:1fr; gap:12px; }
  .g4 { grid-template-columns:repeat(2,1fr); gap:10px; }

  .card { padding:22px 20px; border-radius:16px; }
  .card h3 { font-size:16.5px; }
  .card p  { font-size:14.5px; }
  .card:hover { transform:none; }

  .ib { padding:16px 18px; }
  .ib p, .ib li { font-size:14.5px; }
  .rule { padding:16px 18px; gap:12px; }
  .rule:hover { transform:none; }
  .rule h4 { font-size:15.5px; }
  .rule p { font-size:14px; }

  .timeline { padding-right:26px; }
  .tl-item { padding-right:24px; padding-bottom:26px; }
  .tl-dot { right:-28px; }
  .tl-item h3 { font-size:16px; }
  .tl-item p { font-size:14.5px; }

  /* portal cards → horizontal rows */
  .portal { flex-direction:row; align-items:center; padding:18px 18px 18px 16px; gap:14px; border-radius:18px; }
  .portal:hover { transform:none; }
  .portal .p-ico { flex-shrink:0; width:46px; height:46px; font-size:21px; border-radius:13px; }
  .portal .portal-ar { font-size:9.5px; margin-bottom:3px; }
  .portal h3 { font-size:15.5px; margin-bottom:3px; }
  .portal p { font-size:13px; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
  .portal .p-link { margin-top:8px !important; font-size:12.5px; }
  .p-badge { top:12px; left:12px; font-size:9px; padding:3px 8px; }
  .p-xtaqa .portal-body { padding-left:54px; }

  .brand-info { padding:16px 18px; }
  .brand-info h4 { font-size:14px; }
  .brand-info p { font-size:13px; }

  .btn { min-height:44px; padding:12px 18px; font-size:14px; border-radius:11px; }
  .btn:hover { transform:none; }
  .btns { gap:9px; }

  .tabs { gap:2px; margin-bottom:24px; overflow-y:hidden; touch-action:pan-x; overscroll-behavior-x:contain; -ms-overflow-style:none; }
  .tab { padding:12px 14px; font-size:13.5px; touch-action:pan-x; user-select:none; -webkit-user-select:none; }

  .palette { grid-template-columns:repeat(3,1fr); gap:9px; }
  .sw-color { height:54px; }
  .swatch:hover { transform:none; }
  .swatch:hover .sw-color { height:54px; }
  .sw-info { padding:8px; }

  .kids-char-grid { grid-template-columns:repeat(2,1fr); }
  .kids-char-grid > div > div:first-child { height:160px !important; }
  .kids-char-grid img { height:170px !important; }
  .kids-char-grid > div > div:last-child > div:first-child { font-size:18px !important; }
  .kids-char-grid p { font-size:12px !important; }
  .kids-gradient { padding:28px 20px; }
  .kids-gradient::before { font-size:56px; }

  .tbl-wrap { border-radius:12px; }
  .tbl { min-width:560px; }
  .tbl th, .tbl td { padding:12px 14px; font-size:13px; }

  .font-block { padding:22px 18px; }
  .font-ar { font-size:28px; }

  .brand-rel { flex-direction:column; gap:16px; padding:28px 20px; border-radius:18px; }
  .br-conn { flex-direction:row; gap:16px; }
  .br-line { width:40px; }
  .icons-frame { padding:18px; }

  .campaign-grid { display:flex !important; flex-direction:column !important; }
  .campaign-grid > div:first-child { border-radius:16px 16px 0 0 !important; }
  .campaign-grid > div:last-child { border-radius:0 0 16px 16px !important; }

  .totop { bottom:18px; left:18px; width:42px; height:42px; }
  .toast { bottom:22px; max-width:calc(100vw - 36px); white-space:normal; text-align:center; }

  /* inline-styled legacy grids inside kids/strategy pages */
  [style*="grid-template-columns:repeat(3,1fr)"] { grid-template-columns:1fr !important; }
  [style*="grid-template-columns:repeat(5,1fr)"] { grid-template-columns:repeat(3,1fr) !important; }
  [style*="grid-template-columns:repeat(4,1fr)"]:not(.kids-char-grid) { grid-template-columns:repeat(2,1fr) !important; }
}

/* ═════════════════════════════════════
   ≤ 430px
═════════════════════════════════════ */
@media (max-width:430px) {
  :root { --gutter:16px; }
  .hero h1 { font-size:29px; }
  .stat-num { font-size:23px; }
  .stat-lbl { font-size:10.5px; }
  .st { font-size:21px; }
  .palette { grid-template-columns:repeat(2,1fr); }
  .g4 { grid-template-columns:1fr; }
  .hm { padding-right:10px; }
}

/* ═════════════════════════════════════
   SAFE AREA
═════════════════════════════════════ */
@supports (padding:max(0px)) {
  @media (max-width:860px) {
    .burger { top:max(14px, env(safe-area-inset-top,14px)); right:max(14px, env(safe-area-inset-right,14px)); }
  }
}