/* ==========================================================================
   § 060 · Plant care tailored to your needs — tall photo + outcome list
   Figma gjYZkxeha34OwmNUr91aQn · Home › ITER 5 ›
   "§ 050 Features · photo draft V1 · split (tall photo + outcome list)" 1533:22859.
   Replaced the alternating photo rows (1272:15123) on 2026-09-29.
   Shared .hp-* kit lives in sec-identify.css.
   ========================================================================== */

/* Frame spacing: 96 top pad; bottom pad is the frame's 48 plus 48 (Corbin, 2026-09-29).
   Narrower screens add the same 48 to .section's own padding (59, or 40 at 720). */
#features { padding-bottom: calc(59px + 48px); }
@media (min-width: 981px) {
  #features { padding-top: calc(var(--chapter-gap) - 60px); padding-bottom: 96px; }   /* 60 = #native padding-bottom */
}
@media (max-width: 720px) { #features { padding-bottom: calc(40px + 48px); } }

/* 656 photo + 64 gap + 720 outcome column (Figma's 1440 split), kept in that
   proportion when the page is narrower than 1440. */
.feat-split {
  display: grid; grid-template-columns: minmax(0, 656fr) minmax(0, 720fr);
  gap: var(--s8); align-items: center; justify-content: center;
}

.feat-figure { display: flex; flex-direction: column; gap: var(--s2); margin: 0; min-width: 0; }
.feat-photo {
  width: 100%; height: auto; object-fit: cover;
  border-radius: var(--radius-lg, 12px); background: var(--manila-tab);
}
.feat-photo--tall { aspect-ratio: 656 / 893; }
.feat-credit {
  font-family: var(--f-serif); font-weight: 500; font-size: 12px; line-height: 1.4;
  color: var(--hp-muted, #6d5441);
}

/* Right column: header, then three outcomes 32 apart, each under a rule. */
.feat-outcomes { display: flex; flex-direction: column; align-items: stretch; gap: var(--s6); min-width: 0; }
.hp .feat-head { text-align: left; max-width: none; margin: 0; }
.hp .feat-head .sec-title { text-align: left; }
/* Figma subhead: Cabinet Grotesk Medium 28 / 140%, secondary. */
.hp .feat-head .lede {
  margin-inline: 0; max-width: none;
  font-weight: 500; font-size: clamp(1.25rem, 1vw + 1rem, 1.75rem); line-height: 1.4;
}

.feat-outcome {
  display: flex; flex-direction: column; align-items: flex-start; gap: var(--s3);
  padding-top: var(--s5); border-top: 1px solid var(--hairline);
}
.feat-no {
  font-family: var(--f-sans); font-weight: 800; font-size: 11px;
  letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink);
}
.feat-no .feat-label { margin-left: var(--s2); }
.feat-outcome .card__title { font-weight: 800; line-height: 1.1; }
.feat-outcome .card__body { margin: 0; font-size: 16px; line-height: 1.55; color: var(--hp-muted, #6d5441); opacity: 1; }

/* "Also in the app" line + page link, closing the column. */
.feat-also { display: flex; flex-direction: column; align-items: flex-start; gap: var(--s3); }
.hp-also__text { font-family: var(--f-serif); font-size: 16px; line-height: 1.55; color: var(--hp-muted, #6d5441); margin: 0; }
/* Features that have their own page link from the list, underlined like the site's other in-text links. */
.hp-also__text a { color: var(--ink); text-decoration: underline; text-underline-offset: 2px; }
.hp-also__text a:hover { text-decoration-thickness: 2px; }

@media (max-width: 980px) {
  /* Stacked: header first, then the photo, then the outcomes. */
  .feat-split { grid-template-columns: minmax(0, 1fr); gap: var(--s6); max-width: 560px; margin-inline: auto; }
  .feat-outcomes { display: contents; }
  .feat-head { order: -2; }
  .feat-figure { order: -1; }
  .feat-photo--tall { aspect-ratio: 4 / 5; }
}