/* ==========================================================================
   CV block

   Lives inside About, between the closing paragraph and the two columns of
   detail. It is a block within a section, not a section of its own, so it
   picks up that section's rhythm: the same top margin and hairline the
   neighbouring blocks use to separate themselves.

   What makes it stand out is a filled ground rather than louder type. The
   surrounding page is paper and hairlines; one change of surface is enough,
   and it keeps the heading hierarchy honest — the label matches "What I help
   with" and "Stack" rather than competing with the section title.

   Buttons come from foundation.css. Nothing already defined is restyled here.
   ========================================================================== */

.cv {
  margin-top: clamp(3rem, 7vw, 5.5rem);
  padding: clamp(1.5rem, 4vw, 2.25rem);
  background: var(--paper-sunk);
  border: 1px solid var(--rule);

  display: grid;
  gap: clamp(1.5rem, 3vw, 2.5rem);
  align-items: center;
}

@media (min-width: 48rem) {
  .cv {
    /* The copy leads; the actions sit at the end of the measure rather than
       floating in the middle of the block. */
    grid-template-columns: minmax(0, 1fr) auto;
  }
}

.cv__text { min-width: 0; }

/* The label is .about__label, so it already matches its neighbours; only the
   spacing changes, because inside a filled block it needs less room than it
   does at the head of a column. */
.cv .about__label { margin-bottom: 0.6rem; }

.cv__summary {
  max-width: 46ch;
  color: var(--ink-soft);
  margin: 0;
}

/* Actions ------------------------------------------------------------------ */

.cv__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
}

/* The meta line sits under both buttons rather than beside them, so the pair
   stays a pair at every width. */
.cv__meta {
  flex-basis: 100%;
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 0.9rem;
  color: var(--ink-faint);
  margin: 0.15rem 0 0;
}
.cv__meta span + span::before {
  content: "";
  display: inline-block;
  width: 1px;
  height: 0.7em;
  margin-right: 0.9rem;
  vertical-align: -0.05em;
  background: var(--rule-strong);
}

/* The arrow on "View" leans out the way the case-study links do; the download
   arrow stays put, because it points at the action rather than away from it. */
.cv__actions .btn svg { transition: transform 0.3s var(--ease); }
@media (hover: hover) {
  .cv__actions .btn:hover svg { transform: translate(1px, -1px); }
  .cv__actions .btn[download]:hover svg { transform: translateY(1px); }
}

@media (max-width: 30rem) {
  .cv__actions .btn { flex: 1 1 100%; }
}