/* TradingRoad V10 - Market cards editorial WebP image treatment.
   Images are uploaded separately to WordPress Media Library; no changes to original
   six-card layout, market copy, titles, or links. */
.market-grid .market-card{
  background-color:#e9ecfa;
  background-repeat:no-repeat;
  background-size:cover;
  background-position:center center;
}
.market-grid .market-forex{
  background-color:#05095f;
  background-image:
    linear-gradient(90deg,rgba(2,4,66,.24) 0%,rgba(2,4,66,.04) 55%,transparent 95%),
    linear-gradient(to top,rgba(3,4,69,.88) 0%,rgba(3,4,69,.36) 24%,transparent 53%),
    url("https://staging.tradingroad.co/wp-content/uploads/2026/10/tradingroad-01-forex-glass-currency.webp");
  background-position:center center,center center,center center;
}
.market-grid .market-metal{
  background-image:
    linear-gradient(to top,rgba(240,240,255,.97) 0%,rgba(240,240,255,.86) 20%,rgba(240,240,255,.02) 61%),
    url("https://staging.tradingroad.co/wp-content/uploads/2026/10/tradingroad-02-metals-v2.webp");
  background-position:center,66% center;
}
.market-grid .market-indices{
  background-image:
    linear-gradient(to top,rgba(236,239,253,.98) 0%,rgba(236,239,253,.88) 22%,rgba(236,239,253,.02) 62%),
    url("https://staging.tradingroad.co/wp-content/uploads/2026/10/tradingroad-03-indices-v2.webp");
  background-position:center,center;
}
.market-grid .market-shares{
  background-image:
    linear-gradient(to top,rgba(238,240,253,.98) 0%,rgba(238,240,253,.87) 24%,rgba(238,240,253,.02) 64%),
    url("https://staging.tradingroad.co/wp-content/uploads/2026/10/tradingroad-04-shares-v2.webp");
  background-position:center,center;
}
.market-grid .market-energy{
  background-image:
    linear-gradient(to top,rgba(231,237,252,.98) 0%,rgba(231,237,252,.88) 24%,rgba(231,237,252,.08) 64%),
    url("https://staging.tradingroad.co/wp-content/uploads/2026/10/tradingroad-05-energy-v2.webp");
  background-position:center,center;
}
.market-grid .market-commodities{
  background-image:
    linear-gradient(to top,rgba(242,239,255,.97) 0%,rgba(242,239,255,.86) 23%,rgba(242,239,255,.02) 65%),
    url("https://staging.tradingroad.co/wp-content/uploads/2026/10/tradingroad-06-commodities-v2.webp");
  background-position:center,center;
}
/* Hide the replaced decorative drawings; HTML labels and original card links remain. */
.market-grid .market-card :is(.forex-line-art,.metal-orbits,.indice-bars,.simple-shape){
  display:none!important;
}
.market-grid .market-card-top,.market-grid .market-card-bottom{position:relative;z-index:2}
.market-grid .market-card:not(.market-forex) .market-index,
.market-grid .market-card:not(.market-forex) .market-out,
.market-grid .market-card:not(.market-forex) h3{
  color:#030959;
}
.market-grid .market-card:not(.market-forex) p{color:#3E466D}
.market-grid .market-forex .market-card-top,
.market-grid .market-forex .market-card-bottom{color:#fff}
.market-grid .market-forex p{color:#E2E8FF}
/* Mobile: preserve the exact original grid, but ensure foreground copy stays legible. */
@media(max-width:760px){
  .market-grid .market-card:not(.market-forex){
    background-position:center,center;
  }
  .market-grid .market-forex{
    background-position:center,center,62% center;
  }
}

/* Commodities artifact correction: clip the 12px pale export gutter from the image's left edge. */
.market-grid .market-card.market-commodities {
  /* First layer is the existing reading gradient; second is the WebP. */
  background-size:cover,calc(100% + 32px) auto;
  background-position:center,right center;
}