/* ===========================================================================
   Arabdown Child — Responsive
   ---------------------------------------------------------------------------
   كل media queries المركَّزة على breakpoints (mobile / tablet / very small).

   📦 داخل @layer responsive — أعلى أولوية بين layers الابن (يُغلّب components).
   📛 !important مُحتفَظ به فقط على classes القالب الأب (.glob-*, .post-*, إلخ)
       لأن قواعد الأب UNLAYERED تتفوّق على layers بدون !important.
       قواعد الابن (.hp-*, .article-*, .ad-*, .single-*) جُرِّدت من !important.
   ============================================================================ */
@layer responsive {


/* ============================================================
 * ① MOBILE: < 768px — تخطيط عمود واحد + typography محكمة
 * ============================================================ */
@media (max-width: 767.98px) {

    /* Container padding (mix: .ad-container ابن + .glob-* أب) */
    .ad-container {
        padding-inline: 16px;
        max-inline-size: 100%;
    }
    .glob-container,
    .glob-container-outer {
        padding-inline: 16px !important;
        max-inline-size: 100% !important;
    }

    /* Single Layout — عمود واحد (classes ابن — لا !important) */
    .single-article > .single-layout,
    .single-article > .ad-container.single-layout,
    .single-layout--with-toc,
    .single-layout--no-toc {
        grid-template-columns: 1fr;
        gap: 24px;
        padding-inline: 0;
    }
    .single-layout__main {
        max-inline-size: 100%;
        inline-size: 100%;
        padding-inline: 16px;
        margin-inline: 0;
    }

    /* Newsletter CTA */
    .article-cta-newsletter,
    .newsletter-cta {
        padding: 20px 16px;
    }
    .newsletter-cta__title {
        font-size: 1.2rem;
    }

    /* Hero homepage */
    .hp-hero {
        grid-template-columns: 1fr;
        gap: 16px;
    }
    .hp-hero__main {
        margin-block-end: 16px;
    }
    .hp-hero__main-title {
        font-size: 1.3rem;
        line-height: 1.35;
    }
    .hp-hero__main-excerpt {
        font-size: 0.95rem;
        -webkit-line-clamp: 2;
    }
    .hp-hero__main-body {
        padding: 16px;
    }

    /* Hero secondary */
    .hp-hero__secondary {
        gap: 12px;
    }
    .hp-hero__secondary-link {
        grid-template-columns: 1fr 80px;
        gap: 12px;
    }
    .hp-hero__secondary-title {
        font-size: 0.95rem;
        line-height: 1.4;
    }
    .hp-hero__secondary-item {
        padding-block-end: 12px;
    }

    /* Trending bar */
    .hp-trending {
        padding: 10px 16px;
        font-size: 0.85rem;
    }
    .hp-trending__label {
        flex-shrink: 0;
    }

    /* Category Spotlight */
    .hp-cat {
        margin-block-end: 32px;
    }
    .hp-cat__grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }
    .hp-cat__lead {
        margin-block-end: 16px;
    }
    .hp-cat__lead-title {
        font-size: 1.15rem;
    }
    .hp-cat__items {
        grid-template-columns: 1fr 1fr;
        gap: 12px;
    }
    .hp-cat__item-title {
        font-size: 0.85rem;
        line-height: 1.4;
    }

    /* Most Read & Editor Picks */
    .hp-mostread__list,
    .hp-picks__grid {
        grid-template-columns: 1fr;
        gap: 12px;
    }
    .hp-mostread__item-title {
        font-size: 0.95rem;
    }

    /* Video Spotlight */
    .hp-video__grid {
        grid-template-columns: 1fr 1fr;
        gap: 12px;
    }
    .hp-video__item-title {
        font-size: 0.85rem;
    }

    /* Section Headings */
    .hp-section__title,
    .section-title {
        font-size: 1.3rem;
        margin-block-end: 16px;
    }
    .hp-section + .hp-section {
        margin-block-start: 32px;
    }

    /* Touch targets */
    :where(.hp-meta a, .article-byline a, .ad-tag, .hp-badge) {
        min-block-size: 32px;
        padding: 6px 10px;
        display: inline-flex;
        align-items: center;
    }

    /* Author page */
    .author-hero__cover {
        aspect-ratio: 16 / 9;
    }
    .author-hero__avatar {
        inline-size: 80px;
        block-size: 80px;
        margin-block-start: -40px;
    }
    .author-hero__name {
        font-size: 1.4rem;
    }
    .author-stats {
        grid-template-columns: 1fr 1fr;
        gap: 12px;
    }
    .author-articles__grid {
        grid-template-columns: 1fr;
    }
}


/* ============================================================
 * ② TABLET: 768-991.98px
 * ============================================================ */
@media (min-width: 768px) and (max-width: 991.98px) {
    .single-layout--with-toc {
        grid-template-columns: 1fr;
    }
    .single-layout__main {
        max-inline-size: 720px;
        margin-inline: auto;
    }
    .hp-hero {
        grid-template-columns: 1.5fr 1fr;
        gap: 24px;
    }
    .hp-cat__grid {
        grid-template-columns: 1.3fr 1fr;
    }
    .hp-cat__items {
        grid-template-columns: 1fr 1fr;
    }
    .hp-video__grid,
    .hp-picks__grid {
        grid-template-columns: 1fr 1fr 1fr;
    }
}


/* ============================================================
 * ③ VERY SMALL: < 480px
 * ============================================================ */
@media (max-width: 479.98px) {
    .ad-container {
        padding-inline: 12px;
    }
    .glob-container {
        padding-inline: 12px !important;
    }
    .hp-hero__main-title {
        font-size: 1.15rem;
    }
    .hp-cat__items {
        grid-template-columns: 1fr;
    }
    .hp-video__grid {
        grid-template-columns: 1fr;
    }
    .author-hero__avatar {
        inline-size: 64px;
        block-size: 64px;
    }
}


/* ============================================================
 * ④ REDUCED MOTION (شامل لكل العناصر — !important صحيح)
 * ============================================================ */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}


/* ============================================================
 * ⑤ PARENT THEME MOBILE — صفحات الفئات والأرشيف
 * ------------------------------------------------------------
 * كل القواعد هنا تستهدف classes القالب الأب → !important مطلوب
 * لأن قواعد الأب UNLAYERED تتفوّق على @layer responsive.
 * ============================================================ */
@media (max-width: 767.98px) {
    .entry-outer,
    .primary-content,
    .archive-outer {
        padding-inline: 16px !important;
    }

    .primary-content-inner,
    .primary-content-inner-2,
    .primary-content-inner-3,
    .primary-content-inner-4 {
        flex-direction: column !important;
        gap: 16px !important;
    }

    /* Term banner / archive header — parent classes */
    .term-banner,
    .archive-header-outer {
        padding-block: 24px 18px !important;
        text-align: center;
    }
    .term-name,
    .archive-title {
        font-size: 1.6rem !important;
        font-weight: 800 !important;
        margin: 0 0 8px !important;
    }
    .term-description {
        font-size: 0.9rem !important;
        line-height: 1.6 !important;
        max-inline-size: 50ch;
        margin-inline: auto !important;
    }

    /* Category sub-tabs — chips قابلة للسحب */
    .glob-links,
    .terms-list,
    .archive-categories,
    body.archive .glob-links,
    body.category .glob-links,
    body.search .glob-links {
        margin-inline: -16px !important;
        padding-inline: 16px !important;
        overflow-x: auto !important;
        scrollbar-width: none;
        -ms-overflow-style: none;
        scroll-snap-type: inline mandatory;
        -webkit-overflow-scrolling: touch;
    }
    .glob-links::-webkit-scrollbar,
    .terms-list::-webkit-scrollbar,
    .archive-categories::-webkit-scrollbar,
    body.archive .glob-links::-webkit-scrollbar,
    body.category .glob-links::-webkit-scrollbar,
    body.search .glob-links::-webkit-scrollbar {
        display: none;
    }

    .glob-links-inner,
    .terms-list ul,
    .archive-categories ul,
    body.archive .glob-links-inner,
    body.category .glob-links-inner,
    body.search .glob-links-inner {
        display: flex !important;
        flex-wrap: nowrap !important;
        gap: 8px !important;
        flex-direction: row !important;
        list-style: none;
        margin: 0;
        padding: 0;
        min-inline-size: max-content;
    }

    .glob-links-inner > *,
    .glob-links-inner > a,
    .glob-links-inner li,
    .terms-list li,
    body.archive .glob-links-inner > *,
    body.category .glob-links-inner > * {
        flex-shrink: 0;
        scroll-snap-align: start;
        white-space: nowrap;
    }

    .glob-links-inner > a,
    .glob-links-inner li > a,
    .terms-list li a,
    .archive-categories li a {
        display: inline-flex !important;
        align-items: center;
        padding: 9px 16px !important;
        border-radius: 22px !important;
        background: #f3f4f6 !important;
        color: #1a1a1a !important;
        border: 1px solid transparent !important;
        font-size: 0.85rem !important;
        font-weight: 600 !important;
        text-decoration: none !important;
        box-shadow: none !important;
        white-space: nowrap;
        transition: all 0.15s ease;
        min-block-size: 40px;
    }

    .glob-links-inner > .current,
    .glob-links-inner > .current > a,
    .glob-links-inner li.current > a,
    .glob-links-inner li.active > a,
    .terms-list li.current a,
    .archive-categories li.current a {
        background: var(--ad-c-primary-500, #8db600) !important;
        color: #fff !important;
        border-color: var(--ad-c-primary-700, #6a8a00) !important;
        box-shadow: 0 2px 6px rgba(141, 182, 0, 0.3) !important;
    }

    /* Parent theme post cards */
    .glob-container .post,
    .glob-container article,
    .archive-loop .post,
    .post-listing .post,
    .primary-content .post,
    article[class*="post-"]:not(.single-article) {
        background: #fff !important;
        border-radius: 12px !important;
        overflow: hidden !important;
        margin-block-end: 16px !important;
        box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06) !important;
        transition: transform 0.2s ease, box-shadow 0.2s ease !important;
    }
    .glob-container .post:active,
    article[class*="post-"]:active {
        transform: scale(0.98);
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;
    }

    .post-thumbnail,
    .post-thumb,
    .entry-thumb,
    .post-image {
        aspect-ratio: 16 / 10 !important;
        overflow: hidden !important;
        margin: 0 !important;
        max-inline-size: 100% !important;
        background: var(--ad-color-surface-2, #f4f4f5);
    }

    .post-thumbnail a,
    .post-thumb a,
    .entry-thumb a {
        display: block !important;
        block-size: 100% !important;
    }

    .post-thumbnail img,
    .post-thumb img,
    .entry-thumb img,
    .post-image img {
        inline-size: 100% !important;
        block-size: 100% !important;
        object-fit: cover !important;
        display: block !important;
        transition: transform 0.4s ease;
    }

    .post-header,
    .post-content,
    .post-body,
    .entry-summary {
        padding: 14px 16px !important;
    }

    .post-title,
    .entry-title,
    h2.post-title,
    h3.post-title,
    .post-title a,
    .entry-title a {
        font-size: 1.05rem !important;
        line-height: 1.45 !important;
        font-weight: 700 !important;
        color: #111 !important;
    }
    .post-title a:hover,
    .entry-title a:hover {
        color: var(--ad-c-primary-700, #5a7400) !important;
    }

    .post-meta,
    .entry-meta,
    .post-date,
    .post-cat-wrap {
        font-size: 0.78rem !important;
        color: #6b7280 !important;
        margin-block-start: 8px !important;
        gap: 8px !important;
        flex-wrap: wrap !important;
    }

    .post-cat-wrap a,
    .entry-cat,
    .post-cat,
    .term-link {
        display: inline-block !important;
        padding: 3px 10px !important;
        background: rgba(141, 182, 0, 0.12) !important;
        color: var(--ad-c-primary-700, #6a8a00) !important;
        border-radius: 4px !important;
        font-size: 0.72rem !important;
        font-weight: 700 !important;
        text-decoration: none !important;
    }

    .post-excerpt,
    .entry-excerpt,
    .post-summary {
        font-size: 0.9rem !important;
        line-height: 1.6 !important;
        color: var(--ad-color-text-muted, #4a5568) !important;
        margin-block: 8px 12px !important;
    }

    .read-more,
    .more-link {
        display: inline-block !important;
        padding: 6px 14px !important;
        background: var(--ad-c-primary-500, #8db600) !important;
        color: #fff !important;
        text-decoration: none !important;
        border-radius: 4px !important;
        font-size: 0.8rem !important;
        font-weight: 600 !important;
    }

    .sidebar,
    .widget-area,
    .secondary {
        margin-block-start: 32px !important;
        max-inline-size: 100% !important;
    }
    .widget {
        margin-block-end: 24px !important;
    }
}


/* ============================================================
 * ⑥ FINAL MOBILE POLISH — pagination, footer, single padding
 * ============================================================ */
@media (max-width: 767.98px) {
    /* Single article body padding (.single-article ابن — no !important) */
    .single-article > * {
        padding-inline: 16px;
    }
    .single-article > .article-header {
        padding-inline: 0;
    }

    /* Pagination — parent classes كثيرة، نحتاج !important */
    .pagination,
    .nav-links,
    .page-numbers {
        display: flex !important;
        flex-wrap: wrap;
        gap: 6px !important;
        justify-content: center !important;
        padding-block: 24px !important;
    }
    .pagination a,
    .pagination span,
    .pagination .page-numbers,
    .nav-links a,
    .nav-links span,
    .page-numbers a,
    .page-numbers span {
        min-inline-size: 40px !important;
        min-block-size: 40px !important;
        padding: 8px 12px !important;
        border-radius: 8px !important;
        font-size: 0.9rem !important;
        font-weight: 600 !important;
        text-decoration: none !important;
    }
    .page-numbers.current {
        background: var(--ad-c-primary-500, #8db600) !important;
        color: #fff !important;
    }

    /* Footer — selector بـ #site-footer (parent ID) */
    #site-footer .glob-container-outer,
    #site-footer .footer-widgets {
        flex-direction: column !important;
        gap: 24px !important;
        padding: 24px 16px !important;
        text-align: center;
    }
    #site-footer .widget {
        margin-block-end: 0 !important;
    }
    #site-footer .copyrights {
        text-align: center;
        font-size: 0.85rem;
        padding: 16px !important;
    }
}


} /* end @layer responsive */