/* ============================================================
 * Partners page (/partneri) — v3 design system.
 * Namespace: .pt-*  ·  Tokens: --hp-* (from general.css)
 * A responsive grid of partner-brand cards.
 * ============================================================ */

.pt {
  background: var(--hp-bg, #ffffff);
}

.pt-inner {
  max-width: var(--hp-max, 1440px);
  margin: 0 auto;
  padding: 32px 24px 96px;
}

@media (max-width: 599px) {
  .pt-inner {
    padding: 24px 16px 72px;
  }
}

/* ─── Breadcrumb ────────────────────────────────────────────── */
.pt-breadcrumb {
  margin-top: 56px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  font-size: 12.5px;
  color: var(--hp-fg-faint, #727b8a);
  margin-bottom: 40px;
}
.pt-breadcrumb a {
  color: var(--hp-fg-muted, #5b6473);
  text-decoration: none;
  transition: color 140ms ease;
}
.pt-breadcrumb a:hover {
  color: var(--hp-accent, #0ea5e9);
}
.pt-breadcrumb i {
  font-size: 9px;
}
.pt-breadcrumb-current {
  color: var(--hp-fg, #0b1320);
}

/* ─── Header ────────────────────────────────────────────────── */
.pt-header {
  max-width: 680px;
  margin-bottom: 48px;
}
.pt-eyebrow {
  margin: 0 0 14px;
  font-family: var(--hp-mono, 'Roboto Mono', monospace);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--hp-fg-muted, #5b6473);
}
.pt .pt-header h1.pt-title {
  margin: 0 0 16px;
  font-family: 'Inter', system-ui, sans-serif !important;
  font-size: 40px !important;
  font-weight: 700 !important;
  line-height: 1.1 !important;
  letter-spacing: -0.025em !important;
  text-transform: none !important;
  color: var(--hp-fg, #0b1320);
}
@media (max-width: 767px) {
  .pt .pt-header h1.pt-title {
    font-size: 30px !important;
  }
}
.pt-lede {
  margin: 0;
  font-size: 17px;
  line-height: 1.6;
  color: var(--hp-fg-muted, #5b6473);
}

/* ─── Brand grid ────────────────────────────────────────────── */
.pt-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}
@media (max-width: 1023px) {
  .pt-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}
@media (max-width: 719px) {
  .pt-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
  }
}

.pt-card {
  display: flex;
  flex-direction: column;
  background: var(--hp-bg, #ffffff);
  border: 1px solid var(--hp-hairline, #e6e8ec);
  border-radius: 12px;
  text-decoration: none;
  overflow: hidden;
  transition: border-color 160ms ease, box-shadow 160ms ease,
    transform 160ms ease;
}
.pt-card:hover {
  border-color: var(--hp-hairline-strong, #c8ccd3);
  box-shadow: var(--bsh-300, 0 5px 15px rgba(0, 0, 0, 0.05));
  transform: translateY(-3px);
}

/* Logo plate — the dominant element. Logos are forced to a single
 * dark monochrome tone so mixed-color and white logos all read
 * uniformly; on hover they lift to the brand accent. */
.pt-card-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 120px;
  padding: 28px;
  background: #f7f9fb;
  border-bottom: 1px solid var(--hp-hairline, #e6e8ec);
}
.pt-card-logo img {
  max-width: 100%;
  max-height: 64px;
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
  /* Collapse any logo (incl. white-on-transparent) to one dark tone. */
  filter: brightness(0) opacity(0.62);
  transition: filter 200ms ease;
}
.pt-card:hover .pt-card-logo img {
  filter: brightness(0) opacity(0.95);
}
/* Text wordmark — shown when a brand has no logo asset. */
.pt-card-wordmark {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 24px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--hp-fg-faint, #727b8a);
  text-align: center;
  transition: color 200ms ease;
}
.pt-card:hover .pt-card-wordmark {
  color: var(--hp-fg, #0b1320);
}

/* Body — name + count, beneath the logo plate. */
.pt-card-body {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 16px 18px;
}
.pt-card-name {
  font-size: 14.5px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--hp-fg, #0b1320);
  transition: color 160ms ease;
}
.pt-card:hover .pt-card-name {
  color: var(--hp-accent, #0ea5e9);
}
.pt-card-count {
  font-family: var(--hp-mono, 'Roboto Mono', monospace);
  font-size: 11px;
  color: var(--hp-fg-faint, #727b8a);
}

/* Leaf-category chips — the categories this brand's products span. */
.pt-card-cats {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 10px;
}
.pt-card-cat {
  display: inline-block;
  padding: 3px 9px;
  border-radius: 999px;
  background: #f1f4f7;
  font-size: 10.5px;
  font-weight: 500;
  line-height: 1.4;
  color: var(--hp-fg-muted, #5b6473);
}

/* ─── CTA ───────────────────────────────────────────────────── */
.pt-cta {
  margin-top: 56px;
  padding: 40px 32px;
  background: #f7f9fb;
  border-radius: 14px;
  text-align: center;
}
.pt .pt-cta h2.pt-cta-title {
  margin: 0 0 8px;
  font-family: 'Inter', system-ui, sans-serif !important;
  font-size: 22px !important;
  font-weight: 700 !important;
  letter-spacing: -0.02em !important;
  text-transform: none !important;
  color: var(--hp-fg, #0b1320);
}
.pt-cta-text {
  max-width: 520px;
  margin: 0 auto 20px;
  font-size: 15px;
  line-height: 1.6;
  color: var(--hp-fg-muted, #5b6473);
}

/* ─── Keyboard focus ────────────────────────────────────────────
   Visible focus indicator for keyboard users — the card is a link. */
.pt-card:focus-visible {
  outline: 2px solid var(--hp-accent, #0ea5e9);
  outline-offset: 3px;
}