/* ============================================================
   Services hub page styles.
   Source: /docs/mockups/services-hub.html.

   Hero-less utility page: nav sits as a dark band on top, the
   capabilities section opens directly underneath with reduced
   top padding. Industries section reuses the shared
   components/industries.css; no styles for it live here.
   ============================================================ */

/* === FIRST SECTION padding override (no hero) === */

.services-hub-intro {
  padding-top: 56px;
  /* Host for the .topo-callback decorative layer (see
     components/topo-callback.css). The cap-grid below uses
     transparent cards on hover-elevated white, so the topo
     reads behind the intro header but settles to background
     behind the card grid. */
  position: relative;
  overflow: hidden;
}
.services-hub-intro .container {
  position: relative;
  z-index: 2;
}
.services-hub-intro .section-header {
  margin-bottom: 40px;
}

/* Inline link inside the lede ("See our process →"). Used on
   light backgrounds. Could move to base.css if a second page
   needs the pattern. */
.inline-link {
  color: var(--blue);
  text-decoration: none;
  border-bottom: 1px solid rgba(22, 93, 148, 0.3);
  transition: border-color 0.2s ease, color 0.2s ease;
}
.inline-link:hover {
  color: var(--orange);
  border-bottom-color: var(--orange);
}

/* === CAPABILITIES GRID === */

.cap-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.cap-card {
  background: var(--bg-light);
  border: 1px solid var(--border-on-light);
  border-radius: var(--radius-card-lg);
  padding: 28px 28px 24px;
  display: flex;
  flex-direction: column;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  transition: transform 0.3s var(--ease-out), border-color 0.3s ease, box-shadow 0.3s ease;
}

/* Top accent border draws in on hover. Color set by the
   .cap-card--orange / .cap-card--blue modifier from the
   template (alternates 1-3-4-6 orange, 2-5-7 blue per the
   mockup's nth-child rules). */
.cap-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--orange);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.4s var(--ease-out);
}
.cap-card--blue::before { background: var(--blue); }

.cap-card:hover {
  transform: translateY(-4px);
  border-color: var(--border-strong-on-light);
  box-shadow: 0 12px 32px -16px rgba(0, 0, 0, 0.15);
}
.cap-card:hover::before { transform: scaleX(1); }

.cap-card:focus-visible {
  outline: none;
  border-color: var(--orange);
  box-shadow: 0 0 0 3px rgba(220, 115, 76, 0.2);
}
.cap-card--blue:focus-visible {
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(22, 93, 148, 0.2);
}

.cap-icon {
  width: 44px;
  height: 44px;
  border-radius: var(--radius-card);
  background: rgba(220, 115, 76, 0.1);
  color: var(--orange);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 22px;
}
.cap-card--blue .cap-icon {
  background: rgba(22, 93, 148, 0.1);
  color: var(--blue);
}
.cap-icon svg { width: 22px; height: 22px; }

.cap-card h2 {
  font-size: 20px;
  line-height: 1.25;
  margin-bottom: 10px;
  letter-spacing: -0.025em;
  font-weight: var(--weight-medium);
}

.cap-problem {
  font-size: 13px;
  line-height: 1.55;
  color: var(--text-dark-3);
  margin-bottom: 12px;
  font-style: italic;
}

.cap-desc {
  font-size: 14px;
  line-height: 1.6;
  color: var(--text-dark-2);
  margin-bottom: 18px;
  flex: 1;
}

.cap-tools {
  margin-bottom: 22px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.cap-tool {
  font-size: 11px;
  padding: 4px 10px;
  border: 1px solid var(--border-on-light);
  border-radius: 999px;
  color: var(--text-dark-2);
  background: rgba(0, 0, 0, 0.02);
}

.cap-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: var(--weight-medium);
  color: var(--orange);
  text-decoration: none;
  margin-top: auto;
  align-self: flex-start;
}
.cap-card--blue .cap-link { color: var(--blue); }
.cap-card:hover .cap-link .arrow { transform: translateX(4px); }

/* === RESPONSIVE === */

@media (max-width: 980px) {
  .cap-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 640px) {
  .cap-grid { grid-template-columns: 1fr; gap: 16px; }
  .cap-card { padding: 24px 22px 22px; }
  .services-hub-intro { padding-top: 48px; }
}