/* ==========================================================================
   WBN Engineering Showcase — visual component styles
   Scope: all rules are namespaced under .engineering-* / .diagram-* classes
   within the engineering visual or .canonical-site container. No globals.
   Fonts: Display / Open. Colors: white, charcoal, #0072ce, #005da8, neutral gray.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Showcase section
   -------------------------------------------------------------------------- */
.engineering-showcase {
  padding: 72px 0;
  background: #ffffff;
}

/* --------------------------------------------------------------------------
   Section heading
   -------------------------------------------------------------------------- */
.engineering-heading {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  margin-bottom: 32px;
  align-items: end;
}

.engineering-heading h2 {
  font-family: "Display", sans-serif;
  font-weight: 500;
  font-size: clamp(38px, 4vw, 56px);
  line-height: 1.1;
  color: #2b2f33; /* charcoal */
}

.engineering-heading > p {
  font-size: 17px;
  line-height: 1.7;
  color: #6b7280; /* neutral gray */
}

.engineering-heading .r31-eyebrow {
  font-size: 12px;
  color: #0072ce; /* blue */
}

/* --------------------------------------------------------------------------
   Tabs
   -------------------------------------------------------------------------- */
.engineering-tabs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  border-bottom: 1px solid #e5e7eb; /* gray */
}

.engineering-tabs button {
  text-align: left;
  font-size: 16px;
  font-weight: 600;
  font-family: "Open", sans-serif;
  padding: 18px 0;
  background: transparent;
  border: none;
  border-bottom: 3px solid transparent;
  color: #2b2f33; /* charcoal */
  cursor: pointer;
}

.engineering-tabs button[aria-selected="true"],
.engineering-tabs button.is-selected {
  color: #0072ce; /* blue */
  border-bottom-color: #0072ce; /* blue underline */
}

.engineering-showcase .tab-number {
  font-family: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;
  font-size: 11px;
  display: block;
  color: #6b7280; /* gray */
  margin-bottom: 8px;
}

/* --------------------------------------------------------------------------
   Panels
   -------------------------------------------------------------------------- */
.engineering-panel[hidden] {
  display: none;
}

.engineering-panel:not([hidden]) {
  display: block;
  padding-top: 36px;
}

/* Overview layout */
.engineering-overview {
  display: grid;
  grid-template-columns: 1fr 1.15fr;
  gap: 48px;
}

.engineering-overview > * {
  min-width: 0;
}

/* Intro column */
.engineering-intro h3 {
  font-family: "Display", sans-serif;
  font-weight: 600;
  font-size: clamp(30px, 3.3vw, 42px);
  line-height: 1.12;
  color: #2b2f33; /* charcoal */
  margin: 8px 0 14px;
}

.engineering-intro p {
  font-size: 16px;
  line-height: 1.75;
  color: #6b7280; /* gray */
}

.engineering-intro .kicker {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #0072ce; /* blue */
  font-weight: 600;
}

/* Topic labels */
.engineering-topics {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 16px;
}

.engineering-topics span,
.engineering-topics .topic-label {
  font-family: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;
  font-size: 11px;
  color: #2b2f33; /* charcoal */
  border-bottom: 2px solid #0072ce; /* blue */
  padding-bottom: 2px;
}

/* --------------------------------------------------------------------------
   Visual figure / diagram
   -------------------------------------------------------------------------- */
.engineering-visual {
  margin: 0;
  background: #f5f7f9;
  border: 1px solid #dbe1e5;
}

.engineering-showcase .diagram-heading {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  font-weight: 600;
  font-size: 12px;
  font-family: "Open", sans-serif;
  padding: 16px 20px;
  color: #2b2f33; /* charcoal */
}

.engineering-showcase .diagram-heading p {
  margin: 0;
  max-width: none;
  font-size: 12px;
}

.engineering-showcase .diagram-heading small {
  font-size: 11px;
  font-family: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;
  color: #6b7280; /* gray */
  font-weight: 400;
}

.engineering-showcase .diagram-scroll {
  overflow-x: auto;
}

svg.engineering-diagram {
  width: 100%;
  min-width: 560px;
  height: auto;
  display: block;
}

svg.engineering-diagram text {
  font-size: 14px;
  font-family: "Open", sans-serif;
  fill: #35414a;
}

svg.engineering-diagram .diagram-title {
  font-size: 15px;
  font-weight: 700;
}

svg.engineering-diagram .diagram-small {
  font-size: 12px;
}

svg.engineering-diagram .diagram-blue {
  fill: #0072ce;
}

svg.engineering-diagram .diagram-node {
  fill: #ffffff;
  stroke: #8ba2b3;
  stroke-width: 1.5;
}

svg.engineering-diagram .diagram-soft {
  fill: #eaf2f8;
  stroke: #9dbbd2;
}

svg.engineering-diagram .diagram-line {
  fill: none;
  stroke: #0072ce;
  stroke-width: 2;
}

svg.engineering-diagram .diagram-line--secondary {
  stroke: #6b7280; /* secondary gray */
  stroke-dasharray: 5 4;
}

svg.engineering-diagram .diagram-line--muted {
  stroke: #c7ced6; /* muted light gray */
  stroke-width: 1.5;
}

.engineering-visual figcaption {
  font-size: 12px;
  line-height: 1.6;
  color: #6b7280; /* gray */
  padding: 14px 20px;
  border-top: 1px solid #e5e7eb; /* gray */
  max-width: none;
  width: 100%;
}

.engineering-showcase .diagram-mobile-hint {
  display: none;
}

/* --------------------------------------------------------------------------
   Capabilities
   -------------------------------------------------------------------------- */
.engineering-capabilities {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0 48px;
  margin-top: 32px;
}

.engineering-capabilities article {
  border-top: 1px solid #e5e7eb; /* gray */
  padding: 22px 0;
}

.engineering-capabilities h4 {
  font-family: "Open", sans-serif;
  font-weight: 600;
  font-size: 20px;
  line-height: 1.3;
  margin: 0 0 10px;
  color: #2b2f33; /* charcoal */
}

.engineering-capabilities p {
  font-size: 15px;
  line-height: 1.75;
  color: #6b7280; /* gray */
  margin: 0;
}

/* --------------------------------------------------------------------------
   Deliverables row
   -------------------------------------------------------------------------- */
.engineering-deliverables {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  border-top: 1px solid #e5e7eb; /* gray */
  padding-top: 24px;
  margin-top: 10px;
}

.engineering-deliverables p {
  font-size: 14px;
  line-height: 1.7;
  max-width: 720px;
  color: #6b7280; /* gray */
  margin: 0;
}

.engineering-deliverables strong {
  color: #2b2f33; /* dark charcoal */
  font-weight: 600;
}

.engineering-deliverables .cta,
.engineering-cta {
  display: inline-flex;
  align-items: center;
  gap: 18px;
  background: #0072ce;
  color: #ffffff !important;
  font-weight: 600;
  font-size: 14px;
  font-family: "Open", sans-serif;
  padding: 14px 20px;
  min-height: 48px;
  border-radius: 3px;
  white-space: nowrap;
  text-decoration: none;
}

.engineering-deliverables .cta:hover,
.engineering-cta:hover {
  background: #005da8; /* darker blue */
  color: #ffffff !important;
  text-decoration: none;
}

/* --------------------------------------------------------------------------
   Further reading
   -------------------------------------------------------------------------- */
.engineering-reading {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 24px;
  margin-top: 20px;
}

.engineering-reading a {
  color: #0072ce; /* blue */
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
}

.engineering-reading a:hover {
  text-decoration: underline;
}

/* --------------------------------------------------------------------------
   Responsive — max 1000px
   -------------------------------------------------------------------------- */
@media (max-width: 1200px) {
  .engineering-heading {
    gap: 32px;
  }

  .engineering-overview {
    grid-template-columns: 1fr;
    gap: 28px;
  }

  .engineering-visual {
    width: 100%;
    max-width: 800px;
  }

  .engineering-intro {
    max-width: 760px;
  }

  .engineering-capabilities {
    gap: 0 28px;
  }

  .engineering-deliverables {
    flex-wrap: wrap;
  }
}

/* --------------------------------------------------------------------------
   Responsive — max 760px
   -------------------------------------------------------------------------- */
@media (max-width: 760px) {
  .engineering-showcase {
    padding: 44px 0;
  }

  .engineering-heading {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .engineering-heading h2 {
    font-size: 36px;
  }

  .engineering-tabs {
    gap: 12px;
  }

  .engineering-tabs button {
    font-size: 13px;
    padding: 14px 0;
  }

  .engineering-overview {
    gap: 24px;
  }

  .engineering-panel:not([hidden]) {
    padding-top: 28px;
  }

  .engineering-intro h3 {
    font-size: 32px;
  }

  .engineering-capabilities {
    grid-template-columns: 1fr;
  }

  .engineering-capabilities h4 {
    font-size: 18px;
  }

  .engineering-deliverables {
    gap: 16px;
  }

  .engineering-deliverables .cta,
  .engineering-cta {
    width: 100%;
  }

  .engineering-reading {
    flex-direction: column;
  }

  .engineering-showcase .diagram-heading {
    flex-direction: column;
    align-items: flex-start;
  }

  .engineering-showcase .diagram-heading small {
    white-space: normal;
  }

  .engineering-showcase .diagram-mobile-hint {
    display: block;
    font-size: 11px;
    color: #6b7280; /* gray */
    padding: 0 20px 10px;
  }
}

/* --------------------------------------------------------------------------
   Print
   -------------------------------------------------------------------------- */
@media print {
  .engineering-panel {
    display: block !important;
  }

  .engineering-panel[hidden] {
    display: block !important;
  }

  .engineering-tabs {
    display: none;
  }

  .engineering-overview {
    display: block;
  }

  svg.engineering-diagram {
    min-width: 0;
    width: 100%;
  }

  .engineering-visual {
    break-inside: avoid;
    page-break-inside: avoid;
  }
}

/* --------------------------------------------------------------------------
   Focus states
   -------------------------------------------------------------------------- */
.engineering-tabs button:focus-visible,
.engineering-reading a:focus-visible,
.engineering-deliverables .cta:focus-visible,
.engineering-cta:focus-visible {
  outline: 2px solid #0072ce;
  outline-offset: 2px;
}

/* Fabric-scale architecture: preserve horizontal topology at every viewport. */
.engineering-fabric-overview {grid-template-columns:1fr;gap:28px}
.engineering-fabric-overview .engineering-intro {max-width:920px}
.engineering-fabric-overview .engineering-intro h3 {font-size:40px}
.engineering-rack-overview {grid-template-columns:1fr}
.engineering-rack-overview .engineering-intro {max-width:900px}
.engineering-fabric-overview .engineering-visual {max-width:none;width:100%;background:white}
.fabric-diagram-scroll {overflow-x:auto;max-width:100%;overscroll-behavior-inline:contain}
.fabric-architecture {display:block;width:100%;min-width:850px;height:auto}
.fabric-architecture-figure figcaption a {color:#0072ce;font-weight:600;display:inline-block;margin-left:8px}
.featured-engineering {display:grid;grid-template-columns:1fr 1.2fr;gap:48px;align-items:center;padding-block:36px 54px;border-bottom:1px solid #dbe1e5}
.featured-engineering h2 {font-size:clamp(32px,3.6vw,48px);font-weight:500;line-height:1.1;margin:12px 0 18px;color:#2b2f33}
.featured-engineering-copy>p:not(.r31-eyebrow) {font-size:16px;line-height:1.7;color:#59636b;max-width:540px}
.featured-engineering .engineering-cta {display:inline-block;margin-top:18px}
.featured-companion {display:block;font-size:13px;margin-top:18px;color:#0072ce;line-height:1.6}
.featured-engineering-art {border:1px solid #dbe1e5;background:white;display:block;color:#59636b;text-decoration:none}
.featured-engineering-art img {display:block;width:100%;height:auto}
.featured-engineering-art span {display:block;border-top:1px solid #e5e7eb;padding:14px 18px;font-size:12px}
@media(max-width:900px){.featured-engineering{grid-template-columns:1fr;gap:24px}.featured-engineering-art{max-width:760px}.engineering-fabric-overview .engineering-intro h3{font-size:34px}}
@media(max-width:760px){.fabric-architecture{min-width:740px}.featured-engineering{padding-block:28px 36px}.fabric-architecture-figure figcaption a{display:block;margin:8px 0 0}.engineering-fabric-overview .engineering-intro h3{font-size:32px}}
@media print{.fabric-architecture{min-width:0}.fabric-diagram-scroll{overflow:visible}.featured-engineering{display:block}.fabric-architecture-figure{break-inside:avoid}}

@media(min-width:901px){.engineering-fabric-overview .engineering-intro{display:grid;grid-template-columns:.8fr 1.2fr;gap:0 48px;max-width:none}.engineering-fabric-overview .engineering-intro .kicker{grid-column:1/-1}.engineering-fabric-overview .engineering-intro h3{grid-row:2/4;margin:8px 0}.engineering-fabric-overview .engineering-intro>p:not(.kicker){grid-column:2;max-width:none;width:100%;margin-top:8px}.engineering-fabric-overview .engineering-topics{grid-column:2}}

.fabric-diagram-hint{display:none}@media(max-width:760px){.fabric-diagram-hint{display:block;font-size:11px;line-height:1.5;color:#59636b;padding:8px 16px;margin:0}}@media print{.fabric-diagram-hint{display:none}}