/*
 * Mobile adaptation for /stati-dilerom/ (Стати дилером).
 * Loaded only on is_page('stati-dilerom') via mu-plugin.
 * Same pattern as mobile-about.css; ribbon styled like thank-you.
 */

@media (max-width: 767px) {

  /* ===== Hero: stack vertically, fix title overflow ===== */
  body.octo-dealer-page .octo-dealer__hero {
    overflow: visible !important;
  }
  body.octo-dealer-page .octo-dealer__hero-inner {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    grid-template-columns: none !important;
    min-height: 0 !important;
    /* Override desktop max-width:calc(100% - 48px) + margin auto that adds 24px each side */
    max-width: 100% !important;
    margin: 0 !important;
    padding: 24px 16px 0 !important;
  }
  body.octo-dealer-page .octo-dealer__hero-text {
    max-width: 100% !important;
    width: 100% !important;
    z-index: 2 !important;
  }
  body.octo-dealer-page .octo-dealer__hero-title {
    font-size: 40px !important;
    line-height: 0.95 !important;
    white-space: normal !important;
    margin: 0 0 16px 0 !important;
  }
  body.octo-dealer-page .octo-dealer__hero-lead {
    max-width: 100% !important;
    font-size: 14px !important;
    line-height: 1.5 !important;
    margin: 0 0 16px 0 !important;
  }
  body.octo-dealer-page .octo-dealer__hero-buttons {
    margin-top: 16px !important;
    width: 100% !important;
  }
  body.octo-dealer-page .octo-dealer__hero-img {
    position: relative !important;
    right: auto !important;
    bottom: auto !important;
    left: 0 !important;
    width: 100% !important;
    margin: 24px 0 0 !important;
    justify-content: center !important;
    z-index: 1 !important;
  }
  body.octo-dealer-page .octo-dealer__hero-img img {
    width: 100% !important;
    max-width: 412px !important;
    height: auto !important;
    max-height: none !important;
    margin: 0 auto !important;
  }
  body.octo-dealer-page .octo-dealer__hero-graffiti {
    opacity: 0.3 !important;
  }

  /* ===== Ribbon — pattern from mobile-thankyou (single band) =====
     Original is <img class="octo-dealer__ribbons"> with desktop margin-top: -160px.
     Switch to cover/no-repeat behavior, fixed 110px height, mt -45 like thank-you. */
  body.octo-dealer-page .octo-dealer__ribbons {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    height: 110px !important;
    object-fit: cover !important;
    object-position: center !important;
    margin: -45px 0 0 !important;
    padding: 0 !important;
    position: relative !important;
    z-index: 10 !important;
  }

  /* ===== Generic section: tighter padding (30/30 → 60px between sections) ===== */
  body.octo-dealer-page .octo-dealer__section {
    padding: 30px 0 !important;
  }
  body.octo-dealer-page .octo-dealer__wrap {
    max-width: 100% !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
    box-sizing: border-box !important;
    margin: 0 !important;
  }
  body.octo-dealer-page .octo-dealer__section-title,
  body.octo-dealer-page .octo-dealer__rules-title {
    font-size: 40px !important;
    line-height: 1 !important;
  }

  /* Banners gap (if dealer page uses same feature pattern) */
  body.octo-dealer-page .octo-dealer__features {
    gap: 24px !important;
  }

  /* "Стати дилером" CTA relocated below else-grid via JS (octolab-auth-popup wp_footer).
     Full-width pill button matching Figma. */
  body.octo-dealer-page .octo-dealer__else-foot {
    display: block !important;
    margin-top: 24px !important;
    width: 100% !important;
  }
  body.octo-dealer-page .octo-dealer__else-foot .octo-dealer__btn {
    width: 100% !important;
    justify-content: space-between !important;
  }
}