/* ==========================================================================
   services.css — Services page styles
   --------------------------------------------------------------------------
   Milestone 11 · Services Page

   Page-scoped styles only. Every section composes existing components
   (editorial splits, cards, buttons, section/layout primitives, header,
   footer) — no component styling lives here. These rules style page content
   that has no reusable component yet: the anchor-chip row, diagram/photo
   frames, the OTDR data panel, the comparison and compliance tables, the
   CCTV specimen strip, the five-stage process and the industries pill
   cloud (Phase 2 §2.4 / §2.5). Each service section intentionally uses a
   unique layout — no repeated cards, no repeated splits (Phase 2 §2.4).
   ========================================================================== */

/* --------------------------------------------------------------------------
   Service section markers — mono eyebrow numbers (01–09), echoing the
   engineering-document motif used across the site.
   -------------------------------------------------------------------------- */
.services-section__number {
  display: block;
  margin: 0 0 var(--space-8);
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: var(--text-small-current);
  font-weight: var(--weight-semibold);
  line-height: var(--lh-small);
  color: var(--color-primary);
}

/* --------------------------------------------------------------------------
   Pills (Phase 2 §2.4.1 / §2.4.8 / §2.4.10) — shared base for the anchor
   chips, capability tags, legend rail and industry cloud. Static pills use
   `.services-pill`; anchor chips add `.services-chip` (link + focus states).
   -------------------------------------------------------------------------- */
.services-pill {
  display: inline-flex;
  align-items: center;
  min-height: var(--space-32);
  padding: 0 var(--space-16);
  background: var(--color-background);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
  color: var(--color-heading);
  font-size: var(--text-small-current);
  font-weight: var(--weight-semibold);
  line-height: var(--lh-label);
}

.services-chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-8);
  margin: 0;
  padding: 0;
  list-style: none;
}

.services-chip {
  text-decoration: none;
}

.services-chip:hover,
.services-chip:focus-visible {
  border-color: var(--color-primary);
  color: var(--color-primary);
}

/* --------------------------------------------------------------------------
   Diagram / photo frames (Phase 2 §2.6). Ratio on the img so the figure box
   can also carry a caption; media images supplied in later phases.
   -------------------------------------------------------------------------- */
.services-media {
  margin: 0;
}

.services-media img {
  display: block;
  width: 100%;
  height: auto;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}

.services-media--16-9 img {
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

.services-media--16-10 img {
  aspect-ratio: 16 / 10;
  object-fit: cover;
}

.services-media--4-3 img {
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

.services-media--3-4 img {
  aspect-ratio: 3 / 4;
  object-fit: cover;
}

.services-media--1-1 img {
  aspect-ratio: 1 / 1;
  object-fit: cover;
}

/* R11-expand — service carousels reuse the shared card carousel machinery
   (card.css) inside these figures; the viewport carries the frame and ratio
   that the old services-media img rule provided. */
.services-carousel {
  margin: 0;
}

.services-carousel__viewport {
  position: relative;
  overflow: hidden;
  touch-action: pan-y;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}

.services-carousel__viewport--4-3 {
  aspect-ratio: 4 / 3;
}

.services-carousel__viewport--1-1 {
  aspect-ratio: 1 / 1;
}

/* Telecom service carousel (R11-products sizing kept) — compact width so the
   section stays balanced above the matrix. */
.services-carousel--telecom {
  max-width: 560px;
}

/* Telecom service image (R11) — the supplied 1:1 intercom/EPABX photo is
   kept to a compact width so the section stays balanced above the matrix. */
.services-media--telecom {
  max-width: 560px;
}

/* Two-image collages (R11) — splicing/OTDR and LAN server-rack pairs. Stack
   below 1024px (they live inside narrow split columns), side by side above,
   preserving each image's natural aspect ratio. */
.services-collage--2 {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-16);
}

@media (min-width: 1024px) {
  .services-collage--2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: center;
  }
}

/* --------------------------------------------------------------------------
   Optical Fiber & OTDR — founder-style pull-quote (Phase 2 §2.4.4). Rendered
   with the background fill so it contrasts against its surface band (the
   inverse of the surface-fill quotes on the background bands of Home/About).
   -------------------------------------------------------------------------- */
.services-quote {
  margin: 0;
  padding: var(--space-16) var(--space-24);
  background: var(--color-background);
  border-left: 4px solid var(--color-brand-yellow);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}

.services-quote p {
  margin: 0;
  font-family: var(--font-heading);
  font-size: var(--text-body-large-current);
  font-weight: var(--weight-semibold);
  line-height: var(--lh-body-large);
  letter-spacing: var(--tracking-body-large);
  color: var(--color-heading);
}

/* OTDR data panel (Phase 2 §2.4.4) — mono figures mimic a test report */
.services-data {
  margin: 0;
  padding: var(--space-8) var(--space-24);
  background: var(--color-background);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
}

.services-data__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-16);
  padding-block: var(--space-8);
  border-bottom: 1px solid var(--color-border);
}

.services-data__row:last-child {
  border-bottom: 0;
}

.services-data__label {
  margin: 0;
  font-size: var(--text-small-current);
  line-height: var(--lh-small);
  color: var(--color-body);
}

.services-data__value {
  margin: 0;
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: var(--text-body-current);
  line-height: var(--lh-body);
  color: var(--color-heading);
}

/* --------------------------------------------------------------------------
   Tables (Phase 2 §2.4.5 / §2.4.7) — Design System §9 styling: no vertical
   rules, mono values, horizontal rules only. Wrapped in `.table-wrap` so the
   matrix scrolls horizontally on mobile.
   -------------------------------------------------------------------------- */
.table-wrap {
  overflow-x: auto;
}

.services-table {
  width: 100%;
  border-collapse: collapse;
}

.services-table th,
.services-table td {
  padding: var(--space-8) var(--space-16);
  text-align: left;
  font-size: var(--text-body-current);
  line-height: var(--lh-body);
  vertical-align: top;
}

.services-table th:first-child,
.services-table td:first-child {
  padding-inline-start: 0;
}

.services-table th:last-child,
.services-table td:last-child {
  padding-inline-end: 0;
}

.services-table thead th {
  border-bottom: 2px solid var(--color-border);
  font-size: var(--text-small-current);
  font-weight: var(--weight-semibold);
  line-height: var(--lh-small);
  color: var(--color-heading);
}

.services-table tbody td {
  border-bottom: 1px solid var(--color-border);
  color: var(--color-body);
}

.services-table tbody tr:last-child td {
  border-bottom: 0;
}

.services-table__mono {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.services-table__capability {
  color: var(--color-heading);
  font-weight: var(--weight-semibold);
}

.services-table__check {
  width: 24px;
  padding-inline: 0 var(--space-8);
  color: var(--color-primary);
}

.services-table__check svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* --------------------------------------------------------------------------
   Telecom & Voice — icon callouts beneath the matrix (Phase 2 §2.4.7)
   -------------------------------------------------------------------------- */
.services-callouts {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-16);
  margin-block-start: var(--space-24);
}

@media (min-width: 768px) {
  .services-callouts {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-24);
  }
}

.services-callout {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
}

.services-callout__icon {
  width: 24px;
  height: 24px;
  color: var(--color-primary);
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.services-callout__title {
  margin: 0;
  font-family: var(--font-heading);
  font-size: var(--text-body-current);
  font-weight: var(--weight-semibold);
  line-height: var(--lh-body);
  color: var(--color-secondary);
}

.services-callout__body {
  margin: 0;
  font-size: var(--text-small-current);
  line-height: var(--lh-small);
  color: var(--color-body);
}

/* --------------------------------------------------------------------------
   LAN & Structured Cabling — legend rail (Phase 2 §2.4.8)
   -------------------------------------------------------------------------- */
.services-legend {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-8);
  margin: var(--space-16) 0 0;
  padding: 0;
  list-style: none;
}

/* LAN — numbered capability list (Phase 2 §2.4.8) */
.services-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.services-list__item {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-16);
  padding-block: var(--space-16);
  border-bottom: 1px solid var(--color-border);
}

.services-list__item:last-child {
  border-bottom: 0;
}

.services-list__content {
  min-width: 0;
}

.services-list__number {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: var(--text-small-current);
  font-weight: var(--weight-semibold);
  line-height: var(--lh-small);
  color: var(--color-primary);
}

.services-list__title {
  margin: 0;
  font-family: var(--font-heading);
  font-size: var(--text-body-current);
  font-weight: var(--weight-semibold);
  line-height: var(--lh-body);
  color: var(--color-secondary);
}

.services-list__body {
  margin: var(--space-4) 0 0;
  font-size: var(--text-small-current);
  line-height: var(--lh-small);
  color: var(--color-body);
}

/* --------------------------------------------------------------------------
   CCTV & Surveillance — specimen strip (Phase 2 §2.4.9): 1:1 camera shots.
   Grid 4-across on desktop, 2×2 on tablet, horizontal swipe on mobile.
   -------------------------------------------------------------------------- */
.services-specimens {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-16);
  margin: 0;
  padding: 0;
  list-style: none;
}

@media (max-width: 767px) {
  .services-specimens {
    display: flex;
    flex-wrap: nowrap;
    gap: var(--space-16);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding-bottom: var(--space-8);
  }

  .services-specimens__item {
    flex: 0 0 60%;
    scroll-snap-align: start;
  }
}

@media (min-width: 1024px) {
  .services-specimens {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--space-24);
  }
}

.services-specimens__item img {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}

.services-specimens__caption {
  margin: var(--space-8) 0 0;
  font-size: var(--text-small-current);
  font-weight: var(--weight-semibold);
  line-height: var(--lh-small);
  color: var(--color-heading);
}

/* --------------------------------------------------------------------------
   Process — five-stage engagement (Phase 3 §1.10): flat numbered steps,
   5-across desktop → 2-col tablet → 1-col mobile.
   -------------------------------------------------------------------------- */
.services-process {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-16);
  margin: 0;
  padding: 0;
  list-style: none;
}

@media (min-width: 768px) {
  .services-process {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-24);
  }
}

@media (min-width: 1024px) {
  .services-process {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
}

.services-process__step {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
  padding: var(--space-24);
  background: var(--color-surface);
}

.services-process__number {
  margin: 0;
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: var(--text-small-current);
  font-weight: var(--weight-semibold);
  line-height: var(--lh-small);
  color: var(--color-primary);
}

.services-process__title {
  margin: 0;
  font-family: var(--font-heading);
  font-size: var(--text-body-current);
  font-weight: var(--weight-semibold);
  line-height: var(--lh-body);
  color: var(--color-secondary);
}

.services-process__body {
  margin: 0;
  font-size: var(--text-small-current);
  line-height: var(--lh-small);
  color: var(--color-body);
}

/* --------------------------------------------------------------------------
   Industries — pill cloud (Phase 3 §1.6 verified list)
   -------------------------------------------------------------------------- */
.services-industries {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-8);
  margin: 0;
  padding: 0;
  list-style: none;
}

/* --------------------------------------------------------------------------
   Visual Polish Pass 2 — intro section background texture (optical fiber
   fusion splicing motif). Supplies the image for the shared `.section-bg`
   layer defined in pages.css.
   -------------------------------------------------------------------------- */
.page-intro--services {
  --section-bg-image: url("../images/backgrounds/bg-fiber-splicing.webp");
}