/* CarsUsed.ca V9: photo-first correction after V8 visual review.
   Keep ALL live PHP forms/cards/copy and real dealer records unchanged.
   Remove the double/triple white wash from V6-V8; retain only a readable
   left title zone and an organic fade into the white content below. */

/* The province hero layout uses the full image plane, never a masked right
   half of a faded thumbnail. This restores recognizable landscapes and cars. */
@media (min-width:801px) {
  .v7-region-directory {
    position:relative;
    min-height:505px;
    background:#fff !important;
  }
  .v7-region-directory::before {
    inset:0 0 -112px !important;
    background-image:var(--v7-directory-banner) !important;
    background-size:cover !important;
    background-position:center 42% !important;
    background-repeat:no-repeat !important;
    -webkit-mask-image:none !important;
    mask-image:none !important;
    filter:contrast(1.08) saturate(1.20) brightness(1.03) !important;
  }
  .v7-region-directory::after {
    inset:0 0 -112px !important;
    background:
      linear-gradient(90deg,
        rgba(255,255,255,.97) 0%,
        rgba(255,255,255,.92) 15%,
        rgba(255,255,255,.73) 26%,
        rgba(255,255,255,.22) 43%,
        rgba(255,255,255,0) 59%),
      linear-gradient(180deg,transparent 64%,rgba(255,255,255,.03) 73%,rgba(255,255,255,.55) 88%,#fff 100%) !important;
  }
  .v7-region-directory + .v2-region-page {
    margin-top:-22px !important;
    position:relative;
    z-index:2;
  }
}

/* Homepage: maintain exact approved 2-line headline, cards, search and
   SUV placement while letting the colorful regional image read naturally. */
@media (min-width:801px) {
  .home-hero::before {
    background-size:cover !important;
    background-position:center center !important;
    background-repeat:no-repeat !important;
    -webkit-mask-image:none !important;
    mask-image:none !important;
    filter:saturate(1.17) contrast(1.07) brightness(1.015) !important;
  }
  .home-hero::after {
    background:linear-gradient(90deg,
      rgba(255,255,255,.49) 0%,
      rgba(255,255,255,.35) 21%,
      rgba(255,255,255,.12) 36%,
      rgba(255,255,255,0) 54%) !important;
  }
}
.home-hero.hero-toronto::before {
  background-image:url('/assets/img/hero/toronto-v9-waterfront.webp?v=9.0') !important;
}

/* On smaller devices, preserve the readable search and real QUICK LOOK
   while keeping a full-strength scenic layer below the opening copy. */
@media (max-width:800px) {
  .home-hero::before {
    -webkit-mask-image:none !important;
    mask-image:none !important;
    background-position:53% center !important;
    filter:saturate(1.16) contrast(1.07) !important;
  }
  .home-hero.hero-toronto::before {
    background-image:url('/assets/img/hero/mobile/toronto.webp?v=9.0') !important;
    background-position:47% center !important;
  }
  .home-hero::after {
    background:linear-gradient(180deg,rgba(255,255,255,.87) 0%,rgba(255,255,255,.74) 25%,rgba(255,255,255,.25) 48%,transparent 80%) !important;
  }
  .v7-region-directory::before {
    inset:0 0 -105px !important;
    background-image:var(--v7-directory-mobile) !important;
    background-position:65% top !important;
    background-size:cover !important;
    background-repeat:no-repeat !important;
    -webkit-mask-image:none !important;
    mask-image:none !important;
    filter:saturate(1.16) contrast(1.06) !important;
  }
  .v7-region-directory::after {
    inset:0 0 -105px !important;
    background:
      linear-gradient(90deg,rgba(255,255,255,.94),rgba(255,255,255,.77) 35%,rgba(255,255,255,.44) 70%,rgba(255,255,255,.16)),
      linear-gradient(180deg,transparent 50%,rgba(255,255,255,.16) 74%,#fff 100%) !important;
  }
}
@media (max-width:520px) {
  .v7-region-directory::before {background-position:65% top !important;}
  .v7-region-directory::after {
    background:linear-gradient(90deg,rgba(255,255,255,.95),rgba(255,255,255,.81) 52%,rgba(255,255,255,.45)),
               linear-gradient(180deg,transparent 50%,#fff 100%) !important;
  }
}


/* Region source artwork: full-bleed 1800px panoramas, no stacked masks. */
.v7-region-directory .section-shell{position:relative;z-index:3!important;}

/* FINAL V9 IMAGE BALANCE — keep the vehicle and skyline visible all the way
   to the start of the directory; fade only the last 14% of the canvas. */
@media(min-width:801px){
 .v7-region-directory::after{
  background:linear-gradient(90deg,rgba(255,255,255,.94) 0%,rgba(255,255,255,.83) 17%,rgba(255,255,255,.47) 30%,rgba(255,255,255,.08) 47%,transparent 62%),
   linear-gradient(180deg,transparent 80%,rgba(255,255,255,.08) 86%,rgba(255,255,255,.48) 94%,#fff 100%) !important;
 }
}
@media(max-width:800px){
 .v7-region-directory::after{
  background:linear-gradient(180deg,rgba(255,255,255,.96) 0%,rgba(255,255,255,.87) 30%,rgba(255,255,255,.48) 54%,rgba(255,255,255,.15) 78%,#fff 100%) !important;
 }
}