/* ============================================================
   DanyCars — targeted fixes ONLY for the home page (index.html).
   Include in <head> AFTER style.css (and last among all CSS files).

   Purpose: neutralize a couple of rules from the shared style.css that
   break the NEW mobile hero layout on the home page — without editing
   style.css itself (so the other pages of the site stay untouched).

   On mobile (@media max-width:767.98px) style.css declares:
     .hero-wrap .slider-text { align-items: flex-end }  — pushed the text down
     .hero-wrap .text        { margin-bottom: 250px }    — left a huge empty gap
   Below we override them with a more specific selector + !important.
   ============================================================ */

@media (max-width: 767.98px) {
  /* Undo pushing the text to the bottom (style.css used flex-end) */
  .hero-wrap .container .slider-text {
    -webkit-box-align: start !important;
    -ms-flex-align: start !important;
    align-items: flex-start !important;
    -ms-flex-line-pack: start !important;
    align-content: flex-start !important;
  }

  /* Undo the 250px bottom margin that created the empty gap */
  .hero-wrap .container .slider-text .text {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
  }

  /* ─── Fit the whole section into one phone screen ───
     Make hero-wrap a flex column; the overlay is out of flow (absolute),
     while .container stretches over the remaining space via flex:1.
     The content sits as a COMPACT group at the top (flex-start), without
     large gaps, and the rating card is lifted off the very bottom edge. */
  .hero-wrap {
    display: -webkit-box !important;
    display: -ms-flexbox !important;
    display: flex !important;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
  }
  .hero-wrap .container {
    -webkit-box-flex: 1;
    -ms-flex: 1 1 auto;
    flex: 1 1 auto;
    min-height: 0;
    height: auto;
    width: 100%;
    display: -webkit-box !important;
    display: -ms-flexbox !important;
    display: flex !important;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-pack: start;
    -ms-flex-pack: start;
    justify-content: flex-start;
    padding-bottom: 34px;   /* lifts the rating card off the very bottom of the screen */
  }
  /* Text block — sized by content, at the top, compact */
  .hero-wrap .container .slider-text {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
    width: 100%;
    -webkit-transform: translateY(18px);
    transform: translateY(18px);
  }
  /* Rating card — right under the badges with a moderate gap,
     NOT pinned to the bottom (auto removed, fixed margin set) */
  .hero-wrap .container .hero-rating-card {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
    margin-top: 18px !important;
  }
}

/* ════════════════════════════════════════════════════════════
   iPad mini / iPad Air (768–991.98px): the floating rating card
   overlaps the text. We force it back INTO THE FLOW below the
   content, full width. The selector is strengthened
   (.hero-wrap .container ...) + !important so that it reliably
   overrides position:absolute. iPad Pro (≥992px) is NOT affected.
   ════════════════════════════════════════════════════════════ */
@media (min-width: 768px) and (max-width: 991.98px) {
  /* Badges and rating — same width, aligned left, so the right edge
     of the rating card matches the badges and does not cover the person */
  .hero-wrap .container .hero-badges {
    width: 100% !important;
    max-width: 420px !important;
    margin-left: 0 !important;
    margin-right: auto !important;
  }
  .hero-wrap .container .hero-rating-card {
    position: static !important;
    top: auto !important;
    right: auto !important;
    left: auto !important;
    bottom: auto !important;
    -webkit-transform: none !important;
    transform: none !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 420px !important;
    margin: 18px auto 0 0 !important;   /* left aligned, same as the badges */
    padding: 14px 18px !important;
    z-index: auto !important;
  }
}