/* ==========================================================================
   case.css — per-block type and layout values for the Locomotive Design System
   (VLI) case. Same model as banco-inter/case.css: the block system in styles/
   does the layout, this file only names the per-block values the original page
   emitted inline. Font sizes are in `em` against the 10px root (see base.css).
   ========================================================================== */

.page.project {
  --page-background: #000;
  --nav-height: 124px;

  /* Sampled off the cover, so the band behind it matches the photograph. */
  --s-cover: #d7e5f4;
  /* The system's own blue, and the tint the headline sits in on top of it. */
  --s-accent: #336eae;
  --s-sunken: #f2f2f2;
  --case-accent: #99b7d7;
}

/*
 * The prev/next nav and the footer sit below the last block, on the black page
 * background, so they take a light ink. Scoped deliberately: blocks keep the
 * global `--color` (#000) they inherit from :root, and each names its own surface.
 */
.page.project .project-nav,
.page.project footer {
  --color: #e2e2e2;
  --nav-link-color: #e2e2e2;
}

/*
 * The header does not — it is lifted over the cover, and this cover is light.
 * It was taking the same #e2e2e2 as the chrome below and rendering the nav
 * links all but invisible against the photo.
 */
.page.project > .navigation {
  --color: #000;
  --nav-link-color: #000;
}

/* --- project meta + summary -------------------------------------------- */

/* Set through the shared variables so the mobile clamps still apply. */
.block.meta {
  --label-size: 1.7em;
  --label-leading: 1.51;
  --label-weight: 400;
  --body-size: 2.3em;
  --body-leading: 1.49;
}

.block.meta .meta-list dt {
  color: var(--label-color);
  font-weight: 600;
}

.block.meta .meta-list dd {
  margin: 0;
}

.block.meta .meta-list dd + dt {
  margin-top: 1.51em;
}

/* --- context ----------------------------------------------------------- */
/* col-label 3.5em / 1.2 and col-body 1.7em / 1.61 are the intro defaults.
   Context and Learnings separate their sections by one blank line; My Role,
   whose phases each run several paragraphs, uses two — the default. */

.block.context .col-body,
.block.learnings .col-body {
  --section-gap: 1;
}

/* --- design challenge -------------------------------------------------- */

.block.challenge .col-body {
  --body-size: 2.3em;
  --body-leading: 1.66;
}

/* --- the process ------------------------------------------------------- */

.block.process .col-body {
  --body-size: 1.8em;
}

/* --- solution heading -------------------------------------------------- */

.block.solution .col-body {
  --body-size: 2.5em;
  --body-leading: 1.66;
}

/* --- templates and standards ------------------------------------------- */
/* Three blank paragraphs above the label, one below it, two after the
   paragraph — counted off the original's markup. */

.block.standard {
  --kicker-lead: 4.5em;
  --caption-trail: 3em;
}

/* --- call to action ---------------------------------------------------- */

.block.header .headline {
  color: var(--case-accent);
}

.block.header .subheadline a {
  color: #fff;
}

/* --- client logos ------------------------------------------------------- */
/*
 * The count and gaps live here rather than inline on the element: an inline
 * custom property beats a media query, so a grid whose columns are set in the
 * markup can never collapse on a phone.
 */
.block.logo-block .logo-grid {
  --columns: 5;
  --gap-x: 100px;
  --gap-y: 100px;
}

@media (max-width: 768px) {
  .block.logo-block .logo-grid {
    --columns: 2;
    --gap-x: 40px;
    --gap-y: 40px;
  }
}