@layer components {
  #partners .partners-container {
    display:grid; gap: clamp(10px, 2vw, 20px);
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    align-items:center;
  }
  #partners .major-partner { grid-column: span 2; }
  #partners .partners-container img { width:100%; height:auto; object-fit:contain }
}

/* --- promoted from conference theme to shared components --- */
/* AI Engineer Melbourne 2026 — Partners component.
   Sits inside @layer theme alongside the other /ai-engineer/style/*.css files.

   Works with the common partners.css (@layer components) which provides
   a grid fallback. This file overrides with flex layout and percentage
   widths per tier.

   Inherits site typography — no font-* declarations. All tokens are
   namespaced --partners-* so they never collide with site tokens.
   Site values come through as fallbacks.
*/
@layer components {

  /* ------------------------------------------------------------
     Tokens
  ------------------------------------------------------------ */
  #partners {
    --partners-ink-muted:  var(--color-ink-muted, #676767);
  }

  /* ------------------------------------------------------------
     Container — .part provides inline padding (10%), so we only
     need to ensure there's no extra max-width constraint.
  ------------------------------------------------------------ */
  #partners {
    padding-inline: 5%;
  }

  /* Tier headings — inherit site typography, add only styling.
     .part > h3 already centres headings, so no text-align needed. */
  #partners h3 {
    font-variant: small-caps;
    text-transform: uppercase;
    font-size: var(--font-size-small, 0.9em);
    letter-spacing: 0.05em;
    color: var(--partners-ink-muted);
    margin: 2em 0 0.5em;
  }

  /* Override the common grid with flex — gives us per-tier width
     control rather than uniform auto-fit columns. */
  #partners .partners-container {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 3em 4%;
    padding: 1.5em 0;
  }

  /* ------------------------------------------------------------
     Logo images — percentage-based sizing.

     Each tier sets a width on the <section> wrapper; the img
     fills 100% of that width. aspect-ratio keeps height
     proportional. object-fit: contain ensures logos with
     different native ratios fit without distortion.
  ------------------------------------------------------------ */
  #partners img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 175 / 37;
    object-fit: contain;
  }

  .flagship-partner {
    width: 80%;
  }

  .major-partner {
    width: 50%;
  }
  
	.coffee-partner {
    width: 40%;
  }

  .partner {
    width: 30%;
    margin: 0.5em 0;
  }

  .agency-partner {
    width: 20%;
  }

  .community-partner {
    width: 24%;
  }

  /* ------------------------------------------------------------
     Responsive — narrow screens
  ------------------------------------------------------------ */
  @media (max-width: 768px) {
    #partners {
      padding-inline: 3%;
    }

    .flagship-partner {
      width: 80%;
    }

    .major-partner {
      width: 70%;
    }

    .partner {
      width: 30%;
    }

    .agency-partner,
    .community-partner {
      width: 25%;
    }
  }

  @media (max-width: 480px) {
    .flagship-partner {
      width: 75%;
    }

    .major-partner {
      width: 55%;
    }

    .partner,
    .agency-partner,
    .community-partner {
      width: 40%;
    }
  }

}