/* Public variant additions. Core layout and proportions come from the Static site styles. */

.public-system-panel { height: 508px; }

.public-system-body {
  display: grid;
  grid-template-rows: 100px 22px 100px 22px 100px 122px;
  align-content: center;
  padding: 20px 18px;
}

.public-system-node {
  display: grid;
  align-content: center;
  gap: 8px;
  min-height: 0;
  padding: 14px 22px;
  border: 1px solid rgba(255, 255, 255, .13);
  background: rgba(255, 255, 255, .025);
}

.public-system-node .system-label { margin: 0; }
.public-system-node strong { max-width: 32ch; color: var(--rq-color-paper); font: inherit; font-weight: 600; line-height: 1.35; }
.public-system-output { border-color: rgba(0, 188, 212, .38); background: rgba(0, 188, 212, .045); }

.public-system-flow { display: grid; place-items: center; }
.public-system-flow i { position: relative; width: 1px; height: 100%; background: rgba(0, 188, 212, .46); }
.public-system-flow i::after {
  position: absolute;
  right: -3px;
  bottom: 1px;
  width: 7px;
  height: 7px;
  border-right: 1px solid var(--rq-color-signal-cyan);
  border-bottom: 1px solid var(--rq-color-signal-cyan);
  transform: rotate(45deg);
  content: '';
}

.public-requisent-core { grid-template-columns: minmax(0, 1fr) 84px; min-height: 0; padding: 0; }
.public-requisent-core .core-mark { grid-column: 2; grid-row: 1; width: auto; height: 100%; border-right: 0; border-left: 1px solid var(--rule-dark); }
.public-requisent-core .core-mark img { width: 48px; height: 48px; }
.public-requisent-core .core-copy { grid-column: 1; grid-row: 1; padding: 14px 22px; }
.public-requisent-core .core-copy .system-label { margin: 0 0 8px; color: var(--rq-color-signal-cyan); font-weight: 700; letter-spacing: .11em; }
.public-requisent-core .core-copy strong { display: block; font: inherit; font-weight: 600; line-height: 1.35; }

.public-system-impact {
  display: grid;
  align-self: stretch;
  align-content: center;
  gap: 7px;
  min-height: 0;
  margin-top: 22px;
  padding: 14px 22px;
  border-left: 2px solid var(--rq-color-signal-cyan);
  background: rgba(0, 188, 212, .055);
}
.public-system-impact .system-label { margin: 0; color: var(--rq-color-signal-cyan); font-weight: 600; }
.public-system-impact strong { color: #dfe8ed; font: inherit; font-weight: 600; line-height: 1.35; }
@media (max-width: 900px) {
  .public-system-panel { max-width: 760px; }
}

@media (max-width: 620px) {
  .public-system-panel { height: auto; min-height: 0; }
  .public-system-body { grid-template-rows: auto 20px auto 20px auto auto; padding: 16px; }
  .public-system-node { padding: 15px 18px; }
  .public-requisent-core { grid-template-columns: minmax(0, 1fr) 64px; gap: 0; padding: 0; }
  .public-requisent-core .core-copy { padding: 15px 18px; }
  .public-system-impact { margin-top: 16px; padding: 15px 18px; }
}

@media (min-width: 901px) {
  .contact-grid-static {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(60px, 6vw, 88px);
    align-items: start;
  }
  .contact-grid-static .contact-copy {
    align-self: start;
    padding-left: clamp(30px, 3vw, 44px);
  }
  .contact-grid-static .contact-copy > p:last-child { margin-bottom: 0; }
  .contact-grid-static .contact-static-panel {
    align-self: start;
    margin-top: clamp(52px, calc(14.5px + 3.332vw), 65px);
    margin-left: calc(-1 * clamp(24px, 2.5vw, 36px));
  }
  .contact-grid-static .contact-static-panel p { margin: 0; }
}

@media print {
  .public-system-panel {
    display: block !important;
    height: auto;
    margin-top: 8mm;
    overflow: visible;
    border-color: #6f7780;
    background: #fff !important;
    box-shadow: none;
    break-inside: avoid;
  }
  .public-system-body {
    grid-template-rows: auto 5mm auto 5mm auto auto;
    padding: 5mm;
  }
  .public-system-node,
  .public-requisent-core,
  .public-system-impact {
    min-height: 0;
    border-color: #6f7780;
    background: #fff !important;
  }
  .public-system-node { padding: 4mm 5mm; }
  .public-system-flow { height: 5mm; }
  .public-requisent-core { grid-template-columns: minmax(0, 1fr) 22mm; }
  .public-requisent-core .core-copy { padding: 4mm 5mm; }
  .public-requisent-core .core-copy .system-label {
    color: var(--rq-color-signal-cyan) !important;
    print-color-adjust: exact;
    -webkit-print-color-adjust: exact;
  }
  .public-requisent-core .core-mark { min-height: 18mm; border-left-color: #6f7780; }
  .public-system-impact { margin-top: 5mm; padding: 4mm 5mm; border: 1px solid #6f7780; border-left: 2px solid var(--rq-color-signal-cyan); }
  .public-system-node strong,
  .public-requisent-core strong,
  .public-system-impact strong { color: #111820 !important; }

  .contact-section {
    display: block !important;
    padding-block: 10mm !important;
    break-inside: avoid;
  }
  .contact-grid-static {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
    gap: 8mm;
    align-items: start;
  }
  .contact-grid-static .contact-copy { padding-top: 0; }
  .contact-static-panel { padding: 6mm; border-color: #6f7780; background: #fff !important; box-shadow: none; }
  .site-footer { break-inside: avoid; }
}