/* ============================================
   MARIANN GRAY · The Garden (Chapter III)
   Active ingredients · botanical herbarium
   ============================================ */

/* —— GARDEN INTRO —— */
.garden-intro {
  text-align: center;
  max-width: 720px;
  margin: 0 auto;
  padding: 0 var(--gutter) var(--space-7);
  position: relative;
  z-index: var(--z-content);
}

.garden-intro-eyebrow {
  font-family: var(--font-script);
  font-size: clamp(22px, 2.4vw, 30px);
  color: var(--color-terra);
  margin-bottom: var(--space-2);
}

.garden-intro-title {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(44px, 6vw, 84px);
  color: var(--color-burgundy);
  line-height: 1.05;
  margin-bottom: var(--space-4);
  letter-spacing: -0.01em;
}

.garden-intro-body {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: clamp(17px, 1.5vw, 22px);
  line-height: 1.6;
  color: var(--color-ink);
  opacity: 0.85;
  max-width: 580px;
  margin: 0 auto;
}

/* —— INGREDIENTS GRID —— */
.ingredients {
  position: relative;
  z-index: var(--z-content);
}

.ingredient {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(40px, 6vw, 100px);
  padding: var(--space-7) var(--gutter);
  align-items: center;
  position: relative;
  border-top: 1px solid var(--color-line-soft);
  max-width: 1200px;
  margin: 0 auto;
}

.ingredient:first-child {
  border-top: none;
}

/* Default: text left, visual right */
.ingredient .ingredient-content { grid-column: 1; }
.ingredient .ingredient-visual { grid-column: 2; }

/* Reverse: visual left, text right */
.ingredient-reverse .ingredient-content { grid-column: 2; }
.ingredient-reverse .ingredient-visual { grid-column: 1; }

/* —— CONTENT BLOCK —— */
.ingredient-content {
  max-width: 480px;
}

.ingredient-num {
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--text-md);
  color: var(--color-gold);
  letter-spacing: 0.3em;
  margin-bottom: var(--space-3);
}

.ingredient-name {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(44px, 5.5vw, 80px);
  color: var(--color-burgundy);
  line-height: 0.95;
  letter-spacing: -0.02em;
  margin-bottom: var(--space-2);
}

.ingredient-secondary {
  font-family: var(--font-serif);
  font-size: clamp(11px, 1.1vw, 13px);
  letter-spacing: 0.35em;
  text-transform: uppercase;
  color: var(--color-terra);
  font-weight: 500;
  margin-bottom: var(--space-4);
}

.ingredient-tagline {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: clamp(18px, 1.6vw, 22px);
  color: var(--color-burgundy);
  line-height: 1.4;
  margin-bottom: var(--space-4);
  padding-left: var(--space-3);
  border-left: 2px solid var(--color-gold);
}

.ingredient-body {
  font-family: var(--font-serif);
  font-size: clamp(15px, 1.2vw, 17px);
  line-height: 1.75;
  color: var(--color-ink);
  opacity: 0.85;
  margin-bottom: var(--space-4);
}

.ingredient-properties {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-4);
}

.ingredient-properties li {
  font-family: var(--font-serif);
  font-size: var(--text-2xs);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--color-terra);
  padding: 6px 14px;
  border: 1px solid var(--color-line);
  border-radius: 100px;
  background: rgba(255, 255, 255, 0.45);
  font-weight: 500;
  white-space: nowrap;
}

/* —— VISUAL BLOCK —— */
.ingredient-visual {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-4);
  position: relative;
}

.ingredient-illustration {
  width: clamp(200px, 28vw, 300px);
  height: clamp(200px, 28vw, 300px);
  filter: drop-shadow(0 12px 30px rgba(107, 58, 58, 0.1));
  animation: gentle-sway 8s ease-in-out infinite;
}

.ingredient-reverse .ingredient-illustration {
  animation-delay: -3s;
}

@keyframes gentle-sway {
  0%, 100% { transform: rotate(-1.5deg); }
  50%      { transform: rotate(1.5deg); }
}

.ingredient-stat {
  text-align: center;
  margin-top: var(--space-3);
}

.ingredient-stat-num {
  display: block;
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(56px, 7vw, 88px);
  font-weight: 400;
  color: var(--color-burgundy);
  line-height: 0.85;
  letter-spacing: -0.02em;
}

.ingredient-stat-label {
  font-family: var(--font-script);
  font-size: clamp(18px, 1.8vw, 24px);
  color: var(--color-terra);
  margin-top: var(--space-2);
  display: block;
  max-width: 240px;
}

/* —— ARMENIAN OVERRIDES —— */
html[lang="hy"] .garden-intro-title,
html[lang="hy"] .ingredient-name {
  font-family: var(--font-armenian);
  font-style: normal;
  font-weight: 500;
}

html[lang="hy"] .ingredient-stat-num {
  font-family: var(--font-display);
  font-style: italic;
}

/* —— RESPONSIVE —— */
@media (max-width: 800px) {
  .ingredient {
    grid-template-columns: 1fr;
    gap: var(--space-5);
    padding: var(--space-7) var(--gutter);
  }
  .ingredient .ingredient-content,
  .ingredient .ingredient-visual,
  .ingredient-reverse .ingredient-content,
  .ingredient-reverse .ingredient-visual {
    grid-column: 1;
  }
  .ingredient .ingredient-visual {
    grid-row: 1;
    margin-bottom: var(--space-3);
  }
  .ingredient-reverse .ingredient-visual {
    grid-row: 1;
  }
  .ingredient-content {
    max-width: none;
  }
  .ingredient-properties {
    justify-content: flex-start;
  }
}