/**
 * Single Product Page Styles
 * 
 * @package HaikuVision
 * @version 1.0.0
 * @author Kay Jilesen
 */

/* Product Hero */
.product-hero {
  @apply relative overflow-visible pb-16;
}

@media (min-width: 1024px) {
  .product-hero {
    @apply pb-24;
  }
}

/* Product Images Wrapper */
.product-images-wrapper {
  @apply relative z-10;
}

/* Product Images Swiper */
.js-product-images-swiper {
  @apply relative w-full max-w-[500px] mx-auto;
}

@media (max-width: 1023px) {
  .js-product-images-swiper {
    @apply max-w-full;
  }
}

.js-product-images-swiper .swiper-slide {
  @apply cursor-pointer aspect-square max-h-[500px] w-full overflow-hidden flex items-center justify-center;
}

.js-product-images-swiper .swiper-slide img,
.product-main-image {
  @apply w-full h-full object-contain max-h-[500px] max-w-full;
}

.product-image-lightbox-link {
  @apply w-full h-full flex items-center justify-center;
}

.product-image-lightbox-link img,
.product-image-lightbox img {
  @apply w-full h-full object-contain max-h-[500px] max-w-full;
}

.js-product-images-swiper {
  @apply relative;
}

.js-product-images-swiper .swiper-button-next,
.js-product-images-swiper .swiper-button-prev {
  @apply bg-orange border border-orange text-white w-auto h-auto min-w-0 py-4 px-5 rounded transition-all duration-300 ease-in-out absolute top-1/2 -translate-y-1/2;
  font-family: serif;
  @apply font-bold text-base leading-none z-10;
}

.js-product-images-swiper .swiper-button-next {
  @apply right-0;
}

.js-product-images-swiper .swiper-button-prev {
  @apply left-0;
}

.js-product-images-swiper .swiper-button-next:hover,
.js-product-images-swiper .swiper-button-prev:hover {
  @apply bg-orange/90 border-orange/90;
}

.js-product-images-swiper .swiper-button-next:after,
.js-product-images-swiper .swiper-button-prev:after {
  display: none;
}

.js-product-images-swiper .swiper-button-next:before,
.js-product-images-swiper .swiper-button-prev:before {
  content: '';
  display: inline-block;
  width: 14px;
  height: 14px;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M15.215 10.9725L-4.79623e-07 10.9725L-3.70345e-07 8.4725L15.215 8.4725L8.51 1.7675L10.2775 -4.24984e-07L20 9.7225L10.2775 19.445L8.51 17.6775L15.215 10.9725Z' fill='white'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

.js-product-images-swiper .swiper-button-prev:before {
  transform: rotate(180deg);
}

/* Product Images Thumbnails */
.js-product-images-thumbs {
  @apply mt-4;
}

.js-product-images-thumbs .swiper-slide {
  @apply w-auto h-20 opacity-50 transition-opacity duration-300 ease-in-out cursor-pointer;
}

.js-product-images-thumbs .swiper-slide-thumb-active {
  @apply opacity-100;
}

.js-product-images-thumbs .swiper-slide img {
  @apply w-full h-full object-cover rounded-lg;
}

.js-product-images-thumbs .swiper-slide-thumb-active img {
  @apply border-2 border-gray/20;
}

/* Lightbox */
.product-lightbox {
  @apply hidden fixed top-0 left-0 w-full h-full bg-black/90 z-[9999] items-center justify-center;
}

.product-lightbox.active {
  @apply flex;
}

.product-lightbox img {
  @apply max-w-[90%] max-h-[90%] object-contain;
}

.product-lightbox-close {
  @apply absolute top-5 right-5 text-white text-4xl cursor-pointer bg-black/50 w-[50px] h-[50px] rounded-full flex items-center justify-center;
}

.product-lightbox-nav {
  @apply absolute top-1/2 -translate-y-1/2 text-white text-3xl cursor-pointer bg-black/50 w-[50px] h-[50px] rounded-full flex items-center justify-center;
}

.product-lightbox-prev {
  @apply left-5;
}

.product-lightbox-next {
  @apply right-5;
}

/* Featured Items */
.featured-item-card {
  @apply bg-white rounded-lg;
}

.featured-item-icon img {
  @apply w-8 h-8 object-contain;
}

/* Featured Technical Specifications Items */
.featured-spec-item {
  @apply bg-white border border-gray/10 rounded-lg p-5;
}

/* FAQ Items */
.faq-item {
  @apply transition-all duration-300 ease-in-out;
}

.faq-question {
  @apply bg-white;
}

.faq-question:hover {
  @apply bg-black/5;
}

.faq-question[aria-expanded="true"] .faq-chevron {
  @apply rotate-90;
}

.faq-answer {
  @apply bg-white max-h-0 overflow-hidden opacity-0 px-5;
  transition: max-height 0.4s ease-out, opacity 0.3s ease-out, padding 0.4s ease-out;
}

.faq-answer.open {
  @apply max-h-[1000px] opacity-100 py-5;
  transition: max-height 0.3s ease-in, opacity 0.25s ease-in, padding 0.3s ease-in;
}

/* Product Images Section */
.product-image-item {
  @apply overflow-hidden;
}

.product-image-item img {
  @apply w-full h-full object-cover;
}

/* Ensure all images in a row have the same height */
.product-images-grid {
  @apply items-stretch;
}

.product-image-item {
  @apply flex h-full;
}

.product-image-item img {
  @apply min-h-full object-cover;
}

/* For responsive layouts, use aspect ratio on mobile */
@media (max-width: 767px) {
  .product-image-item {
    @apply aspect-[4/3];
  }
}

/* On desktop, use fixed height based on layout */
@media (min-width: 768px) {
  .product-images-grid {
    grid-auto-rows: 1fr;
  }
  
  .product-image-item {
    @apply h-full;
    min-height: 300px;
  }
}

@media (min-width: 1024px) {
  .product-image-item {
    min-height: 400px;
  }
}

/* Product Contact Team Member */
.product-contact-team-member {
  @apply w-full;
}

.product-contact-team-member-box {
  @apply bg-green-dark rounded-lg p-8 lg:p-12;
}

.product-contact-team-member-content {
  @apply flex flex-col md:flex-row gap-8 items-start md:items-center;
}

.product-contact-team-member-image {
  @apply flex-shrink-0 overflow-hidden;
}

@media (max-width: 767px) {
  .product-contact-team-member-image {
    max-width: 40vw;
  }
}

.product-contact-team-member-image-img {
  @apply rounded-lg;
}

.product-contact-team-member-info {
  @apply flex-1 text-white;
}

.product-contact-team-member-title {
  @apply text-2xl md:text-3xl font-bold mb-2;
}

.product-contact-team-member-subtitle {
  @apply text-lg mb-6 opacity-90;
}

.product-contact-team-member-buttons {
  @apply flex flex-row flex-wrap gap-4;
}