/* ==========================================================================
   Dynamic Strategic Management Consulting — 2026 redesign
   Integration additions.

   site.css stays comparable with the approved Prototype v3 stylesheet. This
   file holds what the prototype never had to draw: the server-side validation
   states and outcome notices of a real form post, and the client case studies
   added since. Everything reuses the prototype's tokens.
   ========================================================================== */


/* Client logos on a dark panel ------------------------------------------- */

/* For logos with light lettering, which would vanish on the white panel that
   --contain gives a logo such as Kinley's. Sizes stay within contain's rules,
   so nothing is stretched or cropped. The WSN file is only 300px wide, so a
   logo is never drawn wider than that. */
.case__media--on-dark,
.project-card__media--on-dark { background: var(--ink-800); }

.case__media--on-dark img { max-width: min(300px, 100%); }


/* Five facts on one record ------------------------------------------------ */

/* A record with a Project fact has one more than the four the grid expects.
   Five share a row only where the columns stay readable. Below that they are
   arranged as 3 + 2, then 2 + 2 + 1, so no fact is left stranded in a narrow
   cell beside an empty one. */
.case__facts--five { grid-template-columns: repeat(5, minmax(0, 1fr)); }

@media (max-width: 1199px) {
  .case__facts--five { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .case__facts--five .case__fact { grid-column: span 2; }
  .case__facts--five .case__fact:nth-child(n + 4) { grid-column: span 3; }
}
@media (max-width: 899px) {
  .case__facts--five { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .case__facts--five .case__fact { grid-column: auto; }
  .case__facts--five .case__fact:nth-child(n + 4) { grid-column: auto; }
  .case__facts--five .case__fact:last-child { grid-column: 1 / -1; }
}
@media (max-width: 479px) {
  .case__facts--five { grid-template-columns: minmax(0, 1fr); }
}


/* Contractor-side proof cards --------------------------------------------- */

/* Scoped to this one grid: ProjectCard elsewhere keeps its layout. Three equal
   columns where they fit. On tablets three cards cannot make two even columns,
   so each becomes a full-width row of equal height, logo beside text. Phones
   stack the normal card. The panel's top padding keeps every logo clear of the
   track badge, whatever the panel's size. */
.proof-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.proof-grid .project-card__media--contain {
  grid-template: minmax(0, 1fr) / minmax(0, 1fr); /* so the image's limits have a definite box */
  padding: 3.25rem 1rem 1.25rem;
}
.proof-grid .project-card__media--contain img { max-height: 100%; }
.proof-grid .project-card__media--on-dark img { max-width: 72%; }

@media (max-width: 1099px) {
  .proof-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (min-width: 640px) and (max-width: 1099px) {
  .proof-grid { grid-auto-rows: 1fr; }
  .proof-grid .project-card { flex-direction: row; }
  .proof-grid .project-card__media {
    flex: 0 0 max(36%, 15rem);
    aspect-ratio: auto;
    border-bottom: 0;
    border-right: 1px solid var(--line);
  }
  .proof-grid .project-card__media--on-dark img { max-width: 82%; }
}


/* Server-side validation ------------------------------------------------- */

/* InputBase adds .invalid to a field the server rejected. Amber rather than a
   new red: it is the palette's existing "needs attention" colour, and it holds
   contrast on the dark contact ground. */
.field input.invalid,
.field select.invalid,
.field textarea.invalid {
  border-color: var(--amber-bright);
  box-shadow: 0 0 0 1px var(--amber-bright);
}

.field-error {
  margin: .45rem 0 0;
  color: var(--amber-bright);
  font-size: .95rem;
  font-weight: 500;
  line-height: 1.4;
}


/* Outcome notices -------------------------------------------------------- */

/* .form-status is the prototype's own notice. Not delivered, or fields to
   correct, carries the amber edge so it never reads like a confirmation. */
.form-status--failed {
  background: rgba(201, 135, 26, .14);
  border-left-color: var(--amber-bright);
}
.form-status a { color: #fff; font-weight: 600; }
.form-status a:hover { color: var(--accent-bright); }

/* The browser focuses the notice after a post (it is the URL fragment); it is
   a container, not a control, so the ring sits outside it, not on its edge. */
.form-status:focus { outline: none; }
.form-status:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }