/* ============================================================
   BN Sponsor Marquee — v1.0.3
   Supports: marquee, ticker, grid, mosaic
   All sizing/color driven by CSS custom properties.
   ============================================================ */

/* ── Keyframes (marquee + ticker) ── */
@keyframes bn-scroll-left  { from { transform: translateX(0); }    to { transform: translateX(-50%); } }
@keyframes bn-scroll-right { from { transform: translateX(-50%); } to { transform: translateX(0); }    }

/* ── Shared wrapper ── */
.bn-sm-wrap {
    --bn-speed1:    32s;
    --bn-speed2:    28s;
    --bn-tile-w:    180px;
    --bn-tile-h:    88px;
    --bn-logo-max:  120px;
    --bn-gap:       2px;
    --bn-bg:        #ffffff;
    --bn-tile-bg:   #f5f5f3;
    --bn-tile-bgh:  #ffffff;
    --bn-tile-bdr:  rgba(0,0,0,0.08);
    --bn-tile-bdrh: #000333;
    --bn-accent:    #000333;
    --bn-grid-cols: 4;

    background:  var(--bn-bg);
    overflow:    hidden;
    width:       100%;
    font-family: 'Barlow', sans-serif;
}

/* ── Shared tile ── */
.bn-sm-tile {
    background:      var(--bn-tile-bg);
    border:          1px solid var(--bn-tile-bdr);
    display:         flex;
    flex-direction:  column;
    align-items:     center;
    justify-content: center;
    gap:             6px;
    cursor:          pointer;
    text-decoration: none;
    transition:      background 0.22s ease,
                     border-color 0.22s ease,
                     transform 0.22s cubic-bezier(0.22, 1, 0.36, 1);
    position:        relative;
}
.bn-sm-tile:hover {
    background:   var(--bn-tile-bgh);
    border-color: var(--bn-tile-bdrh);
    transform:    translateY(-3px);
    z-index:      3;
}

/* ── Logo image ── */
.bn-sm-logo {
    max-width:  var(--bn-logo-max);
    max-height: calc(var(--bn-tile-h) * 0.55);
    width:      auto;
    height:     auto;
    object-fit: contain;
    display:    block;
}

/* ── Logo treatments ── */
.bn-logo-grayscale .bn-sm-logo        { filter: grayscale(100%) opacity(0.5); transition: filter 0.3s ease; }
.bn-logo-grayscale .bn-sm-tile:hover .bn-sm-logo { filter: grayscale(0%) opacity(1); }
.bn-logo-opacity .bn-sm-logo          { opacity: 0.45; transition: opacity 0.3s ease; }
.bn-logo-opacity .bn-sm-tile:hover .bn-sm-logo   { opacity: 1; }
.bn-logo-color .bn-sm-logo            { filter: none; opacity: 1; }

/* ── Logo placeholder ── */
.bn-sm-logo-placeholder {
    width:         var(--bn-logo-max);
    height:        32px;
    background:    var(--bn-accent);
    opacity:       0.08;
    border-radius: 2px;
    display:       block;
    transition:    opacity 0.22s;
}
.bn-sm-tile:hover .bn-sm-logo-placeholder { opacity: 0.18; }

/* ── Sponsor name ── */
.bn-sm-name {
    font-family:    'Barlow Condensed', sans-serif;
    font-size:      11px;
    font-weight:    700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color:          var(--bn-accent);
    line-height:    1;
    transition:     opacity 0.22s ease, transform 0.22s cubic-bezier(0.22, 1, 0.36, 1);
}
.bn-show-name-hover .bn-sm-name { opacity: 0; transform: translateY(4px); }
.bn-show-name-hover .bn-sm-tile:hover .bn-sm-name { opacity: 1; transform: translateY(0); }
.bn-show-name-never .bn-sm-name { display: none; }

/* ============================================================
   MARQUEE MODE
   ============================================================ */

.bn-mode-marquee .bn-sm-tile,
.bn-mode-ticker .bn-sm-tile {
    width:      var(--bn-tile-w);
    height:     var(--bn-tile-h);
    flex-shrink: 0;
}

.bn-sm-marquee-wrap {
    position:       relative;
    display:        flex;
    flex-direction: column;
    gap:            var(--bn-gap);
    overflow:       hidden;
}
.bn-sm-marquee-wrap::before,
.bn-sm-marquee-wrap::after {
    content:        '';
    position:       absolute;
    top:            0;
    bottom:         0;
    width:          80px;
    z-index:        2;
    pointer-events: none;
}
.bn-sm-marquee-wrap::before { left:  0; background: linear-gradient(to right, var(--bn-bg), transparent); }
.bn-sm-marquee-wrap::after  { right: 0; background: linear-gradient(to left,  var(--bn-bg), transparent); }

.bn-sm-row   { overflow: hidden; width: 100%; }
.bn-sm-track { display: flex; gap: var(--bn-gap); width: max-content; will-change: transform; }

.bn-sm-track-left  { animation: bn-scroll-left  var(--bn-speed1) linear infinite; }
.bn-sm-track-right { animation: bn-scroll-right var(--bn-speed2) linear infinite; }
.bn-sm-marquee-wrap.bn-paused .bn-sm-track { animation-play-state: paused; }

/* ============================================================
   TICKER MODE
   ============================================================ */

.bn-mode-ticker .bn-sm-marquee-wrap::before,
.bn-mode-ticker .bn-sm-marquee-wrap::after { width: 60px; }

/* ============================================================
   GRID MODE
   ============================================================ */

.bn-mode-grid .bn-grid-wrap {
    display:               grid;
    grid-template-columns: repeat(var(--bn-grid-cols), minmax(0, 1fr));
    gap:                   var(--bn-gap);
}

.bn-mode-grid .bn-sm-tile {
    width:  100%;
    height: var(--bn-tile-h);
}

@media (max-width: 900px) {
    .bn-mode-grid .bn-grid-wrap {
        grid-template-columns: repeat(
            min(var(--bn-grid-cols), 3),
            minmax(0, 1fr)
        );
    }
}
@media (max-width: 600px) {
    .bn-mode-grid .bn-grid-wrap {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* ============================================================
   MOSAIC MODE
   ============================================================ */

.bn-mode-mosaic .bn-mosaic-wrap {
    display:               grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    grid-auto-rows:        var(--bn-tile-h);
    gap:                   var(--bn-gap);
    align-items:           stretch;
}

/* Tier 1 — headline, 2×2 */
.bn-mode-mosaic .bn-tier-1 {
    grid-column: span 2;
    grid-row:    span 2;
}
.bn-mode-mosaic .bn-tier-1 .bn-sm-logo {
    max-width:  calc(var(--bn-logo-max) * 1.5);
    max-height: calc(var(--bn-tile-h) * 1.1);
}

/* Tier 2 — standard, 1×1 */
.bn-mode-mosaic .bn-tier-2 {
    grid-column: span 1;
    grid-row:    span 1;
}

/* Tier 3 — supporting, 1×1, smaller logo */
.bn-mode-mosaic .bn-tier-3 {
    grid-column: span 1;
    grid-row:    span 1;
}
.bn-mode-mosaic .bn-tier-3 .bn-sm-logo {
    max-width:  calc(var(--bn-logo-max) * 0.65);
    max-height: calc(var(--bn-tile-h) * 0.45);
    opacity:    0.85;
}
.bn-mode-mosaic .bn-tier-3:hover .bn-sm-logo { opacity: 1; }

@media (max-width: 768px) {
    .bn-mode-mosaic .bn-mosaic-wrap {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
    .bn-mode-mosaic .bn-tier-1 { grid-column: span 2; grid-row: span 2; }
}
@media (max-width: 480px) {
    .bn-mode-mosaic .bn-mosaic-wrap {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .bn-mode-mosaic .bn-tier-1 { grid-column: span 2; grid-row: span 1; }
}

/* ============================================================
   REDUCED MOTION
   ============================================================ */

@media (prefers-reduced-motion: reduce) {
    .bn-sm-track { animation: none !important; }
}

/* ============================================================
   RESPONSIVE — shared
   ============================================================ */

@media (max-width: 768px) {
    .bn-sm-marquee-wrap::before,
    .bn-sm-marquee-wrap::after { width: 32px; }
}