/* ==========================================================================
   Foundries and technology partners

   A light trust rail: copy and CTA across the top, then a contained grid of
   equal logo cells separated by hairlines. No heavy cards, no shadows, no dark
   slab. Cells are a fixed ratio so every logo — whatever its own proportions —
   sits centred in the same amount of room and none of them shrinks to
   illegibility on a narrow viewport.
   ========================================================================== */

.partner-rail{
  padding-block:48px;
  background:var(--sv-white);
}

.partner-rail__head{
  grid-column-end:span var(--ps-grid-columns);
  display:flex;flex-direction:column;gap:24px;
  margin-bottom:32px;
}
.partner-rail__copy{display:flex;flex-direction:column;gap:16px;max-width:62ch}
.partner-rail__title{margin:0;color:var(--ps-color-neutral-3-500)}
.partner-rail__body{margin:0;color:var(--ps-color-secondary-5-500)}
.partner-rail__body p{margin:0}
.partner-rail__cta{flex:none}

/* --------------------------------------------------------------------------
   The logo grid
   -------------------------------------------------------------------------- */
.partner-rail__grid{
  grid-column-end:span var(--ps-grid-columns);
  list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  /* hairlines come from the cell borders, collapsed into a single rule */
  border-top:1px solid var(--ps-color-neutral-2-300);
  border-left:1px solid var(--ps-color-neutral-2-300);
}
/* The supplied logos run from 1.26 (TSMC, near square) to 7.28 (Winbond, very
   wide), so the cell has to give the tall ones vertical room and the wide ones
   horizontal room without stretching either. A 2.2 cell with modest padding
   suits both ends. */
.partner-rail__cell{
  display:flex;align-items:center;justify-content:center;
  aspect-ratio:2.2 / 1;padding:16px 18px;
  border-right:1px solid var(--ps-color-neutral-2-300);
  border-bottom:1px solid var(--ps-color-neutral-2-300);
}
/* Real artwork keeps its own proportions and is never stretched — the cell
   constrains both axes and the image takes whichever limit it hits first. */
.partner-rail__logo{
  display:block;
  max-width:100%;max-height:100%;width:auto;height:auto;
  object-fit:contain;
  /* Twelve logos in twelve different palettes would fight each other, so the
     rail runs desaturated and each one returns to full colour under the
     pointer. Delete the filter line for permanent full colour. */
  filter:grayscale(1);opacity:.72;
  transition:filter .25s ease-out,opacity .25s ease-out;
}
.partner-rail__cell:hover .partner-rail__logo{filter:grayscale(0);opacity:1}

/* Awaiting artwork: js/partner-logos.js flags a cell whose logo file 404s, and
   the partner's name stands in as a neutral wordmark. Once every file is in
   place this state never appears. */
.partner-rail__cell.is-awaiting-artwork .partner-rail__logo{display:none}
.partner-rail__cell.is-awaiting-artwork::after{
  content:attr(data-partner);
  font:600 15px/20px var(--sv-font-display);letter-spacing:-.01em;
  text-align:center;text-wrap:balance;
  color:var(--ps-color-secondary-5-500);
  transition:color .25s ease-out;
}
.partner-rail__cell.is-awaiting-artwork:hover::after{color:var(--ps-color-neutral-3-500)}

@media (min-width:1024px){
  .partner-rail__cell.is-awaiting-artwork::after{font-size:16px}
}

@media (prefers-reduced-motion:reduce){
  .partner-rail__logo,.partner-rail__cell.is-awaiting-artwork::after{transition:none}
}

@media (min-width:520px){
  .partner-rail__grid{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (min-width:640px){
  .partner-rail{padding-block:64px}
  .partner-rail__head{flex-direction:row;align-items:flex-end;justify-content:space-between;gap:40px}
  .partner-rail__grid{grid-template-columns:repeat(4,minmax(0,1fr))}
}
@media (min-width:1024px){
  .partner-rail{padding-block:80px}
  .partner-rail__grid{grid-template-columns:repeat(6,minmax(0,1fr))}
  .partner-rail__cell{aspect-ratio:2.15 / 1;padding:18px 20px}
}
@media (min-width:1350px){
  .partner-rail__head,
  .partner-rail__grid{grid-column-start:2;grid-column-end:span 10}
}