/**
 * Science Section - Design Option 1: "Botanical Archive"
 * 
 * Large circular botanical illustrations on colored backgrounds
 * Cards arranged in a masonry-style grid
 * Each card has its own product-color gradient background
 */

.science {
  padding: var(--section-padding-y) 0;
  background: linear-gradient(180deg, var(--wtp-cream) 0%, var(--wtp-white) 30%, var(--wtp-white) 70%, var(--wtp-cream) 100%);
  position: relative;
  overflow: hidden;
}

/* Subtle organic texture */
.science::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.03'/%3E%3C/svg%3E");
  pointer-events: none;
  opacity: 0.5;
}

.science__container {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--container-padding);
  position: relative;
  z-index: 1;
}

.science__header {
  text-align: center;
  max-width: 600px;
  margin: 0 auto var(--space-12);
}

.science__label {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-heading);
  font-size: var(--text-caption);
  font-weight: var(--font-semibold);
  color: var(--brand-dark);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider);
  margin-bottom: var(--space-4);
}

.science__label::before {
  content: '';
  width: 8px;
  height: 8px;
  background: var(--brand-bright);
  border-radius: var(--radius-full);
}

.science__title {
  font-family: var(--font-heading);
  font-size: var(--text-h2);
  font-weight: var(--font-medium);
  color: var(--text-primary);
  line-height: var(--leading-snug);
  margin-bottom: var(--space-4);
}

.science__subheadline {
  font-family: var(--font-heading);
  font-size: var(--text-large);
  color: var(--text-secondary);
  font-style: italic;
}

/* ============================================
   MASONRY GRID - Staggered Cards
   ============================================ */

.science__grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--space-6);
  max-width: 1100px;
  margin: 0 auto;
}

/* ============================================
   CARD - Large with Circular SVG
   ============================================ */

.science__card {
  position: relative;
  border-radius: var(--radius-2xl);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  padding: var(--space-8);
  min-height: 380px;
  transition: transform 0.5s var(--ease-out), box-shadow 0.5s var(--ease-out);
}

.science__card:hover {
  transform: translateY(-8px);
  box-shadow: 0 30px 60px rgba(0, 0, 0, 0.12);
}

/* Card sizes for masonry effect */
.science__card:nth-child(1) { /* Ashwagandha */
  grid-column: span 7;
  background: linear-gradient(135deg, #faf5ff 0%, #f3e8ff 50%, #ede9fe 100%);
}

.science__card:nth-child(2) { /* Tremella */
  grid-column: span 5;
  background: linear-gradient(135deg, #fffbeb 0%, #fef3c7 50%, #fde68a 100%);
}

.science__card:nth-child(3) { /* B-Vitamins */
  grid-column: span 5;
  background: linear-gradient(135deg, #fdf4ff 0%, #fae8ff 50%, #f5d0fe 100%);
}

.science__card:nth-child(4) { /* Milk Thistle */
  grid-column: span 7;
  background: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 50%, #bbf7d0 100%);
}

.science__card:nth-child(5) { /* Zinc + Vitamin C */
  grid-column: span 12;
  background: linear-gradient(135deg, #fff7ed 0%, #ffedd5 50%, #fed7aa 100%);
  flex-direction: row;
  align-items: center;
  gap: var(--space-8);
}

/* ============================================
   CIRCULAR SVG CONTAINER
   ============================================ */

.science__image-wrapper {
  width: 180px;
  height: 180px;
  border-radius: 50%;
  background: white;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--space-6);
  box-shadow: 
    0 4px 20px rgba(0, 0, 0, 0.08),
    0 0 0 8px rgba(255, 255, 255, 0.5);
  transition: transform 0.5s var(--ease-out);
}

.science__card:hover .science__image-wrapper {
  transform: scale(1.05) rotate(3deg);
}

.science__card:nth-child(5) .science__image-wrapper {
  margin-bottom: 0;
}

.science__image {
  width: 70%;
  height: 70%;
  object-fit: contain;
}

/* ============================================
   CONTENT
   ============================================ */

.science__content {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.science__found-in {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: var(--font-semibold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider);
}

.science__found-in::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: var(--radius-full);
}

.science__ingredient {
  font-family: var(--font-heading);
  font-size: var(--text-h4);
  font-weight: var(--font-semibold);
  color: var(--text-primary);
  line-height: var(--leading-tight);
}

.science__claim {
  font-family: var(--font-body);
  font-size: var(--text-body);
  color: var(--text-secondary);
  line-height: var(--leading-relaxed);
  max-width: 400px;
}

/* ============================================
   PRODUCT COLORS
   ============================================ */

.science__card--relax { --dot-color: var(--relax-500); }
.science__card--relax .science__found-in { color: var(--relax-600); }
.science__card--relax .science__found-in::before { background: var(--relax-500); }

.science__card--glow { --dot-color: var(--glow-500); }
.science__card--glow .science__found-in { color: var(--glow-600); }
.science__card--glow .science__found-in::before { background: var(--glow-500); }

.science__card--focus { --dot-color: var(--focus-500); }
.science__card--focus .science__found-in { color: var(--focus-600); }
.science__card--focus .science__found-in::before { background: var(--focus-500); }

.science__card--detox { --dot-color: var(--detox-500); }
.science__card--detox .science__found-in { color: var(--detox-600); }
.science__card--detox .science__found-in::before { background: var(--detox-500); }

.science__card--defence { --dot-color: var(--defence-500); }
.science__card--defence .science__found-in { color: var(--defence-600); }
.science__card--defence .science__found-in::before { background: var(--defence-500); }

/* ============================================
   RESPONSIVE
   ============================================ */

@media (max-width: 1024px) {
  .science__grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-4);
  }
  
  .science__card,
  .science__card:nth-child(5) {
    grid-column: span 1;
    flex-direction: column;
    min-height: auto;
    padding: var(--space-6);
  }
  
  .science__card:nth-child(5) .science__image-wrapper {
    margin-bottom: var(--space-6);
  }
  
  .science__image-wrapper {
    width: 140px;
    height: 140px;
  }
}

@media (max-width: 640px) {
  .science__grid {
    grid-template-columns: 1fr;
  }
  
  .science__card {
    grid-column: span 1 !important;
  }
  
  .science__image-wrapper {
    width: 120px;
    height: 120px;
  }
}