/* =====================================================
   التصميم المتجاوب الشامل - Comprehensive Responsive
   ===================================================== */

/* ==============================================================
   1) أحجام النصّ — نُقلت إلى variables.css
   ==============================================================
   كانت هنا في جذرٍ عارٍ يغلب تعريف variables.css فيُميته. والتعريف
   الآن في موضعٍ واحد هناك. لا تُعِدها.
   ============================================================== */

/* ==============================================================
   2) Tablet — حتى 1024px
   ============================================================== */
@media (max-width: 1024px) {
    .app-content {
        padding: var(--space-6);
    }

    /* الـ Hero: ينكسر إلى عمود واحد */
    .hero__inner {
        grid-template-columns: 1fr;
        padding: var(--space-12) var(--space-8);
        gap: var(--space-8);
        text-align: center;
    }

    .hero__quote {
        margin-inline: auto;
        max-width: 540px;
    }

    .hero__actions {
        justify-content: center;
    }

    .hero__visual {
        max-width: 280px;
        order: -1; /* البورتريه فوق النص */
    }

    .hero-stats {
        padding: var(--space-5) var(--space-6) var(--space-10);
    }

    /* About hero ينكسر */
    .about-hero {
        grid-template-columns: 1fr;
        text-align: center;
        gap: var(--space-6);
    }

    .about-portrait {
        max-width: 280px;
        margin-inline: auto;
    }

    .about-content__quote {
        text-align: start;
    }

    /* صفحة الكتاب — الصنف يتولّاها الآن في components.css */

    /* Sidebar drawer width */
    .app-sidebar {
        width: 320px;
    }

    /* Section padding أصغر */
    .section {
        padding-block: var(--space-12);
    }

    /* Cards grid: smaller min */
    .cards-grid {
        grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
        gap: var(--space-4);
    }

    .cards-grid--lg {
        grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    }

    .cards-grid--sm {
        grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    }
}

/* ==============================================================
   3) Tablet Portrait — حتى 768px
   ============================================================== */
@media (max-width: 768px) {
    .app-header {
        padding: 0 var(--space-5);
        height: 70px;
    }

    .app-content {
        padding: var(--space-4);
    }

    .hero {
        min-height: auto;
        margin-bottom: var(--space-8);
    }

    .hero__inner {
        padding: var(--space-10) var(--space-5);
    }

    .hero__visual {
        max-width: 220px;
    }

    .hero-stats {
        padding: var(--space-5) var(--space-4) var(--space-8);
    }

    /* الفاصل يضيق مع الشاشة كي تبقى المؤشّرات في سطر واحد */
    .hero-stat {
        min-width: 84px;
        padding-inline: var(--space-2);
    }

    /* Sections with hero-style backgrounds */


    /* Quick links: عمود واحد على tablet portrait */
    .quick-links {
        grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    }

    /* Cards */
    .cards-grid,
    .cards-grid--lg,
    .cards-grid--sm {
        grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
        gap: var(--space-4);
    }

    .card__body {
        padding: var(--space-4);
    }

    .card__title {
        font-size: var(--text-md);
    }

    /* Filter bar: عمود واحد */
    .filter-bar {
        padding: var(--space-4);
    }

    .filter-bar__top {
        flex-direction: column;
        align-items: stretch;
        gap: var(--space-3);
    }

    .filter-search {
        min-width: 0;
    }

    .filter-sort {
        width: 100%;
    }

    .filter-bar__bottom {
        margin-top: var(--space-4);
        padding-top: var(--space-4);
    }

    .filter-group {
        gap: var(--space-2);
    }

    .filter-group__label {
        width: 100%;
        margin-bottom: var(--space-1);
    }

    .filter-chip {
        padding: var(--space-1) var(--space-3);
        font-size: 0.7rem;
    }

    /* Timeline */
    .timeline {
        padding-right: var(--space-8);
    }

    .timeline::before {
        right: 14px;
    }

    .timeline-item__marker {
        right: -28px;
        width: 22px;
        height: 22px;
    }

    .timeline-item__body {
        padding: var(--space-5);
    }

    .timeline-item__title {
        font-size: var(--text-xl);
    }

    /* Detail pages */
    .detail-title {
        font-size: var(--text-3xl);
    }

    .detail-meta {
        gap: var(--space-2);
    }

    .detail-meta .badge {
        font-size: 0.7rem;
        padding: 2px var(--space-2);
    }

    /* Login card */
    .login-card {
        padding: var(--space-6);
    }

    /* Section title */
    .section {
        padding-block: var(--space-10);
    }


    /* Footer */
    .app-footer {
        padding: var(--space-8) var(--space-4);
    }
}

/* ==============================================================
   4) Mobile — حتى 480px
   ============================================================== */
@media (max-width: 480px) {
    .app-header {
        padding: 0 var(--space-3);
        height: 64px;
    }

    .app-header__title {
        font-size: var(--text-base);
    }

    .app-header__breadcrumb {
        display: none;
    }

    .header-mobile-toggle__label {
        display: none;
    }

    .header-mobile-toggle {
        min-width: 40px;
        height: 40px;
        padding: 0;
    }

    .app-content {
        padding: var(--space-3);
    }

    .app-sidebar {
        width: 92vw;
    }

    /* Hero: غاية في البساطة */
    .hero {
        border-radius: var(--radius-lg);
    }

    .hero__inner {
        padding: var(--space-8) var(--space-4);
    }

    .hero__visual {
        max-width: 180px;
    }

    .hero__title {
        font-size: var(--text-3xl) !important;
        line-height: 1.55;
    }

    .hero__quote {
        font-size: var(--text-base);
    }

    .hero__actions {
        flex-direction: column;
        align-items: stretch;
    }

    .hero__actions .btn {
        width: 100%;
        justify-content: center;
    }

    .hero-stat__value {
        font-size: var(--text-xl);
    }

    /* Page hero sections */

    /* Cards: عمود واحد على الجوال الصغير */
    .cards-grid,
    .cards-grid--lg {
        grid-template-columns: 1fr;
    }

    .cards-grid--sm {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--space-3);
    }

    .card {
        border-radius: var(--radius-md);
    }

    /* Quick links cards */
    .quick-link-card {
        padding: var(--space-4);
        gap: var(--space-3);
    }

    .quick-link-card__icon {
        width: 48px;
        height: 48px;
    }

    .quick-link-card__icon svg {
        width: 24px;
        height: 24px;
    }

    /* Buttons on mobile */
    .btn {
        padding: var(--space-3) var(--space-5);
    }

    .btn-lg {
        padding: var(--space-3) var(--space-6);
        font-size: var(--text-sm);
    }

    /* Timeline on mobile */
    .timeline {
        padding-right: var(--space-6);
    }

    .timeline::before {
        right: 10px;
    }

    .timeline-item__marker {
        right: -22px;
        width: 18px;
        height: 18px;
    }

    .timeline-item__body {
        padding: var(--space-4);
    }

    /* About bio */
    .about-bio {
        padding: var(--space-5);
    }

    /* Detail page */
    .detail-cover {
        border-radius: var(--radius-md);
    }

    .detail-title {
        font-size: var(--text-2xl);
    }

    .external-link-block {
        padding: var(--space-5);
    }

    /* Social grid on mobile */
    .social-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--space-3);
    }

    .social-item {
        padding: var(--space-4);
    }

    .social-item__icon {
        width: 44px;
        height: 44px;
    }

    .social-item__icon svg {
        width: 22px;
        height: 22px;
    }

    /* Sidebar small adjustments */
    .sidebar-brand {
        padding: var(--space-6) var(--space-4) var(--space-4);
    }

    .sidebar-nav__link {
        padding: var(--space-3) var(--space-5);
    }

    /* Tables responsive */
    table {
        font-size: var(--text-xs);
    }

    /* Login */
    .login-card {
        padding: var(--space-5);
    }

    .login-card__logo {
        width: 64px;
        height: 64px;
        font-size: var(--text-2xl);
    }

    .login-card__title {
        font-size: var(--text-xl);
    }

    /* Footer */
    .app-footer {
        padding: var(--space-6) var(--space-3);
    }

    .app-footer__brand {
        font-size: var(--text-md);
    }

    .app-footer__quote {
        font-size: var(--text-sm);
    }

    /* Section padding minimal */
    .section {
        padding-block: var(--space-8);
    }

    .section-title {
        font-size: var(--text-xl) !important;
    }

    .section-subtitle {
        font-size: var(--text-sm);
        margin-bottom: var(--space-6);
    }

    /* Filter chips compact */
    .filter-chip {
        padding: 6px 10px;
        font-size: 0.7rem;
    }

    /* Form inputs */
    .form-input {
        padding: var(--space-3);
        font-size: var(--text-base); /* iOS: 16px لمنع zoom على focus */
    }
}

/* ==============================================================
   5) Tiny phones — حتى 360px
   ============================================================== */
@media (max-width: 360px) {
    .cards-grid--sm {
        grid-template-columns: 1fr;
    }

    .social-grid {
        grid-template-columns: 1fr;
    }

    .hero__inner {
        padding: var(--space-6) var(--space-3);
    }

    .hero-stat {
        min-width: 72px;
        padding-inline: var(--space-1);
    }

    .hero-stat__label {
        font-size: 10px;
    }
}

/* ==============================================================
   6) Landscape orientation على الهواتف
   ============================================================== */
@media (max-width: 900px) and (orientation: landscape) {
    .hero__visual {
        max-width: 160px;
    }

    .hero {
        min-height: auto;
    }
}

/* ==============================================================
   7) Touch devices: تعطيل التأثيرات الباهظة
   ============================================================== */
@media (hover: none) and (pointer: coarse) {
    .card:hover,
    .quick-link-card:hover,
    .book-card:hover,
    .announcement-card:hover {
        transform: none;
    }

    .card__play-button {
        opacity: 1;
    }

    .card__play-button-inner {
        width: 48px;
        height: 48px;
    }

    .hero__portrait-frame::before {
        animation: none;
    }
}

/* ==============================================================
   7-ب) أهداف اللمس: ٤٨ بكسل وبين المتجاورَين ٨
   --------------------------------------------------------------
   قانون فيتس وإرشادات أبل وغوغل: ما يُنقر بالإصبع لا يقلّ عن ٤٨×٤٨.
   محصورٌ في (pointer: coarse) فلا تتغيّر كثافة الواجهة على الحاسوب
   حيث الفأرة دقيقة. ويأتي بعد قواعد المقاسات فيغلبها.
   ============================================================== */
@media (pointer: coarse) {
    .btn,
    .btn-sm {
        min-height: 48px;
    }

    .btn-icon {
        width: 48px;
        height: 48px;
    }

    /* الرأس والقائمة الجانبية — زرّ القائمة كان يصغر إلى ٤٠ على الهاتف */
    .header-mobile-toggle {
        min-width: 48px;
        height: 48px;
    }

    /* أصغر بطلب صاحب الموقع ليتناسق مع سطر الاسم، ويبقى مريحاً للإصبع */
    .sidebar-close {
        width: 40px;
        height: 40px;
    }

    .sidebar-nav__link {
        min-height: 48px;
    }

    .sidebar-nav__item {
        margin-bottom: var(--space-2);
    }

    .sidebar-social__link {
        min-width: 48px;
        height: 48px;
    }

    /* الفوتر */
    .app-footer__social-link {
        block-size: 3rem;
    }

    .app-footer__social > li {
        min-width: 3rem;
    }

    /* روابط الفوتر متقاربة: ٣٦ بكسل وبينها ٤ — كانت ٤٨ و٨ فتتباعد كثيراً */
    .app-footer__link {
        display: flex;
        align-items: center;
        min-height: 2.25rem;
        padding-block: 0;
    }

    .app-footer__list {
        gap: var(--space-1);
    }

    /* ترقيم الصفحات والفلاتر */
    .pager__page,
    .pager__step {
        min-width: 48px;
        height: 48px;
    }

    .filter-sort,
    .dropdown__button {
        min-height: 48px;
    }

    .filter-active__pill {
        min-height: 48px;
        padding-inline: var(--space-4);
    }

    .filter-active__clear {
        display: inline-flex;
        align-items: center;
        min-height: 48px;
        padding-inline: var(--space-2);
    }

    .category-others__pill {
        min-height: 48px;
    }

    /* الأسئلة والفتاوى */
    .qa-item__permalink {
        justify-content: center;
        min-width: 48px;
        min-height: 48px;
    }

    .share-row__btn {
        min-width: 48px;
        height: 48px;
    }

    .cta-panel__more-link {
        min-height: 48px;
    }

    /* المكتبة دون إنترنت ونافذة التثبيت */
    .offline-series__badge,
    .offline-series__remove {
        min-height: 48px;
    }

    .offline-series__remove {
        padding-inline: var(--space-3);
    }

    .offline-dialog__close,
    .offline-lesson__play,
    .install-prompt__close {
        width: 48px;
        height: 48px;
    }

    /* زرّ الإغلاق كبر، فيُفسح له العنوان كيلا يركبه */
    .offline-dialog__title,
    .install-prompt__title {
        padding-inline-end: var(--space-10);
    }

    /* المشغّل الصوتي */
    .audio-player__speed-select {
        min-height: 48px;
    }

    .audio-player__download {
        min-height: 48px;
    }

    .audio-player__volume,
    .audio-player__tools > * {
        height: auto;
        min-height: 48px;
    }

    /* شريط الموضع: منطقة لمسٍ ٤٨ حول مسارٍ رفيع */
    .audio-player__bar::before {
        inset: -21px 0;
    }

    /*
     * منزلق الصوت على اللمس: مساره ٦ بكسل لا يصيبه الإصبع، وأزرار الجهاز
     * تضبط الصوت أصلاً — كما على الهاتف. زرّ الكتم يبقى.
     */
    .audio-player__volume-range {
        display: none;
    }
}

/* ==============================================================
   7-ج) استجابة الضغط: انكماشٌ طفيف يُشعر بأن النقرة وصلت
   --------------------------------------------------------------
   يأتي آخر الملفات فيغلب تحريك التحويم (translateY) لحظة الضغط.
   ============================================================== */
.btn:active,
.pager__page:active,
.pager__step:active,
.share-row__btn:active,
.filter-active__pill:active,
.category-others__pill:active,
.sidebar-social__link:active,
.app-footer__social-link:active,
.header-mobile-toggle:active,
.sidebar-close:active,
.audio-player__step:active,
.audio-player__mute:active,
.offline-dialog__close:active,
.offline-lesson__play:active,
.install-prompt__close:active,
.qa-item__permalink:active,
.dropdown__button:active {
    transform: scale(0.97);
}

@media (prefers-reduced-motion: reduce) {
    .btn:active,
    .pager__page:active,
    .pager__step:active,
    .share-row__btn:active,
    .filter-active__pill:active,
    .category-others__pill:active,
    .sidebar-social__link:active,
    .app-footer__social-link:active,
    .header-mobile-toggle:active,
    .sidebar-close:active,
    .audio-player__step:active,
    .audio-player__mute:active,
    .offline-dialog__close:active,
    .offline-lesson__play:active,
    .install-prompt__close:active,
    .qa-item__permalink:active,
    .dropdown__button:active {
        transform: none;
    }
}

/* ==============================================================
   7-د) الترويسات في وسط الشاشة — المحاذاة والنصوص
   --------------------------------------------------------------
   ترويسات القوائم والتصنيف والدرس والفتوى والمقالة والكتاب والرئيسية
   و«عن الشيخ» كانت نصوصها تلتصق باليمين. تُوسَّط كلّها على كل المقاسات.
   ============================================================== */
.page-hero,
.category-hero,
.lesson-stage__body,
.hero__content,
.about-content,
.detail-heading,
.book-detail__info {
    text-align: center;
}

.hero__content,
.hero__quote,
.hero__underline,
.category-hero__content {
    margin-inline: auto;
}

.hero__underline {
    transform-origin: center;
}

.hero__actions,
.lesson-stage__chips,
.category-hero__stats,
.detail-meta,
.about-content > div {
    justify-content: center;
}

/* الاقتباس بخطّه الجانبيّ يبقى على بدايته: توسيطه مع الخطّ يبدو مائلاً */
.about-content__quote {
    text-align: start;
}

/* صفوف الدرس والفتوى: الأيقونة والنصّ في وسط الصفّ */
.lesson-fact,
.lesson-stage__meta > span {
    justify-content: center;
}

.lesson-fact__text {
    flex: 0 1 auto;
}

/* ==============================================================
   8) Print styles
   ============================================================== */
@media print {
    .app-sidebar,
    .app-header,
    .sidebar-overlay,
    .scroll-progress,
    .header-mobile-toggle,
    .filter-bar {
        display: none !important;
    }

    .app-shell,
    .app-main {
        display: block !important;
    }

    .app-content {
        padding: 0 !important;
    }

    .hero,
    .section-highlight {
        background: none !important;
        color: black !important;
        border: 1px solid #999;
    }

    .card {
        page-break-inside: avoid;
        break-inside: avoid;
    }
}