/* =====================================================================
   Work galleries & project highlights — one smooth feel everywhere
   ---------------------------------------------------------------------
   The Gallery page (pi-gallery) set the standard: slow 1.2s ease zoom,
   soft ink veil, square corners. This file brings every OTHER place that
   shows project work up to the same feel:

     · RecentProjects slider (trx swiper, bg-image slides) — home + services
     · MetaSlider/flexslider galleries — service pages
     · wpb_single_image figures in content grids
     · the legacy [paras_media_grid] grids (bedroom/living/showroom pages)
   ===================================================================== */

/* ---- shared easing token ---------------------------------------------- */
:root{ --pi-zoom-ease: cubic-bezier(.22,.61,.36,1); }

/* ---- RecentProjects (trx swiper, slider_type_bg) ----------------------- */
.sc_widget_slider .slider_swiper .swiper-wrapper{
  transition-timing-function:var(--pi-zoom-ease) !important;
}
.sc_widget_slider .slider_swiper .swiper-slide{
  overflow:hidden;
  transition:transform 1.2s var(--pi-zoom-ease), box-shadow .4s ease;
  background-size:cover;
  background-position:center;
  cursor:pointer;
}
.sc_widget_slider .slider_swiper .swiper-slide::after{
  content:"";
  position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(30,40,37,0) 55%, rgba(30,40,37,.45)); /* scrim over photo — same in dark */
  opacity:0;
  transition:opacity .45s ease;
  pointer-events:none;
}
.sc_widget_slider .slider_swiper .swiper-slide:hover{
  transform:scale(1.03);
  z-index:2;
  box-shadow:0 18px 42px -18px rgba(30,40,37,.5); /* flagged: hover shadow @.5 — --pi-shadow-lg is .28 in light, outside tolerance */
}
.sc_widget_slider .slider_swiper .swiper-slide:hover::after{ opacity:1; }

/* ---- flexslider (metaslider galleries) --------------------------------- */
.flexslider{
  border:0 !important;
  border-radius:0 !important;
  box-shadow:none !important;
  background:transparent !important;
  overflow:hidden;
}
.flexslider .slides img{
  transition:transform 1.2s var(--pi-zoom-ease);
}
.flexslider .slides li:hover img{ transform:scale(1.04); }
/* dots → small clay squares (drafting marks) */
.flex-control-paging li a{
  width:8px !important; height:8px !important;
  border-radius:0 !important;
  background:var(--pi-line-mid) !important;
  box-shadow:none !important;
  transition:background .2s ease;
}
.flex-control-paging li a.flex-active{ background:var(--pi-accent) !important; }

/* ---- single images inside content grids -------------------------------- */
.post_content .wpb_single_image .vc_single_image-wrapper{
  overflow:hidden;
  display:block;
}
.post_content .wpb_single_image .vc_single_image-wrapper img{
  display:block;
  transition:transform 1.2s var(--pi-zoom-ease);
}
.post_content .wpb_single_image:hover .vc_single_image-wrapper img{
  transform:scale(1.05);
}

/* ---- legacy [paras_media_grid] — match the pi-gallery feel -------------- */
.paras-gallery-item{ border-radius:0 !important; }
.paras-gallery-item img{
  transition:transform 1.2s var(--pi-zoom-ease) !important;
}
.paras-gallery-item:hover img{ transform:scale(1.05) !important; }
.paras-gallery-item::after{
  content:"";
  position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(30,40,37,0) 55%, rgba(30,40,37,.45)); /* scrim over photo — same in dark */
  opacity:0;
  transition:opacity .45s ease;
  pointer-events:none;
}
.paras-gallery-item:hover::after{ opacity:1; }

@media (prefers-reduced-motion: reduce){
  .sc_widget_slider .slider_swiper .swiper-slide,
  .flexslider .slides img,
  .post_content .wpb_single_image .vc_single_image-wrapper img,
  .paras-gallery-item img{ transition:none !important; }
  .sc_widget_slider .slider_swiper .swiper-slide:hover{ transform:none; }
}

/* ---- fallback: if a trx swiper never initializes, render its slides as a
   clean uniform grid instead of a broken wrapped row ----------------------

   THE MARKER MATTERS. This was keyed on `:not(.swiper-initialized)` — a class
   this theme's Swiper (v6) NEVER adds (`swiper-initialized` is a v7+
   convention; v6 uses `swiper-container-initialized`, and this theme actually
   stamps its own `inited`). The negation was therefore ALWAYS true, so the
   grid fallback stayed on top of every initialised slider forever, fighting
   Swiper's flex model: Swiper kept writing translateX values for the layout it
   believed in while the DOM was a grid, parking the wrapper outside its
   overflow:hidden box. The About page's promo panel rendered EMPTY because of
   this rule. Keyed on `.inited` — the class this theme really sets — the
   fallback now does what it says: it applies only before init. */
.slider_swiper:not(.inited) .swiper-wrapper{
  display:grid !important;
  grid-template-columns:repeat(4, 1fr);
  gap:10px;
}
.slider_swiper:not(.inited) .swiper-slide{
  width:auto !important;
  aspect-ratio:4/3;
}
@media (max-width:1023px){
  .slider_swiper:not(.inited) .swiper-wrapper{ grid-template-columns:repeat(2, 1fr); }
}