/**
 * Sections - Science (Ingredients Grid)
 * Well+Therme - Clinical Botanical Archive
 * 
 * A compact 3-column grid showcasing key ingredients
 * with preserved botanical SVG illustrations
 * 
 * @author Well+Therme Team
 * @version 2.0.0
 */

/* ============================================
   SCIENCE SECTION - ARCHIVE AESTHETIC
   ============================================ */

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

/* Subtle dot grid pattern */
.science::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle, rgba(0,0,0,0.03) 1px, transparent 1px);
  background-size: 24px 24px;
  pointer-events: none;
}

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

/* ============================================
   SECTION HEADER - MINIMALIST
   ============================================ */

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

.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: 6px;
  height: 6px;
  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-3);
}

.science__subheadline {
  font-family: var(--font-heading);
  font-size: var(--text-body);
  font-weight: var(--font-regular);
  color: var(--text-secondary);
  font-style: italic;
  margin-bottom: var(--space-4);
}

.science__description {
  font-family: var(--font-body);
  font-size: var(--text-body);
  color: var(--text-muted);
  line-height: var(--leading-relaxed);
}

/* ============================================
   COMPACT GRID LAYOUT
   ============================================ */

.science__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-5);
}

/* ============================================
   INGREDIENT CARD - COMPACT
   ============================================ */

.science__card {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: var(--space-5);
  background: var(--bg-white);
  border-radius: var(--space-3);
  border: 1px solid var(--neutral-200);
  transition: all 0.4s var(--ease-out);
  overflow: hidden;
}

.science__card:hover {
  box-shadow: 0 12px 40px rgba(17, 24, 39, 0.08);
  transform: translateY(-6px);
  border-color: transparent;
}

/* Gradient glow on hover */
.science__card::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: var(--space-3);
  opacity: 0;
  transition: opacity 0.4s ease;
  pointer-events: none;
  z-index: 0;
}

.science__card:hover::after {
  opacity: 0.5;
}

/* ============================================
   SVG IMAGE - PRESERVED
   ============================================ */

.science__image-wrapper {
  position: relative;
  width: 80px;
  height: 80px;
  margin-bottom: var(--space-4);
  border-radius: var(--space-2);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1;
}

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

/* Product-specific background tints for images */
.science__card--glow .science__image-wrapper {
  background: var(--glow-soft);
}

.science__card--relax .science__image-wrapper {
  background: var(--relax-soft);
}

.science__card--focus .science__image-wrapper {
  background: var(--focus-soft);
}

.science__card--detox .science__image-wrapper {
  background: var(--detox-soft);
}

.science__card--defence .science__image-wrapper {
  background: var(--defence-soft);
}

/* ============================================
   CARD CONTENT - COMPACT
   ============================================ */

.science__content {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  z-index: 1;
}

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

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

.science__ingredient {
  font-family: var(--font-heading);
  font-size: var(--text-large);
  font-weight: var(--font-medium);
  color: var(--text-primary);
  line-height: var(--leading-snug);
}

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

/* ============================================
   PRODUCT COLORS - DOT INDICATORS
   ============================================ */

.science__found-in--glow { color: var(--glow-600); }
.science__found-in--glow::before { background: var(--glow-500); }
.science__card--glow:hover::after { 
  background: radial-gradient(circle at 50% 100%, var(--glow-soft) 0%, transparent 70%);
}

.science__found-in--relax { color: var(--relax-600); }
.science__found-in--relax::before { background: var(--relax-500); }
.science__card--relax:hover::after { 
  background: radial-gradient(circle at 50% 100%, var(--relax-soft) 0%, transparent 70%);
}

.science__found-in--focus { color: var(--focus-600); }
.science__found-in--focus::before { background: var(--focus-500); }
.science__card--focus:hover::after { 
  background: radial-gradient(circle at 50% 100%, var(--focus-soft) 0%, transparent 70%);
}

.science__found-in--detox { color: var(--detox-600); }
.science__found-in--detox::before { background: var(--detox-500); }
.science__card--detox:hover::after { 
  background: radial-gradient(circle at 50% 100%, var(--detox-soft) 0%, transparent 70%);
}

.science__found-in--defence { color: var(--defence-600); }
.science__found-in--defence::before { background: var(--defence-500); }
.science__card--defence:hover::after { 
  background: radial-gradient(circle at 50% 100%, var(--defence-soft) 0%, transparent 70%);
}

/* ============================================
   RESPONSIVE - TABLET
   ============================================ */

@media (max-width: 1024px) {
  .science {
    padding: var(--section-padding-y-tablet) 0;
  }
  
  .science__header {
    margin-bottom: var(--space-8);
  }
  
  .science__grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-4);
  }
}

/* ============================================
   RESPONSIVE - MOBILE
   ============================================ */

@media (max-width: 640px) {
  .science {
    padding: var(--section-padding-y-mobile) 0;
  }
  
  .science__header {
    margin-bottom: var(--space-6);
  }
  
  .science__title {
    font-size: var(--text-h3);
  }
  
  .science__grid {
    grid-template-columns: 1fr;
    gap: var(--space-3);
  }
  
  .science__card {
    padding: var(--space-4);
    flex-direction: row;
    align-items: center;
    gap: var(--space-4);
  }
  
  .science__image-wrapper {
    width: 60px;
    height: 60px;
    flex-shrink: 0;
    margin-bottom: 0;
  }
  
  .science__content {
    flex: 1;
  }
}