/* Logo Bar — container, layout, responsive sizing, and hover behavior */
.gtm-logo-bar{
  /* match theme containers */
  --container-max: 1376px;
  --pad: 16px;
  /* row height (desktop a bit larger; tablet/mobile larger again below) */
  --logo-row-h: clamp(36px, 3.8vw, 64px);

  width: min(100%, var(--container-max));
  margin-inline: auto;
  padding-inline: var(--pad);
  margin:16px;
}

.gtm-logo-bar__list{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: clamp(8px, 2vw, 24px);
  list-style:none;
  margin:0;
  padding:0;
}

.gtm-logo-bar__item{
  flex:1 1 0;            /* equal-width columns */
  min-width:0;
  display:flex;
  align-items:center;
  justify-content:center;
}

.gtm-logo-bar__link{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:100%;
}

.gtm-logo-bar__img{
  height: var(--logo-row-h);
  width: auto;
  max-width: 100%;
  object-fit: contain;
  opacity: .5;                 /* 50% base */
  transform: scale(.9);        /* 90% base */
  transition: opacity .18s ease, transform .18s ease;
}

/* hover / active → subtle lift to full strength */
.gtm-logo-bar__link:hover .gtm-logo-bar__img,
.gtm-logo-bar__item.is-active .gtm-logo-bar__img{
  opacity: 1;
  transform: scale(1);
}

/* Tablet: allow a touch more height */
@media (max-width: 992px){
  .gtm-logo-bar{ --logo-row-h: clamp(40px, 6.5vw, 72px); }
}

/* Mobile: a bit bigger again for legibility */
@media (max-width: 576px){
  .gtm-logo-bar{ --logo-row-h: clamp(44px, 10vw, 80px); }
}
/* Center logo bar to container width without touching markup */
:root {
  --container-pad: 16px;
  --container-max: 1320px; /* desktop max; mirrors Bootstrap xxl */
}

.gtm-logo-bar {
  display: block;
  margin-inline: auto;
  padding-inline: var(--container-pad);
  max-width: min(100% - (var(--container-pad) * 2), var(--container-max));
}

/* Optional: follow Bootstrap container breakpoints exactly */
@media (min-width: 1200px) { .gtm-logo-bar { --container-max: 1140px; } } /* xl */
@media (min-width: 1400px) { .gtm-logo-bar { --container-max: 1320px; } } /* xxl */

.gtm-logo-bar__list {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
