/* ==========================================================================
   Homepage model tiles — image source: proton.com "Models" popup (CMS assets)
   Tiles are 300x170 with a flat #1A1A1A background. This layer only aligns the
   surrounding surfaces so the tiles sit seamlessly, and renders them at native
   width (300px) so the baked-in model name stays crisp.
   No copy, links, prices or DOM structure are changed.
   ========================================================================== */

/* --- 1. "Model Kereta Proton Terbaru" listing cards ---------------------- */
/* Card padding-top is 10px and the tile is 170px tall -> the dark band must
   end at exactly 180px, otherwise the card title lands on the dark area. */
.elementor-element-18d1bd76 > .e-con.e-child:has(img[src*="proton-models"]) {
  background-image: linear-gradient(rgb(26, 26, 26) 180px, #ffffff 0) !important;
}

.elementor-element-18d1bd76 > .e-con.e-child:has(img[src*="proton-models"]) .elementor-widget-image {
  display: block;
  height: auto !important;
  min-height: 0 !important;
  flex: 0 0 auto !important;
  align-self: flex-start;
  width: 100%;
}

.elementor-element-18d1bd76 > .e-con.e-child:has(img[src*="proton-models"]) .elementor-widget-image .elementor-widget-container {
  height: auto !important;
  min-height: 0 !important;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  /* source CSS pulls S70/Saga image up by -30px (transparent PNG had bottom
     padding); the new tiles are opaque and full-bleed, so reset it */
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

.elementor-element-18d1bd76 > .e-con.e-child:has(img[src*="proton-models"]) .elementor-widget-image > a {
  height: auto !important;
  display: block;
}

.elementor-element-18d1bd76 > .e-con.e-child:has(img[src*="proton-models"]) .elementor-widget-image img {
  width: 300px;
  max-width: 100%;
  height: auto;
  display: block;
  margin: 0 auto;
}

/* --- 2. Top model strip carousel ---------------------------------------- */
/* Solid band so 300x170 tiles blend with no white gaps between slides */
.elementor-element-0f9b769 {
  background-image: linear-gradient(rgb(26, 26, 26), rgb(26, 26, 26)) !important;
}

.elementor-element-0f9b769 .swiper-slide-image {
  width: 300px;
  max-width: 100%;
  height: auto;
  display: block;
  margin: 0 auto;
}

/* --- 3. Mobile ----------------------------------------------------------- */
@media (max-width: 767px) {
  /* mobile card padding-top is 20px (source CSS) -> band must end at 190px */
  .elementor-element-18d1bd76 > .e-con.e-child:has(img[src*="proton-models"]) {
    background-image: linear-gradient(rgb(26, 26, 26) 190px, #ffffff 0) !important;
  }

  .elementor-element-18d1bd76 > .e-con.e-child:has(img[src*="proton-models"]) .elementor-widget-image img {
    width: 100%;
    max-width: 300px;
  }
}