/* PK2 Finance & Strategy · tools page (v2)
   Composition rules for the tools page only. Anything reusable belongs in
   foundation.css; anything with a colour in it reads a token. */

/* -------------------------------------------------------------- 1 hero -- */

/* Layout A, run short. The page's job starts at the tool index, so the
   opening states what the tools are for and gets out of the way. */
.tools-hero {
  padding-top: 72px;
  padding-bottom: 88px;
}

/* Layout A indents to column 2, which is the home page's discipline. Every
   other section on this page opens at the container's edge, so the hero does
   too: one left edge per page, top to bottom. It keeps Layout A's right edge
   (column 8), so only the start moves. */
@media (min-width: 1025px) {
  .tools-hero .hero-copy { grid-column: 1 / span 8; }
}

.hero-eyebrow { margin-bottom: 26px; }

.hero-lines { margin-top: 28px; max-width: 620px; }
.hero-lines p { color: var(--text-muted); }
.hero-lines p + p { margin-top: 16px; }

/* The line that carries the page, and the open half of the copy's loop: the
   close answers it. Full ink, one step heavier, its own air. */
.hero-line-last { font-weight: 500; color: var(--ink); }

@media (max-width: 1024px) {
  .tools-hero { padding-top: 60px; padding-bottom: 76px; }
}

@media (max-width: 640px) {
  .tools-hero { padding-top: 44px; padding-bottom: 60px; }
  .hero-lines { margin-top: 24px; }
}

/* -------------------------------------------------------- 2 tool index -- */

.tools-head { grid-column: 1 / span 8; }
.tools-head .h2 { margin-top: 18px; }
.tools-lede { margin-top: 18px; max-width: 560px; color: var(--text-muted); }

.tool-featured { grid-column: 1 / span 12; margin-top: 44px; }
.tool-cell { grid-column: span 6; margin-top: 28px; }

/* The live tool is the only card on the site that gets a gold hairline ring
   around the bezel. It is this page's featured treatment; the same card on
   the home page keeps the standard ring. */
.instrument-featured { box-shadow: 0 0 0 1px var(--gold), var(--shadow-instr); }

.tool-title { margin-top: 20px; }
.tool-desc { margin-top: 12px; color: var(--text-muted); }

/* Featured card: the description on the left, who it is for on the right,
   with the chips and the CTA on a ruled foot across both. */
.tool-featured-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  column-gap: 56px;
}
.tool-featured-copy { max-width: 640px; }
.tool-featured-side {
  padding-left: 40px;
  margin-left: -16px;
  border-left: 1px solid var(--hairline);
  padding-top: 22px;
}
.tool-who { margin-top: 12px; font-size: var(--size-small); line-height: 1.55; color: var(--text-muted); }

.tool-featured-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 18px 24px;
  margin-top: 26px;
  padding-top: 20px;
  border-top: 1px solid var(--hairline);
}
.tool-signals { margin: 0; }

/* The five standard cells close the way the featured card does: the mono row
   of what the tool hands back, over a hairline, with the run link under it.
   The gold pill stays with the featured card, so a cell's CTA is the secondary
   pill and the page keeps one accent.

   The cell stretches to its row, and the instrument inside it stretches too, so
   two cards side by side end on the same line whatever their copy runs to. */
.tool-cell { display: flex; }
.tool-cell .instrument { flex: 1 1 auto; display: flex; }
.tool-cell .instrument-core { flex: 1 1 auto; display: flex; flex-direction: column; }
.tool-cell-signals {
  margin-top: 24px;
  padding-top: 18px;
  border-top: 1px solid var(--hairline);
}
.tool-cell-cta { margin-top: 18px; }
/* The foot sits at the bottom of the taller card rather than under its own
   copy, so the two rows of chips line up across the pair. */
.tool-cell .tool-desc { margin-bottom: auto; }

/* An odd number of cells leaves the last one alone with an empty half-row
   beside it. It takes the full twelve instead, which closes the section on the
   same edge the featured card opens it on and gives the chip row the width it
   needs to stay on one line. The section head and the featured card are the
   first two children of the grid, so with five cells the last one is the
   seventh: odd. A sixth tool makes it the eighth and the rule stops applying,
   which is what a full pair wants. */
@media (min-width: 1025px) {
  .tools-index .tool-cell:last-child:nth-child(odd) { grid-column: 1 / span 12; }
}

@media (max-width: 1024px) {
  /* Stacked, all three cards take the same measure. Left one uncapped, the
     featured card would sit wider than the two under it and the column would
     read as ragged rather than as a hierarchy. */
  .tool-featured { grid-column: 1 / span 8; max-width: 660px; }
  .tool-cell { grid-column: 1 / span 8; max-width: 660px; margin-top: 32px; }

  .tool-featured-body { grid-template-columns: minmax(0, 1fr); }
  .tool-featured-side {
    padding-left: 0;
    margin-left: 0;
    padding-top: 20px;
    margin-top: 22px;
    border-left: 0;
    border-top: 1px solid var(--hairline);
  }
  .tool-who { max-width: 560px; }
}

@media (max-width: 640px) {
  /* At phone width the core gives back some padding, or the two mono labels
     in the top row wrap against each other. */
  .tool-featured .instrument-core,
  .tool-cell .instrument-core { padding: 20px 16px 16px; }
  .instrument-labels .label { font-size: 11px; letter-spacing: 0.1em; }

  .tool-featured { margin-top: 36px; }
  .tool-featured-foot { display: block; }
  .tool-featured-foot .tool-cta { margin-top: 18px; }
  /* The label runs to two lines at this width. The pill keeps a width well
     short of the column and gives back the height those two lines would add,
     because at 360px a taller pill on its own passes the share of the screen
     the accent is allowed. Measured: 4.3% of the worst 360px window. */
  .tool-featured-foot .btn-primary {
    max-width: 232px;
    height: auto;
    min-height: 52px;
    padding: 7px 12px 7px 22px;
    font-size: 15px;
    line-height: 1.25;
  }
}

/* ------------------------------------------------------ 3 bridge (ink) -- */

.bridge-body { margin-top: 22px; max-width: 620px; color: var(--muted-inv); }
.bridge-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px 26px;
  margin-top: 38px;
}

@media (max-width: 640px) {
  .bridge-actions { margin-top: 32px; }
  /* Run full-bleed, the gold pill alone takes more of the screen than the
     accent is allowed. It keeps its own width. */
  .bridge-actions .btn-primary { flex: 0 0 auto; width: auto; }
}