/* KJoinery — full-width project header on single Project pages.
   Turns the theme's boxed [gallery] owl-carousel + Service/Location/Finish/Completed
   bar into a full-bleed dark hero like krenovation.com.au. CSS only (+ a small
   owl refresh in kj-project.js). Scoped to body.single-project so nothing else moves. */

body.single-project .project-page.section-padding{padding-top:0!important;padding-bottom:0!important}

/* page title above the slider: centered, roomy, on-brand */
body.single-project .project-page>.container>.row:first-child{margin:0}
body.single-project .project-page>.container>.row:first-child h2{
  text-align:center;color:#fff;font-weight:800;letter-spacing:-.5px;line-height:1.15;
  margin:0;padding:46px 20px 30px}

/* full-bleed the slider */
body.single-project .project-page .row.justify-content-center{margin:0}
body.single-project .project-page .row.justify-content-center>.col-md-12{padding:0}
body.single-project .project-page .owl-carousel.owl-theme{
  width:100vw;max-width:100vw;margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw);
  overflow:hidden;background:#0f0f0f}
body.single-project .project-page .owl-carousel .portfolio-item{margin:0}
body.single-project .project-page .owl-carousel .portfolio-item img,
body.single-project .project-page .owl-carousel .owl-item img{
  width:100%;height:clamp(480px,80vh,900px);object-fit:cover;display:block}

/* owl nav -> gold circles, bottom-LEFT (clear of the floating menu + WhatsApp on the right).
   Forced with !important + position:static on the buttons so the theme's inline-block
   owl controls flow inside our flex bar instead of pinning to / spilling past the slide edge. */
body.single-project .project-page .owl-carousel .owl-nav{
  position:absolute!important;right:28px!important;left:auto!important;top:auto!important;bottom:70px!important;
  transform:none!important;margin:0!important;display:flex!important;gap:14px!important;width:auto!important;z-index:8}
body.single-project .project-page .owl-carousel .owl-nav .owl-prev,
body.single-project .project-page .owl-carousel .owl-nav .owl-next{
  position:static!important;float:none!important;top:auto!important;left:auto!important;right:auto!important;bottom:auto!important;
  transform:none!important;margin:0!important;padding:0!important;
  width:58px!important;height:58px!important;border-radius:50%!important;
  background:linear-gradient(135deg,#c5a47e,#a08660)!important;color:#161616!important;
  display:flex!important;align-items:center!important;justify-content:center!important;font-size:28px!important;line-height:1!important;
  box-shadow:none!important;transition:transform .25s ease}
body.single-project .project-page .owl-carousel .owl-nav .owl-prev:hover,
body.single-project .project-page .owl-carousel .owl-nav .owl-next:hover{transform:scale(1.09)!important}
body.single-project .project-page .owl-carousel .owl-nav .owl-prev i,
body.single-project .project-page .owl-carousel .owl-nav .owl-next i{color:#161616!important;margin:0!important;font-size:28px!important}
/* dots -> forced absolute (out of flow) at bottom-center */
body.single-project .project-page .owl-carousel .owl-dots{
  position:absolute!important;left:28px!important;right:auto!important;transform:none!important;
  bottom:74px!important;margin:0!important;display:flex!important;gap:8px!important;z-index:8}
body.single-project .project-page .owl-carousel .owl-dots .owl-dot span{width:9px;height:9px;margin:0;background:rgba(255,255,255,.5)!important}
body.single-project .project-page .owl-carousel .owl-dots .owl-dot.active span{background:#c5a47e!important;width:26px;border-radius:5px}

/* Service/Location/Finish/Completed -> full-width dark 4-col strip */
body.single-project .project-page .row.justify-content-center>.col-md-12>.row{
  width:100vw;max-width:100vw;margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw)}
body.single-project .project-page .row.justify-content-center>.col-md-12>.row>.col-md-8{
  flex:0 0 100%;max-width:100%;padding:0}
body.single-project .project-page .project-bar{padding:0}
body.single-project .project-page .project-bar>.row{margin:0;background:#0f0f0f;
  border-top:1px solid rgba(197,164,126,.2);border-bottom:1px solid rgba(197,164,126,.2)}
body.single-project .project-page .project-bar>.row>[class*=col-]{
  padding:26px 22px;text-align:center;border-left:1px solid rgba(197,164,126,.14);margin:0}
body.single-project .project-page .project-bar>.row>[class*=col-]:first-child{border-left:0}
body.single-project .project-page .project-bar h5{color:#c5a47e;font-size:.74rem;letter-spacing:.16em;
  text-transform:uppercase;margin:0 0 8px;font-weight:700}
body.single-project .project-page .project-bar h6{color:#fff;font-size:1.04rem;margin:0;font-weight:600}

@media(max-width:680px){
  body.single-project .project-page .project-bar>.row>[class*=col-]{border-left:0;border-top:1px solid rgba(197,164,126,.14)}
  body.single-project .project-page>.container>.row:first-child h2{padding:32px 16px 22px}
}