/* Sourcing page specific styles (keeps consistency with base.css) */
.section { padding-block: var(--space-12); }

.hero-sourcing { padding-top: var(--space-16); background: linear-gradient(180deg, rgba(47,168,79,0.06), rgba(255,255,255,0)); }
.hero-grid { grid-template-columns: 1.1fr 0.9fr; align-items: center; gap: var(--space-10); }
.hero-copy p { font-size: var(--fs-md); color: var(--gray-700); max-width: 60ch; }
.hero-ctas { display: flex; gap: var(--space-3); margin-top: var(--space-4); flex-wrap: wrap; }
.hero-media img { border-radius: var(--radius-xl); box-shadow: var(--shadow-lg); }

@media (max-width: 960px) {
  .hero-grid { grid-template-columns: 1fr; }
}

.strategies-grid { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1200px) {
  .strategies-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .strategies-grid { grid-template-columns: 1fr; }
}

.grid-two { grid-template-columns: 1fr 1fr; align-items: center; gap: var(--space-10); }
@media (max-width: 960px) {
  .grid-two { grid-template-columns: 1fr; }
}

.media-card { border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-md); background: var(--color-surface); }
.media-card img { width: 100%; height: auto; display: block; }

.savings-grid { grid-template-columns: 1fr 1fr; }
@media (max-width: 960px) {
  .savings-grid { grid-template-columns: 1fr; }
}

.process-list { counter-reset: step; display: grid; gap: var(--space-3); padding-left: 0; list-style: none; }
.process-list li { position: relative; padding-left: calc(var(--space-8) + 8px); }
.process-list li::before { counter-increment: step; content: counter(step); position: absolute; left: 0; top: 0.1rem; width: 32px; height: 32px; display: grid; place-items: center; background: var(--color-primary); color: #fff; border-radius: var(--radius-full); font-weight: var(--fw-bold); box-shadow: var(--shadow-sm); }

.trends-grid { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1200px) {
  .trends-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .trends-grid { grid-template-columns: 1fr; }
}

.best-grid { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1200px) {
  .best-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .best-grid { grid-template-columns: 1fr; }
}

.cta-final { padding-bottom: var(--space-16); }
.cta-final h2 { margin-bottom: var(--space-2); }
.cta-final p { color: var(--gray-600); }
.small { font-size: var(--fs-sm); color: var(--gray-600); }