/**
 * TAYSP mirror media/layout fixes (mobile + no The7 isotope/owl JS).
 * Capture CSS expects JS to add .shown / .owl-loaded — without it, media collapses/hides.
 */

/* ----- Reveal The7 fade-in / isotope cells without JS ----- */
body.taysp-mirror .wf-cell,
body.taysp-mirror .iso-item,
body.taysp-mirror .dt-css-grid > .wf-cell,
body.taysp-mirror .dt-albums-template .wf-cell,
body.taysp-mirror .loading-effect-fade-in .wf-cell,
body.taysp-mirror .loading-effect-fade-in .iso-item,
body.taysp-mirror .jg-container .wf-cell {
  opacity: 1 !important;
  visibility: visible !important;
  filter: none !important;
  transform: none !important;
  animation: none !important;
  transition: none !important;
}

/* The7 lazy placeholders stay invisible until JS swaps data-src */
body.taysp-mirror img.jgrid-lazy-load,
body.taysp-mirror img.iso-lazy-load,
body.taysp-mirror img.lazy-load,
body.taysp-mirror img.taysp-lazy-hydrated {
  opacity: 1 !important;
  visibility: visible !important;
}

/* The7 full-width / ajax wrappers wait for JS fade-in — without it content is invisible */
body.taysp-mirror .full-width-wrap,
body.taysp-mirror .fullwidth-wrap,
body.taysp-mirror .full-width-wrap.loading-effect-fade-in,
body.taysp-mirror .content .full-width-wrap,
body.taysp-mirror .wf-container.loading-effect-fade-in,
body.taysp-mirror .with-ajax,
body.taysp-mirror .layzr-bg {
  opacity: 1 !important;
  visibility: visible !important;
}

/*
 * WPBakery / The7 scroll animations never fire without their JS → opacity:0 forever.
 * Reveal all animated blocks immediately on mirror pages.
 */
body.taysp-mirror .wpb_animate_when_almost_visible,
body.taysp-mirror .wpb_start_animation,
body.taysp-mirror .animate-element,
body.taysp-mirror .animate-element.fadeIn,
body.taysp-mirror .animate-element.fadeInLeft,
body.taysp-mirror .animate-element.fadeInRight,
body.taysp-mirror .animate-element.fadeInLeftBig,
body.taysp-mirror .animate-element.fadeInRightBig,
body.taysp-mirror .shortcode-banner.animate-element,
body.taysp-mirror .ult-new-ib,
body.taysp-mirror [class*="wpb_fadeIn"],
body.taysp-mirror [class*="wpb_bounceIn"],
body.taysp-mirror [class*="wpb_flipIn"],
body.taysp-mirror [class*="wpb_rotateIn"],
body.taysp-mirror .gallery-rollover {
  opacity: 1 !important;
  visibility: visible !important;
  animation: none !important;
  transform: none !important;
  -webkit-animation: none !important;
}

/* Prefer flow layout if isotope never positioned items */
body.taysp-mirror .iso-grid.jg-container,
body.taysp-mirror .iso-container,
body.taysp-mirror .dt-albums-template.iso-grid,
body.taysp-mirror .wf-container.iso-grid {
  height: auto !important;
  min-height: 0 !important;
}

@media (max-width: 990px) {
  body.taysp-mirror .iso-grid .wf-cell,
  body.taysp-mirror .dt-albums-template .wf-cell,
  body.taysp-mirror .jg-container .wf-cell,
  body.taysp-mirror .wf-container.circle-fancy-style .wf-cell {
    display: block !important;
    float: none !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 0 18px !important;
    left: auto !important;
    top: auto !important;
    position: relative !important;
  }
}

/* ----- Owl / The7 photo shortcode: swipe strip when Owl JS is absent ----- */
body.taysp-mirror .owl-carousel:not(.owl-loaded),
body.taysp-mirror .dt-owl-carousel-init:not(.owl-loaded),
body.taysp-mirror .slider-wrapper.owl-carousel:not(.owl-loaded) {
  display: flex !important;
  flex-wrap: nowrap !important;
  align-items: stretch;
  gap: 10px;
  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  margin: 12px 0 20px !important;
  padding: 0 0 10px !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  visibility: visible !important;
  opacity: 1 !important;
  scrollbar-width: thin;
}

body.taysp-mirror .owl-carousel:not(.owl-loaded) > *,
body.taysp-mirror .dt-owl-carousel-init:not(.owl-loaded) > * {
  display: block !important;
  flex: 0 0 82% !important;
  width: 82% !important;
  max-width: 82% !important;
  float: none !important;
  margin: 0 !important;
  scroll-snap-align: start;
  box-sizing: border-box;
}

@media (min-width: 991px) {
  body.taysp-mirror .owl-carousel:not(.owl-loaded) > *,
  body.taysp-mirror .dt-owl-carousel-init:not(.owl-loaded) > * {
    flex: 0 0 36% !important;
    width: 36% !important;
    max-width: 36% !important;
  }
}

body.taysp-mirror .owl-carousel:not(.owl-loaded) img,
body.taysp-mirror .dt-owl-carousel-init:not(.owl-loaded) img,
body.taysp-mirror .owl-carousel:not(.owl-loaded) .rollover,
body.taysp-mirror .owl-carousel:not(.owl-loaded) .rollover-project,
body.taysp-mirror .owl-carousel:not(.owl-loaded) figure {
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  display: block !important;
  border-radius: 2px;
}

body.taysp-mirror .owl-carousel:not(.owl-loaded) .rollover,
body.taysp-mirror .owl-carousel:not(.owl-loaded) .rollover-project {
  aspect-ratio: auto;
  overflow: hidden;
}

/* Nested album lists inside album cards stay collapsed by design on The7;
   do not force them open (height:0 is intentional until lightbox). */

/* ----- Ultimate Flip Box: without UA JS the back face (with links) stays unclickable ----- */
body.taysp-mirror .flip-box .ifb-back {
  pointer-events: none !important;
  visibility: hidden !important;
}

body.taysp-mirror .flip-box .ifb-front {
  position: relative !important;
  z-index: 2 !important;
  cursor: pointer;
  transform: none !important;
  backface-visibility: visible !important;
}

body.taysp-mirror .flip-box .ifb-flip-box {
  transform: none !important;
  height: auto !important;
  min-height: 0 !important;
}

body.taysp-mirror a.taysp-flip-cta {
  pointer-events: auto !important;
  position: relative;
  z-index: 3;
}

/* ----- Generic image safety ----- */
body.taysp-mirror .content img,
body.taysp-mirror .wpb_wrapper img,
body.taysp-mirror .vc_single_image-wrapper img,
body.taysp-mirror .wpb_single_image img,
body.taysp-mirror .dt-fancy-image img,
body.taysp-mirror article img {
  max-width: 100%;
  height: auto !important;
}

@media (max-width: 990px) {
  /* Desktop-captured VC images often keep fixed 250px width — stretch to readable mobile size */
  body.taysp-mirror .wpb_single_image.vc_align_center,
  body.taysp-mirror .wpb_single_image.vc_align_left,
  body.taysp-mirror .wpb_single_image.vc_align_right {
    width: 100% !important;
    max-width: 100% !important;
  }

  body.taysp-mirror .wpb_single_image .vc_single_image-wrapper,
  body.taysp-mirror .wpb_single_image .vc_figure,
  body.taysp-mirror .wpb_single_image img {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
  }

  /* Prefer larger WP size when markup still points at tiny -250x133 crops */
  body.taysp-mirror .wpb_single_image img[src*="-250x133"],
  body.taysp-mirror .wpb_single_image img[src*="-300x"] {
    image-rendering: auto;
  }
}

body.taysp-mirror .vc_single_image-wrapper,
body.taysp-mirror .wpb_single_image .vc_figure,
body.taysp-mirror .dt-fancy-image {
  max-width: 100%;
}

body.taysp-mirror .vc_single_image-wrapper img[src=""],
body.taysp-mirror img.lazy-load:not([src]):not([srcset]) {
  min-height: 120px;
  background: #f0f0f0;
}

/* ----- Mobile spacing under custom nav ----- */
@media (max-width: 990px) {
  body.taysp-mirror {
    padding-top: 0;
  }

  /* Fancy/page titles often sit under fixed bar */
  body.taysp-mirror .page-title,
  body.taysp-mirror .fancy-header,
  body.taysp-mirror #page-title,
  body.taysp-mirror .content-header {
    margin-top: 0;
  }

  /* Breathing room for content columns */
  body.taysp-mirror .content .wf-container,
  body.taysp-mirror .content .wpb_row,
  body.taysp-mirror .content .vc_row {
    padding-left: max(12px, env(safe-area-inset-left));
    padding-right: max(12px, env(safe-area-inset-right));
    box-sizing: border-box;
  }

  /* Team / project overlays: readable on narrow screens */
  body.taysp-mirror .rollover-content,
  body.taysp-mirror .post-thumbnail-content,
  body.taysp-mirror .project-list-content {
    padding: 16px 18px !important;
    text-align: left !important;
  }

  body.taysp-mirror .rollover-content .entry-title,
  body.taysp-mirror .project-list-content .entry-title {
    text-align: left !important;
  }

  /* Background stripes / hero bands: avoid razor-thin height */
  body.taysp-mirror .vc_row[data-vc-full-width="true"],
  body.taysp-mirror .full-width-wrap,
  body.taysp-mirror .stripe,
  body.taysp-mirror .wpb_row.vc_row-o-full-height {
    min-height: 0;
  }

  body.taysp-mirror .vc_row .wpb_column .wpb_wrapper > .wpb_single_image,
  body.taysp-mirror .vc_row .wpb_column .wpb_wrapper > .dt-fancy-image {
    margin-bottom: 12px;
  }

  /* Home-style framed text on photo: keep frame readable */
  body.taysp-mirror .vc_custom_heading,
  body.taysp-mirror .wpb_text_column {
    word-wrap: break-word;
    overflow-wrap: anywhere;
  }
}

/* ----- Forms on dark The7 sections ----- */
body.taysp-mirror .solid-bg .taysp-form,
body.taysp-mirror .dark-bg .taysp-form,
body.taysp-mirror .stripe-style-1 .taysp-form,
body.taysp-mirror .footer .taysp-form,
body.taysp-mirror [class*="bg-dark"] .taysp-form {
  --tf-bg: rgba(255, 255, 255, 0.96);
  --tf-ink: #1a1a1a;
  --tf-line: rgba(255, 255, 255, 0.25);
}

body.taysp-mirror .solid-bg .taysp-form__label,
body.taysp-mirror .dark-bg .taysp-form__label,
body.taysp-mirror .footer .taysp-form__label {
  color: rgba(255, 255, 255, 0.88);
}

body.taysp-mirror .taysp-form__submit,
body.taysp-mirror .taysp-form button[type="submit"] {
  border-radius: 3px;
  letter-spacing: 0.06em;
}

/* Soften harsh full-bleed white inputs on near-black pages */
@media (max-width: 990px) {
  body.taysp-mirror .solid-bg .taysp-form input,
  body.taysp-mirror .solid-bg .taysp-form textarea,
  body.taysp-mirror .dark-bg .taysp-form input,
  body.taysp-mirror .dark-bg .taysp-form textarea {
    border-radius: 4px;
    border-color: rgba(0, 0, 0, 0.08);
  }
}

/* ----- Horizontal overflow guard ----- */
@media (max-width: 990px) {
  body.taysp-mirror,
  body.taysp-mirror .main-holder,
  body.taysp-mirror #main,
  body.taysp-mirror .content {
    overflow-x: clip;
  }

  body.taysp-mirror iframe,
  body.taysp-mirror video,
  body.taysp-mirror embed,
  body.taysp-mirror table {
    max-width: 100%;
  }
}