/*
 * Component: brand logo marquee (homepage, section 6).
 *
 * Spec (locked with the user):
 *   outer  .tr-marquee        max-width 1500, margin 0 auto, padding 5px 5px 0 5px
 *   inner  .tr-marquee__inner width 100%, height 130px, centered, radius 5px, #0F0F0F
 *   track  margin-between-items 60/30/30 (desktop/tablet/mobile), left, no pause
 *
 * Seamless loop: the track holds the logo set twice and each item carries an
 * equal trailing margin, so the two halves are identical width and
 * translateX(-50%) lands exactly on a set boundary — no jump.
 */

.tr-marquee {
    /* Full content width — same as the final banner below, so their left/right
       edges align exactly. The global 5px wrapper (.tr-main) supplies the side
       inset; no max-width cap and no L/R padding here. */
    max-width: none;
    margin: 0 0 5px 0;        /* 5px gap below, to separate from the final banner */
    padding: 5px 0 0 0;       /* small gap above; band spans the full width */
}

/* The 5px top padding is the whole gap to the grid above; drop the global one. */
.tr-home > .tr-marquee { margin-top: 0; }

.tr-marquee__inner {
    width: 100%;
    height: 130px;
    display: flex;
    align-items: center;       /* items vertically centered */
    overflow: hidden;
    background: #0f0f0f;
    border-radius: 5px;        /* all corners */
}

.tr-marquee__track {
    display: flex;
    align-items: center;
    width: max-content;
    /* Direction left = negative translate. Hover-pause intentionally absent. */
    animation: tr-marquee-scroll var(--tr-marquee-dur, 12000ms) linear infinite;
}

.tr-marquee__item {
    flex: 0 0 auto;
    width: 180px;             /* enlarged logo slot (was 134) — bigger, more prominent */
    margin-right: 60px;       /* margin between items — desktop */
    display: flex;
    align-items: center;
    justify-content: center;
}

.tr-marquee__logo {
    width: 180px;             /* enlarged 180x84 box, logo letterboxed inside */
    height: 84px;
    object-fit: contain;
}

@keyframes tr-marquee-scroll {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}

/* Margin between items: 30px on tablet and mobile. */
@media (max-width: 1024px) {
    .tr-marquee__item { margin-right: 30px; }
}
@media (max-width: 600px) {
    .tr-marquee__inner { height: 104px; }
    .tr-marquee__item { width: 150px; margin-right: 30px; }
    .tr-marquee__logo { width: 150px; height: 68px; }
}

@media (prefers-reduced-motion: reduce) {
    .tr-marquee__track { animation: none; flex-wrap: wrap; justify-content: center; gap: 30px; }
}