/* =====================================================================
   PRODUCT STACK — five capability groups (#toolkit)

   Deliberately a NEW class namespace (.stack-*) rather than a reskin of
   the old .toolkit-tile grid. That grid had accumulated ~15 layers of
   overrides inside css/homepage-bundle.css, many of them !important, so
   restyling it in place meant fighting the cascade at every property.
   Nothing in this file shares a selector with those rules, so what is
   written here is what renders.

   Loaded after the bundle. Every colour comes from tokens.css, so light
   and dark themes are both correct without a single theme-specific rule.
   ===================================================================== */

#toolkit .stack-grid {
  /* Desktop bento: a full-height Design column, then two stacked rows
     of two. Named areas rather than spans so the breakpoints below can
     re-flow the whole thing by rewriting one template. */
  display: grid;
  /* Not equal thirds: the reference comp runs the Design column visibly
     narrower than the two on its right, which is what stops a single
     column of stacked logos from looking stranded in open space. */
  grid-template-columns: 0.78fr 1.11fr 1.11fr;
  grid-template-areas:
    "design intelligence build"
    "design motion       enterprise";
  --stack-gap: clamp(7px, 0.64vw, 12px);
  /* Row floor scales with the viewport so the cards keep the reference's
     proportions instead of going squat on a laptop and gangly on a 27".
     `auto` as the max lets a card grow if its caption wraps. */
  grid-auto-rows: minmax(clamp(212px, 17.5vw, 268px), auto);
  margin-top: clamp(28px, 3.4vw, 52px);
  container-type: inline-size;
}

#toolkit .stack-card--design       { grid-area: design; }
#toolkit .stack-card--intelligence { grid-area: intelligence; }
#toolkit .stack-card--build        { grid-area: build; }
#toolkit .stack-card--motion       { grid-area: motion; }
#toolkit .stack-card--enterprise   { grid-area: enterprise; }

#toolkit .stack-card {
  /* label / logos / caption. The 1fr middle row is what centres the
     logo strip in the space actually left over, at every card height. */
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  padding: clamp(16px, 1.62vw, 24px);
  /* -soft, not -line: the comp shows no rule at all between the white
     cards and the grey page. This is near-invisible in light mode and
     still separates card from page in dark, where the two surfaces are
     much closer in value. */
  border: 1px solid var(--line-soft);
  /* No border-radius here on purpose: tokens.css enforces square corners
     site-wide with a global !important, and the comp is square too. */
  background: var(--surface-card);
  transition: border-color var(--dur-2) ease, transform var(--dur-2) var(--ease-out);
}

@media (hover: hover) and (pointer: fine) {
  #toolkit .stack-card:hover { border-color: var(--line); transform: translateY(-2px); }
}

#toolkit .stack-card__label {
  font-weight: 500;
  letter-spacing: -.01em;
}

#toolkit .stack-card__tools {
  /* Balanced so a four-tool caption breaks into even lines instead of
     leaving one orphaned word under a long first line. */
  text-wrap: balance;
}

#toolkit .stack-card__logos {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: clamp(24px, 4.2vw, 62px);
  /* Breathing room from the label above and the caption below, kept
     proportional so the strip stays optically centred as cards grow. */
  padding: clamp(14px, 1.7vw, 26px) 0;
}

/* The Design card is the full-height column, so its logos run down it. */
#toolkit .stack-card--design .stack-card__logos {
  flex-direction: column;
  /* Distributed rather than gapped: the column has to fill two rows of
     height, and a fixed gap would bunch the marks in the middle of it. */
  justify-content: space-evenly;
  padding: clamp(16px, 2vw, 30px) 0;
}

#toolkit .stack-logo {
  /* Every source PNG is now cropped to its ink, so `height` is the mark
     itself rather than a canvas with an arbitrary amount of padding
     baked in — that mismatched padding was the real reason the marks
     looked different sizes when they all shared one height. */
  width: auto;
  height: calc(var(--stack-logo-size) * var(--k, 1));
  --stack-logo-size: clamp(30px, 2.76vw, 42px);
  object-fit: contain;
}

/* Optical balance. Cropping equalises the padding; it does NOT equalise
   how heavy a mark looks, because a solid square (Framer Motion, 96%
   ink) reads far heavier than an open lattice (Tableau, 17%) at the same
   height. --k scales each mark toward equal ink MASS, computed from its
   own alpha coverage and aspect, applied at half strength and normalised
   so the set averages 1. Wide wordmarks land below 1, sparse marks above.
   Values are derived, not eyeballed — see the note in the commit. */
#toolkit .stack-logo--figma { --k: 1.032; }
#toolkit .stack-logo--figjam { --k: 0.963; }
#toolkit .stack-logo--adobe-creative-cloud { --k: 0.969; }
#toolkit .stack-logo--chatgpt { --k: 1.118; }
#toolkit .stack-logo--claude { --k: 1.09; }
#toolkit .stack-logo--gemini { --k: 1.132; }
#toolkit .stack-logo--figma-make { --k: 1.029; }
#toolkit .stack-logo--framer { --k: 1.098; }
#toolkit .stack-logo--nextjs { --k: 0.917; }
#toolkit .stack-logo--react { --k: 1.117; }
#toolkit .stack-logo--gsap { --k: 0.778; }
#toolkit .stack-logo--framer-motion { --k: 0.869; }
#toolkit .stack-logo--davinci-resolve { --k: 0.923; }
#toolkit .stack-logo--power-bi { --k: 1.042; }
#toolkit .stack-logo--microstrategy { --k: 0.898; }
#toolkit .stack-logo--salesforce { --k: 0.863; }
#toolkit .stack-logo--tableau { --k: 1.161; }

:root[data-theme="dark"] #toolkit .stack-logo--ink { filter: invert(1); }

/* ---- Tablet: two columns ------------------------------------------- */
@media (max-width: 1099px) {
      }

/* ---- Phone: one column, Design's stack lies back down --------------
   A vertical column of logos only earns its height next to a two-row
   neighbour. On one column there is no neighbour, so every card gets
   the same horizontal strip and the same compact height. */
@media (max-width: 767px) {
  #toolkit .stack-grid {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "design"
      "intelligence"
      "build"
      "motion"
      "enterprise";
    grid-auto-rows: auto;
    margin-top: 26px;
  }
  #toolkit .stack-card { padding: 24px; min-height: 240px; row-gap: 12px; }
  #toolkit .stack-card--design .stack-card__logos {
    flex-direction: row;
    /* Back to the shared gap: on one column Design is just another card,
       and a wider spread here made its row read as a different rhythm
       from the four beneath it. */
    gap: clamp(22px, 7.5vw, 40px);
    padding: 22px 0 20px;
  }
  #toolkit .stack-card__logos {
    padding: 22px 0 20px;
  }
  #toolkit .stack-logo { --stack-logo-size: 34px; }
    }

/* Narrow phones: four-logo rows (Build, Enterprise) would otherwise wrap
   to a lonely second line. Tightening the gap keeps them on one. */
@media (max-width: 400px) {
  #toolkit .stack-card__logos { gap: 18px; }
  #toolkit .stack-logo { --stack-logo-size: 30px; }
}

@media (prefers-reduced-motion: reduce) {
  #toolkit .stack-card { transition: none; }
  #toolkit .stack-card:hover { transform: none; }
}

/* The Design card spans both rows on desktop but carried the same three
   41px logos as the single-row cards, so over half of it was empty. It is
   the lead card: its logos grow and spread down the full height. */
@media (min-width: 901px) {
  :root body #toolkit .stack-card--design[class] {
    display: flex;
    flex-direction: column;
  }
  :root body #toolkit .stack-card--design .stack-card__logos[class] {
    flex: 1 1 auto;
    gap: 0;
  }
  :root body #toolkit .stack-card--design .stack-logo[class] {
    height: 64px;
    max-width: 72px;
  }
}