/* Component 04 · Process
   A measured copy of Palantir's "Our Software" list (checked 25 Sept 2026) on white:
   one row per step with a huge name, a one-line description, a faint divider and a small
   number. Steps 1 and 2 carry a "Free" label next to the number.
   Layout changes with screen width:
   - phones:            number above, then the name (sized to fit), then the description
   - 560px–1499px:      name left with the number top-right, description underneath (Palantir's layout)
   - 1500px and wider:  description left, huge name in the right half, number bottom-left;
                        hovering a row shades it and nudges the name right (Palantir's wide layout) */

.process {
  --process-text: #1e1f2b;
  --process-rule: #f7f7f7;    /* Palantir's (very faint) divider and hover shade */

  /* Covers the hero's pinned frame as it scrolls up */
  position: relative;
  z-index: 5;
  background: #fff;
  color: var(--process-text);
}

.process-steps {
  margin: 0;
  padding: 0;
  list-style: none;
}

.process-step {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  padding: 12px 0 40px;
  border-top: 1px solid var(--process-rule);
}

.process-title {
  grid-row: 2;
  margin: 0;
  padding: 0 0 16px;
  /* Phones: Palantir's 72px, but never wider than the screen allows for "Understand" */
  font-size: min(72px, calc((100vw - 40px) / 5));
  font-weight: 400;
  line-height: 1;
  letter-spacing: -0.042em;
  transition: transform 0.5s;
}
/* Keeps the hover slide working alongside the type-on fade from base.css */
.js .process-title { transition: opacity 0.5s cubic-bezier(0.5, 1, 0.89, 1), transform 0.5s; }

.process-desc {
  grid-row: 3;
  max-width: 640px;
  margin: 0;
  font-size: 20px;
  line-height: 22px;
}

.process-meta {
  grid-row: 1;
  justify-self: end;
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0;
  font-size: 16px;
  line-height: 1.5;
}

.process-num {
  color: #aaa;
  transition: color 0.3s;
}

/* "Free" label: a small dark tag */
.process-free {
  padding: 2px 8px;
  background: var(--process-text);
  color: #fff;
  font-size: 11px;
  line-height: 16px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}


/* ---------- 560px and wider: Palantir's standard layout ---------- */
@media (min-width: 560px) {
  .process-step {
    grid-template-columns: minmax(0, 1fr) auto;
    column-gap: 16px;
  }
  .process-title {
    grid-area: 1 / 1;
    font-size: 80px;
    letter-spacing: -0.05em;
  }
  .process-desc { grid-area: 2 / 1 / auto / -1; }
  .process-meta { grid-area: 1 / 2; align-self: start; }
}


/* ---------- 1500px and wider: Palantir's wide layout ---------- */
@media (min-width: 1500px) {
  .process-step {
    grid-template-columns: minmax(0, 15%) 48px minmax(0, calc(35% - 48px)) minmax(0, 50%);
    grid-template-rows: 1fr auto;
    column-gap: 0;
    min-height: 328px;
    padding-bottom: 124px;
  }
  /* Palantir uses 180px here; 150px is the largest that fits "Understand" in the right half */
  .process-title {
    grid-area: 1 / 4 / -1;
    padding-bottom: 4px;
    font-size: 150px;
    letter-spacing: -0.0556em;
  }
  /* Palantir keeps a short description in the first 15% and puts an icon in the middle.
     Until our geometric icons exist, the description uses that space too. */
  .process-desc {
    grid-area: 1 / 1 / 2 / 4;
    max-width: 440px;
  }
  .process-meta {
    grid-area: 2 / 1 / auto / 4;
    align-self: end;
    justify-self: start;
    padding: 16px 0 24px;
  }
}

/* Hover (wide screens with a mouse): the row shades edge to edge and the name slides right */
@media (min-width: 1500px) and (hover: hover) and (pointer: fine) {
  .process-step::before {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    z-index: -1;
    width: 99vw;
    height: 100%;
    background-color: var(--process-rule);
    opacity: 0;
    pointer-events: none;
    transform: translateX(-50%);
    transition: opacity 0.2s;
  }
  .process-step:hover::before { opacity: 1; }
  .process-step:hover .process-title { transform: translateX(16px); }
  .process-step:hover .process-num { color: inherit; }
}

@media (prefers-reduced-motion: reduce) {
  .process-title,
  .process-num,
  .process-step::before { transition: none; }
  .process-step:hover .process-title { transform: none; }
}