/**
 * ============================================================================
 * RECENT HIGHLIGHTS - RESPONSIVE STYLES
 * ============================================================================
 * Organized responsive breakpoints for optimal display across all devices.
 * 
 * BREAKPOINT HIERARCHY:
 * 1. Large Desktop  (1440px+)  - Enhanced spacing and larger elements
 * 2. Desktop        (≤1199px)  - Standard desktop view
 * 3. Tablet         (≤1023px)  - Tablet-optimized layout
 * 4. Mobile         (≤767px)   - Mobile-first optimizations
 * 5. Small Mobile   (≤480px)   - Compact layout with wrapping
 * 6. Extra Small    (≤375px)   - Minimal spacing for tiny screens
 * 7. Orientation    (Portrait/Landscape) - Device orientation adjustments
 * 8. Special        (Retina/Touch) - Display and interaction enhancements
 * ============================================================================
 */

/* ============================================================================
   1. LARGE DESKTOP - 1440px AND ABOVE
   Enhanced spacing and larger elements for wide screens
   ============================================================================ */
@media (min-width: 1440px) {
  /* Container */
  .recent-highlights {
    padding: 25px 0;
  }

  /* Section Title */
  .recent-highlights__title {
    font-size: 28px;
    margin-bottom: 24px;
  }

  /* Article List */
  .recent-highlights__list {
    gap: 14px;
  }

  /* Article Card Link */
  .recent-highlights__link {
    padding: 18px 24px;
    gap: 24px;
  }

  /* Thumbnail */
  .recent-highlights__thumbnail {
    width: 90px;
    height: 90px;
  }

  /* Typography */
  .recent-highlights__item-title {
    font-size: 18px;
  }

  .recent-highlights__date {
    font-size: 14px;
  }

  /* Read Button */
  .recent-highlights__read-btn {
    padding: 10px 24px;
    font-size: 14px;
  }
}

/* ============================================================================
   2. DESKTOP - UP TO 1199px
   Standard desktop view with moderate sizing
   ============================================================================ */
@media (max-width: 1199px) {
  /* Container */
  .recent-highlights {
    padding: 18px 0;
  }

  /* Section Title */
  .recent-highlights__title {
    font-size: 22px;
    margin-bottom: 18px;
  }

  /* Article List */
  .recent-highlights__list {
    gap: 10px;
  }

  /* Article Card Link */
  .recent-highlights__link {
    padding: 14px 18px;
    gap: 16px;
  }

  /* Thumbnail */
  .recent-highlights__thumbnail {
    width: 75px;
    height: 75px;
  }

  /* Typography */
  .recent-highlights__item-title {
    font-size: 15px;
  }

  .recent-highlights__date {
    font-size: 12px;
  }

  /* Read Button */
  .recent-highlights__read-btn {
    padding: 7px 18px;
    font-size: 12px;
  }
}

/* ============================================================================
   3. TABLET - UP TO 1023px
   Tablet-optimized layout with adjusted spacing
   ============================================================================ */
@media (max-width: 1023px) {
  /* Container */
  .recent-highlights {
    padding: 16px 0;
  }

  /* Section Title */
  .recent-highlights__title {
    font-size: 20px;
    margin-bottom: 16px;
  }

  /* Article List */
  .recent-highlights__list {
    gap: 12px;
  }

  /* Article Card Link */
  .recent-highlights__link {
    padding: 14px 16px;
    gap: 14px;
  }

  /* Thumbnail */
  .recent-highlights__thumbnail {
    width: 70px;
    height: 70px;
  }

  /* Content Area */
  .recent-highlights__content {
    gap: 6px;
  }

  .recent-highlights__category {
    padding: 6px 10px;
    font-size: 9px;
  }

  /* Typography */
  .recent-highlights__item-title {
    font-size: 14px;
  }

  /* Metadata Section - Horizontal layout */
  .recent-highlights__meta {
    gap: 10px;
    flex-direction: row;
    justify-content: space-between;
  }

  .recent-highlights__date {
    font-size: 11px;
  }

  /* Read Button */
  .recent-highlights__read-btn {
    padding: 6px 16px;
    font-size: 11px;
  }
}

/* ============================================================================
   4. MOBILE - UP TO 767px
   Mobile-first optimizations with overflow prevention
   ============================================================================ */
@media (max-width: 767px) {
  /* Container - Prevent horizontal scroll */
  .recent-highlights {
    padding: 14px 0;
    overflow-x: hidden;
  }

  /* Section Title */
  .recent-highlights__title {
    font-size: 18px;
    margin-bottom: 14px;
  }

  /* Article List */
  .recent-highlights__list {
    gap: 10px;
  }

  /* Article Card Link - Constrain width */
  .recent-highlights__link {
    padding: 12px 14px;
    gap: 12px;
    max-width: 100%;
  }

  /* Thumbnail */
  .recent-highlights__thumbnail {
    width: 65px;
    height: 65px;
  }

  /* Content Area */
  .recent-highlights__content {
    gap: 6px;
  }

  .recent-highlights__category {
    padding: 5px 8px;
    font-size: 8px;
  }

  /* Typography */
  .recent-highlights__item-title {
    font-size: 13px;
    line-height: 1.3;
  }

  /* Metadata Section - Horizontal layout, prevent overflow */
  .recent-highlights__meta {
    gap: 8px;
    flex-direction: row;
    justify-content: space-between;
  }

  .recent-highlights__date {
    font-size: 10px;
  }

  /* Read Button - No wrapping */
  .recent-highlights__read-btn {
    padding: 6px 14px;
    font-size: 10px;
    white-space: nowrap;
  }
}

/* ============================================================================
   5. SMALL MOBILE - UP TO 480px
   Compact layout with wrapping and horizontal metadata
   ============================================================================ */
@media (max-width: 480px) {
  /* Container - Prevent horizontal scroll */
  .recent-highlights {
    padding: 12px 0;
    overflow-x: hidden;
  }

  /* Section Title */
  .recent-highlights__title {
    font-size: 16px;
    margin-bottom: 12px;
  }

  /* Article List */
  .recent-highlights__list {
    gap: 8px;
  }

  /* Article Card Link - Enable wrapping */
  .recent-highlights__link {
    padding: 10px 12px;
    gap: 10px;
    flex-wrap: wrap;
    max-width: 100%;
  }

  /* Thumbnail */
  .recent-highlights__thumbnail {
    width: 60px;
    height: 60px;
  }

  /* Content Area - Flexible width */
  .recent-highlights__content {
    flex: 1;
    min-width: calc(100% - 70px);
  }

  /* Typography */
  .recent-highlights__item-title {
    font-size: 12px;
  }

  /* Metadata Section - Full width horizontal layout */
  .recent-highlights__meta {
    width: 100%;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    box-sizing: border-box;
  }

  .recent-highlights__date {
    font-size: 9px;
    flex-shrink: 1;
  }

  /* Read Button - Fixed size */
  .recent-highlights__read-btn {
    padding: 5px 12px;
    font-size: 9px;
    white-space: nowrap;
    flex-shrink: 0;
  }
}

/* ============================================================================
   6. EXTRA SMALL MOBILE - UP TO 375px
   Minimal spacing for tiny screens
   ============================================================================ */
@media (max-width: 375px) {
  /* Container - Prevent horizontal scroll */
  .recent-highlights {
    padding: 10px 0;
    overflow-x: hidden;
  }

  /* Section Title */
  .recent-highlights__title {
    font-size: 14px;
    margin-bottom: 10px;
  }

  /* Article List */
  .recent-highlights__list {
    gap: 8px;
  }

  /* Article Card Link - Minimal padding */
  .recent-highlights__link {
    padding: 10px;
    gap: 8px;
    max-width: 100%;
  }

  /* Thumbnail */
  .recent-highlights__thumbnail {
    width: 55px;
    height: 55px;
  }

  /* Content Area */
  .recent-highlights__content {
    min-width: calc(100% - 63px);
    gap: 5px;
  }

  .recent-highlights__category {
    padding: 4px 6px;
    font-size: 7px;
  }

  /* Typography */
  .recent-highlights__item-title {
    font-size: 11px;
  }

  .recent-highlights__date {
    font-size: 8px;
    flex-shrink: 1;
  }

  /* Read Button - Minimal size */
  .recent-highlights__read-btn {
    padding: 4px 10px;
    font-size: 8px;
    white-space: nowrap;
    flex-shrink: 0;
  }
}

/* ============================================================================
   7. ORIENTATION-SPECIFIC ADJUSTMENTS
   Fine-tuning for portrait and landscape modes
   ============================================================================ */

/* Tablet Portrait - Optimized for vertical orientation */
@media (min-width: 768px) and (max-width: 1023px) and (orientation: portrait) {
  .recent-highlights__link {
    padding: 16px 18px;
  }

  .recent-highlights__thumbnail {
    width: 75px;
    height: 75px;
  }
}

/* Tablet Landscape - Compact for horizontal orientation */
@media (max-width: 1023px) and (orientation: landscape) {
  .recent-highlights {
    padding: 12px 0;
  }

  .recent-highlights__title {
    margin-bottom: 12px;
  }

  .recent-highlights__list {
    gap: 8px;
  }

  .recent-highlights__link {
    padding: 10px 14px;
  }

  .recent-highlights__thumbnail {
    width: 60px;
    height: 60px;
  }
}

/* ============================================================================
   8. SPECIAL DEVICE OPTIMIZATIONS
   Retina displays and touch devices
   ============================================================================ */

/* Retina Displays - Enhanced image rendering */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  .recent-highlights__thumbnail {
    image-rendering: -webkit-optimize-contrast;
    image-rendering: crisp-edges;
  }
}

/* Touch Devices - Minimum touch target size (44x44px) */
@media (hover: none) and (pointer: coarse) {
  .recent-highlights__item {
    min-height: 44px;
  }

  .recent-highlights__read-btn {
    min-height: 44px;
    min-width: 44px;
    padding-inline: 16px;
  }
}