/* =========================================================================
   MO Global — Shop by Brand
   Bold Barlow-Condensed brand tiles. Reuses :root tokens from style.css.
   Prefix: mo-sbb-*. Light + dark band aware. Respects reduced motion.
   ========================================================================= */

.mo-sbb__lede{
  align-self:flex-end;
  max-width:44ch;
}

/* --- Grid ----------------------------------------------------------------
   auto-fit gives 1 col on ~375px, 2 on tablet, 3+ on desktop for 6 brands. */
.mo-sbb__grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:clamp(.85rem,1.6vw,1.25rem);
}

/* --- Tile ----------------------------------------------------------------- */
.mo-sbb__tile{
  position:relative;
  display:flex;
  align-items:flex-end;
  min-height:clamp(190px,26vw,240px);
  padding:clamp(1.1rem,2.2vw,1.6rem);
  overflow:hidden;
  isolation:isolate;
  border-radius:var(--r-lg);
  border:1px solid var(--ctx-border);
  background:var(--ink-800);
  color:var(--on-ink);
  transition:transform var(--dur) var(--ease),
             box-shadow var(--dur) var(--ease),
             border-color var(--dur) var(--ease);
}
/* Dark band: tiles read cleanly against the ink section too. */
.mo-dark .mo-sbb__tile{
  border-color:var(--border-dark);
  background:var(--ink-700);
}

/* Background image variant */
.mo-sbb__media{
  position:absolute;
  inset:0;
  z-index:-2;
}
.mo-sbb__media img{
  width:100%;
  height:100%;
  object-fit:cover;
  transition:transform var(--dur-2) var(--ease);
}
.mo-sbb__scrim{
  position:absolute;
  inset:0;
  z-index:-1;
  background:linear-gradient(0deg,rgba(11,15,10,.92) 0%,rgba(11,15,10,.45) 55%,rgba(11,15,10,.15) 100%);
  transition:background var(--dur-2) var(--ease);
}

/* Monogram (no-image) watermark */
.mo-sbb__mono{
  position:absolute;
  z-index:-1;
  right:-.12em;
  top:-.28em;
  font-family:var(--font-impact);
  font-weight:400;
  line-height:1;
  font-size:clamp(7rem,15vw,11rem);
  color:rgba(244,245,239,.06);
  letter-spacing:-.03em;
  pointer-events:none;
  transition:color var(--dur-2) var(--ease),transform var(--dur-2) var(--ease);
}
.mo-dark .mo-sbb__mono{color:rgba(244,245,239,.05);}

/* Lime corner-wipe accent (matches .mo-cat language) */
.mo-sbb__tile::after{
  content:"";
  position:absolute;
  top:0;right:0;
  width:130%;height:130%;
  z-index:-1;
  background:var(--lime);
  opacity:.14;
  clip-path:polygon(100% 0,100% 0,100% 0);
  transition:clip-path var(--dur-2) var(--ease),opacity var(--dur-2) var(--ease);
}

/* Tile content */
.mo-sbb__body{
  position:relative;
  z-index:1;
  display:flex;
  flex-direction:column;
  width:100%;
}
.mo-sbb__name{
  font-family:var(--font-display);
  font-weight:800;
  text-transform:uppercase;
  line-height:.9;
  letter-spacing:-.01em;
  color:var(--on-ink);
  font-size:clamp(1.6rem,3.4vw,2.6rem);
  overflow-wrap:break-word;
}
.mo-sbb__count{
  display:inline-flex;
  align-items:center;
  gap:.4em;
  margin-top:.5rem;
  font-family:var(--font-body);
  font-weight:600;
  font-size:.72rem;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--on-ink-muted);
}
.mo-sbb__count i{color:var(--lime);font-size:.95em;}
.mo-sbb__shop{
  display:inline-flex;
  align-items:center;
  gap:.45em;
  margin-top:.9rem;
  font-family:var(--font-display);
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.03em;
  font-size:1.02rem;
  color:var(--lime);
}
.mo-sbb__shop i{transition:transform var(--dur) var(--ease);}

/* --- Hover / focus -------------------------------------------------------- */
.mo-sbb__tile:hover,
.mo-sbb__tile:focus-visible{
  transform:translateY(-6px);
  border-color:var(--lime);
  box-shadow:var(--shadow-lg);
}
.mo-sbb__tile:hover .mo-sbb__shop i,
.mo-sbb__tile:focus-visible .mo-sbb__shop i{transform:translateX(5px);}
.mo-sbb__tile:hover::after,
.mo-sbb__tile:focus-visible::after{
  clip-path:polygon(100% 0,0 0,100% 100%);
  opacity:.9;
}
.mo-sbb__tile:hover .mo-sbb__media img,
.mo-sbb__tile:focus-visible .mo-sbb__media img{transform:scale(1.06);}
.mo-sbb__tile:hover .mo-sbb__scrim,
.mo-sbb__tile:focus-visible .mo-sbb__scrim{
  background:linear-gradient(0deg,rgba(11,15,10,.95) 0%,rgba(11,15,10,.5) 60%,rgba(11,15,10,.2) 100%);
}
.mo-sbb__tile:hover .mo-sbb__mono,
.mo-sbb__tile:focus-visible .mo-sbb__mono{
  color:rgba(10,15,0,.18);
  transform:scale(1.04);
}

/* --- Responsive ----------------------------------------------------------- */
@media (max-width:600px){
  .mo-sbb__grid{grid-template-columns:1fr;}
  .mo-sbb__tile{min-height:160px;}
}

/* --- Reduced motion ------------------------------------------------------- */
@media (prefers-reduced-motion: reduce){
  .mo-sbb__tile,
  .mo-sbb__media img,
  .mo-sbb__scrim,
  .mo-sbb__mono,
  .mo-sbb__shop i,
  .mo-sbb__tile::after{transition:none;}
  .mo-sbb__tile:hover,
  .mo-sbb__tile:focus-visible{transform:none;}
  .mo-sbb__tile:hover .mo-sbb__media img,
  .mo-sbb__tile:focus-visible .mo-sbb__media img{transform:none;}
  .mo-sbb__tile:hover .mo-sbb__shop i,
  .mo-sbb__tile:focus-visible .mo-sbb__shop i{transform:none;}
  .mo-sbb__tile:hover .mo-sbb__mono,
  .mo-sbb__tile:focus-visible .mo-sbb__mono{transform:none;}
}