/* ==========================================================================
   Ardent — partner and PMS logos. Loaded after styles.css (and spokes.css) on
   every page that shows a logo: the home hero band and #partners roster, the
   integrations hub cards and the integration spoke heroes. Files live in
   assets/logos/ (96px-tall rasters / tight-viewBox SVGs, brand colour kept);
   the two hero lanes grey them with a CSS filter and restore colour on
   hover/focus, the way echobooking's "Trusted by" band does. Wide wordmarks
   are boxed with max-width + object-fit:contain so the row height stays even.
   ========================================================================== */

/* ---------- home hero band: both lanes are bare greyed logo tiles, 48px gaps ---------- */
.track .group--logos{align-items:center;gap:48px;padding-right:48px}
.logo-tile{display:flex;flex:none;align-items:center;height:56px;border-radius:4px}
.logo-tile img{
  display:block;height:56px;width:auto;max-width:180px;object-fit:contain;
  filter:grayscale(1) opacity(.72);transition:filter .3s;
}
.logo-tile:hover img,.logo-tile:focus-visible img{filter:none}

/* lane 1 "Works with": PMS wordmarks at 40px in a 48px tile, wide ones capped at 200px;
   Dentrix Ascend's stacked lockup runs a touch taller */
.logo-tile--pms{height:48px}
.logo-tile--pms img{height:40px;max-width:200px}
.logo-tile--pms .logo--tall{height:48px}

/* ---------- home, #partners roster: 40px logo left of the name ---------- */
.roster li{display:flex;align-items:flex-start;gap:14px}
.roster li > div{min-width:0}
.roster-logo{flex:none;display:block;height:40px;width:auto;max-width:88px;object-fit:contain;object-position:left top;margin-top:1px}

/* ---------- integrations hub: card logo above the name (colour) ---------- */
.card-logo{display:block;height:32px;width:auto;max-width:220px;object-fit:contain;object-position:left center}

/* ---------- integration spokes: PMS logo between breadcrumb and eyebrow (colour) ---------- */
.spoke-logo{display:block;height:40px;width:auto;max-width:min(100%,280px);object-fit:contain;object-position:left center}
.spoke section > .spoke-logo + .eyebrow{margin-top:18px}

@media (max-width:639px){
  .track .group--logos{gap:36px;padding-right:36px}
  .logo-tile,.logo-tile img{height:48px}
  .logo-tile img{max-width:156px}
  .logo-tile--pms{height:40px}
  .logo-tile--pms img{height:34px;max-width:150px}
  .logo-tile--pms .logo--tall{height:40px}
}
@media (prefers-reduced-motion:reduce){
  .logo-tile img{transition:none}
}