/* ============================================================================
   services.css — page-specific styles for services.html
   Depends on variables.css and global.css being loaded first.
   ============================================================================ */

/* ============================================================================
   HERO
   ============================================================================ */

.services-hero {
  padding-block: var(--space-40) var(--space-24);
  background: var(--color-bg);
}

/* Match the wider container used by the explorer below so the hero heading
   and bio share the same left edge as the sidebar/card. */
.services-hero > .container {
  max-width: min(1600px, 100% - var(--space-12));
}

.services-hero h1 {
  font-family: var(--font-display);
  font-weight: var(--fw-display);
  font-size: var(--fs-display);
  line-height: var(--lh-display);
  letter-spacing: var(--ls-display);
  color: var(--color-ink);
  margin-bottom: var(--space-6);
}

.services-hero__sub {
  font-family: var(--font-body);
  font-size: var(--fs-body-lead);
  font-weight: var(--fw-regular);
  line-height: var(--lh-body);
  color: var(--color-ink-72);
  max-width: 56ch;
}

@media (max-width: 767px) {
  .services-hero {
    padding-block: var(--space-20) var(--space-12);
  }
}

/* ============================================================================
   SERVICE BLOCKS — shared structure
   ============================================================================ */

.service-block {
  padding-block: var(--space-24);
}

.service-block--bg {
  background: var(--color-bg);
}

.service-block--surface {
  background: var(--color-surface);
}

.service-block__grid {
  display: grid;
  grid-template-columns: 2fr 3fr;
  gap: var(--space-16);
  align-items: start;
}

/* Left column: sticky watermark number */
.service-block__number {
  position: sticky;
  top: 96px;
  display: flex;
  align-items: center;
  justify-content: center;
  align-self: start;
}

.service-block__watermark {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: var(--fw-display);
  font-size: clamp(64px, 8vw, 96px);
  line-height: 1;
  color: var(--color-accent);
  user-select: none;
}

/* Right column: all content */
.service-block__content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-4);
}

.service-block__content .kicker {
  margin-bottom: 0;
}

.service-block__content h2 {
  font-family: var(--font-display);
  font-weight: var(--fw-display);
  font-size: var(--fs-h1);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-h1);
  color: var(--color-ink);
  margin-top: var(--space-2);
}

.service-block__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  margin-top: var(--space-2);
}

.service-block__body p {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  font-weight: var(--fw-regular);
  line-height: var(--lh-body);
  color: var(--color-ink-72);
  max-width: 65ch;
}

.service-block__stack {
  font-family: var(--font-body);
  font-size: var(--fs-body-sm);
  font-weight: var(--fw-medium);
  color: var(--color-ink-56);
  margin-top: var(--space-2);
}

/* Service video slot: placeholder until a Loom URL is wired in. When ready,
   replace the .service-block__video--placeholder contents with an
   <iframe src="https://www.loom.com/embed/{ID}"> and drop the
   --placeholder modifier. */
.service-block__video {
  margin-top: var(--space-6);
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-5);
  border: 1px dashed var(--color-border-strong);
  border-radius: var(--radius-md);
  background: var(--color-bg);
  color: var(--color-ink-72);
  max-width: 32rem;
}

.service-block__video--placeholder {
  font-family: var(--font-body);
  font-size: var(--fs-body-sm);
  font-weight: var(--fw-medium);
}

.service-block__video-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--color-accent);
}

.service-block__video-label {
  letter-spacing: 0;
}

.service-block__video iframe {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  border: 0;
  border-radius: var(--radius-md);
}

.service-block__stack-label {
  color: var(--color-ink);
  font-weight: var(--fw-medium);
  margin-right: var(--space-2);
}

.service-block__content .text-link {
  margin-top: var(--space-4);
}

/* Mobile: single column, no sticky */
@media (max-width: 767px) {
  .service-block {
    padding-block: var(--space-12);
  }

  .service-block__grid {
    grid-template-columns: 1fr;
    gap: var(--space-6);
  }

  .service-block__number {
    position: static;
    justify-content: flex-start;
  }

  .service-block__watermark {
    font-size: clamp(48px, 12vw, 64px);
  }
}

/* ============================================================================
   NOT-SURE CTA
   ============================================================================ */

.services-not-sure {
  padding-block: var(--space-24);
}

.services-not-sure h2 {
  font-family: var(--font-display);
  font-weight: var(--fw-display);
  font-size: var(--fs-h1);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-h1);
  color: var(--color-ink);
  margin-bottom: var(--space-4);
}

.services-not-sure__body {
  font-family: var(--font-body);
  font-size: var(--fs-body-lead);
  font-weight: var(--fw-regular);
  line-height: var(--lh-body);
  color: var(--color-ink-72);
  max-width: 65ch;
  margin-bottom: var(--space-8);
}

@media (max-width: 767px) {
  .services-not-sure {
    padding-block: var(--space-12);
  }
}

/* ============================================================================
   FINAL CTA
   ============================================================================ */

.services-final-cta {
  padding-block: var(--space-40);
  background: var(--color-bg);
}

.services-final-cta h2 {
  font-family: var(--font-display);
  font-weight: var(--fw-display);
  font-size: var(--fs-h1);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-h1);
  color: var(--color-ink);
  margin-bottom: var(--space-4);
}

.services-final-cta__body {
  font-family: var(--font-body);
  font-size: var(--fs-body-lead);
  font-weight: var(--fw-regular);
  line-height: var(--lh-body);
  color: var(--color-ink-72);
  max-width: 65ch;
  margin-bottom: var(--space-8);
}

@media (max-width: 767px) {
  .services-final-cta {
    padding-block: var(--space-20);
  }
}

/* ============================================================================
   SERVICES EXPLORER — vertical tablist (sidebar) + content pane
   Replaces the old long-scroll service-block list.
   Wired to setupTabs() in main.js via [role="tablist"].
   ============================================================================ */

.svc-explorer {
  padding-block: var(--space-16) var(--space-24);
}

/* Widen this section past the default container so the sidebar + content +
   flow mockup don't sit in a narrow column on large monitors. */
.svc-explorer > .container {
  max-width: min(1600px, 100% - var(--space-12));
}

.svc-explorer__layout {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: var(--space-10);
  align-items: flex-start;
}

/* Sidebar tablist — vertical stack of service buttons */
.svc-explorer__nav {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  position: sticky;
  top: calc(var(--nav-height) + var(--space-6));
  align-self: flex-start;
}

.svc-tab {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  font-family: var(--font-body);
  font-size: var(--fs-body-sm);
  font-weight: var(--fw-medium);
  color: var(--color-ink-72);
  text-align: left;
  cursor: pointer;
  transition: var(--transition-color), border-color var(--duration-base) var(--ease-standard);
}

.svc-tab:hover {
  color: var(--color-ink);
  background: rgba(15, 23, 42, 0.04);
}

.svc-tab[aria-selected="true"] {
  background: var(--color-accent-soft);
  color: var(--color-accent);
  font-weight: var(--fw-bold);
}

.svc-tab[aria-selected="true"] .svc-tab__icon {
  color: var(--color-accent);
}

.svc-tab__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--color-accent);
  transition: var(--transition-color);
}

.svc-tab__label {
  white-space: nowrap;
}

/* Content pane — fills the right column */
.svc-explorer__content {
  min-width: 0;
}

.svc-panel {
  display: grid;
  grid-template-columns: 1fr 380px;
  gap: var(--space-10);
  align-items: stretch;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  padding: var(--space-12);
  min-height: 580px;
}

.svc-panel[hidden] {
  display: none;
}

/* Grid layout puts the italic number and kicker side-by-side on row 1; all
   other children span the full width. Keeps "01" tied to "Chat bot". */
.svc-panel__copy {
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: var(--space-3);
  row-gap: var(--space-4);
  align-content: center;
  min-width: 0;
}

.svc-panel__num {
  grid-column: 1;
  grid-row: 1;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: var(--fw-display);
  font-size: 1.75rem;
  color: var(--color-ink-40);
  line-height: 1;
  align-self: center;
}

.svc-panel__copy > .kicker {
  grid-column: 2;
  grid-row: 1;
  align-self: center;
  justify-self: start;
  margin: 0;
}

.svc-panel__title,
.svc-panel__body,
.svc-panel__stack,
.svc-panel__cta {
  grid-column: 1 / -1;
}

.svc-panel__title {
  font-family: var(--font-display);
  font-weight: var(--fw-display);
  font-size: var(--fs-h2);
  letter-spacing: var(--ls-h1);
  line-height: var(--lh-tight);
  color: var(--color-ink);
  margin: 0;
}

.svc-panel__body {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-loose);
  color: var(--color-ink-72);
  margin: 0;
  max-width: 56ch;
}

.svc-panel__stack {
  font-family: var(--font-body);
  font-size: var(--fs-body-sm);
  color: var(--color-ink-56);
  margin: var(--space-2) 0 0;
  line-height: var(--lh-body);
}

.svc-panel__stack-label {
  color: var(--color-ink);
  font-weight: var(--fw-medium);
}

.svc-panel__cta {
  margin-top: var(--space-6);
  justify-self: start;
}

/* Flow mockup — dark navy card with vertical node sequence.
   Visually mimics a workflow editor: rounded node cards with icons on the
   left, structured content on the right, and connector ports at top/bottom
   linked by a thin wire. No vendor names anywhere. */
.svc-flow {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: center;
  gap: 0;
  padding: var(--space-8) var(--space-6);
  background: linear-gradient(155deg, #1a3358 0%, #122a47 50%, #0a1f3d 100%);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--radius-lg);
  box-shadow: 0 16px 32px -12px rgba(15, 23, 42, 0.32);
}

.svc-flow__node {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--space-3);
  width: 100%;
  padding: var(--space-3) var(--space-4);
  background: linear-gradient(180deg, rgba(30, 58, 95, 0.55), rgba(30, 58, 95, 0.25));
  border: 1px solid rgba(30, 58, 95, 0.55);
  border-radius: var(--radius-md);
  box-shadow: 0 0 0 1px rgba(30, 58, 95, 0.45), 0 4px 14px rgba(67, 97, 238, 0.14);
  font-family: var(--font-body);
  font-size: var(--fs-body-sm);
  font-weight: var(--fw-medium);
  color: #FFFFFF;
  text-align: left;
}

/* Connector ports — small circles at top + bottom edges of each node, mimics
   the input/output handles of a workflow editor. Hidden where they don't
   make sense (no input on the trigger, no output on the final node). */
.svc-flow__node::before,
.svc-flow__node::after {
  content: '';
  position: absolute;
  left: 50%;
  width: 8px;
  height: 8px;
  margin-left: -4px;
  background: #1a3358;
  border: 2px solid rgba(147, 197, 253, 0.55);
  border-radius: 50%;
  box-sizing: border-box;
}
.svc-flow__node::before { top: -4px; }
.svc-flow__node::after  { bottom: -4px; }
.svc-flow__node--trigger::before { display: none; }
.svc-flow__node:last-child::after { display: none; }

.svc-flow__node--trigger {
  border-color: var(--color-success);
  box-shadow: 0 0 0 1px rgba(22, 163, 74, 0.45), 0 4px 14px rgba(22, 163, 74, 0.18);
}
.svc-flow__node--trigger::after {
  border-color: rgba(22, 163, 74, 0.65);
}

.svc-flow__node--ai {
  border-color: rgba(255, 255, 255, 0.55);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.10), rgba(255, 255, 255, 0.04));
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.20), 0 4px 14px rgba(255, 255, 255, 0.08);
}

.svc-flow__node-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: var(--radius-sm);
  color: rgba(180, 209, 255, 0.95);
  flex-shrink: 0;
}

.svc-flow__node--ai .svc-flow__node-icon {
  color: #FFFFFF;
  background: rgba(255, 255, 255, 0.10);
  border-color: rgba(255, 255, 255, 0.18);
}

.svc-flow__node-content {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1;
  min-width: 0;
  align-items: flex-start;
}

.svc-flow__node-label {
  font-weight: var(--fw-medium);
  line-height: 1.25;
  color: #FFFFFF;
}

.svc-flow__badge {
  font-family: var(--font-mono);
  font-size: 0.625rem;
  letter-spacing: 0.05em;
  padding: 2px 6px;
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.10);
  color: rgba(255, 255, 255, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.18);
  text-transform: uppercase;
}

.svc-flow__line {
  display: block;
  width: 2px;
  height: 26px;
  background: linear-gradient(to bottom, rgba(147, 197, 253, 0.55), rgba(147, 197, 253, 0.15));
  margin: 4px auto;
}

/* Tablet — content panel stacks (copy on top, flow below) */
@media (max-width: 1023px) {
  .svc-explorer__layout {
    grid-template-columns: 240px 1fr;
    gap: var(--space-6);
  }
  .svc-panel {
    grid-template-columns: 1fr;
    gap: var(--space-8);
    padding: var(--space-8);
    min-height: 0;
  }
  .svc-panel__copy {
    align-content: start;
  }
  .svc-flow {
    max-width: 420px;
    margin-inline: auto;
  }
}

/* Mobile — sidebar becomes horizontal scroll chip row above content */
@media (max-width: 767px) {
  .svc-explorer {
    padding-block: var(--space-12) var(--space-16);
  }
  .svc-explorer__layout {
    grid-template-columns: 1fr;
    gap: var(--space-6);
  }
  .svc-explorer__nav {
    flex-direction: row;
    gap: var(--space-2);
    overflow-x: auto;
    overflow-y: visible;
    padding-bottom: var(--space-2);
    position: static;
    -webkit-mask-image: linear-gradient(90deg, transparent 0, black 4%, black 96%, transparent 100%);
            mask-image: linear-gradient(90deg, transparent 0, black 4%, black 96%, transparent 100%);
    scrollbar-width: none;
  }
  .svc-explorer__nav::-webkit-scrollbar {
    display: none;
  }
  .svc-tab {
    flex-shrink: 0;
    padding: var(--space-2) var(--space-3);
  }
  .svc-panel {
    padding: var(--space-6);
  }
  .svc-panel__title {
    font-size: var(--fs-h3);
  }
}