/* ==========================================================================
   Sítio Verde
   ========================================================================== */

/* ---------- Faixa de abertura (a logo do Sítio Verde fica no lado esquerdo da foto) ---------- */
.green-banner { margin: 0; line-height: 0; background: var(--green-900); }
.green-banner img { width: 100%; height: clamp(150px, 17.7vw, 340px); object-fit: cover; object-position: left center; }

/* ---------- Introdução ---------- */
.green-intro { padding-block: var(--space-6) 0; }
.green-intro h1 { margin-bottom: var(--space-4); }
.green-intro .lead { font-size: var(--text-md); line-height: 1.7; }
.green-intro .lead p { margin: 0; }

/* ---------- Ações (imagem e texto alternando lados) ---------- */
.green-actions h2 { margin-bottom: var(--space-6); }
.green-actions__list { display: grid; gap: var(--space-7); }
.green-action { display: grid; gap: var(--space-4); align-items: center; }
.green-action__media { overflow: hidden; border-radius: var(--radius-lg); line-height: 0; background: var(--white); }
.green-action__media img { width: 100%; aspect-ratio: 1478 / 584; object-fit: contain; }
.green-action__body h3 { margin: 0 0 var(--space-3); font-family: var(--font-body); font-weight: 700; font-size: var(--text-lg); color: var(--green-700); }
.green-action__body h3::after { content: ""; display: block; width: 48px; height: 3px; margin-top: var(--space-2); border-radius: 3px; background: var(--orange-500); }
.green-action__body p { margin: 0; font-size: var(--text-md); line-height: 1.7; }

@media (min-width: 900px) {
  .green-action { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-7); }
  .green-action--left .green-action__media { order: -1; }
  .green-action:not(.green-action--left) .green-action__media { order: 1; }
}

/* ---------- Sítio sem Lixo ---------- */
.green-waste h2 { margin-bottom: var(--space-6); }
.waste-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-4); margin: 0; padding: 0; list-style: none; }
@media (min-width: 768px) { .waste-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .waste-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.waste-card { display: grid; align-content: start; gap: var(--space-2); padding: var(--space-5); background: var(--white); border: 1px solid var(--color-border); border-radius: var(--radius-lg); }
.waste-card__icon { display: grid; place-items: center; width: 64px; height: 64px; margin-bottom: var(--space-1); border-radius: 50%; background: var(--green-100); }
.waste-card__icon img { width: 38px; height: 38px; }
.waste-card h3 { margin: 0; font-family: var(--font-body); font-weight: 700; font-size: var(--text-md); color: var(--green-700); }
.waste-card p { margin: 0; color: var(--gray-800); line-height: 1.6; }

/* ---------- Faixa final ---------- */
.green-closing { margin: 0; line-height: 0; background: var(--green-900); }
.green-closing img { width: 100%; height: clamp(120px, 20.8vw, 360px); object-fit: cover; }