/* brand-logos.css — portfolio-video-wall phase 4: brand-logo tokenization
 * Wall context: dark cinematic #0a0a0f. Standalone file — no dependency on styles.css.
 *
 * EQUAL-AREA OPTICAL NORMALIZATION
 *   aspect = width / height (per-logo intrinsic ratio).
 *   refAspect = median aspect of the audited set (2.0000). Treated as the
 *     reference ink footprint so mixed wide/square marks feel equally weighted.
 *   scale = sqrt(refAspect / aspect).
 *     wide logos (aspect > ref) get scale < 1 → render shorter;
 *     square/tall logos (aspect < ref) get scale > 1 → render taller,
 *     so rendered ink AREAS match: (slot_h*scale)^2 * aspect ≈ constant.
 *   Rendered height = var(--brand-slot-h) * scale; width follows via aspect-ratio.
 *
 * USE
 *   <link rel="stylesheet" href="tokens/brand-logos.css">
 *   <img class="brand-logo brand-logo--md" data-brand="ikea" src="https://…/IKEA.png" alt="IKEA" loading="lazy">
 *   Size: .brand-logo--sm (28px) / --md (40px, default) / --lg (56px).
 *   On dark wall: add .brand-logo--on-dark for legibility floor.
 *   Wordmark vs mark padding: automatic via [data-brand] kind token.
 */

:root {
  --brand-slot-h: 40px;          /* default slot height (md) */
  --brand-ink: 1;                /* ink-area target multiplier (1 = reference) */
  --brand-radius: 6px;
  --brand-famous-daves-aspect: 1.4103;
  --brand-famous-daves-scale: 1.1909; /* sqrt(2.0/1.4103) */
  --brand-famous-daves-w: calc(var(--brand-slot-h) * 1.1909 * 1.4103); /* derived render width */
  --brand-grimaldis-aspect: 3.1746;
  --brand-grimaldis-scale: 0.7937; /* sqrt(2.0/3.1746) */
  --brand-grimaldis-w: calc(var(--brand-slot-h) * 0.7937 * 3.1746); /* derived render width */
  --brand-ikea-aspect: 2.0;
  --brand-ikea-scale: 1.0; /* sqrt(2.0/2.0) */
  --brand-ikea-w: calc(var(--brand-slot-h) * 1.0 * 2.0); /* derived render width */
  --brand-mumkin-gazebo-aspect: 2.0;
  --brand-mumkin-gazebo-scale: 1.0; /* sqrt(2.0/2.0) */
  --brand-mumkin-gazebo-w: calc(var(--brand-slot-h) * 1.0 * 2.0); /* derived render width */
  --brand-mumkin-philips-aspect: 2.0;
  --brand-mumkin-philips-scale: 1.0; /* sqrt(2.0/2.0) */
  --brand-mumkin-philips-w: calc(var(--brand-slot-h) * 1.0 * 2.0); /* derived render width */
  --brand-tablez-aspect: 1.6719;
  --brand-tablez-scale: 1.0937; /* sqrt(2.0/1.6719) */
  --brand-tablez-w: calc(var(--brand-slot-h) * 1.0937 * 1.6719); /* derived render width */
  --brand-unilever-aspect: 2.0;
  --brand-unilever-scale: 1.0; /* sqrt(2.0/2.0) */
  --brand-unilever-w: calc(var(--brand-slot-h) * 1.0 * 2.0); /* derived render width */
  --brand-vogue-fitness-aspect: 4.1406;
  --brand-vogue-fitness-scale: 0.695; /* sqrt(2.0/4.1406) */
  --brand-vogue-fitness-w: calc(var(--brand-slot-h) * 0.695 * 4.1406); /* derived render width */
  --brand-brand-sheet-all-aspect: 2.6497;
  --brand-brand-sheet-all-scale: 0.8688; /* sqrt(2.0/2.6497) */
  --brand-brand-sheet-all-w: calc(var(--brand-slot-h) * 0.8688 * 2.6497); /* derived render width */
  --brand-elevate-scholars-dark-bg-aspect: 1.0029;
  --brand-elevate-scholars-dark-bg-scale: 1.4122; /* sqrt(2.0/1.0029) */
  --brand-elevate-scholars-dark-bg-w: calc(var(--brand-slot-h) * 1.4122 * 1.0029); /* derived render width */
  --brand-elevate-scholars-nav-aspect: 1.0;
  --brand-elevate-scholars-nav-scale: 1.4142; /* sqrt(2.0/1.0) */
  --brand-elevate-scholars-nav-w: calc(var(--brand-slot-h) * 1.4142 * 1.0); /* derived render width */
  --brand-elevate-scholars-shield-aspect: 1.0029;
  --brand-elevate-scholars-shield-scale: 1.4122; /* sqrt(2.0/1.0029) */
  --brand-elevate-scholars-shield-w: calc(var(--brand-slot-h) * 1.4122 * 1.0029); /* derived render width */
}

/* Base: fixed slot height, ratio-driven width, contain fit, scale compensation. */
.brand-logo {
  --slot: var(--brand-slot-h);
  --scale: 1;
  --aspect: 1;
  display: inline-block;
  height: calc(var(--slot) * var(--scale) * var(--brand-ink));
  aspect-ratio: var(--aspect);
  width: auto;
  max-width: 220px;
  object-fit: contain;
  vertical-align: middle;
  flex: none;
  background: transparent;
  border-radius: var(--brand-radius);
}

/* Per-logo wiring: aspect + equal-area scale. */
.brand-logo[data-brand="famous-daves"] { --aspect: var(--brand-famous-daves-aspect); --scale: var(--brand-famous-daves-scale); }
.brand-logo[data-brand="grimaldis"] { --aspect: var(--brand-grimaldis-aspect); --scale: var(--brand-grimaldis-scale); }
.brand-logo[data-brand="ikea"] { --aspect: var(--brand-ikea-aspect); --scale: var(--brand-ikea-scale); }
.brand-logo[data-brand="mumkin-gazebo"] { --aspect: var(--brand-mumkin-gazebo-aspect); --scale: var(--brand-mumkin-gazebo-scale); }
.brand-logo[data-brand="mumkin-philips"] { --aspect: var(--brand-mumkin-philips-aspect); --scale: var(--brand-mumkin-philips-scale); }
.brand-logo[data-brand="tablez"] { --aspect: var(--brand-tablez-aspect); --scale: var(--brand-tablez-scale); }
.brand-logo[data-brand="unilever"] { --aspect: var(--brand-unilever-aspect); --scale: var(--brand-unilever-scale); }
.brand-logo[data-brand="vogue-fitness"] { --aspect: var(--brand-vogue-fitness-aspect); --scale: var(--brand-vogue-fitness-scale); }
.brand-logo[data-brand="brand-sheet-all"] { --aspect: var(--brand-brand-sheet-all-aspect); --scale: var(--brand-brand-sheet-all-scale); }
.brand-logo[data-brand="elevate-scholars-dark-bg"] { --aspect: var(--brand-elevate-scholars-dark-bg-aspect); --scale: var(--brand-elevate-scholars-dark-bg-scale); }
.brand-logo[data-brand="elevate-scholars-nav"] { --aspect: var(--brand-elevate-scholars-nav-aspect); --scale: var(--brand-elevate-scholars-nav-scale); }
.brand-logo[data-brand="elevate-scholars-shield"] { --aspect: var(--brand-elevate-scholars-shield-aspect); --scale: var(--brand-elevate-scholars-shield-scale); }

/* Kind padding: airy wordmarks breathe; compact marks stay tight. */
/* wordmark / wide: horizontal breathing room */
.brand-logo[data-brand="famous-daves"].brand-logo--padded, .brand-logo[data-brand="famous-daves"] { padding-inline: 2px; }
.brand-logo[data-brand="grimaldis"].brand-logo--padded, .brand-logo[data-brand="grimaldis"] { padding-inline: 2px; }
.brand-logo[data-brand="ikea"].brand-logo--padded, .brand-logo[data-brand="ikea"] { padding-inline: 2px; }
.brand-logo[data-brand="mumkin-gazebo"].brand-logo--padded, .brand-logo[data-brand="mumkin-gazebo"] { padding-inline: 2px; }
.brand-logo[data-brand="mumkin-philips"].brand-logo--padded, .brand-logo[data-brand="mumkin-philips"] { padding-inline: 2px; }
.brand-logo[data-brand="tablez"].brand-logo--padded, .brand-logo[data-brand="tablez"] { padding-inline: 2px; }
.brand-logo[data-brand="unilever"].brand-logo--padded, .brand-logo[data-brand="unilever"] { padding-inline: 2px; }
.brand-logo[data-brand="vogue-fitness"].brand-logo--padded, .brand-logo[data-brand="vogue-fitness"] { padding-inline: 2px; }
.brand-logo[data-brand="brand-sheet-all"].brand-logo--padded, .brand-logo[data-brand="brand-sheet-all"] { padding-inline: 2px; }
/* square / mark / tall: minimal padding so glyph stays optically full */
.brand-logo[data-brand="elevate-scholars-dark-bg"] { padding: 1px; }
.brand-logo[data-brand="elevate-scholars-nav"] { padding: 1px; }
.brand-logo[data-brand="elevate-scholars-shield"] { padding: 1px; }

/* Size variants (slot heights 28 / 40 / 56 px). */
.brand-logo--sm { --slot: 28px; }
.brand-logo--md { --slot: 40px; }
.brand-logo--lg { --slot: 56px; }

/* Dark-wall visibility: subtle lift + brightness floor for dark marks. No layout shift. */
.brand-logo--on-dark {
  filter: drop-shadow(0 1px 6px rgb(0 0 0 / 0.55));
}
.brand-logo--on-dark.brand-logo--lift,
.brand-logo--on-dark[data-brand="grimaldis"],
.brand-logo--on-dark[data-brand="elevate-scholars-nav"],
.brand-logo--on-dark[data-brand="elevate-scholars-shield"] {
  filter: drop-shadow(0 1px 6px rgb(0 0 0 / 0.55)) brightness(1.12);
}

/* Icon-only compatible: no generated text, no ::before/::after content. */
.brand-logo[alt=""] { outline: none; }

/* Reduced motion: no animation anywhere in this file by design. */
@media (prefers-reduced-motion: reduce) {
  .brand-logo { animation: none; transition: none; }
}