/* ==========================================================================
   Galvitech — shared additions for non-console service pages
   Brand logo strip + symptom panel used by the printer page.
   ========================================================================== */

/* ---------- hero symptom panel (replaces the hero image on text-led pages) ---------- */
.g-hero__panel {
  position: relative;
  z-index: 2;
  padding: 26px 26px 22px;
  border-radius: var(--g-radius);
  background: rgba(255, 255, 255, .04);
  border: 1px solid var(--g-line-2);
  box-shadow: 0 30px 70px -34px rgba(0, 0, 0, .9);
}
.g-hero__panel-h {
  margin: 0 0 6px;
  font-size: 1.02rem;
  font-weight: 800;
  letter-spacing: -.01em;
  color: #fff;
}
.g-hero__panel-p {
  margin: 0 0 18px;
  font-size: 13px;
  color: var(--g-text-mut);
}

.g-symptom { margin: 0; padding: 0; list-style: none; display: grid; gap: 1px; background: var(--g-line); border-radius: 10px; overflow: hidden; }
.g-symptom li {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 11px 15px;
  background: rgba(8, 12, 24, .92);
  transition: background .15s ease;
}
.g-symptom li:hover { background: rgba(37, 99, 235, .16); }
.g-symptom b {
  font-size: 13px;
  font-weight: 700;
  color: #fff;
  letter-spacing: -.005em;
}
.g-symptom span {
  font-size: 11.5px;
  color: var(--g-text-mut);
  line-height: 1.45;
}

/* ---------- brand logo strip ----------
   Brand marks are wordmarks on transparent backgrounds, so each sits on a
   white plate. Full colour at all times (no grayscale filter) and a
   consistent plate size so six different logos read as one even row. */
.g-brands {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 16px;
  padding: 28px;
  border-radius: var(--g-radius);
  background: rgba(255, 255, 255, .035);
  border: 1px solid var(--g-line);
}
@media (max-width: 900px) { .g-brands { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 620px)  { .g-brands { grid-template-columns: repeat(2, 1fr); gap: 10px; padding: 18px; } }

.g-brands img {
  /* plate is the grid cell; the logo centres inside it and never overflows */
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 76px;
  padding: 14px 18px;
  border-radius: 12px;
  background: #fff;
  border: 1px solid rgba(255, 255, 255, .16);
  box-shadow: 0 3px 12px rgba(0, 0, 0, .26);
  object-fit: contain;
  object-position: center;
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}

/* Brand logos must always render in full colour.
   !important so a stale cached copy of this stylesheet can never grey them
   back out, and so nothing else re-introduces a desaturating filter. */
.g-brands img,
.g-brands img:hover,
.g-brands img:focus,
.g-brands img:active,
.g-brands img:visited {
  filter: none !important;
  opacity: 1 !important;
}
.g-brands img:hover {
  transform: translateY(-3px);
  border-color: rgba(34, 211, 238, .45);
  box-shadow: 0 10px 24px rgba(0, 0, 0, .38);
}

@media (max-width: 620px) {
  .g-brands img { height: 60px; padding: 12px 14px; }
}