/* ============================================================
   HELIOCASTLE — FEATURE GRID
   What a plan can include, shown rather than listed: one drawn icon
   and two or three words per tile, so the whole range reads in a
   glance instead of a paragraph.

   Every stroke in these icons carries pathLength="1" in the markup,
   so they can draw themselves from one stroke-dasharray — see
   css/plan-motion.css. A new tile needs the attribute on each of
   its strokes or the icon will simply never appear.
   ============================================================ */

.feat-grid {
  list-style: none;
  display: grid;
  /* The grid finds its own column count and needs no media query at all.
     The min() is what guarantees two columns on a phone: at 375px a flat
     170px track leaves room for only one, and fourteen full-width tiles
     is a scroll, not a glance. 46% keeps the pair even on a 320px screen. */
  grid-template-columns: repeat(auto-fit, minmax(min(150px, 46%), 1fr));
  gap: clamp(10px, 1.1vw, 16px);
  margin-top: clamp(26px, 3vw, 38px);
}

.feat {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  padding: clamp(20px, 1.9vw, 28px) 12px;
  text-align: center;
  background: var(--surface);
  border: 1px solid var(--line);
  transition:
    transform 0.5s var(--ease),
    border-color 0.4s,
    box-shadow 0.5s var(--ease);
}

/* the gold rule that wipes across the top on hover */
.feat::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 0;
  width: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--gold), transparent);
  transition: width 0.6s var(--ease);
}

.feat:hover {
  transform: translateY(-5px);
  border-color: rgb(var(--accent-rgb) / 0.4);
  box-shadow: 0 20px 44px rgb(var(--shadow-rgb) / calc(0.42 * var(--shadow-a)));
}
.feat:hover::before { width: 100%; }

/* --- the drawing --- */

.feat-icon {
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.35;
  stroke-linecap: round;
  stroke-linejoin: round;
  color: var(--gold);
  transition: transform 0.45s var(--ease), color 0.35s;
}
.feat:hover .feat-icon {
  transform: translateY(-2px) scale(1.09);
  color: var(--gold-light);
}

/* --- the words, kept to a glance --- */

.feat span {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 3em;                 /* two lines, so every tile lines up */
  font-size: 12.5px;
  font-weight: 400;
  letter-spacing: 0.05em;
  line-height: 1.5;
  color: rgb(var(--ink-rgb) / 0.82);
  transition: color 0.35s;
}
.feat:hover span { color: var(--text); }

/* --- the line under the grid --- */

.feat-note {
  margin-top: clamp(20px, 2.2vw, 28px);
  font-size: 13px;
  color: var(--muted);
  line-height: 1.8;
  max-width: 68ch;
}
.feat-note a { color: var(--gold); }