/* PRI Animations Engine — base styles (v2)
 * ROBUST PATTERN (2026-06-18): content is VISIBLE by default. GSAP sets the
 * hidden start-state itself via JS the instant it runs (gsap.set in the controller),
 * then animates to visible. If JS is delayed/blocked by a cache plugin, content
 * simply shows normally — it can NEVER be permanently hidden. No CSS opacity:0.
 */

/* will-change hint only (no hiding) */
html.pri-js .pri-fade-up,
html.pri-js .pri-fade-in,
html.pri-js .pri-fade-left,
html.pri-js .pri-fade-right,
html.pri-js .pri-zoom-in,
html.pri-js .pri-hero-text {
  will-change: transform, opacity;
}

/* Accessibility: kill all motion for users who ask for it */
@media (prefers-reduced-motion: reduce) {
  .pri-fade-up,
  .pri-fade-in,
  .pri-fade-left,
  .pri-fade-right,
  .pri-zoom-in,
  .pri-hero-text,
  .pri-parallax,
  .pri-stagger > * {
    opacity: 1 !important;
    transform: none !important;
  }
}

/* ---- Image fit fixes (stop squashing) ---- */
/* Class is on the IMAGE WIDGET. Elementor sets the height on the widget's container;
   force the <img> and its wrapper to fill + cover (crop, never distort). */
.elementor-widget.pri-card-img,
.elementor-widget.pri-gallery-img {
  overflow: hidden;
  line-height: 0;
  height: 210px !important;       /* widget wrapper must hold the height or overflow:hidden clips img to 0 */
  min-height: 210px !important;   /* belt-and-suspenders against flex collapse */
  flex: 0 0 210px !important;     /* flex child must NOT shrink in the column card, or it collapses to 0 */
  width: 100% !important;
}
.pri-card-img .elementor-widget-container,
.pri-gallery-img .elementor-widget-container,
.pri-card-img figure,
.pri-gallery-img figure,
.pri-card-img .elementor-image,
.pri-gallery-img .elementor-image {
  margin: 0;
  height: 210px;           /* every wrapper between widget and img carries the height */
}
/* FIXED height (not 100%) so the image can't collapse to 0 when no
   fixed-height ancestor exists. Matches Elementor native height:210px. */
.pri-card-img img,
.pri-gallery-img img {
  width: 100% !important;
  height: 210px !important;
  object-fit: cover !important;
  display: block;
  transition: transform .5s ease;
}
/* Labeled-diagram images (e.g. fascia/gutter/soffit) get 'contain' on a soft bg
   so edge labels aren't cropped off by the cover-crop. */
.pri-card-img-contain img {
  object-fit: contain !important;
  background: #f5f0e8 !important;   /* PRI cream so letterbox bars blend in */
  padding: 6px !important;
}
.pri-card-img:hover img,
.pri-gallery-img:hover img {
  transform: scale(1.05);
}


/* Badge logos: keep aspect ratio, never stretch */
.pri-badge img {
  width: auto !important;
  max-width: 100%;
  height: auto !important;
  object-fit: contain !important;
}

/* ====== Minimal CSS: only what Elementor native settings can't do cleanly ====== */
/* Pin service-card "Learn More" buttons to the bottom (equal-height card alignment).
   Native flex-grow makes the content container fill; margin-top:auto sinks the button. */
.pri-service-card .elementor-widget-button{ margin-top:auto !important; }
.pri-service-card > .e-con-inner > .elementor-element:not(.elementor-widget-image){ height:100% !important; }

/* Badge logos: HARD-cap height so tall-aspect logos (expertise.com) can't blow up.
   Native image height alone fails for portrait logos; force max-height + contain. */
.pri-badge img{ height:auto !important; max-height:120px !important; width:auto !important; max-width:100% !important; object-fit:contain !important; }
.pri-badge .elementor-widget-container,
.pri-badge figure,
.pri-badge .elementor-image{ display:flex !important; align-items:center !important; justify-content:center !important; height:120px !important; margin:0 !important; }

/* Stat numbers: BIG, BOLD, gold. The native heading typography was getting overridden
   to 16px/400 (theme default) which made them look weak. Force the punchy stat styling. */
.pri-count,
.pri-count .elementor-heading-title,
.pri-stat-item .pri-count{
  color:#C9A84C !important;
  font-family:"Montserrat", sans-serif !important;
  font-size:48px !important;
  font-weight:800 !important;
  line-height:1.05 !important;
  letter-spacing:-0.5px !important;
  margin:0 0 4px !important;
}
.pri-stat-item .elementor-widget-text-editor{ font-size:15px !important; letter-spacing:0.5px !important; }
@media(max-width:767px){
  .pri-count,
  .pri-count .elementor-heading-title{ font-size:36px !important; }
}

/* Mobile stacking (native desktop widths are %, let them wrap on small screens) */
@media(max-width:767px){
  .pri-stats-row > .e-con-inner > .pri-stat-item{ flex-basis:45% !important; }
  .pri-services-row > .e-con-inner > .pri-service-card{ flex-basis:100% !important; }
  .pri-badge-row{ flex-wrap:wrap !important; }
}


/* ====== Recent Roofing Projects carousel ====== */
/* Uniform slide image height so mixed-aspect photos crop to a consistent size */
.pri-projects-carousel .swiper-slide img,
.pri-projects-carousel .elementor-image-carousel img{
  height:280px !important;
  width:100% !important;
  object-fit:cover !important;
  border-radius:10px !important;
  display:block !important;
}
.pri-projects-carousel .swiper-slide{
  height:auto !important;
  display:flex !important;
  align-items:center !important;
}
/* Make arrows more visible (dark circular bg) */
.pri-projects-carousel .elementor-swiper-button{
  background:rgba(123,28,46,0.85) !important; /* PRI maroon */
  width:44px !important; height:44px !important;
  border-radius:50% !important;
  display:flex !important; align-items:center !important; justify-content:center !important;
  color:#fff !important;
}
.pri-projects-carousel .elementor-swiper-button svg,
.pri-projects-carousel .elementor-swiper-button i{ color:#fff !important; fill:#fff !important; }
.pri-projects-carousel .elementor-swiper-button-prev{ left:6px !important; }
.pri-projects-carousel .elementor-swiper-button-next{ right:6px !important; }
/* Tighten the dot spacing (kill the empty band) */
.pri-projects-carousel .swiper-pagination{ position:relative !important; margin-top:14px !important; bottom:auto !important; }
.pri-projects-carousel .swiper-pagination-bullet-active{ background:#C9A84C !important; } /* gold active dot */

@media(max-width:767px){
  .pri-projects-carousel .swiper-slide img{ height:220px !important; }
}