/* ---------------------------------------
   Mobile hero slider improvements
   for homepage Revolution Slider
   (screens below 768px)
----------------------------------------*/

@media only screen and (max-width: 767px) {
  :root {
    --hero-mobile-height: clamp(280px, 58vw, 340px);
  }

  /* Fix hero/slider height on mobile at wrapper level to avoid layout shift */
  .main_slider_area,
  .main_slider_area #slider_rev,
  .main_slider_area .fullwidthbanner-container,
  .main_slider_area .fullwidth_home_banner,
  .main_slider_area .tp-simpleresponsive,
  .main_slider_area .tp-simpleresponsive ul,
  .main_slider_area .tp-simpleresponsive ul li,
  .main_slider_area .tp-revslider-mainul,
  .main_slider_area .tp-revslider-mainul > li,
  .main_slider_area .tp-revslider-slidesli,
  .main_slider_area .fullwidth_home_banner ul,
  .main_slider_area .fullwidth_home_banner li {
    height: var(--hero-mobile-height) !important;
    min-height: var(--hero-mobile-height) !important;
    max-height: var(--hero-mobile-height) !important;
    overflow: hidden !important;
    transition: none !important;
  }

  /* Ensure internal Revolution slider holders also respect fixed height */
  .main_slider_area .slotholder,
  .main_slider_area .slotholder .tp-bgimg,
  .main_slider_area .tp-bgimg.defaultimg {
    height: 100% !important;
    max-height: 100% !important;
  }

  /* Ensure slider image covers and keeps aspect ratio */
  .fullwidth_home_banner li img,
  .main_slider_area .tp-simpleresponsive li img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover;
    display: block;
    transform: translateZ(0);
  }

  .main_slider_area {
    padding-bottom: 0 !important;
  }

  /* Center overlay content and improve readability */
  .fullwidth_home_banner li .tp-caption.large_black,
  .fullwidth_home_banner li .carousel-caption-inner {
    left: 0 !important;
    right: 0 !important;
    margin: 0 auto !important;
    text-align: center !important;
    width: 88% !important;
    white-space: normal !important;
  }

  /* First heading (title) */
  .fullwidth_home_banner li .tp-caption.large_black:first-of-type {
    top: auto !important;
    bottom: 104px !important;
    font-size: 21px !important;
    line-height: 1.2 !important;
    margin-bottom: 6px !important;
  }

  /* Second heading (description) */
  .fullwidth_home_banner li .tp-caption.large_black:nth-of-type(2) {
    top: auto !important;
    bottom: 70px !important;
    font-size: 15px !important;
    line-height: 1.25 !important;
    margin-bottom: 6px !important;
  }

  /* Button container */
  .fullwidth_home_banner li .carousel-caption-inner {
    top: auto !important;
    bottom: 24px !important;
    padding: 8px !important;
    background: rgba(247, 196, 17, 0.95) !important; /* keep contrast */
  }

  /* BOOK NOW / CTA button */
  .carousel-caption-inner .slider-btn-link {
    font-size: 14px !important;
    padding: 8px 22px !important; /* better touch target */
    display: inline-block;
  }
}

/* Very small screens (max-width: 479px) */
@media only screen and (max-width: 479px) {
  :root {
    --hero-mobile-height: 300px;
  }

  .fullwidthbanner-container,
  .fullwidth_home_banner,
  .fullwidth_home_banner ul,
  .tp-revslider-mainul,
  .tp-revslider-mainul > li,
  .fullwidth_home_banner li {
    height: var(--hero-mobile-height) !important;
    min-height: var(--hero-mobile-height) !important;
    max-height: var(--hero-mobile-height) !important;
  }

  .fullwidth_home_banner li .tp-caption.large_black:first-of-type {
    bottom: 100px !important;
    font-size: 19px !important;
  }

  .fullwidth_home_banner li .tp-caption.large_black:nth-of-type(2) {
    bottom: 68px !important;
    font-size: 14px !important;
  }

  .fullwidth_home_banner li .carousel-caption-inner {
    bottom: 20px !important;
    padding: 10px !important;
  }

  .carousel-caption-inner .slider-btn-link {
    font-size: 13px !important;
    padding: 10px 20px !important;
  }
}