/* site.css - authored rules for the two runtime behaviours the static
   rebuild has to supply.  Everything else is the original optimize.css.

   Loaded AFTER assets/css/tailwind.css so it wins over utility output and
   keeps the original cascade order intact.

   Both blocks only describe what the original Owl Carousel plugin injected at
   runtime; the source markup and its own theme rules are untouched. */

/* ---------------------------------------------------------------------------
   1. Homepage services carousel (.our-services-list)

   The original ran `.our-services-list`.owlCarousel({loop:true, margin:0,
   nav:true, dots:false, responsive:{0:{items:1},500:{items:1},700:{items:2}}}).
   That means: one tile at a time under 700px, two tiles at 700px and up, with
   prev/next arrows.  The pack's optimize.css already styles
   `.our-service-section .owl-prev/.owl-next` but never declares the geometry
   the plugin added, so we supply exactly that.
   ------------------------------------------------------------------------ */

.our-service-section .our-services-list {
  position: relative;
}

.our-service-section .our-services-list .owl-stage-outer {
  position: relative;
  overflow: hidden;
  width: 100%;
}

.our-service-section .our-services-list .owl-stage {
  position: relative;
  display: flex;
  align-items: stretch;
  transition: transform 0.45s ease;
  will-change: transform;
}

/* The live page's carousel sits in an overflow-hidden column, so the track's
   extra width can never create a horizontal scrollbar.  Without this the
   off-screen slides widened the document by ~17px on tablets and phones. */
.our-service-section .our-services-list-wrapper {
  overflow: hidden;
}

.our-service-section .our-services-list .owl-item {
  flex: 0 0 auto;
  min-height: 1px;
}

.our-service-section .our-services-list .owl-item > .our-services-list-item {
  width: 100%;
}

/* the plugin's own control geometry */
.our-service-section .our-services-list .owl-controls {
  position: absolute;
  top: 0;
  right: 0;
  width: 100%;
  margin: 0;
  height: 0;
}

.our-service-section .our-services-list .owl-nav {
  position: relative;
  width: 100%;
  height: 0;
}

.our-service-section .our-services-list .owl-prev,
.our-service-section .our-services-list .owl-next {
  position: absolute;
  width: 34px;
  height: 34px;
  line-height: 34px;
  text-align: center;
  cursor: pointer;
  z-index: 5;
  color: #fff;
  font-size: 0;
}

.our-service-section .our-services-list .owl-prev {
  left: -17px;
}

.our-service-section .our-services-list .owl-next {
  right: -17px;
}

.our-service-section .our-services-list .owl-prev:after,
.our-service-section .our-services-list .owl-next:after {
  font-family: FontAwesome;
  font-size: 18px;
  line-height: 34px;
  display: block;
}

.our-service-section .our-services-list .owl-prev:after {
  content: "\f104";
}

.our-service-section .our-services-list .owl-next:after {
  content: "\f105";
}

.our-service-section .our-services-list .owl-prev.owl-disabled,
.our-service-section .our-services-list .owl-next.owl-disabled {
  opacity: 0.45;
  cursor: default;
}

/* keep the arrows off the tile edges on narrow screens */
@media screen and (max-width: 767px) {
  .our-service-section .our-services-list .owl-prev {
    left: 4px;
  }
  .our-service-section .our-services-list .owl-next {
    right: 4px;
  }
}

/* ---------------------------------------------------------------------------
   2. Gallery / cube-portfolio grid

   cubeportfolio.js added `cbp cbp-caption-active cbp-caption-zoom` to the grid
   at runtime and then absolutely positioned every `.cbp-item`.  Without those
   classes the theme's own rules never match and the caption overlay stacks
   below the photo instead of covering it, which inflated the page by ~450px.

   The markup is untouched: the build keeps `class="cbp-l-grid-agency"` and the
   classes below recreate exactly what the plugin added, with items laid out in
   normal flow instead of transforms (identical result for gap 0).

   Original config: gapHorizontal: 0, gapVertical: 0, gridAdjustment:
   'responsive', mediaQueries 800 -> 3 cols, 500 -> 2 cols, 320 -> 1 col.
   ------------------------------------------------------------------------ */

.cube-portfolio .cbp-l-grid-agency {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  margin: 0;
  padding: 0;
  list-style: none;
  visibility: visible;
  /* optimize.css sets `.cbp { height: 400px }` for the plugin's absolute
     layout; in normal flow the grid has to size itself */
  height: auto !important;
}

.cube-portfolio .cbp-l-grid-agency .cbp-item {
  position: relative !important;
  top: auto !important;
  left: auto !important;
  display: block;
  width: 33.3333%;
  margin: 0;
  padding: 0;
  float: none;
  list-style: none;
  overflow: hidden;
}

.cube-portfolio .cbp-l-grid-agency .cbp-item-wrapper {
  display: block;
  height: 100%;
}

.cube-portfolio .cbp-l-grid-agency img {
  display: block;
  width: 100%;
  height: auto;
  border: 0;
}

/* the caption stack: image first, hover overlay filling the same box.

   cubeportfolio's `gridAdjustment: 'responsive'` gave every item the same
   height: the plugin measured each photo and used the shortest ratio
   (here 667:1000 for the six 1000x667 shots), clipped from the top.  app.js
   measures that ratio and sets --cbp-item-ratio; nothing is hardcoded. */
.cube-portfolio .cbp-l-grid-agency .cbp-caption,
.cube-portfolio .cbp-l-grid-agency .cbp-caption-defaultWrap {
  position: relative;
  z-index: 1;
  display: block;
  overflow: hidden;
  top: 0;
}

.cube-portfolio .cbp-l-grid-agency .cbp-caption {
  aspect-ratio: var(--cbp-item-ratio, 3 / 2);
}

.cube-portfolio .cbp-l-grid-agency .cbp-caption-activeWrap {
  display: block;
  position: absolute;
  z-index: 2;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background-color: rgba(0, 0, 0, 0.9);
  opacity: 0;
  -webkit-transition: opacity 0.8s cubic-bezier(0.19, 1, 0.22, 1);
  transition: opacity 0.8s cubic-bezier(0.19, 1, 0.22, 1);
}

.cube-portfolio .cbp-l-grid-agency .cbp-item:hover .cbp-caption-activeWrap {
  opacity: 1;
}

/* zoom the photo under the overlay, as `.cbp-l-grid-agency.cbp-caption-zoom`
   does in optimize.css */
.cube-portfolio .cbp-l-grid-agency .cbp-caption-defaultWrap {
  -webkit-transition: -webkit-transform 0.5s ease;
  transition: transform 0.5s ease;
}

.cube-portfolio .cbp-l-grid-agency .cbp-caption:hover .cbp-caption-defaultWrap {
  -webkit-transform: scale(1.15);
  transform: scale(1.15);
}

.cube-portfolio .cbp-l-grid-agency .cbp-l-caption-alignCenter {
  display: table;
  width: 100%;
  height: 100%;
}

.cube-portfolio .cbp-l-grid-agency .cbp-l-caption-body {
  display: table-cell;
  vertical-align: middle;
  text-align: center;
}

/* three columns by default, two under 800px, one under 500px */
@media screen and (max-width: 800px) {
  .cube-portfolio .cbp-l-grid-agency .cbp-item {
    width: 50%;
  }
}

@media screen and (max-width: 499px) {
  .cube-portfolio .cbp-l-grid-agency .cbp-item {
    width: 100%;
  }
}

/* lightbox overlay created by app.js initPortfolio(), matching the plugin's shell */
.cbp-popup-wrap.cbp-popup-lightbox {
  position: fixed;
  inset: 0;
  z-index: 10050;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.9);
  cursor: zoom-out;
}

.cbp-popup-wrap.cbp-popup-lightbox .cbp-popup-content {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}

.cbp-popup-wrap.cbp-popup-lightbox img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  display: block;
}