/* =========================================================
   PR Freight Logistics — Home Hero Banner (unique redesign)
   Scope: .home1-banner-section on index.php ONLY.
   Loaded AFTER style.css + site-enhancements.css. Does not
   touch any other section/component on the page.

   Structure added inside the existing swiper markup so the
   Swiper() JS init in custom.js keeps working untouched:

   .home1-banner-section (unchanged wrapper, kept for Swiper)
     .pr-hero-wrapper                 (banner-wrapper)
       .pr-hero-media                 (video layer)
       .pr-hero-pattern               (signature facet + route pattern)
       .pr-hero-content-wrap          (banner-content-wrap)
         .container
           .row.pr-hero-row
             .col-*.pr-hero-col
               .pr-hero-content       (banner-content two — copy unchanged)
========================================================= */

/* ---------------------------------------------------------
   1. Wrapper + media layer
--------------------------------------------------------- */
.home1-banner-section .pr-hero-wrapper {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}

.home1-banner-section .pr-hero-wrapper::before {
  /* deeper, brand-tinted scrim so the facet pattern + video read as one scene */
  background: linear-gradient(115deg,
      rgba(4, 12, 34, 0.94) 0%,
      rgba(7, 27, 74, 0.82) 32%,
      rgba(7, 27, 74, 0.42) 58%,
      rgba(7, 27, 74, 0.18) 100%);
  z-index: 1;
}

.pr-hero-media {
  position: absolute;
  inset: 0;
  z-index: 0;
}

/* ---------------------------------------------------------
   2. Signature pattern layer — faceted route-mark + shipment
   route line. Original geometry inspired by the reference
   moodboard (angular facet cluster + diagonal ribbon),
   redrawn in the PR Freight brand palette.
--------------------------------------------------------- */
.pr-hero-pattern {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  overflow: hidden;
}

.pr-hero-facets {
  position: absolute;
  top: 6%;
  left: -2.5%;
  width: clamp(150px, 16vw, 240px);
  height: auto;
  filter: drop-shadow(0 18px 30px rgba(0, 10, 40, 0.45));
  animation: prHeroFacetFloat 7s ease-in-out infinite;
}

.pr-hero-facets .pr-facet-a { fill: #071B4A; }
.pr-hero-facets .pr-facet-b { fill: url(#prFacetGradB); }
.pr-hero-facets .pr-facet-c { fill: var(--primary-color1, #FAC12E); }
.pr-hero-facets .pr-facet-d { fill: #ffffff; opacity: .16; }

/* diagonal shipment "route" ribbon, upper right — echoes the
   reference pattern's diagonal accent, redrawn as a route line */
.pr-hero-route {
  position: absolute;
  top: -6%;
  right: 9%;
  width: 3px;
  height: 46%;
  background: linear-gradient(180deg, transparent 0%, #00A6C7 30%, #0057B8 78%, transparent 100%);
  transform: rotate(-28deg);
  transform-origin: top center;
  border-radius: 2px;
}

.pr-hero-route::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 6%;
  width: 9px;
  height: 9px;
  background: var(--primary-color1, #FAC12E);
  border-radius: 50%;
  transform: translateX(-50%);
  box-shadow: 0 0 0 0 rgba(250, 193, 46, .65);
  animation: prHeroPing 2.6s ease-out infinite;
}

.pr-hero-route.pr-hero-route-2 {
  right: 15%;
  height: 30%;
  opacity: .55;
  animation: none;
}

.pr-hero-route.pr-hero-route-2::after { display: none; }

@keyframes prHeroFacetFloat {

  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-10px);
  }
}

@keyframes prHeroPing {
  0% {
    box-shadow: 0 0 0 0 rgba(250, 193, 46, .55);
  }

  70% {
    box-shadow: 0 0 0 14px rgba(250, 193, 46, 0);
  }

  100% {
    box-shadow: 0 0 0 0 rgba(250, 193, 46, 0);
  }
}

@media (prefers-reduced-motion: reduce) {

  .pr-hero-facets,
  .pr-hero-route::after {
    animation: none !important;
  }
}

/* ---------------------------------------------------------
   3. Content grid — section > container > row > column,
   left-aligned (overrides the template's centered default
   only inside this hero, via higher selector specificity)
--------------------------------------------------------- */
.home1-banner-section .pr-hero-content-wrap.banner-content-wrap {
  z-index: 3;
  display: flex;
  align-items: flex-end;
  justify-content: flex-start;
  padding-bottom: clamp(40px, 7vw, 90px);
}

.pr-hero-row {
  width: 100%;
  justify-content: flex-start;
  text-align: left;
}

.pr-hero-col {
  position: relative;
  margin-right: auto;
  text-align: left;
}

.home1-banner-section .pr-hero-content-wrap .pr-hero-col .banner-content.pr-hero-content {
  max-width: 660px;
  width: 100%;
  margin: 0;
  text-align: left;
}

.home1-banner-section .pr-hero-content-wrap .pr-hero-col .banner-content.pr-hero-content h1 {
  position: relative;
  padding-left: 22px;
  border-left: 4px solid var(--primary-color1, #FAC12E);
      font-size: 40px;
}

.home1-banner-section .pr-hero-content-wrap .pr-hero-col .banner-content.pr-hero-content p {
  text-align: left;
    max-width: 560px;
    padding-left: 22px;
    line-height: 1.6;
    text-align: justify;
    font-size: 15px;
}

.home1-banner-section .pr-hero-content-wrap .pr-hero-col .banner-content.pr-hero-content .primary-btn2 {
  margin-left: 22px;
}

/* ---------------------------------------------------------
   4. Responsiveness
--------------------------------------------------------- */
@media (max-width: 1199px) {
  .pr-hero-facets {
    top: 4%;
  }

  .home1-banner-section .pr-hero-content-wrap.banner-content-wrap {
    padding-bottom: 9%;
  }
}

@media (max-width: 991px) {
  .pr-hero-route.pr-hero-route-2 {
    display: none;
  }
}

@media (max-width: 767px) {
  .pr-hero-facets {
    width: clamp(110px, 26vw, 150px);
    top: 5%;
    left: -4%;
    opacity: .85;
  }

  .pr-hero-route {
    right: 6%;
    height: 34%;
  }

  .home1-banner-section .pr-hero-content-wrap.banner-content-wrap {
    align-items: flex-end;
    justify-content: flex-start;
    padding-bottom: 34px;
  }

  .home1-banner-section .pr-hero-content-wrap .pr-hero-col .banner-content.pr-hero-content h1,
  .home1-banner-section .pr-hero-content-wrap .pr-hero-col .banner-content.pr-hero-content p {
    padding-left: 16px;
  }

  .home1-banner-section .pr-hero-content-wrap .pr-hero-col .banner-content.pr-hero-content .primary-btn2 {
    margin-left: 16px;
  }
}

@media (max-width: 480px) {
  .pr-hero-facets {
    width: 92px;
    top: 3%;
  }

  .pr-hero-route {
    height: 26%;
    right: 5%;
  }

  .home1-banner-section .pr-hero-content-wrap .pr-hero-col .banner-content.pr-hero-content h1 {
    border-left-width: 3px;
    padding-left: 12px;
  }

  .home1-banner-section .pr-hero-content-wrap .pr-hero-col .banner-content.pr-hero-content p,
  .home1-banner-section .pr-hero-content-wrap .pr-hero-col .banner-content.pr-hero-content .primary-btn2 {
    padding-left: 12px;
    margin-left: 12px;
  }
}