/* Professional Azure modernization case study. Native HTML supplies the
   complete reading order; CSS expresses topology and emphasis without making
   any claim depend on visual position, connectors or color alone. */
.modernization-page .case-context { border-color: var(--cyan); }
.modernization-page .case-hero h1 { line-height: 1.12; }
.modernization-page .case-hero .text-link { display: inline-block; margin-top: 18px; }
.modernization-page .brief-download { display: flex; width: fit-content; }

.modernization-flow {
  margin: 38px 0 0;
  padding: clamp(22px, 4vw, 34px);
  border: 1px solid var(--line);
  background: linear-gradient(145deg, #111722, #0d111d 72%);
}
.modernization-flow figcaption { max-width: 56rem; margin-bottom: 28px; }
.modernization-flow figcaption h3,
.diagnostic-map figcaption h3 { margin-bottom: 10px; font-size: 1.35rem; line-height: 1.5; }
.modernization-flow figcaption p,
.diagnostic-map figcaption p { margin: 0; font-size: 1rem; line-height: 1.8; }
.modernization-stage { padding: 22px; border: 1px solid #5a4968; background: #171522; }
.modernization-label { margin: 0 0 12px; color: #c5a8d9; font: .8125rem/1.6 Consolas, monospace; letter-spacing: .055em; }
.modernization-chips { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.modernization-chips span { padding: 11px 12px; border: 1px solid #655174; background: #12131e; color: #e5dcec; font: .875rem/1.55 Consolas, monospace; text-align: center; }
.modernization-connector { position: relative; display: block; width: 2px; height: 30px; margin-inline: auto; background: #8190a9; }
.modernization-connector::after { content: ""; position: absolute; bottom: 2px; left: -3px; width: 8px; height: 8px; border-right: 2px solid #8190a9; border-bottom: 2px solid #8190a9; transform: rotate(45deg); }
.modernization-monolith { border-color: #805574; background: #1a1420; }
.modernization-stack { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.modernization-stack span,
.modernization-target-grid span { padding: 18px; border: 1px solid #71526e; color: var(--muted); font-size: .925rem; line-height: 1.7; }
.modernization-stack b,
.modernization-target-grid b { display: block; margin-bottom: 6px; color: var(--ink); font-size: 1rem; }
.modernization-program { border-color: #4e8497; background: #101d28; }
.modernization-program .modernization-label,
.modernization-target .modernization-label { color: var(--cyan); }
.modernization-program .modernization-chips { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.modernization-program .modernization-chips span { border-color: #467386; background: #0c1721; color: #c5eaf3; }
.modernization-target { border-color: var(--purple); background: #121827; }
.modernization-target-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.modernization-target-grid span { border-color: #506c83; }

.modernization-decision-table tbody th { width: 28%; }
.modernization-service-list { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin: 34px 0 0; padding: 0; list-style: none; }
.modernization-service-list li { padding: 13px; border: 1px solid #4b6678; background: #101a25; color: #c5dce6; font: .875rem/1.55 Consolas, monospace; text-align: center; }

.diagnostic-map { margin: 38px 0 0; padding: clamp(22px, 4vw, 32px); border: 1px solid var(--line); background: var(--panel); }
.diagnostic-map figcaption { max-width: 55rem; margin-bottom: 26px; }
.diagnostic-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.diagnostic-grid article { min-width: 0; padding: 24px; border: 1px solid #67507e; background: #171525; }
.diagnostic-grid article:nth-child(2) { border-color: #4f8495; background: #101d28; }
.diagnostic-grid article:nth-child(2) .modernization-label { color: var(--cyan); }
.diagnostic-grid article:nth-child(3) { border-color: #5a6982; background: #121926; }
.diagnostic-grid h3 { margin-bottom: 12px; font-size: 1.15rem; line-height: 1.5; }
.diagnostic-grid p:not(.modernization-label) { margin: 0; font-size: 1rem; line-height: 1.8; }
.diagnostic-result { margin: 24px 0 0; padding: 18px; border: 1px solid #4e8497; background: #0f1b26; color: var(--muted); font-size: 1rem; line-height: 1.75; text-align: center; }
.diagnostic-result > span { display: block; color: var(--cyan); font-size: 1.35rem; line-height: 1; }
.diagnostic-result strong { color: var(--ink); }

.operations-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 26px; }
.operations-grid article { min-width: 0; padding: 28px; border: 1px solid var(--line); border-top: 2px solid var(--purple); background: #111622; }
.operations-grid article:nth-child(2) { border-top-color: var(--cyan); }
.operations-grid article:nth-child(3) { border-top-color: #d47ac6; }
.operations-grid h3 { margin-bottom: 14px; font-size: 1.25rem; line-height: 1.5; }
.operations-grid p:not(.modernization-label) { margin: 0; font-size: 1rem; line-height: 1.8; }
.modernization-results { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.modernization-results .case-result:nth-child(4) .case-result-number { color: var(--cyan); }

@media (max-width: 62rem) {
  .modernization-program .modernization-chips { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .modernization-target-grid,
  .modernization-results { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .modernization-service-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 48rem) {
  .modernization-flow { margin-top: 30px; }
  .modernization-chips,
  .modernization-stack,
  .modernization-program .modernization-chips,
  .modernization-target-grid,
  .diagnostic-grid,
  .operations-grid,
  .modernization-results { grid-template-columns: minmax(0, 1fr); }
  .modernization-service-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .modernization-stage { padding: 19px 16px; }
  .diagnostic-grid article,
  .operations-grid article { padding: 22px 19px; }
}
@media (max-width: 24rem) {
  .modernization-service-list { grid-template-columns: minmax(0, 1fr); }
}
@media print {
  .modernization-flow,
  .diagnostic-map,
  .diagnostic-grid article,
  .operations-grid article,
  .modernization-results .case-result { break-inside: avoid; }
}