/* Solutions hub — what is genuinely this page's own.
   The shared blocks in assets/css/sections.css and style.css do the work:
   .section, .section__head, .feature, .media-frame, .pill-list, .panel,
   .note-line and .text-link are used as they are. Everything here is scoped to
   a .solutions- class of this page, so no rule of this file reaches another
   page of the site. Values come from assets/css/tokens.css. */

/* --------------------------------------------------------- The index -- */
/* The hub's own list: the seven entries as links to the pages behind them, in the
   order the navigation reads them. The grid wraps on its own, so the row needs no
   breakpoint of its own. */
.solutions-index__list{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
  gap:12px;
  margin:0;
  padding:0;
  list-style:none;
}

.solutions-index__item{margin:0}

.solutions-index__link{
  display:flex;
  gap:14px;
  align-items:flex-start;
  height:100%;
  padding:14px 16px;
  border:1px solid var(--color-line);
  border-radius:var(--radius-sm);
  background:var(--color-surface);
  color:var(--color-navy);
  text-decoration:none;
  transition:border-color var(--transition-fast),background var(--transition-fast);
}

.solutions-index__link:hover,
.solutions-index__link:focus-visible{
  border-color:var(--color-accent);
  background:var(--color-pale);
}

.solutions-index__icon{
  flex:none;
  display:flex;
  align-items:center;
  justify-content:center;
  width:36px;
  height:36px;
  border-radius:var(--radius-sm);
  background:var(--color-accent-pale);
  color:var(--color-accent);
}

.solutions-index__text{
  display:flex;
  flex-direction:column;
  gap:4px;
  min-width:0;
}

.solutions-index__label{
  font-size:15px;
  font-weight:600;
  color:var(--color-navy);
}

.solutions-index__note{
  font-size:13px;
  line-height:1.5;
  color:var(--color-muted);
}

/* ------------------------------------------------- Routes and link rows -- */
/* The two routes into a borehole, read side by side and at equal weight: a
   named row each, and no rule of this file makes one of them louder. */
.solutions-routes{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:12px;
  margin:26px 0 0;
  padding:0;
  list-style:none;
}

.solutions-route{
  display:flex;
  flex-direction:column;
  gap:6px;
  padding:16px 18px;
  border:1px solid var(--color-line);
  border-radius:var(--radius-sm);
  background:var(--color-surface);
}

.solutions-route__name{
  font-size:12px;
  font-weight:700;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--color-accent);
}

.solutions-route__note{
  font-size:14px;
  line-height:1.55;
  color:var(--color-muted);
}

/* The row of related products and tools. It is the shared .text-link in a
   framed row, the same way a card link reads elsewhere on the site. */
.solutions-links{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:12px;
  margin:26px 0 0;
  padding:0;
  list-style:none;
}

.solutions-links > li{margin:0}

.solutions-links .text-link{
  align-items:center;
  padding:13px 16px;
  border:1px solid var(--color-line);
  border-radius:var(--radius-sm);
  background:var(--color-surface);
  color:var(--color-navy);
  transition:border-color var(--transition-fast),background var(--transition-fast);
}

.solutions-links .text-link .arrow{color:var(--color-accent)}

.solutions-links .text-link:hover,
.solutions-links .text-link:focus-visible{
  border-color:var(--color-accent);
  background:var(--color-accent-pale);
}

/* ------------------------------------------------------- The drawings -- */
/* A section's drawing sits under its picture-and-copy row, centred and no
   wider than it needs to be, so the eye finishes the section on it. The pale
   frame itself comes from .diagram-panel and .scene-panel. */
.solutions-figure{margin-top:clamp(32px,5vw,56px)}

.solutions-figure > .diagram-panel,
.solutions-figure > .scene-panel{
  max-width:900px;
  margin-inline:auto;
}

/* Where a section carries two drawings, they stand side by side above the
   breakpoint and stack below it. */
.solutions-figures{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
  gap:clamp(20px,3vw,32px);
  align-items:start;
  margin-top:clamp(32px,5vw,56px);
}

.solutions-figures__item{min-width:0}

/* --------------------------------------------------- How a page reads -- */
/* The five blocks every solution page is built from, as one numbered row: what is
   waiting behind a link, in the order the page reads in. A step is a ruled row
   rather than a card, because it describes a page rather than offering something
   to buy. */
.solutions-flow__steps{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
  gap:clamp(20px,3vw,32px);
  margin:0;
  padding:0;
  list-style:none;
  counter-reset:flow;
}

.solutions-flow__step{
  position:relative;
  padding-top:var(--space-3);
  border-top:2px solid var(--color-line);
  counter-increment:flow;
}

.solutions-flow__step::before{
  content:counter(flow,decimal-leading-zero);
  position:absolute;
  top:calc(var(--space-3) * -1 - 2px);
  left:0;
  padding-right:8px;
  background:var(--color-pale);
  font-size:12px;
  font-weight:700;
  letter-spacing:.1em;
  color:var(--color-accent);
}

.solutions-flow__step-name{
  display:block;
  margin-bottom:6px;
  font-size:16px;
  font-weight:600;
  letter-spacing:-.01em;
  color:var(--color-heading);
}

.solutions-flow__step-note{display:block;font-size:14px;line-height:1.55;color:var(--color-muted)}

.solutions-flow__actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:clamp(28px,4vw,44px)}

/* --------------------------------------------------- Technical documents -- */
.solutions-docs__inner{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:32px 56px;
}

.solutions-docs__copy{max-width:640px}

.solutions-docs__actions{margin-top:0}

/* ---------------------------------------------------------- Responsive -- */
/* The grids above wrap on their own. What is left for a narrow screen is the
   documents band, which is a row above the breakpoint and a stack below it. */
@media (max-width:760px){
  .solutions-docs__inner{
    flex-direction:column;
    align-items:flex-start;
  }
}

/* A browser that asks for less motion gets the states without the movement,
   as everywhere else on the site. */
@media (prefers-reduced-motion:reduce){
  .solutions-index__link,
  .solutions-links .text-link{transition:none}
}