/*----------------------------------------------------------------------
    * Insert Your custom css
------------------------------------------------------------------------*/
/*css after this line*/

/* ==================================================================
   Image cards site-wide: no ugly grey loading gradient, and images
   fully cover their box (no grey gaps, no top-crop).
   Every .image-wrapper sits on a ratio class (ratio_* padding-bottom,
   or featured-1's bare .ratio) so each box already has a height.
================================================================== */

/* 1. Kill the grey animated loading gradient everywhere — use a clean
      dark fill so the brief loading state (or a missing image) looks
      intentional instead of a flashing grey shimmer. */
.image-wrapper {
  background: #000 !important;
  background-image: none !important;
  -webkit-animation: none !important;
  animation: none !important;
}

/* 2. Make the image (and its link wrapper) fill the box completely,
      cropping to cover instead of leaving grey gaps below the image. */
.image-wrapper > a {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.image-wrapper img.lazy {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 3. Featured-1 (big slider + news box) uses a bare .ratio with no fixed
      aspect — give the slider (left) and each news card (right) a uniform
      3:2 so the left column height matches the 2x2 grid on the right. */
.featured-1 .owl-carousel .image-wrapper,
.featured-1 .newsbox .image-wrapper {
  height: auto;
  aspect-ratio: 3 / 2;
}

/* 4. Sidebar + footer thumbnails: use a light grey fallback instead of the
      black one (cleaner for small thumbs / missing images). More specific
      than the global rule above, so this wins. */
.right-sidebar-lg .image-wrapper,
footer .image-wrapper {
  background: #eaeaea !important;
}

/* ==================================================================
   Foncier Facile animated leaderboard (header 728x90 HTML5 ad).
   The creative is a self-scaling 728x90 inside an iframe; this just
   gives the iframe a responsive 728:90 box (like the old img-fluid):
   full width up to 728px, centered, no border.
================================================================== */
.ff-ad-embed {
  width: 100%;
  max-width: 728px;
  margin: 0 auto;
  aspect-ratio: 728 / 90;
}
.ff-ad-embed iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  overflow: hidden;
}