/* Site v2 solutions pages: /solutions, /structured-ml, /discrete-optimization,
   /llm-and-mlops, /generative-ai-integrations, /partners/snowflake and the
   request-access form (dialog on /llm-and-mlops, inline on phone
   /request_access). Heroes and their plates, heads, cells and cell links,
   rows, points, checks, the gallery, the press wall and the band are the
   shared components; this file only lays out the pages' own pieces. */

/* ---------- Card lists: tiles and steps ---------- */
/* One card per row on phones (art beside the name); the grid's columns from
   720px. */
@media (max-width: 719px) {
  .v2-sol-list {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-3);
  }
}
/* Four items: two columns on tablets rather than three and one. */
@media (min-width: 720px) and (max-width: 1023px) {
  .v2-sol-even {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* A product or solution tile: the whole card is the link. Phones: art, name
   and arrow in a row; wider: the art above the name and arrow. */
.v2-sol-tile {
  grid-template-columns: 56px minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-4) var(--space-5);
}
/* The card clips overflow, so the focus ring goes inside it. */
.v2-sol-tile:focus-visible {
  outline-offset: -2px;
  border-radius: var(--r);
}
.v2-sol-tile__art {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  object-fit: cover;
}
@media (min-width: 720px) {
  .v2-sol-tile {
    grid-template-columns: minmax(0, 1fr) auto;
    align-content: space-between;
    align-items: end;
    gap: var(--space-8) var(--space-3);
    padding: var(--space-6);
  }
  .v2-sol-tile__art {
    grid-column: 1 / -1;
    width: 96px;
    height: 96px;
  }
  .v2-sol-tile__arrow {
    margin-bottom: 0.3em;
  }
}

/* A snowflake step: the same card shape, without a link. */
.v2-sol-step {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-4) var(--space-5);
}
.v2-sol-step img {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  object-fit: cover;
}
@media (min-width: 720px) {
  .v2-sol-step {
    grid-template-columns: minmax(0, 1fr);
    align-content: start;
    align-items: start;
    gap: var(--space-5);
    padding: var(--space-6);
  }
  .v2-sol-step img {
    width: 72px;
    height: 72px;
  }
}

/* ---------- Check list beside the detail (discrete optimization) ---------- */
.v2-sol-split {
  display: grid;
  gap: var(--space-8);
}
.v2-sol-split__checks li {
  font-weight: 500;
  line-height: 1.5;
  color: var(--ink);
}
.v2-sol-split__body {
  max-width: 60ch;
  line-height: 1.65;
  color: var(--muted);
}
@media (min-width: 1024px) {
  .v2-sol-split {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: clamp(40px, 6vw, 80px);
    align-items: start;
  }
}

/* ---------- The intro over the LLM Ops / ML Ops lists (llm-and-mlops) ---------- */
.v2-sol-intro {
  max-width: 60ch;
  margin-bottom: var(--space-10);
}
.v2-sol-index {
  display: grid;
  gap: var(--space-10);
  align-items: start;
}
@media (min-width: 720px) {
  .v2-sol-index {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: clamp(32px, 5vw, 64px);
  }
}
.v2-sol-index .v2-head--rule {
  margin-bottom: var(--space-4);
}
.v2-sol-link {
  grid-template-columns: 40px minmax(0, 1fr) 18px;
  align-items: center;
  gap: var(--space-4);
  padding-block: var(--space-4);
}
.v2-sol-link img {
  width: 40px;
  height: 40px;
  border-radius: 50%;
}
.v2-sol-link .v2-row__title {
  font-weight: 500;
}
.v2-sol-link svg {
  color: var(--muted);
  transition:
    transform var(--dur) var(--ease),
    color var(--dur) var(--ease);
}
.v2-sol-link:hover svg {
  color: var(--accent-ink);
  transform: translateX(3px);
}

/* ---------- Module cards (llm-and-mlops, in .v2-cells--text) ---------- */
.v2-sol-module {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-4);
}
.v2-sol-module__art {
  width: 56px;
  height: 56px;
  border-radius: 50%;
}
.v2-sol-module__points {
  color: var(--muted);
}
.v2-sol-module__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3) var(--space-5);
  margin-top: auto;
  padding-top: var(--space-2);
}
.v2-sol-module__actions .v2-more {
  min-height: 40px;
}

/* ---------- Diagram, benefits, connectors and band (generative-ai-integrations) ---------- */
/* The note under the hero's diagram, centred like the hero. */
.v2-sol-diagram {
  display: grid;
  gap: var(--space-6);
  justify-items: center;
}
.v2-sol-diagram > .v2-plate {
  width: 100%;
}
.v2-sol-diagram__note {
  max-width: 560px;
  text-align: center;
  color: var(--muted);
}
.v2-sol-connectors {
  display: grid;
  gap: clamp(40px, 5vw, 64px);
}
/* The band's one paragraph at the hero lead's measure. */
.v2-choice:has(> .v2-sol-band-lead) {
  flex-basis: 560px;
}
.v2-choice > p.v2-sol-band-lead {
  max-width: 560px;
}

/* ---------- A hero whose lead is a long pitch (snowflake) ---------- */
/* Set as prose (16/1.65) at the reading measure rather than an 18px lead. */
.v2-sol-hero--long .v2-hero__side .v2-lead {
  max-width: var(--read);
  font-size: var(--fs-body);
  line-height: 1.65;
}

/* ---------- Request access (dialog and inline) ---------- */
.v2-sol-ra {
  width: min(640px, calc(100vw - 32px));
}
.v2-sol-ra__title {
  flex: 1;
}
.v2-sol-ra__back {
  margin-left: calc(-1 * var(--space-2));
}
.v2-sol-ra__status {
  padding-block: var(--space-8);
  color: var(--muted);
}
.v2-sol-ra__done {
  display: grid;
  gap: var(--space-4);
  padding-block: var(--space-2);
}
.v2-sol-ra__set {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}
.v2-sol-choices {
  display: grid;
  gap: var(--space-3);
}
@media (min-width: 640px) {
  /* Two columns filled top to bottom, the same order as the old two-column grid. */
  .v2-sol-choices {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: repeat(3, auto);
    grid-auto-flow: column;
  }
}
/* A product choice: a ringed card, purple when checked (round 4's chips). */
.v2-sol-choice {
  display: grid;
  grid-template-columns: 18px 32px minmax(0, 1fr);
  gap: var(--space-3);
  align-items: center;
  min-height: 56px;
  padding: var(--space-3) var(--space-4);
  border-radius: var(--r);
  background: var(--paper);
  box-shadow: var(--ring);
  font-size: var(--fs-sm);
  font-weight: 500;
  line-height: 1.35;
  cursor: pointer;
  transition:
    box-shadow var(--dur-fast) var(--ease),
    background-color var(--dur-fast) var(--ease);
}
.v2-sol-choice:hover {
  background: var(--accent-soft);
}
.v2-sol-choice:has(input:checked) {
  background: var(--accent-soft);
  box-shadow: inset 0 0 0 1px var(--accent);
}
.v2-sol-choice input {
  width: 18px;
  height: 18px;
  margin: 0;
  accent-color: var(--btn);
}
.v2-sol-choice img {
  width: 32px;
  height: 32px;
  object-fit: contain;
}
.v2-sol-choices + .v2-field__error {
  margin-top: var(--space-3);
}
.v2-sol-ra-page {
  display: grid;
  gap: var(--space-8);
}
@media (max-width: 639px) {
  .v2-sol-ra-page .v2-actions .v2-btn {
    width: 100%;
  }
}