/* =====================================================================
   RUPAL PLASTICS - HOME BANNER : RESPONSIVE FIX
   Load this file AFTER style.css (see header.php).

   What it fixes
   1. Banner was narrower than the page on some screens (dark strip on
      the right / sides cut). Cause: max-height + aspect-ratio shrank the
      width. The banner is now always 100% wide.
   2. Banner zoom reduced (1.08 -> 1.03) so the picture is not cropped.
   3. Banner text can no longer be hidden: arrows stay clear of the text,
      text is kept inside the picture on every screen size.
   4. Works on laptops, desktops, tablets and phones (portrait + landscape).
   ===================================================================== */

/* ---------- 1. always full width, never shrink ---------- */
.hero-section,
.hero-slider,
.hero-slider .owl-stage-outer,
.hero-slider .owl-item {
  width: 100%;
  max-width: 100%;
}

.hero-section {
  overflow: hidden;
}

.hero-single.banner-slide {
  width: 100% !important;
  max-width: 100% !important;
  min-height: 0 !important;
  max-height: none !important;
  margin: 0;
  background: #fff !important;
}

.hero-single.banner-slide picture,
.hero-single.banner-slide img {
  width: 100%;
  height: 100%;
  max-width: none;
}

/* ---------- 2. very light zoom ---------- */
@keyframes bannerZoom {
  from { transform: scale(1); }
  to   { transform: scale(1.03); }
}

.hero-slider .owl-item.owl-animated-out .banner-slide img {
  animation: none;
  transform: scale(1.03);
}

/* ---------- 3. laptops / desktops (992px and above) ----------
   height follows the picture ratio (1905 x 730) so nothing is cropped */
@media (min-width: 992px) {
  .hero-single.banner-slide {
    aspect-ratio: 1905 / 730;
    height: auto !important;
  }
}

/* ---------- arrows: smaller and tucked to the edge so they never sit on the text ---------- */
.hero-slider.owl-theme .owl-nav [class*=owl-] {
  width: 44px;
  height: 44px;
  line-height: 44px;
  font-size: 18px;
}

@media (min-width: 992px) {
  .hero-slider.owl-theme .owl-nav .owl-prev { left: 12px !important; }
  .hero-slider.owl-theme .owl-nav .owl-next { right: 12px !important; }
}

/* tablets and phones use the dots instead of arrows */
@media (max-width: 991px) {
  .hero-slider.owl-theme .owl-nav { display: none !important; }
}

/* ---------- 4. text: stays inside the picture, never behind the arrows ---------- */
.banner-text {
  max-width: 92%;
}

/* slide 3 : BUILDING A SUSTAINABLE FUTURE */
@media (min-width: 992px) {
  .banner-text.bt-3 {
    left: max(4.2%, 72px);
    top: 40%;
    font-size: clamp(22px, 3.1vw, 62px);
    max-width: 58%;
  }
  .banner-text.bt-3 .bt-line { white-space: nowrap; }
  .bt-3 .bt-sub { white-space: nowrap; }
}

/* slide 1 : RPPL Strongly Believes */
@media (min-width: 992px) {
  .banner-text.bt-1 {
    left: max(14%, 80px);
    font-size: clamp(16px, 2.05vw, 42px);
  }
  .banner-text.bt-1 .bt-line { white-space: nowrap; }
}

/* slide 2 : Advanced Polymer, Endless Possibilities */
.banner-text.bt-2 {
  max-width: 100%;
}

/* ---------- tablets ---------- */
@media (min-width: 768px) and (max-width: 991px) {
  .hero-single.banner-slide { aspect-ratio: 16 / 10; }
  .banner-text.bt-1 { left: 8%; font-size: 3.6vw; }
  .banner-text.bt-3 { left: 5%; top: 34%; font-size: 5vw; max-width: 90%; }
}

/* ---------- small tablets / big phones ---------- */
@media (min-width: 576px) and (max-width: 767px) {
  .hero-single.banner-slide { aspect-ratio: 4 / 3; }
  .banner-text.bt-1 { left: 7%; right: 7%; font-size: 4.4vw; }
  .banner-text.bt-3 { left: 5%; right: 5%; top: 8%; transform: none; font-size: 6vw; max-width: 90%; }
  .banner-text.bt-2 { font-size: 4.6vw; }
}

/* ---------- phones (portrait) ---------- */
@media (max-width: 575px) {
  .hero-single.banner-slide {
    aspect-ratio: 4 / 5;
    min-height: 0 !important;
    max-height: none !important;
  }
  .banner-text.bt-1 { left: 6%; right: 6%; font-size: 6.4vw; }
  .banner-text.bt-3 { left: 6%; right: 5%; top: 6%; font-size: 6.4vw; max-width: 90%; }
  .banner-text.bt-3 .bt-line { white-space: normal; }
  .banner-text.bt-2 { font-size: 6vw; }
}

/* very small phones (320px) */
@media (max-width: 359px) {
  .banner-text.bt-1,
  .banner-text.bt-3 { font-size: 6vw; }
  .banner-text.bt-2 { font-size: 5.6vw; }
}

/* ---------- phones / small tablets turned sideways ---------- */
@media (max-height: 520px) and (orientation: landscape) and (max-width: 991px) {
  .hero-single.banner-slide { aspect-ratio: 2 / 1; }
  .banner-text.bt-1 { left: 8%; right: auto; top: 50%; bottom: auto; transform: translateY(-50%); font-size: 3.2vw; }
  .banner-text.bt-3 { left: 5%; right: auto; top: 38%; transform: translateY(-50%); font-size: 4.4vw; max-width: 60%; }
  .banner-text.bt-2 { font-size: 3.2vw; bottom: 4%; }
}

/* ---------- general safety for the whole site ---------- */
img, video, iframe, svg { max-width: 100%; }
table { max-width: 100%; }
.table-responsive, .table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* long words / tagline text wrap instead of running off the screen */
.site-title-tagline, .site-title { overflow-wrap: anywhere; }

/* wide tables scroll sideways inside themselves on small screens */
@media (max-width: 991px) {
  table.table { display: block; width: 100%; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
}


/* =====================================================================
   V2 FIXES  (laptop banner cut / slide-2 text / slide-2 animation / tablet)
   ===================================================================== */

/* ---- A. the picture is NEVER cropped or shrunk on laptops/desktops ----
   style.css had  max-height:calc(100svh - 90px)  +  min-height:440px  which
   squeezed the banner on short laptop screens (e.g. 1366x768, 1385x608)
   and cut the picture.  Height now always follows the picture ratio.     */
@media (min-width: 992px) {
  .hero-single.banner-slide {
    aspect-ratio: 1905 / 730 !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
  }
}

/* the dark colour behind the slides was visible as a black strip on the
   right side of some laptops - make it white so nothing dark can show   */
.hero-slider .owl-item,
.hero-slider .owl-stage-outer,
.hero-section { background: #fff !important; }

/* ---- B. text sizes follow the BANNER width (not the screen) ----
   container units (cqw) = same look as a PC on every laptop size       */
.hero-single.banner-slide { container-type: inline-size; }

/* ---- C. slide 2 text : "Advanced Polymer, Endless Possibilities" ----
   sits in the clear strip UNDER the category labels, on one line,
   exactly like on a PC, at any laptop width                           */
@media (min-width: 992px) {
  .banner-text.bt-2 {
    left: 50%;
    bottom: 1.4%;
    width: 100%;
    max-width: 100%;
    transform: translateX(-50%);
    font-size: 2.55vw;            /* fallback for old browsers */
    font-size: 2.55cqw;
    line-height: 1.15;
    white-space: nowrap;
  }
  .bt-2 .bt-line {
    display: inline-block;
    padding: 0 .12em .1em;
  }
}
@media (min-width: 1920px) {
  .banner-text.bt-2 { font-size: 49px; }   /* same as 1920px PC */
}

/* ---- D. slide 2 : slide / pan animation on laptops (same idea as the
   mobile banner, where the product strip glides sideways) ----------- */
@keyframes bannerDrift {
  from { transform: scale(1.05) translate3d(1.6%, 0, 0); }
  to   { transform: scale(1.05) translate3d(-1.6%, 0, 0); }
}
@media (min-width: 992px) and (max-width: 1599px) {
  .hero-slider .owl-item.active .banner-slide.bs-2 img {
    animation: bannerDrift 8s ease-in-out forwards;
  }
  /* outgoing slide stays where the drift ended -> no jump while fading */
  .hero-slider .owl-item.owl-animated-out .banner-slide.bs-2 img {
    animation: none;
    transform: scale(1.05) translate3d(-1.6%, 0, 0);
  }
}
@media (prefers-reduced-motion: reduce) {
  .hero-slider .owl-item.active .banner-slide.bs-2 img { animation: none; transform: none; }
}

/* ---- E. tablets & big phones (576 - 991px, incl. the 768px view) ----
   slide 2 : picture on top, title in its own band underneath
             (nothing sits on the labels) + sideways pan like mobile
   slide 4 : whole poster is shown (it was cropped: "RE / IPATING")     */
@keyframes bannerPan {
  from { object-position: 0% 50%; }
  to   { object-position: 100% 50%; }
}
@media (min-width: 576px) and (max-width: 991px) {
  .hero-single.banner-slide.bs-2 { background: #d2d4d3 !important; }
  .hero-single.banner-slide.bs-2::before { display: none; }
  .hero-single.banner-slide.bs-2 img {
    height: 76%;
    -webkit-mask-image: linear-gradient(to bottom, #000 90%, transparent 100%);
            mask-image: linear-gradient(to bottom, #000 90%, transparent 100%);
  }
  .hero-slider .owl-item.active .banner-slide.bs-2 img {
    animation: bannerZoom 8s ease-in-out forwards, bannerPan 7s ease-in-out forwards;
  }
  .hero-slider .owl-item.owl-animated-out .banner-slide.bs-2 img {
    animation: none; object-position: 100% 50%;
  }
  .banner-text.bt-2 {
    left: 0; right: 0; width: 100%;
    transform: none;
    bottom: 3.5%;
    text-align: center;
    font-size: 4.2vw;
    font-size: 4.2cqw;
    line-height: 1.2;
  }
  .bt-2 .bt-line { display: block; padding: 0; }

  /* slide 4 : show the full poster, white sides match the poster edge */
  .hero-single.banner-slide.bs-4 { background: #fff !important; }
  .hero-single.banner-slide.bs-4 img { object-fit: contain; }
}