/* ============================================
   SHARE - RESPONSIVE
   جميع التعديلات الإضافية للتجاوب
   ============================================ */

/* ===== TABLET ===== */
@media (max-width: 992px) {
    .section-title {
        font-size: 30px;
    }
}

/* ===== MOBILE ===== */
@media (max-width: 768px) {
    .section-title {
        font-size: 26px;
        margin-bottom: 30px;
    }
    
    .container {
        padding: 0 16px;
    }
}

/* ===== SMALL MOBILE ===== */
@media (max-width: 480px) {
    .section-title {
        font-size: 22px;
    }
    
    .container {
        padding: 0 12px;
    }
}

/* ===== DARK MODE SUPPORT ===== */
@media (prefers-color-scheme: dark) {
    .how-card {
        background: var(--gray-800);
    }
    
    .item-card {
        background: var(--gray-800);
        border-color: rgba(255,255,255,0.06);
    }
    
    .item-content h3 a {
        color: var(--white);
    }
    
    .item-desc {
        color: var(--gray-400);
    }
    
    .item-user .name {
        color: var(--gray-400);
    }
    
    .nav a {
        color: var(--gray-400);
    }
}

/* ===== PRINT ===== */
@media print {
    .header,
    .footer,
    .cta-section {
        display: none !important;
    }
    
    .hero {
        min-height: auto !important;
        padding: 60px 0 !important;
    }
    
    .item-card {
        break-inside: avoid;
        box-shadow: none !important;
    }
}

/* ===== ACCESSIBILITY ===== */
@media (prefers-reduced-motion: reduce) {
    * {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* ===== UTILITY CLASSES ===== */
.text-center { text-align: center; }
.text-left { text-align: left; }
.text-right { text-align: right; }
.mt-1 { margin-top: 10px; }
.mt-2 { margin-top: 20px; }
.mt-3 { margin-top: 30px; }
.mb-1 { margin-bottom: 10px; }
.mb-2 { margin-bottom: 20px; }
.mb-3 { margin-bottom: 30px; }
.d-flex { display: flex; }
.d-grid { display: grid; }
.d-none { display: none; }
.gap-1 { gap: 10px; }
.gap-2 { gap: 20px; }
.gap-3 { gap: 30px; }
.w-100 { width: 100%; }
.rounded { border-radius: var(--radius-sm); }
.shadow { box-shadow: var(--shadow-sm); }