/* ===========================================================================
   machado.group — Feature Box
   ---------------------------------------------------------------------------
   A minimal "why us" feature cell: a mono-caps numbered label, an abstract
   line-art visual, a title and a short description. Borderless by our rule —
   when laid in a FeatureGrid the separation comes from hairline gridlines, not
   per-card borders. Carries the house grain texture inside the container.
   =========================================================================== */

.feature {
  position: relative;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  padding: var(--space-8) var(--space-8) var(--space-10);
  background: var(--surface-page);
  min-height: 340px;
}

/* numbered kicker — "/01 RESOURCES" */
.feature__label {
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  line-height: var(--lh-label);
  font-weight: var(--weight-regular);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--ink);
  margin: 0;
}
.feature__label .idx { color: var(--ink); }

/* abstract line-art visual */
.feature__visual {
  flex: 1 1 auto;
  display: grid;
  place-items: center;
  padding: var(--space-6) 0 var(--space-8);
  color: var(--ink);
}
.feature__visual svg { width: min(100%, 250px); height: auto; display: block; overflow: visible; }
/* per-element transform origins for GSAP scale pulses (own bounding box) */
.feature__visual [data-pulse],
.feature__visual [data-pop] { transform-box: fill-box; transform-origin: center; }

.feature__title {
  font-family: var(--font-sans);
  font-size: var(--fs-h4);
  line-height: var(--lh-h4);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-snug);
  color: var(--ink);
  margin: 0 0 var(--space-2);
}
.feature__desc {
  font-family: var(--font-sans);
  font-size: var(--fs-body-sm);
  line-height: var(--lh-body-sm);
  color: var(--ink-secondary);
  margin: 0;
  max-width: 32ch;
  text-wrap: pretty;
}

/* ---- the hairline grid that holds the cells ---------------------------
   Classic 1px-gap-over-line-color technique: the gaps and outer border read
   as continuous thin gridlines; each cell paints its own page background. */
.feature-grid {
  display: grid;
  grid-template-columns: repeat(var(--feature-cols, 3), 1fr);
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
}
.feature-grid > .feature { background: var(--surface-page); }