/**
 * Sylectus Product Page Styles
 *
 * Responsive design for product page sections:
 * - Section 1: Hero card (2-column layout)
 * - Section 2: Description + "What's Included" (2-column layout)
 * - Section 3: Experience video (centered)
 * - Section 4: User testimonials (2-column grid)
 *
 * @package solera-store-theme
 */

/* ===========================
   Main Container & Wrapper
   =========================== */

.sylectus-bg-wrapper {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  background-color: white;
  background-position: center top;
  background-repeat: no-repeat;
  width: 100%;
  padding-top: 2rem;
  padding-bottom: 2rem;
}

/* Override Astra container width for Sylectus pages */
.site-content>.ast-container {
  max-width: 100% !important;
  padding: 0 !important;
}

.sylectus-product-page {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  width: 100%;
}

/* ===========================
   Section 1: Hero Card
   =========================== */

.sylectus-hero-section .ast-container{
  display: flex;
  gap: 2rem;
  align-items: center;
}

.sylectus-hero-image {
  flex: 1;
  min-width: 0;
}

.sylectus-hero-image img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 4px;
}

.sylectus-hero-card {
  flex: 1.5;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 2rem;
  background: var(--solera-white);
  border-radius: 4px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  min-height: 100%;
}

/* Title Section */
.sylectus-card-title h5 {
  margin-bottom: 0.5rem;
}

.sylectus-card-title h3 {
  color: var(--solera-jacarta);
  margin: 0 0 1rem 0;
}

/* Short Description - Italicized */
.sylectus-short-description {
  font-weight: 400 !important;
  font-style: oblique;
  color: var(--solera-mako-base);
}

.sylectus-product-description,
.sylectus-desc-title {
  color: var(--solera-mako-base);
  line-height: 1.6;
  margin-bottom: 1rem;
}

/* Pricing Section */
.sylectus-pricing {
  display: flex;
  align-items: baseline;
  gap: 1rem;
}

.sylectus-price-regular .regular-price {
  text-decoration: line-through;
  color: var(--solera-mako-base);
  font-size: 0.95rem;
}

.sylectus-best-for p {
  margin-bottom: 0 !important;
}

.sylectus-price-sale {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
}

.sylectus-price-sale .sale-price {
  font-size: 2.34rem;
  font-weight: 600;
  color: var(--solera-jacarta-800);
}

.sylectus-price-sale .price-period {
  color: var(--solera-mako-base);
  font-size: 0.95rem;
}

/* Add to Cart Button */
.sylectus-add-to-cart .btn-secondary {
  background-color: var(--solera-sun) !important;
  color: var(--solera-jacarta) !important;
  max-width: 100%;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  width: 100%;
  text-align: center;
}

/* ===========================
   Section 2: Description + Features
   =========================== */

.sylectus-description-features .ast-container {
  display: flex;
  gap: 3rem;
  align-items: flex-start;
}

.sylectus-description-column,
.sylectus-features-column {
  flex: 1;
  min-width: 0;
}

.sylectus-section-title {
  color: var(--solera-shark);
  margin-bottom: 1.5rem;
}

.sylectus-description-content {
  color: var(--solera-mako-base);
  line-height: 1.6;
  margin-bottom: 1.5rem;
}

.sylectus-description-content p {
  margin-bottom: 1rem;
}

.sylectus-best-for-section {
  color: var(--solera-mako-base);
  margin-bottom: 1rem;
}

.sylectus-best-for-section strong {
  color: var(--solera-shark);
  display: block;
  margin-bottom: 0.5rem;
  font-weight: 600;
}

.sylectus-best-for-section p {
  margin: 0;
  color: var(--solera-mako-base);
  font-size: 0.95rem;
}

.sylectus-features-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.sylectus-feature-item {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
}

.sylectus-feature-content {
  flex: 1;
}

.sylectus-feature-name {
  display: block;
  color: var(--solera-shark);
  font-weight: 600;
  margin-bottom: 0.25rem;
}

/* ===========================
   Section 3: Experience Video
   =========================== */

.sylectus-experience-section {
  text-align: center;
}

.sylectus-experience-section .ast-container {
  display: block;
}


.sylectus-experience-video-container {
  display: flex;
  justify-content: center;
  width: 100%;
  max-width: 56.25rem;
  margin: 0 auto;
}

.sylectus-experience-video {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  border: none;
  border-radius: 0.25rem;
  display: block;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

/* ===========================
   Section 4: Testimonials Videos
   =========================== */

.sylectus-testimonials-section {
  text-align: center;
}

.sylectus-testimonials-section .ast-container {
  display: block;
}

.sylectus-testimonials-title {
  font-size: 1.75rem;
  font-weight: 600;
  margin-bottom: 2rem;
}

.sylectus-testimonials-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 4rem;
  max-width: 100%;
}

.sylectus-testimonial-item {
  position: relative;
  width: 100%;
  padding-bottom: 56.25%;
  /* 16:9 aspect ratio */
  height: 0;
  overflow: hidden;
  border-radius: 4px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.sylectus-testimonial-video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: none;
}

/* ===========================
   Responsive: Tablet (1024px and below)
   =========================== */

@media (max-width: 1024px) {
  .sylectus-hero-section .ast-container {
    gap: 2rem;
  }

  .sylectus-hero-card {
    padding: 1.5rem;
  }

  .sylectus-experience-video-container {
    max-width: 700px;
  }

  .sylectus-testimonials-grid {
    gap: 1.5rem;
  }
}

/* ===========================
   Responsive: Mobile (768px and below)
   =========================== */
@media (max-width: 768px) {
  .sylectus-hero-section .ast-container {
    flex-direction: column;
    gap: 1.5rem;
    align-items: stretch;
  }

  .sylectus-hero-card {
    min-height: auto;
    padding: 1rem;
  }

  .sylectus-price-sale .sale-price {
    font-size: 1.82rem;
  }

  .sylectus-experience-title,
  .sylectus-testimonials-title {
    font-size: 1.5rem;
    margin-bottom: 1.5rem;
  }

  .sylectus-experience-video-container {
    max-width: 100%;
  }

  .sylectus-testimonials-grid {
    grid-template-columns: 1fr;
    gap: 1rem;
  }

  .sylectus-description-features {
    flex-direction: column;
    gap: 2rem;
  }
}

/* ===========================
   Responsive: Small Mobile (480px and below)
   =========================== */

@media (max-width: 480px) {
  .sylectus-hero-section {
    gap: 1rem;
  }

  .sylectus-hero-card {
    padding: 1rem;
  }

  .sylectus-card-title h2 {
    font-size: 1.1rem;
  }

  .sylectus-card-title h3 {
    font-size: 1rem;
  }

  .sylectus-price-sale .sale-price {
    font-size: 1.4rem;
  }

  .sylectus-experience-title,
  .sylectus-testimonials-title {
    font-size: 1.25rem;
    margin-bottom: 1rem;
  }

  .sylectus-experience-section,
  .sylectus-testimonials-section {
    padding: 1rem 0;
  }
}