/**
* Theme Name: Sixten Child
* Description: This is a child theme of Sixten.
* Author: <a href="https://themeforest.net/user/vlthemes">VLThemes</a>
* Template: sixten
* Version: 1.0.3
*/

/*
 * Showcase 8 — bottom-left editorial placement.
 *
 * Sixten's Style 8 uses a 50vh .vlt-showcase-item inside a 100vh vertical
 * Swiper and extends the artwork 50px above/below that item. The content is
 * therefore positioned against the ITEM, not against the viewport or the
 * Elementor column. These overrides use those real dimensions.
 */
.vlt-showcase--style-8 .vlt-showcase-item {
  position: relative;
}

.vlt-showcase--style-8 .vlt-showcase-content {
  position: absolute !important;
  /* Match the left edge of Sixten's 60rem/960px artwork + an inner gutter. */
  left: max(2rem, calc((100% - 60rem) / 2 + 2rem)) !important;
  right: auto !important;
  top: auto !important;
  /* Artwork extends 3.125rem below the item. Keep the text ~1.5rem inside it. */
  bottom: -1.625rem !important;
  width: auto !important;
  max-width: min(52rem, calc(100% - 4rem)) !important;
  margin: 0 !important;
  text-align: left !important;
  transform: none !important;
  z-index: 3;
}

/* Preserve Sixten's large animated outline/fill title. */
.vlt-showcase--style-8 .vlt-showcase-title {
  margin: 0;
  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .12));
}

/* Anchor the small metadata to the new bottom-left composition. */
.vlt-showcase--style-8 .vlt-showcase-number {
  top: -1.15em !important;
  left: 0 !important;
}

.vlt-showcase--style-8 .vlt-showcase-category {
  text-align: left;
}

/* At narrower widths the artwork itself is full-width, so use fixed internal
   gutters. The title size continues to be controlled by Sixten's own breakpoints. */
@media (max-width: 991.98px) {
  .vlt-showcase--style-8 .vlt-showcase-content {
    left: 1.5rem !important;
    bottom: -1.25rem !important;
    max-width: calc(100% - 3rem) !important;
  }
}

@media (max-width: 767.98px) {
  .vlt-showcase--style-8 .vlt-showcase-content {
    left: 1rem !important;
    bottom: -0.75rem !important;
    max-width: calc(100% - 2rem) !important;
  }
}