/* ============================================================
   TrendsLive — public brand micro-site (/brands/{slug})
   ------------------------------------------------------------
   Lifted verbatim from the prototype's Brand Detail page
   (trendslive.classiebit.com/website/public/Brand Detail.html →
   its own <style> block), with every selector scoped to
   .tl-brand: the prototype's .card / .row / .stat / .trust /
   .about are generic names this site already uses for the event
   page and the homepage trust bar, and unscoped they would
   overwrite them.
   ============================================================ */

.tl-brand .banner { position:relative;height:300px;background-size:cover;background-position:center;margin-top:0 }
.tl-brand .banner::after { content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,10,10,.2),rgba(10,10,10,.88)) }
.tl-brand .brand-head { position:relative;margin-top:-90px;z-index:3;display:flex;align-items:flex-end;gap:24px;flex-wrap:wrap }
.tl-brand .brand-logo { flex:none;width:140px;height:140px;border-radius:50%;background:#000;border:3px solid var(--tl-bg);box-shadow:0 0 0 1px var(--tl-border-strong);display:grid;place-items:center;color:var(--tl-yellow-ink);font-family:var(--tl-font-display);font-size:30px;text-align:center;line-height:.9 }
.tl-brand .brand-info { flex:1;min-width:260px;padding-bottom:6px }
.tl-brand .brand-name { display:flex;align-items:center;gap:10px;font-family:var(--tl-font-app);font-weight:800;font-size:34px;letter-spacing:-.02em }
.tl-brand .verified { display:inline-flex;align-items:center;gap:5px;font-family:var(--tl-font-mono);font-size:9px;letter-spacing:.14em;text-transform:uppercase;color:var(--tl-success);background:var(--tl-success-bg);padding:4px 9px;border-radius:var(--tl-r-pill) }
.tl-brand .brand-desc { color:var(--tl-fg-2);font-size:15px;margin-top:8px }
.tl-brand .brand-loc { display:flex;gap:18px;flex-wrap:wrap;margin-top:9px;font-size:13px;color:var(--tl-fg-3) }
.tl-brand .brand-loc span { display:inline-flex;align-items:center;gap:7px }
.tl-brand .socials { display:flex;gap:10px;margin-top:14px }
.tl-brand .soc { width:36px;height:36px;border-radius:50%;border:1px solid var(--tl-border);display:grid;place-items:center;color:var(--tl-fg-2) }
.tl-brand .soc:hover { border-color:var(--tl-border-yellow);color:var(--tl-yellow-ink) }
.tl-brand .brand-actions { display:flex;flex-direction:column;align-items:flex-end;gap:8px;padding-bottom:8px }
.tl-brand .brand-actions .row { display:flex;gap:10px }
.tl-brand .foll-count { font-family:var(--tl-font-mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--tl-fg-3) }
.tl-brand .foll-count b { color:var(--tl-fg);font-weight:700 }
@media(max-width:700px) {
  .tl-brand .brand-name { font-size:26px }
  .tl-brand .brand-logo { width:104px;height:104px;font-size:22px;margin-top:-70px }
  .tl-brand .brand-actions { align-items:flex-start;width:100% }
}
.tl-brand .trust-row { display:flex;flex-wrap:wrap;gap:9px;margin-top:14px }
.tl-brand .trust { display:inline-flex;align-items:center;gap:8px;background:var(--tl-surface-2);border:1px solid var(--tl-border);border-radius:var(--tl-r-pill);padding:7px 13px 7px 10px }
.tl-brand .trust svg { flex:none;width:15px;height:15px;color:var(--tl-yellow-ink) }
.tl-brand .trust.verified-pill svg { color:var(--tl-success) }
.tl-brand .trust b { font-family:var(--tl-font-app);font-weight:800;font-size:14px;line-height:1 }
.tl-brand .trust .tl-l { font-family:var(--tl-font-mono);font-size:8.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--tl-fg-3);line-height:1 }
.tl-brand .trust .tcol { display:flex;flex-direction:column;gap:3px }
.tl-brand .trust.verified-pill { border-color:color-mix(in srgb,var(--tl-success) 40%,transparent);background:var(--tl-success-bg) }
.tl-brand .trust.verified-pill .vtxt { font-family:var(--tl-font-mono);font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--tl-success);font-weight:700 }
@media(max-width:700px) {
  .tl-brand .trust .tl-l { font-size:8px }
}
.tl-brand .stats { display:grid;grid-template-columns:repeat(5,1fr);gap:1px;background:var(--tl-border);border:1px solid var(--tl-border);border-radius:var(--tl-r-lg);overflow:hidden;margin:28px 0 }
.tl-brand .stat { background:var(--tl-surface-1);padding:20px;display:flex;align-items:center;gap:14px }
.tl-brand .stat-ico { flex:none;width:34px;height:34px;color:var(--tl-yellow-ink) }
.tl-brand .stat .v { font-family:var(--tl-font-app);font-weight:800;font-size:24px;line-height:1;display:flex;align-items:center;gap:6px }
.tl-brand .stat .v .star { color:var(--tl-yellow-ink) }
.tl-brand .stat .l { font-family:var(--tl-font-mono);font-size:9px;letter-spacing:.13em;text-transform:uppercase;color:var(--tl-fg-3);margin-top:6px }
@media(max-width:900px) {
  .tl-brand .stats { grid-template-columns:1fr 1fr 1fr }
}
@media(max-width:560px) {
  .tl-brand .stats { grid-template-columns:1fr 1fr }
}
.tl-brand .row { display:grid;gap:26px;align-items:stretch;margin-top:26px }
.tl-brand .row.even { grid-template-columns:1fr 1fr }
.tl-brand .row.aside { grid-template-columns:1fr 372px }
@media(max-width:980px) {
  .tl-brand .row.even,
.tl-brand .row.aside { grid-template-columns:1fr }
}
.tl-brand .card { background:var(--tl-surface-1);border:1px solid var(--tl-border);border-radius:var(--tl-r-lg);padding:24px }
.tl-brand .sec-h { font-family:var(--tl-font-app);font-weight:800;font-size:20px;margin-bottom:16px;display:flex;justify-content:space-between;align-items:center;gap:12px }
.tl-brand .sec-h .lk { font-family:var(--tl-font-mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--tl-yellow-ink);white-space:nowrap }
.tl-brand .sec-h .lk:hover { color:var(--tl-yellow-soft) }
.tl-brand .sec-title { font-family:var(--tl-font-app);font-weight:800;font-size:22px;display:flex;align-items:center;gap:10px }
.tl-brand .sec-title .ct { font-family:var(--tl-font-mono);font-size:12px;color:var(--tl-fg-3);letter-spacing:.08em;font-weight:500 }
.tl-brand .sec-bar { display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;margin-bottom:18px }
.tl-brand .about p { color:var(--tl-fg-2);line-height:1.68;font-size:14.5px;margin-bottom:12px }
.tl-brand .about .lead b { color:var(--tl-fg) }
.tl-brand .about .punch { color:var(--tl-fg);font-weight:700;font-size:15px }
.tl-brand .about-meta { display:flex;flex-wrap:wrap;gap:10px 26px;margin:18px 0 4px;padding-top:16px;border-top:1px solid var(--tl-border) }
.tl-brand .am { display:flex;flex-direction:column;gap:3px }
.tl-brand .am .k { font-family:var(--tl-font-mono);font-size:8.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--tl-fg-3) }
.tl-brand .am .v { font-size:13px;color:var(--tl-fg-2) }
.tl-brand .video-card { padding:24px;display:flex;flex-direction:column }
.tl-brand .video-wrap { position:relative;flex:1;min-height:280px;border-radius:var(--tl-r-md);overflow:hidden;background-size:cover;background-position:center;cursor:pointer }
.tl-brand .video-wrap::after { content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,10,10,.15),rgba(10,10,10,.55)) }
.tl-brand .play-btn { position:absolute;inset:0;margin:auto;width:74px;height:74px;border-radius:50%;background:rgba(255,255,255,.92);display:grid;place-items:center;z-index:2;transition:.15s;box-shadow:0 8px 30px rgba(0,0,0,.5) }
.tl-brand .video-wrap:hover .play-btn { transform:scale(1.06);background:#fff }
.tl-brand .play-btn svg { width:26px;height:26px;color:#161920;margin-left:3px }
.tl-brand .video-dur { position:absolute;left:12px;bottom:12px;z-index:2;background:rgba(0,0,0,.7);backdrop-filter:blur(4px);border-radius:var(--tl-r-sm);padding:5px 10px;font-family:var(--tl-font-mono);font-size:11px;letter-spacing:.06em;color:#fff }
.tl-brand .grid-ev { display:grid;grid-template-columns:repeat(4,1fr);gap:16px }
@media(max-width:900px) {
  .tl-brand .grid-ev { grid-template-columns:1fr 1fr }
}
@media(max-width:520px) {
  .tl-brand .grid-ev { grid-template-columns:1fr }
}
.tl-brand .gallery { display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:150px;gap:12px }
.tl-brand .gphoto { position:relative;border-radius:var(--tl-r-md);overflow:hidden;background-size:cover;background-position:center;background-color:var(--tl-surface-2);cursor:pointer;transition:.18s }
.tl-brand .gphoto::after { content:"";position:absolute;inset:0;background:rgba(10,10,10,0);transition:.18s }
.tl-brand .gphoto:hover { transform:scale(.985) }
.tl-brand .gphoto:hover::after { background:rgba(10,10,10,.18) }
.tl-brand .gphoto.wide { grid-column:span 2 }
.tl-brand .gphoto.tall { grid-row:span 2 }
.tl-brand .gphoto .gcap { position:absolute;left:11px;bottom:10px;z-index:2;font-family:var(--tl-font-mono);font-size:9px;letter-spacing:.1em;text-transform:uppercase;color:#fff;background:rgba(0,0,0,.5);backdrop-filter:blur(4px);padding:4px 9px;border-radius:var(--tl-r-sm);opacity:0;transition:.18s }
.tl-brand .gphoto:hover .gcap { opacity:1 }
.tl-brand .gphoto.more { display:grid;place-items:center;border:1px solid var(--tl-border-strong) }
.tl-brand .gphoto.more .mc { position:relative;z-index:2;text-align:center }
.tl-brand .gphoto.more .mc b { display:block;font-family:var(--tl-font-app);font-weight:800;font-size:24px;color:#fff }
.tl-brand .gphoto.more .mc span { font-family:var(--tl-font-mono);font-size:9px;letter-spacing:.12em;text-transform:uppercase;color:var(--tl-fg-2) }
@media(max-width:760px) {
  .tl-brand .gallery { grid-template-columns:repeat(2,1fr);grid-auto-rows:130px }
  .tl-brand .gphoto.wide { grid-column:span 2 }
  .tl-brand .gphoto.tall { grid-row:span 1 }
}
.tl-brand .grid-past { display:grid;grid-template-columns:repeat(2,1fr);gap:16px }
.tl-brand .pe-card { border-radius:var(--tl-r-lg);overflow:hidden;border:1px solid var(--tl-border);background:var(--tl-surface-1) }
.tl-brand .pe-img { height:130px;background-size:cover;background-position:center;position:relative }
.tl-brand .pe-img::after { content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,10,10,.1),rgba(10,10,10,.55)) }
.tl-brand .sold-badge { position:absolute;top:10px;left:10px;z-index:2;background:var(--tl-yellow);color:#161920;border-radius:var(--tl-r-sm);padding:5px 9px;font-family:var(--tl-font-mono);font-size:8.5px;letter-spacing:.14em;text-transform:uppercase;font-weight:700 }
.tl-brand .pe-b { padding:14px 15px 16px }
.tl-brand .pe-n { font-family:var(--tl-font-app);font-weight:700;font-size:14px }
.tl-brand .pe-meta { font-size:12.5px;color:var(--tl-fg-3);margin-top:5px;line-height:1.5 }
.tl-brand .pe-attend { display:flex;align-items:center;gap:7px;margin-top:10px;padding-top:10px;border-top:1px solid var(--tl-border);font-family:var(--tl-font-mono);font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--tl-fg-2) }
.tl-brand .pe-attend svg { width:14px;height:14px;color:var(--tl-yellow-ink) }
@media(max-width:520px) {
  .tl-brand .grid-past { grid-template-columns:1fr }
}

/* Additions this build needs that the prototype's mock data never showed:
   an empty upcoming list, and a real <video> element in place of its
   click-to-play poster (the brand's uploaded mp4 plays inline). */
.tl-brand .tl-brand-empty {
  padding: 40px 24px;
  text-align: center;
  border: 1px dashed var(--tl-border);
  border-radius: var(--tl-r-lg);
  background: var(--tl-surface-1);
  color: var(--tl-fg-3);
  font-size: 14px;
}
.tl-brand .tl-brand-video {
  width: 100%;
  flex: 1;
  min-height: 240px;
  border-radius: var(--tl-r-md);
  background: #000;
  object-fit: cover;
}
.tl-brand .about .tl-prose { font-size: 15px; }