/* ROVE — features page. Shared chrome in site.css; tokens in colors_and_type.css. */

/* Overview feature grid */
  .features { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
  .feature {
    background: #fff; border-radius: var(--r-l); padding: 28px;
    box-shadow: var(--shadow-1), var(--shadow-inset);
    display: flex; flex-direction: column; gap: 14px; min-height: 230px;
    text-decoration: none; transition: transform var(--d-fast) var(--ease-out), box-shadow var(--d-fast) var(--ease-out);
  }
  .feature:hover { transform: translateY(-3px); box-shadow: var(--shadow-2), var(--shadow-inset); }
  .feature .icon { width: 44px; height: 44px; border-radius: var(--r-m); display: grid; place-items: center; }
  .feature .icon svg { width: 22px; height: 22px; stroke-width: 1.7; fill: none; stroke-linecap: round; stroke-linejoin: round; }
  .feature.task .icon  { background: var(--sage-200); color: var(--forest-700); }
  .feature.padd .icon  { background: color-mix(in oklab, var(--paddock-400) 30%, var(--cream-50)); color: var(--forest-700); }
  .feature.cal .icon   { background: var(--wheat-200); color: #6b4f10; }
  .feature.map .icon   { background: var(--sky-200); color: #2a4757; }
  .feature.crop .icon  { background: var(--soil-300); color: var(--soil-600); }
  .feature.water .icon { background: color-mix(in oklab, var(--sky-500) 25%, var(--cream-50)); color: var(--sky-500); }
  .feature h3 { font: var(--t-h1); margin: 0; color: var(--ink-1); }
  .feature p { color: var(--ink-2); font-size: 15px; line-height: 1.5; }
  .feature .more {
    margin-top: auto; color: var(--forest-700); font: var(--t-body-strong); font-size: 14px;
    display: inline-flex; align-items: center; gap: 6px;
  }
  .feature:hover .more { color: var(--forest-900); }

  /* Deep-dive rows */
  .highlight { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; }
  .highlight.flip .copy { order: 2; }
  .highlight .copy h3 { font: var(--t-display-m); letter-spacing: -0.01em; margin: 14px 0 14px; text-wrap: balance; }
  .highlight .copy p { color: var(--ink-2); font-size: 17px; line-height: 1.55; max-width: 480px; text-wrap: pretty; }
  .highlight .bullets { list-style: none; padding: 0; margin: 20px 0 0; display: flex; flex-direction: column; gap: 10px; }
  .highlight .bullets li { display: flex; gap: 10px; align-items: flex-start; font: var(--t-body); color: var(--ink-1); }
  .highlight .bullets li::before {
    content: ""; width: 16px; height: 16px; margin-top: 4px; background: var(--forest-900);
    mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M5 12l5 5L20 7' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/></svg>") center/contain no-repeat;
    flex: 0 0 auto;
  }
  .vis {
    background: var(--cream-100); border-radius: var(--r-xl); padding: 28px;
    box-shadow: var(--shadow-2), var(--shadow-inset); aspect-ratio: 4/3;
    position: relative; overflow: hidden;
  }
  .vis.pad0 { padding: 0; }

  /* App card mock used in deep dives */
  .mock { background: #fff; border-radius: var(--r-l); box-shadow: var(--shadow-1); padding: 16px; }
  .mock + .mock { margin-top: 12px; }
  .mock-row { display: flex; align-items: center; gap: 12px; }
  .mock-check { width: 20px; height: 20px; border: 1.5px solid var(--ink-1); border-radius: 6px; flex: 0 0 auto; }
  .mock-check.done { background: var(--forest-900); border-color: var(--forest-900); display: grid; place-items: center; }
  .mock-check.done svg { width: 12px; height: 12px; }
  .mock .title { font: var(--t-body-strong); font-size: 14px; }
  .mock .meta { font: var(--t-meta); color: var(--ink-2); margin-top: 2px; }
  .pill { font: var(--t-caps); letter-spacing: 0.08em; text-transform: uppercase; padding: 4px 8px; border-radius: var(--r-pill); }
  .pill.warn { background: var(--wheat-200); color: #6b4f10; }
  .pill.due  { background: var(--sky-200); color: #2a4757; }
  .pill.ok   { background: var(--sage-200); color: var(--forest-700); }

  /* Photo band */
  .photo-band { position: relative; height: 460px; overflow: hidden; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
  .photo-band img { width: 100%; height: 100%; object-fit: cover; display: block; }
  .photo-band .cap {
    position: absolute; left: 0; right: 0; bottom: 0; padding: 40px 0;
    background: linear-gradient(to top, rgba(31,63,42,0.78), rgba(31,63,42,0));
    color: var(--cream-50);
  }
  .photo-band .cap .wrap { display: flex; flex-direction: column; gap: 6px; }
  .photo-band .cap .k { font: var(--t-caps); letter-spacing: 0.14em; text-transform: uppercase; opacity: 0.8; }
  .photo-band .cap .v { font: 500 26px/1.2 var(--font-display); max-width: 620px; text-wrap: balance; }

  /* Smaller feature trio */
  .trio { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
  @media (max-width: 880px) {
    .features, .trio { grid-template-columns: 1fr; }
    .highlight { grid-template-columns: 1fr; gap: 32px; }
    .highlight.flip .copy { order: 0; }
  }