/* ============================================================
   ZAlebs — Single Celebrity (person) page
   Reproduces the original zalebs.com/celebrities/<name>/ layout:
   flat content (no cards), purple in-page pill nav, tinted info box,
   horizontal trending cards, 208px related-celeb cards.
   Scoped to `.single-celebrity` so it never touches the archive/home.
   Loaded after style.css (see zalebs_assets) to override shared rules.
   ============================================================ */

/* --- purple header + breadcrumbs --- */
.single-celebrity .category__navigation { background: var(--z-purple); color: #fff; margin: 0; padding: 16px 0 32px; }
.single-celebrity .category__navigation-breadcrumbs { margin-bottom: 8px; padding: 0; font-size: 14px; }
.single-celebrity .category__navigation-breadcrumbs a { color: rgba(255,255,255,.85); font-weight: 600; }
.single-celebrity .category__navigation-box h1 { color: #fff; font-family: var(--z-display); font-weight: 800; font-size: 48px; line-height: 52px; letter-spacing: .5px; margin: 20px 0 24px; }

/* --- in-page pill nav (flex-container) — single rounded group, scrolls on overflow --- */
.single-celebrity .category__navigation-tab { display: flex; align-items: center; gap: 0; overflow-x: auto; }
.single-celebrity .category__navigation-tab a {
  background: rgba(255,255,255,.24); 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-celebrity .category__navigation-tab a:first-child { border-left-width: 1px; border-radius: 50px 0 0 50px; }
.single-celebrity .category__navigation-tab a:last-child { border-radius: 0 50px 50px 0; }
.single-celebrity .category__navigation-tab a:hover { background: rgba(0,0,0,.24); text-decoration: none; }

/* --- main columns --- */
.single-celebrity .category__main { margin-top: 0; margin-bottom: 40px; }

/* hero — flat, capped at 380px like the original (no card/shadow/radius) */
.single-celebrity .category__main-img-wrap { margin: 0 0 14px; border-radius: 0; box-shadow: none; overflow: hidden; }
.single-celebrity .category__main-img-wrap .category__main-img,
.single-celebrity .category__main-img { width: 100%; height: 380px; max-height: 380px; object-fit: cover; object-position: center top; display: block; border-radius: 0; }
.single-celebrity .category__main-placeholder { height: 380px; max-height: 380px; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, var(--z-purple), var(--z-purple-deep)); color: #fff; font-family: var(--z-display); font-size: 120px; letter-spacing: 4px; }

/* about + biography — flat text on the page (no white cards) */
.single-celebrity .category__main-description { background: none; box-shadow: none; border-radius: 0; padding: 0; margin: 0 0 15px; }
.single-celebrity .col-lg-7 .category__main-description { margin-right: 65px; }
.single-celebrity .category__main-description h2 { font-family: var(--z-display); font-weight: 800; font-size: 26px; letter-spacing: .5px; margin: 0 0 12px; color: var(--z-purple-deep); }
.single-celebrity .category__main-description h3 { font-weight: 800; font-size: 21px; margin: 1.3em 0 .4em; color: #1a1a1a; }
.single-celebrity .category__main-description h4 { font-weight: 700; font-size: 17px; margin: 1.2em 0 .4em; color: #1a1a1a; }
.single-celebrity .category__main-description p { color: rgba(0,0,0,.8); font-weight: 500; font-size: 16px; line-height: 24px; margin-bottom: 1rem; }
.single-celebrity .category__main-description a { color: var(--z-purple); font-weight: 700; }
.single-celebrity .category__main-description img { max-width: 100%; height: auto; border-radius: 4px; margin: 6px 0; }
.single-celebrity .category__main-description ul,
.single-celebrity .category__main-description ol { color: rgba(0,0,0,.8); font-weight: 500; line-height: 24px; margin: 0 0 1rem 1.1rem; }
.single-celebrity .category__main-description li { margin-bottom: .4rem; }

/* trending — horizontal cards (image left, text right) */
.single-celebrity .homepage-timeline > h2 { font-family: var(--z-display); font-weight: 800; font-size: 24px; letter-spacing: .5px; margin: 8px 0 16px; color: var(--z-purple-deep); }
.single-celebrity .homepage-timeline .post-card { display: flex; gap: 0; background: none; box-shadow: none; border-radius: 0; margin-bottom: 24px; }
.single-celebrity .homepage-timeline .post-card__img { flex: 0 0 300px; max-width: 300px; max-height: 200px; overflow: hidden; border-radius: 4px; }
.single-celebrity .homepage-timeline .post-card__img img { width: 100%; height: 100%; object-fit: cover; }
.single-celebrity .homepage-timeline .post-card__body { padding: 1rem; flex: auto; display: block; }
.single-celebrity .homepage-timeline .post-card__title { color: #000; font-weight: 800; font-size: 20px; line-height: 1.25; margin-bottom: 10px; }
.single-celebrity .homepage-timeline .post-card:hover .post-card__title { color: var(--z-purple); }
.single-celebrity .homepage-timeline .post-card__descr { color: rgba(0,0,0,.8); font-weight: 600; font-size: 14px; margin-bottom: 20px; }
.single-celebrity .homepage-timeline .post-card__date { color: var(--z-purple); font-weight: 700; font-size: 12px; }

/* right column — tinted purple info box (no per-row borders) */
.single-celebrity .category__right-column { position: sticky; top: calc(var(--z-header-h, 96px) + 10px); }
.single-celebrity .category__right-column-info { position: relative; padding: 18px 20px; margin-bottom: 16px; background: none; box-shadow: none; border-radius: 0; overflow: hidden; }
.single-celebrity .category__right-column-info::before { content: ""; position: absolute; inset: 0; background: var(--z-purple); opacity: .12; }
.single-celebrity .category__right-column-text { position: relative; z-index: 1; color: #000; opacity: .85; font-size: 16px; line-height: 20.5px; margin-bottom: 13px; padding: 0; border: 0; }
.single-celebrity .category__right-column-text:last-child { margin-bottom: 0; }
.single-celebrity .category__right-column-text > div { display: inline; font-size: 16px; text-transform: none; letter-spacing: 0; color: #000; margin: 0; }
.single-celebrity .category__right-column-text b { font-weight: 800; color: #000; font-size: 16px; }

/* related celebs — flat 208px cards with image + name + stories */
.single-celebrity .related-celebs { margin-top: 8px; }
.single-celebrity .related-celebs h2 { font-family: var(--z-display); font-weight: 800; font-size: 24px; letter-spacing: .5px; margin: 28px 0 16px; color: var(--z-purple-deep); }
.single-celebrity .related-celebs .tags-container__card { position: relative; background: none; box-shadow: none; border-radius: 0; overflow: visible; margin-bottom: 2rem; max-width: 208px; transition: none; }
.single-celebrity .related-celebs .tags-container__card:hover { transform: none; box-shadow: none; }
.single-celebrity .related-celebs .tags-container__image { aspect-ratio: auto; overflow: hidden; }
.single-celebrity .related-celebs .tags-container__image img { width: 100%; max-width: 208px; height: 200px; min-height: 200px; object-fit: cover; }
.single-celebrity .related-celebs .tags-container__placeholder { height: 200px; }
.single-celebrity .related-celebs .tags-container__meta { padding: 0; }
.single-celebrity .related-celebs .tags-container__name { font-weight: 700; font-size: 18px; line-height: 24px; margin-top: 9px; color: #1a1a1a; }
.single-celebrity .related-celebs .tags-container__stories { font-weight: 600; font-size: 14px; line-height: 20px; opacity: .8; color: #000; margin-top: 2px; }

/* --- responsive --- */
@media (max-width: 991px) {
  .single-celebrity .category__navigation-box h1 { font-size: 34px; line-height: 38px; }
  .single-celebrity .col-lg-7 .category__main-description { margin-right: 0; }
  .single-celebrity .category__right-column { position: static; margin-top: 24px; }
  .single-celebrity .category__main-img,
  .single-celebrity .category__main-img-wrap .category__main-img,
  .single-celebrity .category__main-placeholder { height: 300px; max-height: 300px; }
}
@media (max-width: 575px) {
  .single-celebrity .homepage-timeline .post-card { flex-direction: column; }
  .single-celebrity .homepage-timeline .post-card__img { flex-basis: auto; max-width: 100%; max-height: 220px; }
  .single-celebrity .category__main-img,
  .single-celebrity .category__main-placeholder { height: 240px; max-height: 240px; }
  .single-celebrity .category__main-placeholder { font-size: 84px; }
}
