/* TKC Website — local authentic vector logos and safe placeholder badges
   Curated vector brand marks for approved display; remaining cards use
   the existing lettermark fallbacks. Do not recolor or distort logos.
   The original category tabs and Webflow-aligned layout remain unchanged. */

/* General trading: simple graphic above each existing company name. */
.tkc-brand-panel-grid .tkc-brand-mini:has(.tkc-brand-tile-image) {
  min-height: 108px;
  min-width: 0;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 13px 10px;
}
.tkc-brand-tile-image {
  display: block;
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  max-width: 100%;
  object-fit: contain;
  border-radius: 9px;
}
.tkc-brand-tile-name {
  display: block;
  min-width: 0;
  font-size: 11px;
  line-height: 1.25;
  font-weight: 800;
  text-align: center;
  letter-spacing: .035em;
  overflow-wrap: anywhere;
}

/* Engineering customers: compact icon adjacent to the full customer name. */
.tkc-client-name-list .tkc-client-name:has(.tkc-client-tile-image) {
  display: flex;
  gap: 11px;
  align-items: center;
  min-height: 64px;
  min-width: 0;
  padding: 9px 13px;
}
.tkc-client-tile-image {
  width: 38px;
  height: 38px;
  flex: 0 0 38px;
  object-fit: contain;
  border-radius: 7px;
}
.tkc-client-tile-name {
  font-size: 12px;
  font-weight: 700;
  line-height: 1.4;
  overflow-wrap: anywhere;
  min-width: 0;
}
@media (max-width: 767px) {
  .tkc-brand-panel-grid .tkc-brand-mini:has(.tkc-brand-tile-image) {
    min-height: 100px;
    gap: 6px;
  }
  .tkc-brand-tile-image { width: 40px; height: 40px; }
}
@media (max-width: 479px) {
  .tkc-client-name-list .tkc-client-name:has(.tkc-client-tile-image) {
    min-height: 60px;
    gap: 10px;
    padding: 8px 10px;
  }
  .tkc-client-tile-image {
    width: 34px;
    height: 34px;
    flex-basis: 34px;
  }
  .tkc-client-tile-name { font-size: 11px; }
}

/* Genuine vector artwork sits on the same clean white cards as before.
   Keep the full proportions of each mark and leave the original caption
   visible for clarity and accessibility. */
.tkc-brand-panel-grid .tkc-brand-mini:has(.tkc-brand-logo-image) {
  min-height: 116px;
  padding: 14px 10px;
  gap: 9px;
}
.tkc-brand-tile-image.tkc-brand-logo-image {
  display: block;
  width: min(100%, 146px);
  height: 52px;
  max-width: 100%;
  flex: 0 0 52px;
  object-fit: contain;
  object-position: center;
  border-radius: 0;
}
.tkc-client-name-list .tkc-client-name:has(.tkc-client-logo-image) {
  min-height: 72px;
  gap: 12px;
}
.tkc-client-tile-image.tkc-client-logo-image {
  display: block;
  width: min(42%, 104px);
  height: 45px;
  max-width: 104px;
  flex: 0 0 auto;
  object-fit: contain;
  object-position: center;
  border-radius: 0;
}
@media (max-width: 767px) {
  .tkc-brand-panel-grid .tkc-brand-mini:has(.tkc-brand-logo-image) {
    min-height: 110px;
  }
  .tkc-brand-tile-image.tkc-brand-logo-image {
    width: min(100%, 134px);
    height: 46px;
    flex-basis: 46px;
  }
  .tkc-client-tile-image.tkc-client-logo-image {
    width: min(42%, 88px);
    height: 40px;
  }
}
@media (max-width: 479px) {
  .tkc-brand-panel-grid .tkc-brand-mini:has(.tkc-brand-logo-image) {
    min-height: 100px;
  }
  .tkc-brand-tile-image.tkc-brand-logo-image {
    width: min(100%, 120px);
    height: 42px;
    flex-basis: 42px;
  }
  .tkc-client-name-list .tkc-client-name:has(.tkc-client-logo-image) {
    min-height: 64px;
    gap: 9px;
  }
  .tkc-client-tile-image.tkc-client-logo-image {
    width: min(38%, 78px);
    height: 34px;
  }
}

/* Engineering customer logo additions — supplied customer reference graphics,
   bundled into one lightweight 4×3 sprite, with local file hosting. */
.tkc-client-name-list .tkc-client-name:has(.tkc-client-logo-sprite) {
  min-height: 72px;
  gap: 12px;
}
.tkc-client-tile-image.tkc-client-logo-sprite {
  display: block;
  width: 82px;
  height: 54px;
  flex: 0 0 82px;
  border-radius: 2px;
  background-color: #fff;
  background-image: url("../assets/customers/engineering-logo-sprite.webp");
  background-size: 400% 300%;
  background-repeat: no-repeat;
}
.tkc-sprite-kyb { background-position: 0% 0%; }
.tkc-sprite-gmi { background-position: 33.3333% 0%; }
.tkc-sprite-igp { background-position: 66.6667% 0%; }
.tkc-sprite-akebono { background-position: 100% 0%; }
.tkc-sprite-ud-trucks { background-position: 0% 50%; }
.tkc-sprite-cataler { background-position: 33.3333% 50%; }
.tkc-sprite-autotech { background-position: 66.6667% 50%; }
.tkc-sprite-hamabo { background-position: 100% 50%; }
.tkc-sprite-yuasa { background-position: 0% 100%; }
.tkc-sprite-nihon-denkei { background-position: 33.3333% 100%; }
.tkc-sprite-sany { background-position: 66.6667% 100%; }
.tkc-sprite-otsuka { background-position: 100% 100%; }
@media (max-width: 479px) {
  .tkc-client-tile-image.tkc-client-logo-sprite {
    width: 64px;
    height: 42px;
    flex-basis: 64px;
  }
}