/**
 * Craftex Standalone Image Widget Styles
 * Package: craftex-image
 * Version: 1.2.0
 */

.craftex-image-widget-container {
  position: relative;
  width: 100%;
  box-sizing: border-box;
  margin: 0;
  line-height: normal;
  opacity: 1; /* Progressive enhancement: visible by default */
}

.craftex-image-wrapper {
  display: block;
  width: 100%;
  position: relative;
  max-width: 100%;
  box-sizing: border-box;
  margin: 0 auto;
}

.craftex-image-frame {
  position: relative;
  width: 100%;
  overflow: hidden;
  box-sizing: border-box;
  background-color: transparent;
}

.craftex-image-link {
  display: block;
  width: 100%;
  height: 100%;
}

.craftex-image-picture {
  display: block;
  width: 100%;
  height: 100%;
}

.craftex-image-element {
  display: block;
  width: 100%;
  height: auto;
  max-width: 100%;
  border-radius: 0;
  box-sizing: border-box;
  transition: opacity 0.3s ease, filter 0.3s ease, transform 0.6s cubic-bezier(0.25, 1, 0.5, 1);
  transform: translate3d(0, var(--craftex-parallax-y, 0px), 0) scale(var(--craftex-parallax-scale, 1));
}

.craftex-image-frame .craftex-image-element {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.craftex-image-caption {
  font-family: "OCRBLetterpressMW01-Regular", "OCR B Std", "Courier New", monospace;
  font-size: 11px;
  line-height: 1.4;
  color: #3E3F3F;
  margin-top: 8px;
  text-align: left;
}

.craftex-image-caption {
  transition: color 0.25s cubic-bezier(0.22, 1, 0.36, 1);
}

/* Overlay Text Overlay Box */
.craftex-image-overlay-box {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding: 20px 30px;
  pointer-events: none;
  box-sizing: border-box;
}

.craftex-image-overlay-box-inner {
  display: block;
  width: 100%;
  max-width: 500px;
  box-sizing: border-box;
}

.craftex-image-overlay-link {
  display: inline-block;
  pointer-events: auto;
  text-decoration: none;
  color: inherit;
}

.craftex-image-overlay-text {
  pointer-events: auto;
  margin: 0;
  padding: 0;
  font-family: inherit;
  color: #ffffff;
  box-sizing: border-box;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
  transition: color 0.25s ease, background-color 0.25s ease;
}

/* Responsive visibility for separated desktop/tablet vs mobile overlay */
@media (max-width: 767px) {
  .craftex-image-overlay-box--desktop {
    display: none !important;
  }
}

@media (min-width: 768px) {
  .craftex-image-overlay-box--mobile {
    display: none !important;
  }
}

/* -------------------------------------------------------------
 * Motion Reveal & Progressive Enhancement
 * ------------------------------------------------------------- */
.craftex-reveal-item {
  opacity: 1; /* Visible by default */
}

.craftex-image-widget-container.is-craftex-motion-ready[data-craftex-reveal="yes"]:not(.is-craftex-visible) .craftex-reveal-item {
  opacity: 0;
  transform: translateY(24px);
}

.craftex-image-widget-container.is-craftex-motion-ready[data-craftex-reveal="yes"].is-craftex-visible .craftex-reveal-item {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Elementor Editor Active Fallback: Always 100% visible */
.elementor-editor-active .craftex-image-widget-container,
.elementor-editor-active .craftex-image-widget-container *,
body.elementor-editor-active .craftex-image-wrapper {
  opacity: 1 !important;
  transform: none !important;
  visibility: visible !important;
}

/* -------------------------------------------------------------
 * Desktop Height & Location Bar Pairing
 * ------------------------------------------------------------- */
@media (min-width: 1025px) {
  .elementor-widget-craftex-image {
    margin-bottom: 0 !important;
  }

  /* Default desktop image frame height is 90vh (customizable via Elementor Height slider) */
  .craftex-image-frame {
    height: var(--craftex-image-height, 90vh);
  }

  .craftex-image-frame .craftex-image-element {
    height: 100%;
    object-fit: cover;
  }

  /* Automatically collapse container gaps when paired without forcing 100vh lock or clipping */
  :is(.e-con, .elementor-container):has(> .elementor-widget-craftex-image):has(> .elementor-widget-craftex-location-bar) {
    gap: 0 !important;
    --widgets-spacing: 0px !important;
    --widgets-spacing-row: 0px !important;
    --widgets-spacing-column: 0px !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }

  /* Opt-in screen-fit container support */
  :is(.e-con, .elementor-container).craftex-screen-fit-container {
    height: 100vh !important;
    height: 100dvh !important;
    max-height: 100vh !important;
    max-height: 100dvh !important;
    overflow: hidden !important;
    gap: 0 !important;
    --widgets-spacing: 0px !important;
    --widgets-spacing-row: 0px !important;
    --widgets-spacing-column: 0px !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }
}