/* =====================================================
   PREMIUM LIGHTWEIGHT TEMPLATE SLIDER CSS (Owl Carousel)
   ===================================================== */

/* -----------------------------------------------------
   1. SLIDER CONTAINER & NAVIGATION CONTROLS
   ----------------------------------------------------- */
.template-slider-container {
  position: relative;
  width: 100%;
  margin: 0 auto;
  overflow: visible !important;
  padding: 0 !important;
}

/* Add vertical headroom to prevent hover scale clipping and edge border clipping */
.splide,
.splide__track,
.splide__list {
  height: auto !important;
  min-height: auto !important;
}

.splide__track {
  padding: 16px 0 !important;
}


/* Ensure Splide slide items take full height and layout cleanly */
.splide__slide {
  display: flex;
  flex-direction: column;
  height: auto !important;
  min-height: auto !important;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
}

/* Premium Minimalist Left/Right Arrow Navigation Buttons (Icon Only) - Hidden on all screens */
.template-slider-nav-btn {
  display: none !important;
  /* Completely hidden everywhere as requested */
}

/* Removed .template-slider-container min-width: 992px padding style to prevent masking */

/* -----------------------------------------------------
   2. INDIVIDUAL TEMPLATE CARD STYLES
   ----------------------------------------------------- */
.hero-grid-wrapper {
  position: relative;
  width: 100%;
}

.template-grid-item {
  box-sizing: border-box !important;
}

/* Custom Semantic Template Card styles */
.template-card {
  height: auto !important;
  border-radius: 10px !important; /* Overrides Bootstrap rounded-4 to be less rounded */
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
  will-change: transform;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

/* Elegant lift transition on hover (desktop only) */
.template-card:hover {
  transform: translateY(-6px) !important;
}

/* Concentric image wrapper maintaining 9:16 aspect ratio */
.template-card-mockup {
  aspect-ratio: 9 / 16 !important;
  background-color: var(--c-sand-dark) !important;
  border-radius: 10px !important;
  /* Mathematically concentric less-rounded border radius */
  border: 3px solid var(--c-primary) !important;
  position: relative;
  overflow: hidden;

  /* Silver bullet fix for WebKit/Chrome border-radius clipping bug */
  -webkit-mask-image: -webkit-radial-gradient(white, black);
  mask-image: radial-gradient(white, black);

  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  will-change: transform;
}

@keyframes cardImageFadeIn {
  from {
    opacity: 0.6;
  }

  to {
    opacity: 1;
  }
}

/* Mockup image transitions and mathematically concentric inner rounding */
.template-card-image {
  border-radius: 7px !important;
  /* Math: 10px (outer) - 3px (border) = 7px */
  transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1) !important;
  -webkit-user-drag: none !important;
  user-select: none !important;
  -webkit-user-select: none !important;
  will-change: transform, opacity;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  animation: cardImageFadeIn 0.25s ease-out forwards;
}

/* Image zoom effect on card hover (desktop only) */
.template-card:hover .template-card-image {
  transform: scale(1.06) !important;
}

/* Reusable small capsule badge helper for custom sizing and crisp borders */
span.badge.template-card-badge {
  font-size: 9px !important;
  padding: 4px 8px !important;
  border: 1px solid rgba(255, 255, 255, 0.25) !important;
  letter-spacing: 0.5px !important;
  line-height: 1.2 !important;
  font-weight: 700 !important;
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  will-change: transform;
}

/* Custom interactive button overlay wrapper */
.template-hover-btn-wrapper {
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  will-change: transform;
}

/* Custom interactive button overlay style */
.template-card-btn {
  font-size: 13px !important;
  border: 2px solid var(--c-primary) !important;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08) !important;
  transition: transform 0.2s ease, background-color 0.2s ease, color 0.2s ease !important;
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  will-change: transform;
}

/* Button interactive hover rules */
.template-hover-btn-wrapper .btn:hover {
  background-color: var(--c-primary) !important;
  color: #ffffff !important;
  border-color: var(--c-primary) !important;
  transform: scale(1.05) !important;
}

/* Typography titles spacing */
.template-card-title {
  font-size: 15px !important;
  letter-spacing: 0.5px !important;
}

/* Mobile responsive card adjustments */
@media (max-width: 768px) {
  .template-card-mockup {
    border-width: 2.5px !important;
  }

  .template-card-image {
    border-radius: 7.5px !important;
    /* Math: 10px (outer) - 2.5px (border) = 7.5px */
  }

  /* Disable hover lift and zoom animations on mobile view to avoid sticky touch states */
  .template-card:hover {
    transform: none !important;
  }

  .template-card:hover .template-card-image {
    transform: none !important;
  }
}

/* Premium Neubrutalist Splide Pagination (Dots) styling */
.splide__pagination {
  position: relative !important;
  bottom: auto !important;
  margin-top: 24px !important;
  margin-bottom: 8px !important;
  left: auto !important;
  right: auto !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 10px !important;
  z-index: 10 !important;
}

.splide__pagination__page {
  background: var(--c-primary) !important;
  opacity: 0.25 !important;
  width: 8px !important;
  height: 8px !important;
  border: none !important;
  border-radius: 50% !important;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
  cursor: pointer !important;
}

.splide__pagination__page:hover {
  opacity: 0.6 !important;
}

.splide__pagination__page.is-active {
  background: var(--c-primary) !important;
  opacity: 1 !important;
  width: 20px !important;
  /* Premium expand pill effect */
  border-radius: 100px !important;
  transform: none !important;
}

@media (max-width: 768px) {
  .splide__pagination {
    bottom: auto !important;
    margin-top: 16px !important;
    margin-bottom: 4px !important;
    gap: 6px !important;
  }

  .splide__pagination__page {
    width: 6px !important;
    height: 6px !important;
  }

  .splide__pagination__page.is-active {
    width: 14px !important;
  }
}

/* Custom template detail page mockup sizing */
.template-detail-mockup {
  max-width: 340px !important;
}

@media (max-width: 768px) {
  .template-detail-mockup {
    max-width: 170px !important;
  }
}