/* =========================================================
   ERGONOMICS CARE 1.0 — FarmworkersCare / K-OS 3
   Full-width app styles for ergonomics.farmworkerscare.org
   ========================================================= */

:root{
  --ergo-green:#315f52;
  --ergo-green-dark:#16392f;
  --ergo-dark:#13241f;
  --ergo-muted:#5d6f68;
  --ergo-sage:#dfeee3;
  --ergo-sage-soft:#f0f7ee;
  --ergo-gold:#f0b74a;
  --ergo-gold-soft:#fff3cf;
  --ergo-cream:#fffaf0;
  --ergo-border:rgba(49,95,82,.18);
  --ergo-shadow:0 24px 60px rgba(28,60,50,.12);
  --ergo-radius:30px;
}

body{
  background:
    radial-gradient(circle at top right, rgba(49,95,82,.13), transparent 34rem),
    linear-gradient(180deg,#fffaf0 0%,#f8f4e9 100%);
}

main{
  width:100%;
  max-width:none;
  margin:0;
  padding:4rem 0;
}

.ergo-hero,
.section{
  width:min(calc(100% - 48px),1280px);
  margin-left:auto;
  margin-right:auto;
}

.ergo-hero{
  display:grid;
  grid-template-columns:minmax(0,1.35fr) minmax(280px,.85fr);
  gap:1.5rem;
  align-items:stretch;
  margin-bottom:3rem;
}

.ergo-hero-card,
.ergo-visual,
.section{
  border:1px solid var(--ergo-border);
  border-radius:var(--ergo-radius);
  background:rgba(255,255,255,.88);
  box-shadow:var(--ergo-shadow);
}

.ergo-hero-card{padding:clamp(2rem,5vw,4rem)}

.eyebrow{
  margin:0 0 1rem;
  color:var(--ergo-green);
  font-weight:900;
  letter-spacing:.22em;
  text-transform:uppercase;
  font-size:.82rem;
}

.ergo-hero h1{
  margin:0;
  color:var(--ergo-dark);
  font-size:clamp(3rem,7vw,6.5rem);
  line-height:.92;
  letter-spacing:-.07em;
}

.lead{
  max-width:760px;
  margin:1.5rem 0 2rem;
  color:var(--ergo-muted);
  font-size:clamp(1.2rem,2vw,1.55rem);
  line-height:1.55;
}

.actions{display:flex;flex-wrap:wrap;gap:.85rem}

.btn{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:52px;padding:.9rem 1.35rem;border-radius:999px;
  font-weight:900;text-decoration:none;border:1px solid transparent;
  transition:transform .18s ease,box-shadow .18s ease;
}
.btn-primary{background:var(--ergo-green);color:#fff;box-shadow:0 16px 35px rgba(49,95,82,.18)}
.btn-secondary{background:#fff;color:var(--ergo-dark);border-color:var(--ergo-border)}
.btn:hover{transform:translateY(-1px)}

.ergo-visual{
  position:relative;min-height:360px;overflow:hidden;
  background:linear-gradient(180deg,rgba(240,247,238,.98),rgba(255,243,207,.82));
}
.spine-line{position:absolute;inset:58px 46%;width:8px;border-radius:99px;background:linear-gradient(180deg,var(--ergo-green),var(--ergo-gold));opacity:.65}
.orb{position:absolute;display:grid;place-items:center;border-radius:50%;font-weight:950;color:var(--ergo-dark);box-shadow:0 24px 50px rgba(64,88,71,.14)}
.orb-one{width:180px;height:180px;top:54px;left:50%;transform:translateX(-50%);background:linear-gradient(135deg,#dff2e4,#b8ddc4)}
.orb-two{width:130px;height:130px;bottom:96px;left:58px;background:#fff3cf}
.orb-three{width:150px;height:150px;bottom:42px;right:54px;background:#e9f5ff}

.section{padding:clamp(1.5rem,4vw,3rem);margin-bottom:1.4rem}
.section-head{max-width:840px;margin-bottom:1.5rem}
.section h2{margin:0 0 .85rem;color:var(--ergo-dark);font-size:clamp(2rem,4vw,3.5rem);line-height:1;letter-spacing:-.045em}
.section p{color:var(--ergo-muted);font-size:1.08rem;line-height:1.6}

.card-grid{display:grid;gap:1rem}.four{grid-template-columns:repeat(4,minmax(0,1fr))}.three{grid-template-columns:repeat(3,minmax(0,1fr))}
.care-card{border:1px solid var(--ergo-border);border-radius:24px;background:#fff;padding:1.35rem}
.care-card h3{margin:.75rem 0;color:var(--ergo-dark);font-size:clamp(1.35rem,2.4vw,2rem);letter-spacing:-.035em}
.icon{font-size:2.4rem;display:block}
.badge{display:inline-flex;padding:.45rem .7rem;border-radius:999px;background:var(--ergo-gold-soft);color:#7b4c00;font-size:.78rem;font-weight:900;text-transform:uppercase;letter-spacing:.08em}
.featured{border-color:rgba(240,183,74,.85);background:linear-gradient(180deg,#fff7de,#fff)}
.large{padding:2rem}.warm{background:linear-gradient(135deg,#fff7de,#fff)}.alert{background:linear-gradient(135deg,#eef8ef,#fff)}.soft{background:rgba(255,255,255,.82)}
.care-card ul{margin:1rem 0 1.5rem;padding-left:1.2rem;line-height:1.7;color:var(--ergo-muted)}
.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(320px,.8fr);gap:1.5rem;align-items:center}.reverse{grid-template-columns:minmax(320px,.8fr) minmax(0,1fr)}
.pill-list{display:flex;flex-wrap:wrap;gap:.7rem;margin:1.25rem 0}.pill-list span{display:inline-flex;padding:.65rem .9rem;border-radius:999px;background:#fff;border:1px solid var(--ergo-border);font-weight:800}
.about-panel{background:linear-gradient(135deg,rgba(255,255,255,.92),rgba(223,238,227,.75))}

@media(max-width:860px){
  main{padding:2rem 0}.ergo-hero,.section{width:min(calc(100% - 28px),100%)}
  .ergo-hero,.split,.reverse,.three,.four{grid-template-columns:1fr}
  .ergo-visual{min-height:260px}.orb-one{width:150px;height:150px}.orb-two,.orb-three{width:110px;height:110px}
}