/**
 * @file
 * Browser compatibility styles for YRBlog Drupal theme.
 *
 * Contains vendor prefixes, browser-specific fixes,
 * and fallback styles for older browsers.
 *
 * @version 1.0
 * @author YRBlog Team
 */

/* Compatibilité avec les navigateurs modernes */
@supports (display: grid) {
  .grid-layout {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    grid-gap: 20px;
  }
}

/* Fallback pour les navigateurs ne supportant pas grid */
.no-cssgrid .grid-layout {
  display: flex;
  flex-wrap: wrap;
}

.no-cssgrid .grid-layout > * {
  flex: 0 0 calc(33.333% - 20px);
  margin: 10px;
}

/* Support des variables CSS */
:root {
  --primary-color: #3498db;
  --secondary-color: #2c3e50;
  --text-color: #333;
  --background-color: #fff;
}

/* Fallback pour les navigateurs ne supportant pas les variables CSS */
.primary-bg {
  background-color: var(--primary-color, #3498db);
}

.secondary-bg {
  background-color: var(--secondary-color, #2c3e50);
}

/* Support pour object-fit */
.cover-image {
  width: 100%;
  height: 300px;
  object-fit: cover;
}

/* Fallback pour les navigateurs ne supportant pas object-fit */
.no-objectfit .cover-image {
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 300px;
}

/* Support pour les media queries modernes */
@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* Support pour les écrans à haute densité de pixels */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  .high-res-image {
    background-image: url('../images/high-res.jpg');
  }
}

/* Polyfill pour les navigateurs plus anciens */
.js .old-browser-support {
  visibility: hidden;
}

.js.loaded .old-browser-support {
  visibility: visible;
}