/* ========================================================================
   MOTUL Saratov 6.2.2 — mobile hero proportion + network badge clipping fix.
   Loads after v621-mobile.css. Desktop remains untouched.
   ======================================================================== */

@media (max-width: 700px) {
  /* The 6.2.1 badge was inside .home-hero__inner (z-index:2), while the next
     section had z-index:3, so the part overlapping the next section was
     painted underneath it. Put the whole hero stacking context above that
     section and keep the following section below it. */
  .motul-v62 .v61-hero {
    position: relative;
    z-index: 4;
    min-height: 610px;
    overflow: visible;
  }

  .motul-v62 .home-hero-benefits-mobile {
    z-index: 1;
    padding-top: 50px;
  }

  .motul-v62 .v61-hero .home-hero__inner {
    min-height: 610px;
    padding-top: 27px;
    padding-bottom: 0;
  }

  /* New crop puts the car and mechanic higher, so the image is visible next
     to the title instead of appearing only below the buttons. */
  .motul-v62 .v61-hero .home-hero__media img {
    object-position: 58% center;
    filter: brightness(1.17) saturate(1.06) contrast(1.02);
    transform: none;
  }

  .motul-v62 .v61-hero .home-hero__overlay {
    background:
      linear-gradient(90deg,
        rgba(3, 6, 8, .96) 0%,
        rgba(3, 6, 8, .89) 31%,
        rgba(3, 6, 8, .62) 49%,
        rgba(3, 6, 8, .21) 70%,
        rgba(3, 6, 8, .04) 100%),
      linear-gradient(180deg,
        rgba(3, 6, 8, .04) 0%,
        rgba(3, 6, 8, .02) 56%,
        rgba(3, 6, 8, .34) 100%);
  }

  .motul-v62 .v61-hero__location {
    margin-bottom: 14px;
  }

  .motul-v62 .v61-hero .home-hero__lead {
    margin-bottom: 18px;
  }

  /* Keep the approved visual language, but make the badge lower and ensure
     all of it remains visible above the following section. */
  .motul-v62 .v61-hero .home-hero__network-badge {
    min-height: 90px;
    grid-template-columns: 46px 56px minmax(0, 1fr);
    gap: 11px;
    margin-bottom: -31px;
    padding: 12px 14px;
    border-radius: 18px;
  }

  .motul-v62 .v61-hero .home-hero__network-icon {
    width: 46px;
    height: 46px;
  }

  .motul-v62 .v61-hero .home-hero__network-icon svg {
    width: 26px;
    height: 26px;
  }

  .motul-v62 .v61-hero .home-hero__network-number {
    font-size: 56px;
  }

  .motul-v62 .v61-hero .home-hero__network-copy b {
    font-size: 19px;
  }

  .motul-v62 .v61-hero .home-hero__network-copy small {
    font-size: 12px;
  }

  /* Slightly denser benefits, as agreed, now completely off the photo. */
  .motul-v62 .home-hero-benefits-mobile__card {
    min-height: 92px;
    padding: 12px 11px;
    gap: 10px;
  }

  .motul-v62 .home-hero-benefits-mobile__card svg {
    width: 29px;
    height: 29px;
    flex-basis: 29px;
  }

  .motul-v62 .home-hero-benefits-mobile__card b {
    font-size: 14px;
  }

  .motul-v62 .home-hero-benefits-mobile__card small {
    font-size: 11px;
  }

  .motul-v62 .v61-dashboard {
    padding-top: 18px;
  }
}

@media (max-width: 430px) {
  .motul-v62 .v61-hero,
  .motul-v62 .v61-hero .home-hero__inner {
    min-height: 590px;
  }

  .motul-v62 .v61-hero .home-hero__inner {
    padding-top: 24px;
  }

  .motul-v62 .v61-hero .home-hero__network-badge {
    min-height: 86px;
    grid-template-columns: 43px 52px minmax(0, 1fr);
    gap: 10px;
    margin-bottom: -29px;
    padding: 11px 13px;
  }

  .motul-v62 .v61-hero .home-hero__network-icon {
    width: 43px;
    height: 43px;
  }

  .motul-v62 .v61-hero .home-hero__network-number {
    font-size: 52px;
  }

  .motul-v62 .v61-hero .home-hero__network-copy b {
    font-size: 18px;
  }

  .motul-v62 .home-hero-benefits-mobile {
    padding-top: 47px;
  }

  .motul-v62 .home-hero-benefits-mobile__card {
    min-height: 88px;
    padding: 11px 10px;
  }
}