/* ============================================================
   ZAlebs — Streamers hub, single & landings
   Consistent with the site (purple brand, .tags-container cards,
   tinted info column). Loaded on streamer archive / single / taxo.
   ============================================================ */

/* ---------- Hub toolbar (filters + sort + stamp) ---------- */
.streamers-toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px; margin: 6px 0 20px; }
.streamers-toolbar__filters { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.streamers-search { position: relative; }
.streamers-search i { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--z-muted); font-size: 13px; }
.streamers-search input { height: 40px; border: 1px solid var(--z-line); border-radius: 22px; padding: 0 16px 0 34px; font-family: var(--z-sans); font-size: 14px; min-width: 220px; }
.streamers-filter { height: 40px; border: 1px solid var(--z-line); border-radius: 22px; padding: 0 34px 0 16px; background: #fff; color: var(--z-purple-deep); font-family: var(--z-sans); font-weight: 600; font-size: 14px; cursor: pointer;
  appearance: none; -webkit-appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'><path d='M2 4l4 4 4-4' fill='none' stroke='%236a327f' stroke-width='2'/></svg>");
  background-repeat: no-repeat; background-position: right 14px center; }
.streamers-search input:focus, .streamers-filter:focus { outline: none; border-color: var(--z-purple); }
.streamers-toolbar__meta { display: flex; align-items: center; gap: 16px; font-size: 13px; color: var(--z-muted); }
.streamers-count { font-weight: 700; color: var(--z-purple-deep); }
.streamers-updated { display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px; border-radius: 20px; background: var(--z-tint); color: var(--z-purple-deep); font-weight: 600; }

/* ---------- Hub table ---------- */
.streamers-table-wrap { overflow-x: auto; background: #fff; border: 1px solid var(--z-line); border-radius: var(--z-radius); box-shadow: var(--z-shadow); margin-bottom: 32px; }
.streamers-table { width: 100%; border-collapse: collapse; font-size: 14px; min-width: 860px; }
.streamers-table thead th { text-align: left; padding: 13px 14px; background: var(--z-purple); color: #fff; font-family: var(--z-sans); font-weight: 700; font-size: 12.5px; text-transform: uppercase; letter-spacing: .4px; white-space: nowrap; position: sticky; top: 0; }
.streamers-table tbody td { padding: 10px 14px; border-bottom: 1px solid var(--z-line); vertical-align: middle; }
.streamers-table tbody tr:last-child td { border-bottom: 0; }
.streamers-table tbody tr:hover { background: var(--z-tint); }
.streamers-table .zs-rank { width: 40px; color: var(--z-muted); font-weight: 700; }
.streamers-table .zs-av { width: 48px; }
.streamers-table .zs-av img { width: 40px; height: 40px; min-width: 40px; aspect-ratio: 1 / 1; border-radius: 8px; object-fit: cover; display: block; }
.streamers-table .zs-av__ph { width: 40px; height: 40px; border-radius: 8px; display: flex; align-items: center; justify-content: center; font-family: var(--z-display); font-size: 15px; color: #fff; background: linear-gradient(135deg, var(--z-purple), var(--z-purple-deep)); }
.streamers-table .zs-name a { font-weight: 700; color: var(--z-purple-deep); }
.streamers-table .zs-name a:hover { color: var(--z-purple); }
.streamers-table .zs-num { text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; }
.streamers-table .zs-socials { white-space: nowrap; }
.streamers-table .zs-socials a { color: var(--z-purple); margin-right: 9px; font-size: 15px; }
.streamers-table .zs-socials a:hover { color: var(--z-purple-deep); }
.zs-badge { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border-radius: 20px; background: #ffe9d6; color: #c0560f; font-weight: 800; font-size: 11px; text-transform: uppercase; letter-spacing: .4px; white-space: nowrap; }
.streamers-empty { text-align: center; padding: 28px; color: var(--z-muted); margin: 0; }

/* ---------- Hub cards ---------- */
.streamers-cards-title { font-family: var(--z-display); font-size: 24px; letter-spacing: .5px; color: var(--z-purple-deep); margin: 8px 0 16px; }
.streamers-hub .streamer-col, .tags-container .streamer-col { margin-bottom: 20px; }
.streamer-pcard { display: flex; gap: 16px; align-items: stretch; background: #fff; border: 1px solid var(--z-line); border-radius: var(--z-radius); box-shadow: var(--z-shadow); padding: 16px; transition: transform .15s ease, box-shadow .15s ease; height: 100%; }
.streamer-pcard:hover { transform: translateY(-3px); box-shadow: 0 10px 28px rgba(68,32,81,.16); }
.streamer-pcard__img { position: relative; flex: 0 0 108px; width: 108px; height: 108px; border-radius: 10px; overflow: hidden; background: var(--z-tint-2); }
.streamer-pcard__img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.streamer-pcard__ph { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; font-family: var(--z-display); font-size: 40px; letter-spacing: 1px; color: #fff; background: linear-gradient(135deg, var(--z-purple), var(--z-purple-deep)); }
.streamer-pcard__trending { position: absolute; top: 6px; left: 6px; width: 24px; height: 24px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: #ffe9d6; color: #c0560f; font-size: 11px; }
.streamer-pcard__info { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.streamer-pcard__top { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.streamer-pcard__name { font-family: var(--z-display); font-size: 22px; line-height: 1.05; letter-spacing: .4px; color: var(--z-purple-deep); }
.streamer-pcard:hover .streamer-pcard__name { color: var(--z-purple); }
.streamer-pcard__handle { font-weight: 700; font-size: 13px; color: var(--z-purple); }
.streamer-pcard__hr { border: 0; border-top: 1px solid var(--z-line); margin: 8px 0; }
.streamer-pcard__stats { display: grid; grid-template-columns: 1fr 1fr; gap: 3px 14px; font-size: 12.5px; color: var(--z-muted); }
.streamer-pcard__stat { display: flex; gap: 5px; min-width: 0; }
.streamer-pcard__stat strong { color: var(--z-purple-deep); font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 400px) { .streamer-pcard { flex-direction: column; } .streamer-pcard__img { width: 96px; height: 96px; flex-basis: 96px; } .streamer-pcard__stats { grid-template-columns: 1fr; } }

/* ---------- Browse-by landing links (hub → landings, crawlable) ---------- */
.streamers-browse { margin: 30px 0 6px; display: grid; gap: 14px; }
.streamers-browse__group { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: baseline; }
.streamers-browse__label { flex: 0 0 auto; font-weight: 800; font-size: 12.5px; text-transform: uppercase; letter-spacing: .5px; color: var(--z-purple-deep); min-width: 150px; }
.streamers-browse__links { display: flex; flex-wrap: wrap; gap: 8px; }
.streamers-browse__links a { display: inline-block; padding: 5px 12px; border: 1px solid var(--z-line); border-radius: 18px; font-size: 13px; font-weight: 600; color: var(--z-purple); background: #fff; }
.streamers-browse__links a:hover { background: var(--z-purple); color: #fff; border-color: var(--z-purple); }

/* ---------- Hub intro copy ---------- */
.streamers-intro { max-width: 820px; margin: 8px 0 10px; color: #444; font-size: 15px; line-height: 1.7; }
.streamers-intro--top { margin-bottom: 22px; }
.streamers-intro p { margin: 0 0 12px; }

/* ============================================================
   Single streamer
   ============================================================ */
.single-streamer .category__main { margin-top: 0; margin-bottom: 40px; }

/* Photos section + slider */
.single-streamer .streamer-photos { margin: 24px 0; }
.single-streamer .streamer-photos__title { font-family: var(--z-display); font-weight: 800; font-size: 24px; letter-spacing: .5px; margin: 0 0 14px; color: var(--z-purple-deep); }
.single-streamer .streamer-slider { position: relative; margin: 0 0 22px; border-radius: var(--z-radius); overflow: hidden; box-shadow: var(--z-shadow); background: #000; }
.single-streamer .streamer-slider__track { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.single-streamer .streamer-slider__track::-webkit-scrollbar { display: none; }
.single-streamer .streamer-slider__slide { flex: 0 0 100%; scroll-snap-align: center; margin: 0; display: flex; align-items: center; justify-content: center; height: 460px; background: #140a1e; }
.single-streamer .streamer-slider__slide img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; object-position: center; display: block; }
.single-streamer .streamer-slider__nav { position: absolute; top: 50%; transform: translateY(-50%); width: 42px; height: 42px; border: 0; border-radius: 50%; background: rgba(255,255,255,.85); color: var(--z-purple-deep); cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 15px; box-shadow: 0 4px 12px rgba(0,0,0,.25); transition: background .15s ease; z-index: 2; }
.single-streamer .streamer-slider__nav:hover { background: #fff; }
.single-streamer .streamer-slider__nav--prev { left: 12px; }
.single-streamer .streamer-slider__nav--next { right: 12px; }
.single-streamer .streamer-slider__dots { position: absolute; bottom: 12px; left: 0; right: 0; display: flex; justify-content: center; gap: 7px; z-index: 2; }
.single-streamer .streamer-slider__dot { width: 8px; height: 8px; border: 0; border-radius: 50%; background: rgba(255,255,255,.5); cursor: pointer; padding: 0; transition: background .15s ease, transform .15s ease; }
.single-streamer .streamer-slider__dot.is-active { background: #fff; transform: scale(1.25); }
.single-streamer .streamer-hero--noimg .streamer-hero__head { flex-basis: 100%; }
@media (max-width: 575px) { .single-streamer .streamer-slider__slide img { height: 300px; } }
.single-streamer .streamer-hero { display: flex; gap: 20px; align-items: center; margin: 0 0 22px; }
.single-streamer .streamer-hero__avatar { flex: 0 0 128px; }
.single-streamer .streamer-hero__avatar img { width: 128px; height: 128px; border-radius: 16px; object-fit: cover; display: block; box-shadow: var(--z-shadow); }
.single-streamer .streamer-hero__ph { width: 128px; height: 128px; border-radius: 16px; display: flex; align-items: center; justify-content: center; font-family: var(--z-display); font-size: 52px; color: #fff; background: linear-gradient(135deg, var(--z-purple), var(--z-purple-deep)); }
.single-streamer .streamer-hero__eyebrow { font-size: 12.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; color: var(--z-purple); margin-bottom: 6px; }
.single-streamer .streamer-hero__eyebrow a { color: var(--z-purple); }
.single-streamer .streamer-hero__intro { font-size: 16px; line-height: 1.6; color: #333; margin: 0 0 12px; }
.single-streamer .streamer-hero__cta { display: inline-flex; align-items: center; gap: 8px; background: var(--z-purple); color: #fff; border-radius: 24px; padding: 9px 18px; font-weight: 700; font-size: 14px; }
.single-streamer .streamer-hero__cta:hover { background: var(--z-purple-deep); }

/* Byline + E-E-A-T */
.single-streamer .streamer-byline { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 13px; color: var(--z-muted); margin: 0 0 16px; }
.single-streamer .streamer-byline span:first-child { font-weight: 700; color: var(--z-purple-deep); }
.single-streamer .streamer-byline__updated { display: inline-flex; align-items: center; gap: 5px; }
.single-streamer .streamer-byline .z-sep { color: var(--z-line); }

/* 18+ / responsible-gambling notice */
.single-streamer .streamer-rg { display: flex; gap: 9px; align-items: center; margin: 2px 0 20px; padding: 8px 12px; background: rgba(106,50,127,.05); border: 1px solid rgba(106,50,127,.12); }
.single-streamer .streamer-rg__badge { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 50%; background: rgba(106,50,127,.72); color: #fff; font-weight: 700; font-size: 10px; }
.single-streamer .streamer-rg p { margin: 0; font-size: 11px; line-height: 1.5; color: rgba(58,27,70,.58); }

/* Table of contents (jump links) */
.single-streamer .streamer-toc { background: var(--z-tint); border: 1px solid var(--z-line); border-radius: var(--z-radius); padding: 16px 20px; margin: 0 0 24px; }
.single-streamer .streamer-toc__title { font-family: var(--z-display); font-size: 16px; letter-spacing: .5px; text-transform: uppercase; color: var(--z-purple-deep); margin-bottom: 8px; }
.single-streamer .streamer-toc ul { list-style: none; margin: 0; padding: 0; columns: 2; column-gap: 26px; }
.single-streamer .streamer-toc li { margin: 4px 0; break-inside: avoid; }
.single-streamer .streamer-toc a { color: var(--z-purple); font-weight: 600; font-size: 14px; }
.single-streamer .streamer-toc a:hover { text-decoration: underline; }
.single-streamer .category__main-description h2[id] { scroll-margin-top: calc(var(--z-header-h, 96px) + 10px); }

.single-streamer .category__main-description { margin: 0 0 15px; }
.single-streamer .category__main-description h2 { font-family: var(--z-display); font-weight: 800; font-size: 26px; letter-spacing: .5px; margin: 1.1em 0 12px; color: var(--z-purple-deep); }
.single-streamer .category__main-description h3 { font-weight: 800; font-size: 20px; margin: 1.2em 0 .4em; color: #1a1a1a; }
.single-streamer .category__main-description p, .single-streamer .category__main-description li { color: rgba(0,0,0,.82); font-size: 16px; line-height: 1.7; }
.single-streamer .category__main-description a { color: var(--z-purple); font-weight: 700; }

.single-streamer .streamer-news { margin-top: 26px; }
.single-streamer .streamer-news > h2 { font-family: var(--z-display); font-weight: 800; font-size: 24px; letter-spacing: .5px; margin: 0 0 16px; color: var(--z-purple-deep); }

/* Instagram embeds */
.single-streamer .streamer-ig { margin: 26px 0; }
.single-streamer .streamer-ig > h2 { font-family: var(--z-display); font-weight: 800; font-size: 24px; letter-spacing: .5px; margin: 0 0 16px; color: var(--z-purple-deep); }
.single-streamer .streamer-ig__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; align-items: start; }
.single-streamer .streamer-ig__grid .instagram-media { min-width: 0 !important; margin: 0 !important; width: 100% !important; }
@media (max-width: 767px) { .single-streamer .streamer-ig__grid { grid-template-columns: 1fr; } }

/* Infobox (sticky, tinted — matches celeb right column feel) */
/* Infobox — celebrity right-column style: flat, tinted purple, no rounded corners */
.single-streamer .streamer-infobox { position: sticky; top: calc(var(--z-header-h, 96px) + 10px); background: none; border: 0; border-radius: 0; box-shadow: none; overflow: hidden; }
.single-streamer .streamer-infobox::before { content: ""; position: absolute; inset: 0; background: var(--z-purple); opacity: .12; z-index: 0; }
.single-streamer .streamer-infobox__head { position: relative; z-index: 1; padding: 18px 20px 14px; border-bottom: 1px solid rgba(68,32,81,.18); }
.single-streamer .streamer-infobox__kicker { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: 1.2px; color: var(--z-purple); margin-bottom: 4px; }
.single-streamer .streamer-infobox__title { font-family: var(--z-display); font-size: 26px; line-height: 1.05; letter-spacing: .5px; color: var(--z-purple-deep); }
.single-streamer .streamer-infobox__desc { font-size: 12.5px; line-height: 1.5; color: rgba(0,0,0,.72); margin: 8px 0 0; }
.single-streamer .streamer-infobox__updated { font-size: 11.5px; color: rgba(0,0,0,.6); margin-top: 10px; display: inline-flex; align-items: center; gap: 5px; }
.single-streamer .streamer-infobox__list { position: relative; z-index: 1; margin: 0; padding: 8px 20px; }
.single-streamer .streamer-infobox__row { display: flex; justify-content: space-between; gap: 16px; padding: 11px 0; border-bottom: 1px solid rgba(68,32,81,.12); }
.single-streamer .streamer-infobox__row:last-child { border-bottom: 0; }
.single-streamer .streamer-infobox__row dt { color: rgba(0,0,0,.6); font-size: 13.5px; margin: 0; }
.single-streamer .streamer-infobox__row dd { margin: 0; text-align: right; font-weight: 800; font-size: 14px; color: #000; }
.single-streamer .streamer-infobox__row dd a { color: var(--z-purple); }
.single-streamer .streamer-infobox__socials { position: relative; z-index: 1; display: flex; flex-wrap: wrap; gap: 10px; padding: 14px 20px 20px; }
.single-streamer .streamer-infobox__socials a { width: 38px; height: 38px; border-radius: 0; background: var(--z-purple); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-size: 16px; }
.single-streamer .streamer-infobox__socials a:hover { background: var(--z-purple-deep); }

/* In-page pill nav in the banner — ported from the celebrity template */
.single-streamer .category__navigation-tab { display: flex; align-items: center; gap: 0; overflow-x: auto; margin-top: 18px; scrollbar-width: none; }
.single-streamer .category__navigation-tab::-webkit-scrollbar { display: none; }
.single-streamer .category__navigation-tab a { background: rgba(255,255,255,.20); color: #fff; font-weight: 700; font-size: 14px; line-height: 24px; padding: 7px 18px; white-space: nowrap; border: 1px solid rgba(255,255,255,.18); border-left-width: 0; }
.single-streamer .category__navigation-tab a:first-child { border-left-width: 1px; border-radius: 50px 0 0 50px; }
.single-streamer .category__navigation-tab a:last-child { border-radius: 0 50px 50px 0; }
.single-streamer .category__navigation-tab a:hover { background: rgba(0,0,0,.24); text-decoration: none; }

/* Anchor offset so pill-nav jumps clear the sticky header */
.single-streamer #biography, .single-streamer #photos, .single-streamer #latestNews, .single-streamer #instagram, .single-streamer .category__main-description h2[id] { scroll-margin-top: calc(var(--z-header-h, 96px) + 16px); }

/* ---------- Responsive ---------- */
@media (max-width: 991px) {
  .single-streamer .streamer-infobox { position: relative; top: auto; margin-top: 0; }
}
@media (max-width: 767px) {
  .streamers-toolbar { flex-direction: column; align-items: stretch; gap: 10px; }
  .streamers-toolbar__filters { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; width: 100%; }
  .streamers-search { grid-column: 1 / -1; }
  .streamers-search input, .streamers-filter { width: 100%; min-width: 0; box-sizing: border-box; }
  .streamers-toolbar__meta { justify-content: space-between; width: 100%; }
}
@media (max-width: 767px) {
  /* Hero stays a row on mobile: photo left, intro text right. */
  .single-streamer .streamer-hero { flex-direction: row; align-items: center; text-align: left; gap: 14px; margin-bottom: 14px; }
  .single-streamer .streamer-hero__avatar { flex: 0 0 auto; }
  .single-streamer .streamer-hero__avatar img,
  .single-streamer .streamer-hero__ph { width: 92px; height: 92px; }
  .single-streamer .streamer-hero__ph { font-size: 34px; }
  .single-streamer .streamer-hero__head { flex: 1 1 auto; min-width: 0; width: auto; }
  .single-streamer .streamer-hero__eyebrow { margin-bottom: 5px; }
  .single-streamer .streamer-hero__intro { font-size: 14.5px; line-height: 1.5; margin-bottom: 10px; }
  .single-streamer .streamer-hero__cta { padding: 7px 14px; font-size: 13px; }
  /* Byline sits directly above the biography, left-aligned. */
  .single-streamer .streamer-byline { justify-content: flex-start; text-align: left; flex-wrap: wrap; margin-bottom: 14px; }
}
@media (max-width: 400px) {
  .streamers-toolbar__filters { grid-template-columns: 1fr; }
  .single-streamer .streamer-hero__avatar img,
  .single-streamer .streamer-hero__ph { width: 78px; height: 78px; }
}

/* ---- Home page: top streamers card band ---- */
.home-streamers { padding: 20px 0 10px; }
.home-streamers__head { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 18px; flex-wrap: wrap; }
.home-streamers__title { margin: 0; font-size: clamp(20px, 2.4vw, 28px); }
.home-streamers__more { color: var(--z-purple, #6A327F); font-weight: 700; text-decoration: none; white-space: nowrap; }
.home-streamers__more:hover { text-decoration: underline; }