@charset "UTF-8";
/**
 * Power of Ten — Responsive Logo Grid
 *
 * Description: Flexible logo grid that dynamically scales each logo based on
 * its individual aspect ratio. Uses a custom scaling formula with horizontal
 * and vertical factors derived from `--base-ratio` (set per logo) to prevent
 * wide logos from dominating and tall logos from shrinking. Height is clamped
 * between `--logo-min-size` and `--logo-max-size` multipliers of
 * `--base-height`. Logos wrap naturally via flexbox with consistent visual
 * weight regardless of aspect ratio.
 *
 * Author: Chris Verbick, Business Design Tools
 * Date: 2025-02-13
 *
 * Target: Ananda Impact Ventures site. Applied to the portfolio logo grid
 * within the Power of Ten section. Each `.power-of-ten--logo` element
 * receives a per-logo `--base-ratio` value (width/height) to drive the
 * scaling calculation.
 *
 * Custom properties (set per logo):
 *   --base-ratio            Aspect ratio of the logo (width ÷ height)
 *
 * Custom properties (set on container):
 *   --base-height           Baseline height for all logos (default: 6rem)
 *   --scale-factor-horizontal  Horizontal dampening factor (default: 0.25)
 *   --scale-factor-vertical    Vertical boost factor (default: 0.15)
 *   --logo-min-size         Minimum height multiplier (default: 0.7)
 *   --logo-max-size         Maximum height multiplier (default: 4.8)
 *   --icon-gap              Gap between logos (default: --m-2)
 *
 * Related: FullPage.js integration, Ananda design token system (--m-2).
 */
.block--power-of-ten-logos {
  --base-height: 6rem;
  --scale-factor-horizontal: 0.25;
  --scale-factor-vertical: 0.15;
  --logo-min-size: 0.7;
  --logo-max-size: 4.8;
  --base-ratio: 2;
  --icon-gap: var(--m-2);
  display: flex;
  justify-content: flex-start;
  flex-direction: row;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--icon-gap, 2rem 2rem);
  container-type: inline-size;
}
.power-of-ten--logo {
  --factor-horizontal: min(var(--scale-factor-horizontal) * -1 * var(--base-ratio) + var(--scale-factor-horizontal) + 1, 1);
  --factor-vertical: max(var(--scale-factor-vertical) * -1 * var(--base-ratio) + var(--scale-factor-vertical) + 1, 1);
  aspect-ratio: var(--base-ratio);
  height: clamp(var(--base-height) * var(--logo-min-size), var(--base-height) * var(--factor-horizontal) * var(--factor-vertical), var(--base-height) * var(--logo-max-size));
}
.power-of-ten--logo a {
  margin-inline: 0 auto;
  display: flex;
}
.power-of-ten--logo a svg {
  width: 100%;
  height: 100%;
  object-fit: contain;
}