/* =====================================================================
   InstaFarm · "From harvest to pack" (process steps + drying comparison)
   Drop-in component, measured from harvest-reference.png (stage = 1774px).
   Inner sizes use container-query units (cqi = 1% of .harvest__stage width)
   with px floors. DO NOT replace cqi values with px / vw / clamp.
   ===================================================================== */

.harvest {
  --hv-bg: #FDF9F7;
  --hv-ink: #16161C;
  --hv-text: #5A5250;
  --hv-red: #C4161C;
  --hv-num: #E58F89;
  --hv-line: #F3DEDA;
  --hv-grey: #4A4745;

  background: var(--hv-bg);
  scroll-margin-top: 80px;
}
.harvest__stage {
  container-type: inline-size;
  max-width: 1600px;
  margin: 0 auto;
}
.harvest__inner { padding: 2.1cqi 3.8cqi 1.7cqi; }

/* ---------- header ---------- */
.harvest__head {
  display: grid;
  grid-template-columns: 58.5cqi 1px 25cqi;
  column-gap: 1.7cqi;
  justify-content: start;
  align-items: start;
  padding-left: 1.4cqi;
}
.harvest__eyebrow {
  margin: 0;
  display: flex;
  align-items: center;
  gap: 1cqi;
  font: 700 max(12px, .96cqi)/1 'Instrument Sans', system-ui, sans-serif;
  letter-spacing: .03em;
  text-transform: uppercase;
  color: var(--hv-red);
}
.harvest__eyebrow::before { content: ""; width: 2.45cqi; height: 1.5px; background: currentColor; flex: none; }
.harvest__title {
  margin: 1.2cqi 0 0;
  font-family: 'Fraunces', Georgia, serif;
  font-variation-settings: "opsz" 40, "SOFT" 0, "WONK" 0;
  font-weight: 700;
  font-size: max(32px, 4.05cqi);
  line-height: 1;
  letter-spacing: -.02em;
  color: var(--hv-ink);
}
.harvest__title span { display: block; white-space: nowrap; }
.harvest__title em { font-style: normal; color: var(--hv-red); }
.harvest__rule { width: 1px; height: 4.8cqi; margin-top: 3.6cqi; background: #EBC9C3; }
.harvest__lede {
  margin: 3.25cqi 0 0;
  font: 400 max(15px, 1.18cqi)/1.48 'Instrument Sans', system-ui, sans-serif;
  color: var(--hv-text);
}

/* ---------- 6 steps ---------- */
.harvest__steps {
  list-style: none;
  margin: 1.95cqi 0 0 .45cqi;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 3.1cqi;
}
.harvest__step {
  position: relative;
  box-sizing: border-box;
  height: 15.5cqi;
  padding: 1.05cqi 1.3cqi 0 1.47cqi;
  border: 1px solid var(--hv-line);
  border-radius: .9cqi;
  background-color: #FFFBFA;
  background-repeat: no-repeat;
  background-position: center bottom;
  background-size: 100% auto;
  overflow: hidden;
  box-shadow: 0 10px 26px rgba(150, 60, 50, .05);
  transition: transform .4s cubic-bezier(.2,.7,.2,1), box-shadow .4s cubic-bezier(.2,.7,.2,1);
}
/* photo: bottom of the card; its pale top sits behind the text */
.harvest__step--harvest   { background-image: url("../assets/img/harvest/step-harvest.webp"); }
.harvest__step--wash      { background-image: url("../assets/img/harvest/step-wash.webp"); }
.harvest__step--slice     { background-image: url("../assets/img/harvest/step-slice.webp"); }
.harvest__step--trays     { background-image: url("../assets/img/harvest/step-trays.webp"); background-position: center calc(100% + 2.6cqi); }
.harvest__step--solar-dry { background-image: url("../assets/img/harvest/step-solar-dry.webp"); }
.harvest__step--pack      { background-image: url("../assets/img/harvest/step-pack.webp"); }
.harvest__step::before {          /* keeps text crisp over the pale top of the photo */
  content: "";
  position: absolute;
  inset: 0 0 45% 0;
  background: linear-gradient(180deg, rgba(255,251,250,.92) 0%, rgba(255,251,250,.78) 70%, rgba(255,251,250,0) 100%);
  pointer-events: none;
}
.harvest__step > * { position: relative; }
.harvest__num {
  display: block;
  font-family: 'Fraunces', Georgia, serif;
  font-variation-settings: "opsz" 40, "SOFT" 0, "WONK" 0;
  font-weight: 500;
  font-size: max(20px, 1.72cqi);
  line-height: 1;
  color: var(--hv-num);
}
.harvest__step h3 {
  margin: .75cqi 0 0;
  font-family: 'Fraunces', Georgia, serif;
  font-variation-settings: "opsz" 40, "SOFT" 0, "WONK" 0;
  font-weight: 700;
  font-size: max(17px, 1.3cqi);
  line-height: 1.2;
  letter-spacing: -.01em;
  color: var(--hv-ink);
  white-space: nowrap;
}
.harvest__step p {
  margin: .55cqi 0 0;
  font: 400 max(13px, .96cqi)/1.3 'Instrument Sans', system-ui, sans-serif;
  color: var(--hv-text);
}
.harvest__step + .harvest__step::after {   /* red arrow in the gap before each card */
  content: "→";
  position: absolute;
  left: -2.2cqi;
  top: 36%;
  font: 400 max(16px, 1.5cqi)/1 'Instrument Sans', system-ui, sans-serif;
  color: var(--hv-red);
}
.harvest__step + .harvest__step { overflow: visible; }
.harvest__step + .harvest__step { background-clip: padding-box; }
@media (hover: hover) {
  .harvest__step:hover { transform: translateY(-4px); box-shadow: 0 18px 38px rgba(150, 60, 50, .10); }
}

/* ---------- comparison ---------- */
.harvest__compare {
  margin-top: 1.4cqi;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .85cqi;
}
.harvest__card {
  position: relative;
  overflow: hidden;
  box-sizing: border-box;
  min-height: 18.4cqi;
  padding: 1.6cqi 2.1cqi 2cqi;
  border-radius: .95cqi;
  border: 1px solid var(--hv-line);
  background-repeat: no-repeat;
  background-size: cover;
}
.harvest__card--old {
  background-color: #F5F3F1;
  background-image:
    linear-gradient(90deg, rgba(246,244,242,.96) 0%, rgba(246,244,242,.85) 34%, rgba(246,244,242,0) 60%),
    url("../assets/img/harvest/compare-traditional.webp");
  background-position: 0 0, 70% 60%;
  border-color: #ECE7E4;
}
.harvest__card--new {
  background-color: #FDECEA;
  background-image:
    linear-gradient(90deg, rgba(253,236,234,.97) 0%, rgba(253,236,234,.88) 38%, rgba(253,236,234,0) 62%),
    url("../assets/img/harvest/compare-solar-dryer.webp");
  background-position: 0 0, 100% 55%;
}
.harvest__card-eyebrow {
  margin: 0;
  font: 600 max(11px, .8cqi)/1 'Instrument Sans', system-ui, sans-serif;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #5F5A57;
}
.harvest__card--new .harvest__card-eyebrow { font-weight: 700; color: var(--hv-red); }
.harvest__card h3 {
  margin: 1.05cqi 0 0;
  font-family: 'Fraunces', Georgia, serif;
  font-variation-settings: "opsz" 40, "SOFT" 0, "WONK" 0;
  font-weight: 700;
  font-size: max(22px, 1.92cqi);
  line-height: 1.03;
  letter-spacing: -.015em;
  color: var(--hv-ink);
}
.harvest__card h3 span { display: block; white-space: nowrap; }
.harvest__card--new h3 { color: var(--hv-red); }
.harvest__list { list-style: none; margin: 1.6cqi 0 0; padding: 0; display: grid; gap: .42cqi; }
.harvest__list li {
  display: flex;
  align-items: center;
  gap: 1cqi;
  font: 400 max(14px, .95cqi)/1.3 'Instrument Sans', system-ui, sans-serif;
  color: #3F3B3A;
}
.harvest__ico {
  flex: none;
  width: max(28px, 1.92cqi);
  height: max(28px, 1.92cqi);
  display: grid;
  place-items: center;
}
.harvest__ico svg { width: 52%; height: 52%; }
.harvest__card--old .harvest__ico { border-radius: 50%; background: #E3DFDC; color: var(--hv-grey); }
.harvest__card--old .harvest__ico svg { fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; }
.harvest__card--new .harvest__ico {
  border-radius: .45cqi;
  background: #FFFFFF;
  box-shadow: 0 2px 8px rgba(196, 22, 28, .10);
  color: var(--hv-red);
}
.harvest__card--new .harvest__ico svg { fill: currentColor; stroke: none; }

/* ---------- reveal ---------- */
.harvest [data-reveal] { opacity: 0; transform: translateY(18px); transition: opacity .7s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.2,.7,.2,1); }
.harvest [data-reveal].is-in { opacity: 1; transform: none; }
.harvest__step[data-reveal]:nth-child(2) { transition-delay: .06s; }
.harvest__step[data-reveal]:nth-child(3) { transition-delay: .12s; }
.harvest__step[data-reveal]:nth-child(4) { transition-delay: .18s; }
.harvest__step[data-reveal]:nth-child(5) { transition-delay: .24s; }
.harvest__step[data-reveal]:nth-child(6) { transition-delay: .30s; }

/* ---------- responsive ---------- */
@media (max-width: 1099px) {
  .harvest__inner { padding: 44px 28px 48px; }
  .harvest__head { display: block; padding-left: 0; }
  .harvest__title { font-size: clamp(34px, 6vw, 52px); }
  .harvest__rule { display: none; }
  .harvest__lede { margin-top: 16px; max-width: 36rem; }
  .harvest__steps { margin: 28px 0 0; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
  .harvest__step { height: auto; aspect-ratio: 226 / 275; padding: 16px 18px 0; border-radius: 16px; }
  .harvest__step + .harvest__step::after { display: none; }
  .harvest__step h3 { margin-top: 8px; white-space: normal; }
  .harvest__step p { margin-top: 6px; }
  .harvest__compare { margin-top: 20px; grid-template-columns: 1fr; gap: 16px; }
  .harvest__card { min-height: 300px; padding: 26px 26px 28px; border-radius: 18px; }
  .harvest__card h3 { margin-top: 12px; }
  .harvest__list { margin-top: 18px; gap: 8px; }
  .harvest__list li { gap: 12px; }
}
@media (max-width: 639px) {
  .harvest__inner { padding: 36px 20px 40px; }
  .harvest__title { font-size: clamp(30px, 8.6vw, 40px); }
  .harvest__title span { white-space: normal; }
  .harvest__steps { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .harvest__step { aspect-ratio: 4 / 5; padding: 14px 14px 0; }
  .harvest__card { min-height: 0; padding-bottom: 180px; background-size: auto, 150% auto; }
  .harvest__card--old { background-image: linear-gradient(180deg, rgba(246,244,242,.97) 0%, rgba(246,244,242,.9) 55%, rgba(246,244,242,0) 78%), url("../assets/img/harvest/compare-traditional.webp"); background-position: 0 0, 70% 100%; }
  .harvest__card--new { background-image: linear-gradient(180deg, rgba(253,236,234,.97) 0%, rgba(253,236,234,.9) 55%, rgba(253,236,234,0) 78%), url("../assets/img/harvest/compare-solar-dryer.webp"); background-position: 0 0, 90% 100%; }
  .harvest__card h3 span { white-space: normal; }
}

@media (prefers-reduced-motion: reduce) {
  .harvest *, .harvest [data-reveal] { transition: none !important; }
  .harvest [data-reveal] { opacity: 1; transform: none; }
  .harvest__step:hover { transform: none; }
}