/* =====================================================================
   InstaFarm · "Two engines" block (Foods / Trade)
   Drop-in component. Measured from engines-reference.png (card = 888px).
   All inner sizes use container-query units (cqi = 1% of card width),
   so the layout scales as one piece and never re-wraps differently
   from the reference. DO NOT replace cqi values with px/vw/clamp.
   ===================================================================== */

.engines {
  --eng-band: #FBF1EE;
  --eng-foods-bg: #FDF6F2;
  --eng-foods-blob: #F9E3DE;
  --eng-ink: #141414;
  --eng-text: #4F4644;
  --eng-eyebrow: #B85450;
  --eng-red: #B3141A;
  --eng-chip: #FCECE8;
  --eng-trade-eyebrow: #F4BDB5;
  --eng-trade-text: #FBE3DF;

  position: relative;
  background: linear-gradient(180deg, #FBF6EC 0%, var(--eng-band) 140px);
  padding: clamp(40px, 7vh, 80px) clamp(16px, 3.2vw, 62px) clamp(64px, 10vh, 110px);
  overflow: hidden;
}

.engines__grid {
  position: relative;
  z-index: 1;
  max-width: 1800px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(16px, 1.3vw, 24px);
}

/* soft out-of-focus foliage in the band corners (decorative) */
.engines__leaf {
  position: absolute;
  width: 340px;
  height: 340px;
  border-radius: 60% 0 60% 0;
  background: #F3C9C3;
  filter: blur(26px);
  opacity: .45;
  pointer-events: none;
}
.engines__leaf--tl { left: -170px; top: 38%; transform: rotate(-25deg); }
.engines__leaf--br { right: -150px; top: -120px; transform: rotate(20deg); opacity: .35; }

/* ---------- card shell ---------- */
.engine {
  container-type: inline-size;
  position: relative;
  aspect-ratio: 888 / 705;
  border-radius: 28px;
  overflow: hidden;
  isolation: isolate;
  transition: transform .6s cubic-bezier(.2,.7,.2,1), box-shadow .6s cubic-bezier(.2,.7,.2,1);
}
.engine__inner {
  position: relative;
  z-index: 3;
  height: 100%;
  box-sizing: border-box;
  padding: 7cqi 6.3cqi 6cqi;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.engine__inner > :not(.engine__photo) { position: relative; z-index: 2; }

/* ---------- shared type ---------- */
.engine__eyebrow {
  margin: 0;
  display: flex;
  align-items: center;
  gap: 1.6cqi;
  white-space: nowrap;                 /* never wraps (bug in current build) */
  font: 500 1.9cqi/1 'Instrument Sans', system-ui, sans-serif;
  letter-spacing: .2em;
  text-transform: uppercase;
}
.engine__eyebrow::before {
  content: "";
  width: 5cqi;
  height: 1px;
  background: currentColor;
  flex: none;
}
.engine__title {
  margin: 3.4cqi 0 0;
  font-family: 'Fraunces', Georgia, serif;
  font-variation-settings: "opsz" 40, "SOFT" 0, "WONK" 0;
  font-weight: 600;
  font-size: 6.4cqi;
  line-height: 1.08;
  letter-spacing: -.012em;
}
.engine__title span { display: block; white-space: nowrap; }   /* exactly 2 lines */
.engine__body {
  margin: 2.6cqi 0 0;
  max-width: 68cqi;
  font: 400 2.45cqi/1.62 'Instrument Sans', system-ui, sans-serif;
}
.engine__chips {
  list-style: none;
  margin: 3.4cqi 0 0;
  padding: 0;
  display: flex;
  gap: 2.9cqi;
}
.engine__chips li {
  box-sizing: border-box;
  border-radius: 2.2cqi;
  font: 500 1.9cqi/1.25 'Instrument Sans', system-ui, sans-serif;
  transition: transform .3s ease, background-color .3s ease;
}
.engine__chips svg {
  width: 3.9cqi;
  height: 3.9cqi;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex: none;
}
.engine__link {
  margin-top: auto;                    /* pins link to card bottom */
  display: inline-flex;
  flex-direction: column;
  gap: 3.2cqi;
  font: 600 2.45cqi/1 'Instrument Sans', system-ui, sans-serif;
  text-decoration: none;
}
.engine__link::after {
  content: "";
  width: 8.6cqi;
  height: 2px;
  background: currentColor;
  transition: width .3s ease;
}
.engine__link .arr { display: inline-block; margin-left: .5em; transition: transform .3s ease; }
.engine__link:hover::after { width: 100%; }
.engine__link:hover .arr { transform: translateX(4px); }
.engine__link:focus-visible { outline: 2px solid currentColor; outline-offset: 6px; border-radius: 4px; }

/* ---------- card 1 · Foods ---------- */
.engine--foods {
  background: var(--eng-foods-bg);
  box-shadow: 0 30px 70px rgba(150, 60, 50, .10), 0 2px 8px rgba(150, 60, 50, .05);
  outline: 1px solid rgba(255, 255, 255, .85);
  outline-offset: -1px;
  color: var(--eng-ink);
}
.engine--foods .engine__eyebrow { color: var(--eng-eyebrow); }
.engine--foods .engine__body { color: var(--eng-text); }
.engine--foods .engine__chips li {
  width: 13.5cqi;
  height: 14.6cqi;
  background: var(--eng-chip);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .8), 0 6px 16px rgba(150, 60, 50, .05);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.3cqi;
  text-align: center;
  color: var(--eng-ink);
  padding: 0 .8cqi;
}
.engine--foods .engine__chips svg { color: var(--eng-red); }
.engine--foods .engine__chips li:hover { background: #F8DFD9; transform: translateY(-3px); }
.engine--foods .engine__link { color: var(--eng-red); }

/* blush circles behind the photo */
.engine__blob {
  position: absolute;
  z-index: 1;
  border-radius: 50%;
  background: var(--eng-foods-blob);
  pointer-events: none;
}
.engine__blob--lg { width: 40cqi; height: 40cqi; left: 72.5cqi; top: 10.5cqi; }
.engine__blob--sm { width: 23cqi; height: 23cqi; left: 49cqi; top: 65cqi; opacity: .75; }

/* product photo: bleeds off right + bottom edges */
.engine__photo {
  position: absolute;
  z-index: 1;
  margin: 0;
  right: 0;
  bottom: 0;
  width: 44cqi;
  height: 95%;
  pointer-events: none;
}
.engine__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: right bottom;
  /* fades the photo's own background into the card on the left + top */
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 26%), linear-gradient(180deg, transparent 0%, #000 18%);
  -webkit-mask-composite: source-in;
          mask-image: linear-gradient(90deg, transparent 0%, #000 26%), linear-gradient(180deg, transparent 0%, #000 18%);
          mask-composite: intersect;
  transition: transform .6s cubic-bezier(.2,.7,.2,1);
}
/* If foods.webp is a transparent cut-out, add class="is-cutout" to the <img> */
.engine__photo img.is-cutout { object-fit: contain; -webkit-mask-image: none; mask-image: none; }

/* ---------- card 2 · Trade ---------- */
.engine--trade {
  background:
    radial-gradient(60% 50% at 100% 60%, rgba(185, 55, 45, .45), transparent 70%),
    linear-gradient(165deg, #8B1718 0%, #871616 45%, #7C1314 100%);
  box-shadow: 0 30px 70px rgba(126, 16, 21, .28);
  color: #FFFFFF;
}
.engine--trade .engine__eyebrow { color: var(--eng-trade-eyebrow); }
.engine--trade .engine__body { color: var(--eng-trade-text); max-width: 67cqi; }
.engine--trade .engine__chips { gap: 2.8cqi; }
.engine--trade .engine__chips li {
  width: 17.8cqi;
  height: 15.8cqi;
  padding: 2.9cqi 2.8cqi;
  background: rgba(255, 255, 255, .07);
  border: 1px solid rgba(255, 255, 255, .13);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  color: #FFFFFF;
}
.engine--trade .engine__chips li:hover { background: rgba(255, 255, 255, .13); transform: translateY(-3px); }
.engine--trade .engine__link { color: #FFFFFF; }

/* terraced landscape, lower right */
.engine__land {
  position: absolute;
  z-index: 0;
  right: 0;
  bottom: 0;
  width: 60%;
  height: 62%;
  pointer-events: none;
}
.engine__land img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 70% 70%;
  mix-blend-mode: multiply;           /* natural photo → red-toned */
  opacity: .9;
  -webkit-mask-image: radial-gradient(130% 120% at 100% 100%, #000 38%, transparent 78%);
          mask-image: radial-gradient(130% 120% at 100% 100%, #000 38%, transparent 78%);
  transition: transform .6s cubic-bezier(.2,.7,.2,1);
}
/* If trade.webp is already red-toned, add class="is-toned" */
.engine__land img.is-toned { mix-blend-mode: normal; opacity: .75; }

.engine__arcs {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

/* ---------- hover (pointer devices) ---------- */
@media (hover: hover) {
  .engine:hover { transform: translateY(-4px); }
  .engine--foods:hover { box-shadow: 0 40px 90px rgba(150, 60, 50, .16); }
  .engine--trade:hover { box-shadow: 0 40px 90px rgba(126, 16, 21, .38); }
  .engine--foods:hover .engine__photo img { transform: scale(1.03); transform-origin: right bottom; }
  .engine--trade:hover .engine__land img { transform: translateX(-1.5%); }
}

/* ---------- reveal on scroll (JS adds .is-in) ---------- */
.engine[data-reveal] { opacity: 0; transform: translateY(24px); transition: opacity .7s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.2,.7,.2,1); }
.engine[data-reveal].is-in { opacity: 1; transform: none; }
.engine--trade[data-reveal] { transition-delay: .12s; }

/* ---------- responsive ---------- */
/* Stack below 1100px CSS width. The card keeps its proportions down to ~640px
   (cqi scaling), so it still looks exactly like the reference, just one per row. */
@media (max-width: 1099px) {
  .engines__grid { grid-template-columns: 1fr; max-width: 900px; }
}

/* Phones: free height, photo moves under the content, chips 2x2 */
@media (max-width: 639px) {
  .engine { aspect-ratio: auto; border-radius: 22px; }
  .engine__inner { padding: 30px 22px 26px; }
  .engine__eyebrow { font-size: 11px; gap: 10px; white-space: normal; }
  .engine__eyebrow::before { width: 28px; }
  .engine__title { margin-top: 16px; font-size: clamp(28px, 8vw, 36px); }
  .engine__title span { white-space: normal; display: inline; }
  .engine__body, .engine--trade .engine__body { margin-top: 14px; max-width: none; font-size: 16px; }
  .engine__chips { margin-top: 20px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; width: 100%; }
  .engine__chips li { width: auto !important; height: auto !important; min-height: 96px; border-radius: 16px; font-size: 15px; gap: 10px; }
  .engine__chips svg { width: 26px; height: 26px; }
  .engine__link { margin-top: 26px; font-size: 18px; gap: 12px; }
  .engine__link::after { width: 64px; }

  .engine--foods .engine__inner { padding-bottom: 0; }
  .engine__photo { position: relative; width: calc(100% + 22px); height: 240px; margin: 24px -22px 0 0; align-self: stretch; }
  .engine__photo img { -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 30%); mask-image: linear-gradient(180deg, transparent 0%, #000 30%); }
  .engine__blob--lg { width: 220px; height: 220px; left: auto; right: -60px; top: auto; bottom: 90px; }
  .engine__blob--sm { display: none; }
  .engine__land { width: 100%; height: 55%; }
}

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