/* ==========================================================================
   virtualization.css — Proxmox-specific components for the
   virtualization subpage. Generic subpage layout lives in subpage.css.
   ========================================================================== */

:root {
  --pmx: #e57000;          /* Proxmox brand orange */
}

/* --------------------------------------------------------------------------
   1. Proxmox logo — theme-aware swap (color on light, inverted on dark)
   -------------------------------------------------------------------------- */

.pmx-logo { display: block; height: auto; }
.pmx-logo--dark { display: none; }

[data-theme="dark"] .pmx-logo--light { display: none; }
[data-theme="dark"] .pmx-logo--dark { display: block; }

/* --------------------------------------------------------------------------
   2. Hero partner badge — logo + reseller line
   -------------------------------------------------------------------------- */

.partner-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--s-4);
  margin-top: var(--s-6);
  padding: var(--s-3) var(--s-4);
  border: 1px solid var(--line);
  border-top: 2px solid var(--pmx);
  border-radius: var(--r-2);
  background: var(--paper-2);
}

.partner-badge .pmx-logo { width: 128px; }

.partner-badge .badge-text {
  font-family: var(--font-mono);
  font-size: var(--t-xxs);
  text-transform: uppercase;
  letter-spacing: 0.07em;
  line-height: 1.5;
  color: var(--ink-3);
  padding-left: var(--s-4);
  border-left: 1px solid var(--line);
}

.partner-badge .badge-text strong {
  display: block;
  color: var(--ink);
  font-weight: 600;
}

/* --------------------------------------------------------------------------
   3. Partner section — large logo lockup + explanation
   -------------------------------------------------------------------------- */

.partner-feature {
  display: grid;
  grid-template-columns: 300px 1fr;
  gap: var(--s-7);
  align-items: center;
}

.partner-logo-box {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--s-8) var(--s-6);
  border: 1px solid var(--line);
  border-radius: var(--r-3);
  background: var(--paper-2);
}

.partner-logo-box .pmx-logo { width: 100%; max-width: 220px; }

.partner-copy p {
  font-family: var(--font-sans);
  font-size: var(--t-md);
  line-height: 1.55;
  color: var(--ink-2);
  margin: 0 0 var(--s-4);
  max-width: 58ch;
}

.partner-copy p:last-child { margin-bottom: 0; }
.partner-copy strong { color: var(--ink); font-weight: 600; }

/* --------------------------------------------------------------------------
   4. Platform capabilities — tint the icons Proxmox orange
   -------------------------------------------------------------------------- */

.platform .expertise-icon svg { stroke: var(--pmx); }

/* --------------------------------------------------------------------------
   5. Responsive
   -------------------------------------------------------------------------- */

@media (max-width: 768px) {
  .partner-feature { grid-template-columns: 1fr; gap: var(--s-5); }
  .partner-logo-box { padding: var(--s-6); }
  .partner-badge {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--s-3);
  }
  .partner-badge .badge-text {
    padding-left: 0;
    border-left: 0;
  }
}