/* تعلم دز — تحسينات الهاتف: سرعة، لمس، safe-area */
@media (max-width: 768px) {
  html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
  }

  body {
    padding-left: env(safe-area-inset-left);
    padding-right: env(safe-area-inset-right);
  }

  .ldz-breadcrumb-inner {
    padding: 8px 12px;
    font-size: 0.78rem;
    line-height: 1.5;
  }

  .ldz-site-footer {
    padding-bottom: calc(18px + env(safe-area-inset-bottom));
  }

  /* إظهار المحتوى فوراً بدل انتظار fade-in (أسرع على الهاتف) */
  .fade-in {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }

  .scroll-top {
    bottom: calc(16px + env(safe-area-inset-bottom));
    left: calc(16px + env(safe-area-inset-left));
    width: 44px;
    height: 44px;
  }
}

/* الصفحة الرئيسية */
@media (max-width: 768px) {
  .main-content {
    padding: 12px 12px 24px;
    padding-top: max(12px, env(safe-area-inset-top));
  }

  .home-intro h1 {
    font-size: 1.12rem;
    line-height: 1.5;
  }

  .home-intro p {
    font-size: 0.86rem;
  }

  .article-link {
    min-height: 48px;
    align-items: flex-start;
    padding-top: 14px;
    padding-bottom: 14px;
  }

  .article-title {
    white-space: normal;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    line-height: 1.45;
  }

  .site-menubar-footer {
    display: none;
  }

  .pagination-btn {
    min-width: 44px;
    min-height: 44px;
    padding: 10px 12px;
  }
}

/* مقال */
@media (max-width: 768px) {
  .page-layout {
    padding-top: 8px;
  }

  .article-wrap {
    border-radius: 12px;
  }

  .article-body {
    font-size: 1rem;
    line-height: 1.75;
  }

  .article-body img {
    max-width: 100%;
    height: auto;
  }

  .side-col .widget {
    content-visibility: auto;
    contain-intrinsic-size: auto 120px;
  }

  .share-btn {
    min-height: 44px;
  }
}

/* أقسام */
@media (max-width: 768px) {
  .cat-hero {
    padding: 20px 0 16px;
  }

  .art-row {
    min-height: 48px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .fade-in {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}