/* brand.php – PlugZone arculati elemek oldal (új megjelenés, pz-redesign.css tokenjeire épül).
   Előtag: pz2-brandkit (a .pz2-brand már a navigációs logó osztálya a pz-redesign.css-ben). */
.pz2-brandkit { padding-bottom: 64px; }

.pz2-brandkit__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;
    max-width: 1120px;
    margin: 40px auto 0;
    padding: 0 var(--pz2-gutter, 80px);
}

.pz2-brandkit__card {
    display: flex;
    flex-direction: column;
    background: var(--pz2-surface, #fff);
    border: 1px solid var(--pz2-border, #e5e7eb);
    border-radius: 16px;
    overflow: hidden;
}

.pz2-brandkit__media {
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 16 / 10;
    padding: 24px;
    background: var(--pz2-bg, #f9fafb);
    border-bottom: 1px solid var(--pz2-border, #e5e7eb);
}
.pz2-brandkit__media img { max-width: 100%; max-height: 100%; object-fit: contain; }
/* álló formátumú képek (töltőoszlop-tervek): magasabb képterület */
.pz2-brandkit__media--tall { aspect-ratio: 4 / 5; background: #fff; }

.pz2-brandkit__body { display: flex; flex-direction: column; gap: 10px; padding: 20px 24px 24px; flex: 1; }
.pz2-brandkit__body h2 { margin: 0; font-family: var(--pz2-font-head); font-size: 20px; color: var(--pz2-text, #111827); }
.pz2-brandkit__body p { margin: 0; color: var(--pz2-text-2, #4b5563); line-height: 1.6; font-size: 15px; }

.pz2-brandkit__swatches { list-style: none; margin: 4px 0 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; }
.pz2-brandkit__swatches li { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--pz2-text, #111827); }
.pz2-brandkit__swatch { width: 22px; height: 22px; border-radius: 6px; border: 1px solid var(--pz2-border, #e5e7eb); flex: none; }
.pz2-brandkit__swatch-name { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pz2-brandkit__hex {
    font: 500 12px ui-monospace, SFMono-Regular, Menlo, monospace;
    color: var(--pz2-text-2, #4b5563);
    background: var(--pz2-chip, #f3f4f6);
    border: 0;
    border-radius: 6px;
    padding: 4px 8px;
    cursor: pointer;
}
.pz2-brandkit__hex:hover, .pz2-brandkit__hex.is-copied { background: var(--pz2-sage-tint); color: var(--pz2-sage-dark, #6b8a7a); }

.pz2-brandkit__meta { margin-top: auto; padding-top: 8px; display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: 13px; color: var(--pz2-text-3, #9ca3af); }

.pz2-brandkit__note { max-width: 1120px; margin: 32px auto 0; padding: 0 var(--pz2-gutter, 80px); color: var(--pz2-text-3, #9ca3af); font-size: 14px; text-align: center; }

@media (max-width: 1099px) {
    .pz2-brandkit__grid, .pz2-brandkit__note { padding: 0 16px; }
}
@media (max-width: 720px) {
    .pz2-brandkit__grid { grid-template-columns: minmax(0, 1fr); gap: 16px; }
}