/* ==========================================================================
   ARTHUB — dedicated dark cultural section
   ========================================================================== */
.section.arthub{
  position: relative;
  padding: 0;
  min-height: 780px;
  display:flex;
  align-items: center;
  background: var(--bg-sunken);
  overflow: hidden;
}
.arthub-media{ position: absolute; inset:0; }
.arthub-media img{ width:100%; height:100%; object-fit: cover; opacity: .5; }
.arthub-media::after{
  content:'';
  position: absolute; inset:0;
  background: linear-gradient(90deg, rgba(15,17,20,0.96) 0%, rgba(15,17,20,0.75) 42%, rgba(15,17,20,0.35) 75%, rgba(15,17,20,0.2) 100%);
}
.arthub .container{ position: relative; z-index: 1; padding: clamp(80px,10vw,140px) var(--gutter); }
.arthub-inner{ max-width: 720px; }
.arthub-inner .eyebrow{ color: var(--accent); }
.arthub-inner .eyebrow::before{ background: var(--accent); }

.arthub-stats{
  display:flex;
  gap: clamp(28px, 5vw, 56px);
  margin-top: 40px;
  padding-top: 28px;
  border-top: 1px solid var(--line-strong);
  flex-wrap: wrap;
}
.arthub-stats div{ display:flex; flex-direction: column; gap: 6px; }
.arthub-stats b{ font-size: clamp(28px,3vw,38px); color: var(--ink); }
.arthub-stats span{ font-size: 12.5px; color: var(--ink-faint); }

.arthub-modes{
  margin-top: 36px;
  display:grid;
  grid-template-columns: repeat(3, auto);
  gap: 12px 28px;
}
.arthub-modes li{
  font-size: 13.5px;
  color: var(--ink-dim);
  display:flex;
  align-items: center;
  gap: 10px;
}
.arthub-modes li span{
  font-weight: 700;
  color: var(--accent);
  font-size: 12px;
}
@media (max-width: 720px){
  .arthub-modes{ grid-template-columns: repeat(2, auto); }
}
@media (max-width: 480px){
  .arthub-modes{ grid-template-columns: 1fr; }
}

/* ==========================================================================
   RETAIL
   ========================================================================== */
.retail-grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(30px, 5vw, 70px);
  align-items: center;
  margin-bottom: clamp(40px, 5vw, 64px);
}
.retail-copy .lede{ color: var(--ink-dim); }
.retail-traffic{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  overflow: hidden;
}
.traffic-item{
  background: var(--bg-panel);
  padding: 26px 22px;
  display:flex;
  flex-direction: column;
  gap: 8px;
}
.traffic-item b{ font-size: clamp(26px, 2.6vw, 32px); color: var(--brass); }
.traffic-item span{ font-size: 12.5px; color: var(--ink-faint); line-height: 1.5; }

.retail-gallery{
  display:grid;
  grid-template-columns: 1.2fr 1fr 1fr;
  gap: 16px;
}
.retail-gallery img{
  width: 100%;
  height: 320px;
  object-fit: cover;
  border-radius: var(--radius-md);
}

@media (max-width: 900px){
  .retail-grid{ grid-template-columns: 1fr; }
  .retail-gallery{ grid-template-columns: 1fr 1fr; }
  .retail-gallery img:first-child{ grid-column: 1/-1; }
}
@media (max-width: 560px){
  .retail-traffic{ grid-template-columns: 1fr; }
  .retail-gallery{ grid-template-columns: 1fr; }
}