/* =====================================================
 * NEWS & BLOG RESPONSIVE FIXES
 * إصلاحات خاصة لصفحات الأخبار والمدونة
 * ===================================================== */

/* =====================================================
 * 1. IMAGE FIXES - إصلاح الصور
 * ===================================================== */

/* News & Blog Featured Images - صور مميزة */
.news-featured-image,
.blog-featured-image {
  width: 100%;
  height: auto;
  min-height: clamp(250px, 40vh, 400px);
  max-height: clamp(300px, 50vh, 500px);
  object-fit: contain; /* عرض الصورة كاملة بدون قص */
  object-position: center;
  background: #f3f4f6; /* خلفية رمادية خفيفة */
}

/* Card Images - صور البطاقات */
.news-card-image,
.blog-card-image {
  width: 100%;
  height: clamp(180px, 30vw, 220px);
  object-fit: contain; /* عرض الصورة كاملة */
  object-position: center;
  background: #f3f4f6;
}

/* Main Post Image (Hero) - الخبر الرئيسي */
.news-hero-image,
.blog-hero-image {
  width: 100%;
  height: auto;
  min-height: clamp(300px, 45vh, 450px);
  max-height: clamp(350px, 55vh, 550px);
  object-fit: contain;
  object-position: center;
  background: #f3f4f6;
}

/* Related Post Images - صور المنشورات ذات الصلة */
.related-post-image {
  width: 100%;
  height: clamp(160px, 25vw, 200px);
  object-fit: contain;
  object-position: center;
  background: #f3f4f6;
  transition: transform 0.3s ease;
}

.related-post-image:hover {
  transform: scale(1.02);
}

/* Author/Profile Images - صور الكاتب */
.author-image,
.profile-image {
  object-fit: cover; /* للوجوه نستخدم cover */
  object-position: center;
}

/* =====================================================
 * 2. CARD RESPONSIVE LAYOUTS
 * ===================================================== */

/* News Cards Grid */
.news-grid,
.blog-grid {
  display: grid;
  gap: clamp(1.25rem, 2.5vw, 2rem);
}

/* Mobile: 1 column */
@media (max-width: 639px) {
  .news-grid,
  .blog-grid {
    grid-template-columns: 1fr;
  }
}

/* Tablet: 2 columns */
@media (min-width: 640px) and (max-width: 1023px) {
  .news-grid,
  .blog-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Desktop: 2 columns (for main content area) */
@media (min-width: 1024px) {
  .news-grid,
  .blog-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* =====================================================
 * 3. POST CARD STYLING
 * ===================================================== */

.news-card,
.blog-card {
  background: white;
  border-radius: clamp(12px, 1.5vw, 16px);
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
  border: 1px solid #e5e7eb;
  transition: all 0.3s ease;
  display: flex;
  flex-direction: column;
  height: 100%;
}

.news-card:hover,
.blog-card:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
  transform: translateY(-4px);
}

/* Card Image Container */
.card-image-container {
  position: relative;
  width: 100%;
  overflow: hidden;
  background: #f3f4f6;
}

/* Card Content */
.card-content {
  padding: clamp(1rem, 2vw, 1.5rem);
  display: flex;
  flex-direction: column;
  flex: 1;
}

/* Card Title */
.card-title {
  font-size: clamp(1rem, 1.5vw, 1.125rem);
  font-weight: 600;
  line-height: 1.4;
  margin-bottom: 0.5rem;
  color: #111827;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Card Excerpt */
.card-excerpt {
  font-size: clamp(0.875rem, 1.2vw, 0.9375rem);
  line-height: 1.6;
  color: #6b7280;
  margin-bottom: 1rem;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  flex: 1;
}

/* =====================================================
 * 4. POST DETAIL PAGE
 * ===================================================== */

/* Post Detail Container */
.post-detail {
  background: white;
  border-radius: clamp(12px, 1.5vw, 16px);
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
  border: 1px solid #e5e7eb;
  margin-bottom: clamp(1.5rem, 3vw, 2rem);
}

/* Post Content Area */
.post-content {
  padding: clamp(1.5rem, 4vw, 3rem);
}

/* Post Title */
.post-title {
  font-size: clamp(1.75rem, 4vw, 2.5rem);
  font-weight: 700;
  line-height: 1.2;
  margin-bottom: clamp(1rem, 2vw, 1.5rem);
  color: #111827;
}

/* Post Meta (Author, Date, etc.) */
.post-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: clamp(0.75rem, 1.5vw, 1rem);
  margin-bottom: clamp(1rem, 2vw, 1.5rem);
  font-size: clamp(0.875rem, 1.2vw, 0.9375rem);
  color: #6b7280;
}

/* Author Avatar */
.author-avatar {
  width: clamp(2.5rem, 5vw, 3rem);
  height: clamp(2.5rem, 5vw, 3rem);
  border-radius: 50%;
  overflow: hidden;
}

/* =====================================================
 * 5. CATEGORY & TAG BADGES
 * ===================================================== */

.category-badge,
.tag-badge {
  display: inline-flex;
  align-items: center;
  padding: clamp(0.375rem, 0.8vw, 0.5rem) clamp(0.75rem, 1.5vw, 1rem);
  border-radius: 9999px;
  font-size: clamp(0.75rem, 1.1vw, 0.875rem);
  font-weight: 500;
  transition: all 0.3s ease;
}

.category-badge {
  background: #fef2f2;
  color: #C8102E;
}

.category-badge:hover {
  background: #fee2e2;
}

.tag-badge {
  background: #f3f4f6;
  color: #6b7280;
}

.tag-badge:hover {
  background: #e5e7eb;
  color: #374151;
}

/* =====================================================
 * 6. SIDEBAR RESPONSIVE
 * ===================================================== */

.sidebar {
  position: sticky;
  top: clamp(5rem, 10vh, 6rem);
  height: fit-content;
}

/* Stack sidebar below content on tablet and mobile */
@media (max-width: 1023px) {
  .sidebar {
    position: relative;
    top: 0;
    margin-top: clamp(2rem, 4vw, 3rem);
  }
}

/* Sidebar Widgets */
.sidebar-widget {
  background: white;
  border-radius: clamp(12px, 1.5vw, 16px);
  padding: clamp(1.25rem, 2.5vw, 1.5rem);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
  border: 1px solid #e5e7eb;
  margin-bottom: clamp(1.25rem, 2.5vw, 1.5rem);
}

.sidebar-widget-title {
  font-size: clamp(1rem, 1.5vw, 1.125rem);
  font-weight: 600;
  margin-bottom: clamp(0.75rem, 1.5vw, 1rem);
  color: #111827;
}

/* =====================================================
 * 7. RELATED POSTS
 * ===================================================== */

.related-posts {
  margin-top: clamp(2rem, 4vw, 3rem);
}

.related-posts-title {
  font-size: clamp(1.5rem, 3vw, 2rem);
  font-weight: 700;
  margin-bottom: clamp(1.25rem, 2.5vw, 1.5rem);
  color: #111827;
}

.related-posts-grid {
  display: grid;
  gap: clamp(1.25rem, 2.5vw, 1.5rem);
}

/* Mobile: 1 column */
@media (max-width: 639px) {
  .related-posts-grid {
    grid-template-columns: 1fr;
  }
}

/* Tablet & Desktop: 2 columns */
@media (min-width: 640px) {
  .related-posts-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* =====================================================
 * 8. PROSE/CONTENT STYLING
 * ===================================================== */

.prose {
  max-width: none;
  line-height: 1.8;
  color: #374151;
}

.prose h2 {
  font-size: clamp(1.25rem, 2.5vw, 1.5rem);
  font-weight: 700;
  margin-top: clamp(1.5rem, 3vw, 2rem);
  margin-bottom: clamp(0.75rem, 1.5vw, 1rem);
  color: #111827;
}

.prose h3 {
  font-size: clamp(1.125rem, 2vw, 1.25rem);
  font-weight: 600;
  margin-top: clamp(1.25rem, 2.5vw, 1.5rem);
  margin-bottom: clamp(0.5rem, 1vw, 0.75rem);
  color: #111827;
}

.prose p {
  margin-bottom: clamp(1rem, 2vw, 1.2rem);
  font-size: clamp(0.9375rem, 1.5vw, 1rem);
}

.prose img {
  border-radius: clamp(8px, 1vw, 12px);
  margin-top: clamp(1rem, 2vw, 1.5rem);
  margin-bottom: clamp(1rem, 2vw, 1.5rem);
  max-width: 100%;
  height: auto;
  object-fit: contain; /* عرض الصور كاملة في المحتوى */
  background: #f3f4f6;
}

.prose ul,
.prose ol {
  margin-bottom: clamp(1rem, 2vw, 1.2rem);
  padding-left: clamp(1.25rem, 2vw, 1.5rem);
}

.prose li {
  margin-bottom: clamp(0.375rem, 0.8vw, 0.5rem);
}

.prose blockquote {
  border-left: 4px solid #C8102E;
  padding-left: clamp(0.75rem, 1.5vw, 1rem);
  margin: clamp(1rem, 2vw, 1.5rem) 0;
  font-style: italic;
  color: #6b7280;
  background-color: #f9fafb;
  padding: clamp(0.75rem, 1.5vw, 1rem);
  border-radius: clamp(6px, 1vw, 8px);
}

/* RTL Support for Arabic Content */
.prose[dir="rtl"] blockquote {
  border-left: none;
  border-right: 4px solid #C8102E;
  padding-left: 0;
  padding-right: clamp(0.75rem, 1.5vw, 1rem);
}

/* =====================================================
 * 9. MOBILE OPTIMIZATIONS
 * ===================================================== */

@media (max-width: 639px) {
  /* Reduce padding on mobile */
  .post-content {
    padding: clamp(1rem, 3vw, 1.5rem);
  }
  
  /* Stack author info vertically */
  .post-meta {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.75rem;
  }
  
  /* Full width buttons */
  .post-button,
  .read-more-button {
    width: 100%;
    text-align: center;
  }
  
  /* Adjust category/tag spacing */
  .category-tags-container {
    flex-wrap: wrap;
    gap: 0.5rem;
  }
}

/* =====================================================
 * 10. TABLET OPTIMIZATIONS
 * ===================================================== */

@media (min-width: 640px) and (max-width: 1023px) {
  /* 2 columns for cards */
  .news-grid,
  .blog-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  
  /* Adjust image heights for tablet */
  .news-card-image,
  .blog-card-image {
    height: clamp(200px, 25vw, 240px);
  }
}

/* =====================================================
 * 11. DESKTOP ENHANCEMENTS
 * ===================================================== */

@media (min-width: 1024px) {
  /* Better spacing for large screens */
  .post-detail {
    max-width: 100%;
  }
  
  /* Sidebar fixed positioning */
  .sidebar {
    position: sticky;
    top: 6rem;
  }
  
  /* Hover effects */
  .news-card:hover .card-image-container img,
  .blog-card:hover .card-image-container img {
    transform: scale(1.05);
  }
}

/* =====================================================
 * 12. PRINT STYLES
 * ===================================================== */

@media print {
  .sidebar,
  .related-posts {
    display: none;
  }
  
  .post-detail {
    box-shadow: none;
    border: none;
  }
  
  .prose img {
    max-width: 100%;
    page-break-inside: avoid;
  }
}

/* =====================================================
 * 13. ACCESSIBILITY
 * ===================================================== */

/* Focus states */
.news-card:focus-visible,
.blog-card:focus-visible {
  outline: 2px solid #C8102E;
  outline-offset: 2px;
}

/* Skip to content for news/blog */
.skip-to-post {
  position: absolute;
  top: -100px;
  left: 50%;
  transform: translateX(-50%);
  padding: 0.75rem 1.5rem;
  background: #002B5C;
  color: white;
  text-decoration: none;
  border-radius: 0 0 8px 8px;
  z-index: 10000;
  transition: top 0.3s ease;
}

.skip-to-post:focus {
  top: 0;
}

/* =====================================================
 * 14. LOADING & PLACEHOLDER
 * ===================================================== */

/* Image loading placeholder */
.image-loading {
  background: linear-gradient(90deg, #f3f4f6 25%, #e5e7eb 50%, #f3f4f6 75%);
  background-size: 200% 100%;
  animation: loading 1.5s ease-in-out infinite;
}

@keyframes loading {
  0% {
    background-position: 200% 0;
  }
  100% {
    background-position: -200% 0;
  }
}

/* =====================================================
 * 15. RESPONSIVE UTILITIES
 * ===================================================== */

/* Hide elements responsively */
@media (max-width: 639px) {
  .hide-mobile {
    display: none !important;
  }
}

@media (min-width: 640px) and (max-width: 1023px) {
  .hide-tablet {
    display: none !important;
  }
}

@media (min-width: 1024px) {
  .hide-desktop {
    display: none !important;
  }
}

/* =====================================================
 * END OF NEWS & BLOG RESPONSIVE FIXES
 * ===================================================== */

/*
 * Notes:
 * - Changed object-fit from 'cover' to 'contain' to show full images
 * - Added background color (#f3f4f6) for padding around images
 * - All images now responsive with proper aspect ratios
 * - Cards, grids, and layouts fully responsive
 * - Optimized for mobile, tablet, and desktop
 */