/*
 * Shared horizontal content rail.
 * Section surfaces stay full-bleed; only their direct content canvases align.
 */

:root {
  --slc-content-rail-max: 86.25rem;
  --slc-content-rail-gutter: clamp(1rem, 2.5vw, 2.5rem);
  --slc-content-rail-width: min(
    var(--slc-content-rail-max),
    calc(100% - clamp(2rem, 5vw, 5rem))
  );
  --container: var(--slc-content-rail-width);
}

/* Fluid desktop modules without their own section padding. */
@media (min-width: 64.01rem) {
  .briefing-section .service-diagram {
    width: 100%;
    max-width: var(--slc-content-rail-max);
  }

  .slc-why-choose-section > .slc-component,
  .slc-pricing-shell > .slc-pricing-component {
    width: var(--slc-content-rail-width);
    max-width: var(--slc-content-rail-max);
    margin-inline: auto;
  }

  .slc-pricing-shell {
    padding-inline: var(--slc-content-rail-gutter);
  }

  .slc-pricing-shell > .slc-pricing-component {
    width: min(100%, var(--slc-content-rail-max));
  }
}

/* About continuation: its grids are fluid, so the shared rail can be direct. */
@media (min-width: 53.8125rem) {
  .slc-about-shell .slc-about-module {
    width: var(--slc-content-rail-width);
    max-width: var(--slc-content-rail-max);
  }
}

@media (min-width: 48rem) {
  .slc-about > .credentials-placement > .container {
    width: var(--slc-content-rail-width);
    max-width: var(--slc-content-rail-max);
  }
}

/* Afghanistan keeps its established stack until its existing desktop breakpoint. */
@media (min-width: 70.0625rem) {
  .afg-section .afg-container {
    width: var(--slc-content-rail-width);
    max-width: var(--slc-content-rail-max);
  }
}

/* Regional and pricing shells own their padding; give both the shared gutter. */
@media (min-width: 62.5625rem) {
  .regional-sales {
    padding-inline: var(--slc-content-rail-gutter);
  }

  .regional-sales .regional-sales__shell {
    width: min(100%, var(--slc-content-rail-max));
    max-width: var(--slc-content-rail-max);
  }
}

/*
 * The company collage is a fixed 628px artwork. The copy track absorbs the
 * modest rail growth, so the artwork geometry and all image anchors stay exact.
 */
@media (min-width: 87.5rem) {
  .slc-about__container {
    width: var(--slc-content-rail-width);
    max-width: var(--slc-content-rail-max);
    grid-template-columns: 39.25rem minmax(0, 1fr);
  }

  .slc-about__title,
  .slc-about-feature,
  .slc-about__bottom {
    width: 100%;
    max-width: none;
  }

  .slc-about__description {
    max-width: 70ch;
    margin-inline-end: auto;
  }
}

/* Opt-in plumb-line overlay for inspecting the shared rail. */
.slc-layout-guides {
  --slc-layout-guide-color: var(--slc-color-highlight, #d6a516);
  position: absolute;
  z-index: 90;
  inset-inline: 0;
  top: 0;
  height: 0;
  display: none;
  pointer-events: none;
}

html[data-layout-debug="true"] .slc-layout-guides {
  display: block;
}

/* Four-sided section bounds; inset placement keeps viewport edges visible. */
html[data-layout-debug="true"] body section {
  outline: 2px solid #ef2d32;
  outline-offset: -2px;
}

.slc-layout-guides__line {
  position: absolute;
  inset-block: 0;
  width: 1px;
  background: var(--slc-layout-guide-color);
  box-shadow: 0 0 0 1px rgb(255 255 255 / 0.42), 0 0 10px rgb(214 165 22 / 0.42);
}

.slc-layout-guides__line--start {
  inset-inline-start: max(
    var(--slc-content-rail-gutter),
    calc(50% - 43.125rem)
  );
}

.slc-layout-guides__line--end {
  inset-inline-end: max(
    var(--slc-content-rail-gutter),
    calc(50% - 43.125rem)
  );
}