/* ========================================================================
   serenae.com — legacy portfolio pages (Ascend Premium theme templates)
   Rules transcribed from reference/theme-css/ascend.css,
   ascend_posttype.css, ascend_icons.css and reference/kt-custom-css.css.
   Covers: portfolio singles (collage / masonry gallery / single image)
   and portfolio-type archives (hover-overlay grid), plus the shared
   vanilla-JS lightbox.
   ======================================================================== */

/* ---- page container -------------------------------------------------- */
/* Original theme container is 1170px wide with 15px side padding
   (1140px of content). base.css .container caps at 1140px, so widen
   this page's container to keep the same content width. */
.container.portfolio-container {
  max-width: 1170px;
  padding-left: 15px;
  padding-right: 15px;
}
.clearfix::before, .clearfix::after { content: " "; display: table; }
.clearfix::after { clear: both; }

/* ---- bootstrap-style grid (theme subset) ------------------------------ */
[class^="col-"], [class*=" col-"] {
  position: relative;
  min-height: 1px;
  padding-left: 15px;
  padding-right: 15px;
}
.portfolio-container .row { margin-left: -15px; margin-right: -15px; }
.portfolio-container .row::before, .portfolio-container .row::after { content: " "; display: table; }
.portfolio-container .row::after { clear: both; }

.row-margin-small { margin-left: -5px; margin-right: -5px; }
.row-margin-small [class^="col-"], .row-margin-small [class*=" col-"] { padding-left: 5px; padding-right: 5px; }
.row-nomargin { margin-left: 0; margin-right: 0; }
.row-nomargin [class^="col-"], .row-nomargin [class*=" col-"] { padding-left: 0; padding-right: 0; }

.col-ss-12 { width: 100%; float: none; }
@media (min-width: 544px) {
  .col-xs-6 { float: left; width: 50%; }
}
@media (min-width: 768px) {
  .col-sm-4 { float: left; width: 33.33%; }
}
@media (min-width: 992px) {
  .col-md-3 { float: left; width: 25%; }
  .col-md-4 { float: left; width: 33.33%; }
  .col-md-8 { float: left; width: 66.66666667%; }
  .col-md-12 { width: 100%; }
}
@media (min-width: 1200px) {
  .col-lg-3 { float: left; width: 25%; }
  .col-lg-4 { float: left; width: 33.33%; }
}

/* ---- intrinsic-ratio boxes ------------------------------------------- */
.kt-intrinsic { position: relative; padding-bottom: 100%; height: 0; display: block; }
.kt-intrinsic img { position: absolute; width: 100%; height: 100%; top: 0; left: 0; }

/* ---- single: masonry photo gallery (kad-wp-gallery) ------------------- */
.kad-wp-gallery { clear: both; width: 100%; position: relative; }
.g_item { padding-bottom: 10px; }
.gallery_item { overflow: hidden; position: relative; margin-bottom: 0; }
.gallery_item img {
  -webkit-backface-visibility: hidden;
  -webkit-transform: perspective(1000px);
  transition: transform 0.35s ease-in-out;
  transform: scale(1);
}
.gallery_item:hover img { transform: scale(1.05); }
.gallery-link { display: block; }

/* ---- single: post-grid collage (kad_post_grid) ------------------------ */
.col-md-12.portfolio-project { margin-bottom: 10px; }
.postfeat { text-align: center; }
.kad_post_grid .kpgi { width: 50%; padding-bottom: 50%; position: relative; float: left; }
.kpgi-inner { position: absolute; left: 3px; right: 3px; top: 3px; bottom: 3px; overflow: hidden; }
.kpgi-inner .kt-intrinsic { overflow: hidden; }
.kpgi-inner img {
  -webkit-backface-visibility: hidden;
  -webkit-transform: perspective(1000px);
  transition: transform 0.35s ease-in-out;
  transform: scale(1);
}
.kpgi:hover .kpgi-inner img { transform: scale(1.05); }

/* five-image collage: 20% (2 squares) + 40% square + 40% (2 wides) */
.kt-5-collage .side-post-gal-1 { width: 20%; float: left; }
.kt-5-collage .side-post-gal-1 .kpgi { padding-bottom: 100%; }
.kt-5-collage .side-post-gal-4 { width: 40%; float: left; }
.kt-5-collage .kpgi { width: 100%; }
.kt-5-collage .kpgi.kad_post_grid_item-3 { width: 40%; padding-bottom: 40%; }
/* other collage counts, per theme (unused by current pages but part of
   the template family) */
.kt-4-collage .kpgi.kad_post_grid_item-1 { width: 40%; padding-bottom: 60%; }
.kt-4-collage .side_post_gal { width: 60%; float: left; }
.kt-4-collage .kpgi.kad_post_grid_item-4 { width: 100%; float: left; }
.kt-3-collage .kpgi.kad_post_grid_item-1 { width: 60%; padding-bottom: 40%; }
.kt-3-collage .side_post_gal { width: 40%; float: left; }
.kt-3-collage .kpgi.kad_post_grid_item-2, .kt-3-collage .kpgi.kad_post_grid_item-3 { width: 100%; float: left; }
.kt-2-collage .kpgi.kad_post_grid_item-1 { width: 60%; padding-bottom: 40%; }
.kt-2-collage .kpgi.kad_post_grid_item-2 { width: 40%; padding-bottom: 40%; }

/* ---- single: full-width featured image -------------------------------- */
.imghoverclass { position: relative; overflow: hidden; }
.post-single-img img { width: 100%; height: auto; }

/* ---- single: content area --------------------------------------------- */
.portfolio-content .entry-title { margin-top: 10px; }
.entry-content { font-size: 16px; line-height: 24px; }
.entry-content ul { margin: 0 0 10px; padding-left: 30px; }
.entry-content li { margin-bottom: 5px; }

/* process icons (theme icon font) */
@font-face {
  font-family: kt-icon;
  src: url(/wp-content/themes/ascend_premium/assets/css/fonts/kt-icon.woff2) format("woff2"),
       url(/wp-content/themes/ascend_premium/assets/css/fonts/kt-icon.woff) format("woff");
  font-weight: 400;
  font-style: normal;
  font-display: block;
}
[class^="kt-icon-"], [class*=" kt-icon-"] {
  font-family: kt-icon !important;
  speak: none;
  font-style: normal;
  font-weight: 400;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.kt-shortcode-icon { display: inline-block; }
.kt-icon-image::before { content: "\f03e"; }
.kt-icon-paint-brush::before { content: "\f1fc"; }
.kt-icon-camera::before { content: "\f030"; }
.kt-icon-file-text-o::before { content: "\f0f6"; }
.kt-icon-th-large::before { content: "\f009"; }
.kt-icon-print::before { content: "\f02f"; }
.kt-icon-object-group::before { content: "\f247"; }
.kt-icon-display::before { content: "\ea73"; }
.kt-icon-code::before { content: "\f121"; }
.kt-icon-book::before { content: "\f02d"; }
.kt-icon-user-o::before { content: "\f2c0"; }
.kt-icon-lightbulb-o::before { content: "\f0eb"; }
.kt-icon-tree::before { content: "\f1bb"; }
.kt-icon-megaphone::before { content: "\e97a"; }
.kt-icon-gift::before { content: "\f06b"; }
.kt-icon-laptop::before { content: "\f109"; }
.kt-icon-instagram::before { content: "\f16d"; }
.kt-icon-heart::before { content: "\f004"; }
.kt-icon-search::before { content: "\f002"; }

/* ---- single: footer prev/next navigation ------------------------------ */
.single-portfolio .single-footer { margin-top: 20px; }
.single-footer { border-top: 1px solid rgba(0, 0, 0, 0.1); }
.post-footer-section { padding: 30px 0; position: relative; border-bottom: 1px solid rgba(0, 0, 0, 0.1); }
.single-footer .post-footer-section:last-child { border-bottom: 0; }
.kad-post-navigation.portfolio-nav { position: relative; }
.portfolio-nav .kad-next-link, .portfolio-nav .kad-previous-link { z-index: 2; position: relative; }
.alignleft { float: left; }
.alignright { float: right; }
.kad-post-navigation::after { content: ""; display: table; clear: both; }
.kt_postlink_meta { display: block; text-transform: uppercase; font-size: 13px; }
.kt_postlink_title { display: block; }
.kt_color_gray { color: #aaa; }
a.kt_color_gray:hover { color: #555; }
.kad-previous-link { text-align: left; }
.kad-next-link { text-align: right; }
.kad-previous-link a { position: relative; padding-left: 40px; display: block; }
.kad-next-link a { position: relative; padding-right: 40px; display: block; }
.kad-previous-link a::before, .kad-next-link a::before {
  display: inline-block;
  transition: all 0.2s ease-in-out;
}
.kad-previous-link a::before {
  position: absolute;
  border-style: solid;
  border-width: 2px 2px 0 0;
  content: "";
  height: 10px;
  top: 50%;
  left: 6px;
  margin-top: -4px;
  transform: rotate(-135deg);
  vertical-align: top;
  width: 10px;
}
.kad-next-link a::before {
  position: absolute;
  border-style: solid;
  border-width: 2px 2px 0 0;
  content: "";
  height: 10px;
  top: 50%;
  right: 6px;
  margin-top: -7px;
  transform: rotate(45deg);
  vertical-align: top;
  width: 10px;
}
.kad-previous-link:hover a::before { left: -6px; }
.kad-next-link:hover a::before { right: -6px; }

/* ---- archive: breadcrumbs --------------------------------------------- */
.kadbreadcrumbs-wrap { background: rgba(0, 0, 0, 0.1); }
#kadbreadcrumbs {
  text-transform: uppercase;
  font-size: 13px;
  line-height: 20px;
  color: #777;
  padding: 6px 0;
  width: 100%;
}
#kadbreadcrumbs a {
  color: #777;
  border-bottom: 2px solid #bbb;
  transition: all 0.2s ease-in-out;
}
#kadbreadcrumbs a:hover { color: #29cece; border-color: #29cece; }

/* ---- archive: portfolio grid ------------------------------------------ */
.kad-portfolio-wrapper-outer { position: relative; }
.p-outer-pgrid-no-margin { margin-bottom: 20px; }
.p-outer-pgrid-no-margin .portfolio_item { margin-bottom: 0; margin-right: -1px; }
.portfolio_item { margin-bottom: 20px; }
.portfolio-loop-image-container { position: relative; }
.portfolio-loop-image-container img {
  -webkit-backface-visibility: hidden;
  -webkit-transform: perspective(1000px);
  transition: all 0.35s ease-in-out;
  transform: scale(1.05);
  opacity: 1;
}
.portfolio-loop-image-container:hover img { transform: scale(1); opacity: 1; }
.portfolio-loop-image-container .portfolio-hover-item-link {
  position: absolute;
  width: 100%;
  height: 100%;
  display: block;
  left: 0;
  top: 0;
}
.portfolio-loop-image-container .portfolio-img-hover-inner {
  overflow: hidden;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  position: absolute;
}
.portfolio-loop-image-container .portfolio-hover-item {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.portfolio-loop-image-container .portfolio-hover-item .portfolio-overlay-color {
  background: #29cece; /* customizer primary color, kt-custom-css.css */
  opacity: 0;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  transition: opacity 0.35s ease-in-out;
}
.portfolio-loop-image-container .portfolio-hover-item:hover .portfolio-overlay-color { opacity: 0.5; }
.portfolio-loop-image-container .portfolio-hover-item .portfolio-overlay-border {
  border: 1px solid rgba(255, 255, 255, 0.8);
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  opacity: 0;
  transition: all 0.35s ease-in-out;
}
.portfolio-loop-image-container .portfolio-hover-item:hover .portfolio-overlay-border {
  border: 1px solid rgba(255, 255, 255, 0.8);
  top: 15px;
  bottom: 15px;
  left: 15px;
  right: 15px;
  opacity: 1;
}
.portfolio-loop-image-container .portfolio-hover-item .portfolio-hover-item-inner {
  text-align: center;
  transform: scale(1.2);
  opacity: 0;
  max-width: 90%;
  position: relative;
  z-index: 2;
  transition: all 0.35s ease-in-out;
}
.portfolio-loop-image-container .portfolio-hover-item:hover .portfolio-hover-item-inner {
  transform: scale(1);
  opacity: 1;
}
.portfolio-loop-image-container .portfolio-hover-item .portfolio-hover-item-inner .kad_portfolio_lightbox_link {
  position: relative;
  z-index: 10;
  display: inline-block;
  color: #fff;
  width: 40px;
  line-height: 40px;
  height: 40px;
  border: 1px solid transparent;
  transition: border 0.35s ease-in-out;
  border-radius: 50%;
}
.portfolio-loop-image-container .portfolio-hover-item .portfolio-hover-item-inner .kad_portfolio_lightbox_link:hover { border: 1px solid #fff; }
.portfolio-loop-image-container .portfolio-hover-item .portfolio-hover-item-inner .kad_portfolio_lightbox_link i {
  font-size: 16px;
  line-height: 40px;
}
.portfolio-loop-image-container .portfolio-hover-item .portfolio-hover-item-inner .portfolio-inner-link { display: block; position: relative; }
.portfolio-loop-image-container .portfolio-hover-item .portfolio-hover-item-inner .portfolio-loop-title {
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.5px;
  text-transform: uppercase;
  color: #fff;
  margin: 0;
  padding: 10px 0;
  line-height: 1.2;
}
.portfolio-loop-image-container .portfolio-hover-item .portfolio-hover-item-inner .portfolio-loop-types {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 1.3px;
  color: #fff;
}

/* ---- lightbox ---------------------------------------------------------- */
.sl-lightbox {
  position: fixed;
  inset: 0;
  z-index: 10000;
  background: rgba(0, 0, 0, 0.88);
  display: flex;
  align-items: center;
  justify-content: center;
}
.sl-lightbox[hidden] { display: none; }
.sl-lightbox img {
  max-width: calc(100vw - 120px);
  max-height: calc(100vh - 60px);
  width: auto;
  height: auto;
  display: block;
  box-shadow: 0 0 30px rgba(0, 0, 0, 0.5);
}
.sl-lightbox button {
  position: absolute;
  background: none;
  border: 0;
  color: #ccc;
  cursor: pointer;
  padding: 10px;
  line-height: 1;
  font-family: Lato, sans-serif;
  transition: color 0.2s ease-in-out;
}
.sl-lightbox button:hover { color: #fff; }
.sl-close { top: 10px; right: 14px; font-size: 36px; }
.sl-prev, .sl-next {
  top: 50%;
  transform: translateY(-50%);
  font-size: 48px;
  user-select: none;
}
.sl-prev { left: 6px; }
.sl-next { right: 6px; }
.sl-prev[hidden], .sl-next[hidden] { display: none; }
@media (max-width: 543px) {
  .sl-lightbox img { max-width: calc(100vw - 20px); max-height: calc(100vh - 110px); }
  .sl-prev, .sl-next { top: auto; bottom: 8px; transform: none; }
  .sl-prev { left: 14px; }
  .sl-next { right: 14px; }
}