/* ==============================================================
   RIDE WELL AUTO - RESPONSIVE STYLES
   --------------------------------------------------------------
   Breakpoints (screen width):
     <= 1200px : small laptop
     <= 1100px : tablet landscape
     <=  991px : tablet (portrait + landscape) -> mobile menu
     <=  767px : large phone / small tablet portrait
     <=  575px : phone
     <=  380px : very small phone
   + phone landscape (height kam) ke liye alag rules (sabse neeche)
   ============================================================== */


/* ---------- SMALL LAPTOP (<= 1200px) ---------- */
@media (max-width: 1200px) {
    .main-nav__list a { padding: 9px 16px; }
    .hero__inner { gap: 36px; }
    .highlight-card { padding: 22px 18px; }
    .split { gap: 50px; }
}


/* ---------- TABLET LANDSCAPE (<= 1100px) ---------- */
@media (max-width: 1100px) {
    .header-call__text { display: none; }         /* sirf phone icon */
    .highlights__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .layout { grid-template-columns: minmax(0, 1fr) 320px; gap: 40px; }
    .cta-box { padding: 44px 40px; }
    .footer-credit { padding-right: 0; width: 100%; }
    .site-footer__bottom-inner { padding-bottom: 100px; }  /* floating button ke liye */
}


/* ---------- TABLET (<= 991px) : MOBILE MENU ---------- */
@media (max-width: 991px) {
    :root { --header-h: 74px; }

    .section { padding: 80px 0; }
    .section--tight { padding: 60px 0; }

    .main-nav { display: none; }
    .menu-toggle { display: inline-flex; }
    .header-actions { margin-left: auto; gap: 12px; }
    .header-call__text { display: flex; }
    .logo img { width: 72px; }

    /* Hero: text upar, slider neeche */
    .hero { padding: 70px 0 140px; }
    .hero__inner { grid-template-columns: 1fr; text-align: center; gap: 40px; }
    .hero__text { margin-inline: auto; }
    .hero__actions { justify-content: center; }
    .hero__stats { justify-content: center; }
    .hero__visual { max-width: 620px; width: 100%; margin-inline: auto; }

    .split { grid-template-columns: 1fr; gap: 50px; }
    .split__media { max-width: 600px; width: 100%; margin-inline: auto; }
    .split--top .split__media { order: -1; }

    .why__inner { grid-template-columns: 1fr; gap: 40px; }
    .why__intro { text-align: center; }
    .why__intro p { max-width: 620px; margin-inline: auto; }

    .cta-box { flex-direction: column; align-items: flex-start; }

    .layout { grid-template-columns: 1fr; gap: 40px; }
    .layout__side { position: static; }
    .book-card { max-width: 520px; width: 100%; margin-inline: auto; }

    .period-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }

    .site-footer__grid { grid-template-columns: 1fr 1fr; gap: 40px; padding-block: 60px 40px; }
    .footer-col--about { grid-column: 1 / -1; }
    .footer-col--about p { max-width: 520px; }

    .map-card iframe { height: 380px; }
}


/* ---------- SERVICES 1 COLUMN (<= 820px) ---------- */
@media (max-width: 820px) {
    .service-grid { grid-template-columns: 1fr; max-width: 540px; margin-inline: auto; }
    .info-grid { grid-template-columns: 1fr; max-width: 540px; margin-inline: auto; }
}


/* ---------- LARGE PHONE (<= 767px) ---------- */
@media (max-width: 767px) {
    :root { --gutter: 18px; }
    body { font-size: 16px; }

    .section { padding: 64px 0; }
    .section--tight { padding: 48px 0; }
    .section-head { margin-bottom: 36px; }

    .topbar__inner { flex-direction: column; justify-content: center; gap: 2px; padding-block: 8px; text-align: center; }
    .topbar { font-size: .8rem; }

    .header-call { display: none; }   /* mobile pe phone button menu + hero mein hai */

    .hero { padding: 56px 0 130px; }
    .hero__text { font-size: 1.05rem; }
    .hero__stats { gap: 18px 26px; margin-top: 36px; }
    .hero__stats strong { font-size: 1.6rem; }

    .highlights { margin-top: -90px; }
    .highlights__grid { grid-template-columns: 1fr; gap: 14px; }

    .media-card { padding: 30px 14px; border-radius: 22px; }
    .media-card__badge { left: 14px; bottom: 14px; padding: 10px 14px; }
    .media-card__badge strong { font-size: 1.6rem; }

    .cta-section { padding: 64px 0; }
    .cta-box { padding: 36px 26px; border-radius: 22px; }
    .cta-box__content { flex-direction: column; align-items: flex-start; gap: 16px; }
    .cta-box__actions { width: 100%; }
    .cta-box__actions .btn { flex: 1 1 200px; }

    .van-gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
    .van-gallery__item,
    .van-gallery__item:nth-child(4) { grid-column: span 1; padding: 18px 10px; }
    .van-gallery__item:nth-child(5) { grid-column: 1 / -1; }

    .mv-grid { grid-template-columns: 1fr; gap: 20px; }
    .mv-card { padding: 34px 26px; }

    .form-card { padding: 30px 20px; border-radius: 20px; }
    .form-grid { grid-template-columns: 1fr; }
    .btn--block-sm { width: 100%; }

    .legal-card { padding: 30px 20px; border-radius: 20px; }

    .map-card { border-radius: 18px; }
    .map-card iframe { height: 320px; }

    .site-footer__bottom-inner { flex-direction: column; text-align: center; }

    .float-contact { right: 16px; bottom: calc(16px + env(safe-area-inset-bottom)); }
    .float-contact__label { display: none; }
    .float-contact__btn { width: 56px; height: 56px; }
    .float-contact__btn .icon { width: 24px; height: 24px; }
}


/* ---------- PHONE (<= 575px) ---------- */
@media (max-width: 575px) {
    :root { --header-h: 66px; }
    .logo img { width: 62px; }
    .header-book { display: none; }   /* Book Now menu drawer + hero mein hai */
    .menu-toggle { width: 44px; height: 44px; }

    .hero__actions { flex-direction: column; }
    .hero__actions .btn { width: 100%; }
    .hero__stats { justify-content: space-between; gap: 14px; }
    .hero__stats li { flex-direction: column; gap: 6px; text-align: center; }
    .slider__controls { margin-top: 16px; }

    .page-banner { padding: 60px 0 70px; }
    .page-banner__text { font-size: 1rem; }

    .service-card { padding: 30px 24px; }

    .why-item { padding: 16px; gap: 14px; }
    .why-item__icon { width: 42px; height: 42px; }
    .why-item__text { font-size: 1rem; }

    .period-card { padding: 24px 14px; }

    .site-footer__grid { grid-template-columns: 1fr; gap: 34px; }
}


/* ---------- VERY SMALL PHONE (<= 380px) ---------- */
@media (max-width: 380px) {
    :root { --gutter: 14px; }
    .btn--lg { padding: 14px 20px; font-size: 1rem; }
    .hero__stats span { font-size: .75rem; }
    .period-grid { grid-template-columns: 1fr; }
    .cta-box__actions .btn { flex-basis: 100%; }
}


/* ---------- PHONE / SMALL TABLET LANDSCAPE (height kam) ---------- */
@media (max-height: 520px) and (orientation: landscape) and (max-width: 991px) {
    .site-header { position: relative; }   /* sticky header screen na khaye */
    .topbar { display: none; }

    /* Hero dobara 2 column - landscape mein chaudai zyada hai */
    .hero { padding: 40px 0 120px; }
    .hero__inner { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); text-align: left; gap: 24px; }
    .hero__title { font-size: 2.2rem; }
    .hero__text { font-size: .98rem; margin-bottom: 22px; }
    .hero__actions { flex-direction: row; justify-content: flex-start; }
    .hero__actions .btn { width: auto; }
    .hero__stats { display: none; }

    .highlights__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .page-banner { padding: 44px 0 50px; }

    .mobile-menu__panel { gap: 14px; }
    .mobile-menu__list a { padding: 10px 14px; }
}


/* ---------- VERY LARGE SCREENS (>= 1600px) ---------- */
@media (min-width: 1600px) {
    :root { --container: 1320px; }
}