/* Critical above-the-fold styles */
html {
  scroll-behavior: smooth;
  /* Mobile viewport height fix */
  height: -webkit-fill-available;
}

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif;
  line-height: 1.6;
  color: #1a202c;
  background: #ffffff;
  /* Mobile viewport height fix */
  min-height: 100vh;
  min-height: -webkit-fill-available;
  /* Safe area insets for iOS devices */
  padding: env(safe-area-inset-top, 0)
           env(safe-area-inset-right, 0)
           env(safe-area-inset-bottom, 0)
           env(safe-area-inset-left, 0);
  /* contain: layout style paint; - Removed: breaks fixed positioning */
  /* will-change: scroll-position; - Removed: can interfere with fixed positioning */
}

.dark body {
  background: #1a202c;
  color: #e2e8f0;
}

/* Article card critical styles */
.article-card {
  contain: layout style paint;
  content-visibility: auto;
  contain-intrinsic-size: 1px 256px;
}

/* Loading skeleton */
.skeleton {
  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
  background-size: 200% 100%;
  animation: loading 1.5s infinite;
}

.dark .skeleton {
  background: linear-gradient(90deg, #4a5568 25%, #2d3748 50%, #4a5568 75%);
  background-size: 200% 100%;
}

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

/* Image optimization with explicit dimensions for CLS prevention */
img {
  content-visibility: auto;
  contain-intrinsic-size: 1px 300px;
  image-rendering: -webkit-optimize-contrast;
  loading: lazy;
  decoding: async;
  width: 100%;
  height: auto;
  aspect-ratio: 16/9;
}

/* CLS prevention for article cards */
.article-card {
  min-height: 256px;
  width: 100%;
}

/* Performance optimization for list rendering */
.news-list {
  contain: layout style;
}