/* iPad-specific CSS fixes for card layouts */
/* This file addresses card responsiveness issues on iPad Mini and iPad Pro in portrait mode */

/* iPad Mini Portrait - 768x1024px */
@media only screen 
  and (min-device-width: 768px) 
  and (max-device-width: 768px)
  and (min-device-height: 1024px)
  and (max-device-height: 1024px)
  and (orientation: portrait)
  and (-webkit-min-device-pixel-ratio: 2) {
  
  /* Force proper grid layout for iPad Mini */
  .news-grid,
  .search-results,
  .category-grid {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 1.5rem !important;
    padding: 1rem !important;
  }
  
  /* Ensure cards fill available space */
  .article-card,
  .search-result {
    width: 100% !important;
    min-width: unset !important;
    max-width: unset !important;
  }
  
  /* Adjust card image heights for better proportions */
  .article-image,
  .result-image {
    height: 180px !important;
    object-fit: cover !important;
  }
  
  /* Optimize touch targets */
  .article-card {
    min-height: 320px;
  }
  
  /* Adjust padding for better spacing */
  .article-content,
  .result-content {
    padding: 1.25rem !important;
  }
  
  /* Fix container width */
  .container {
    max-width: 100% !important;
    padding: 0 1.5rem !important;
  }
}

/* iPad Pro Portrait - 1024x1366px */
@media only screen 
  and (min-device-width: 1024px) 
  and (max-device-width: 1024px)
  and (min-device-height: 1366px)
  and (max-device-height: 1366px)
  and (orientation: portrait)
  and (-webkit-min-device-pixel-ratio: 2) {
  
  /* Force 3-column layout for iPad Pro */
  .news-grid,
  .search-results,
  .category-grid {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 2rem !important;
    padding: 1.5rem !important;
  }
  
  /* Ensure consistent card sizing */
  .article-card,
  .search-result {
    width: 100% !important;
    min-width: unset !important;
    max-width: unset !important;
  }
  
  /* Maintain standard image height */
  .article-image,
  .result-image {
    height: 200px !important;
    object-fit: cover !important;
  }
  
  /* Ensure proper card height */
  .article-card {
    min-height: 350px;
    display: flex;
    flex-direction: column;
  }
  
  /* Make content area flexible */
  .article-content,
  .result-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: 1.5rem !important;
  }
  
  /* Push metadata to bottom */
  .article-meta,
  .result-meta {
    margin-top: auto;
  }
  
  /* Fix container for iPad Pro */
  .container {
    max-width: 100% !important;
    padding: 0 2rem !important;
  }
}

/* Additional Safari-specific fixes for both iPads */
@supports (-webkit-appearance: none) {
  @media only screen 
    and (min-device-width: 768px) 
    and (max-device-width: 1024px)
    and (orientation: portrait) {
    
    /* Fix Safari flexbox issues */
    .article-card {
      -webkit-flex: 1 1 auto;
      flex: 1 1 auto;
    }
    
    /* Ensure proper image rendering */
    .article-image,
    .result-image {
      -webkit-transform: translateZ(0);
      transform: translateZ(0);
      -webkit-backface-visibility: hidden;
      backface-visibility: hidden;
    }
    
    /* Fix grid gaps in Safari */
    .news-grid,
    .search-results,
    .category-grid {
      grid-gap: 1.5rem; /* Fallback for older Safari */
    }
    
    /* Ensure smooth scrolling */
    .container {
      -webkit-overflow-scrolling: touch;
    }
    
    /* Fix card shadows in Safari */
    .article-card {
      -webkit-box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
      box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    }
  }
}

/* Viewport-based media queries as fallback */
@media only screen and (min-width: 768px) and (max-width: 768px) {
  /* iPad Mini specific adjustments */
  .news-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media only screen and (min-width: 1024px) and (max-width: 1024px) {
  /* iPad Pro specific adjustments */
  .news-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
}

/* Touch-specific enhancements for iPads */
@media (hover: none) and (pointer: coarse) {
  @media only screen and (min-width: 768px) and (max-width: 1024px) {
    /* Remove hover effects on touch devices */
    .article-card:hover {
      transform: none !important;
      box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1) !important;
    }
    
    /* Improve touch targets */
    .article-card {
      padding: 0.5rem;
      margin: -0.5rem;
    }
    
    /* Ensure tags are easily tappable */
    .tag-item {
      min-height: 44px;
      display: inline-flex;
      align-items: center;
      padding: 0.5rem 1rem;
    }
  }
}