/*
 * BWS 2.0 Public Content Details
 * Shared detail surfaces for articles, blogs, movies/TV, music, and events.
 */

body.content-detail-page {
  min-height: 100vh;
  background:
    linear-gradient(180deg, rgba(5, 3, 2, .92), rgba(18, 8, 3, .98)),
    url("../assets/images/hero/hero_background_master.jpg") center top / cover fixed;
  color: #f5e6cc;
}

.content-shell {
  width: min(1380px, calc(100% - 48px));
  margin: 0 auto;
  padding: 116px 0 56px;
}

.content-source {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 30px;
  padding: 0 12px;
  margin-bottom: 18px;
  border: 1px solid rgba(210, 151, 54, .38);
  border-radius: 999px;
  color: #efbd61;
  background: rgba(210, 151, 54, .08);
  font: 700 11px/1 "Orbitron", sans-serif;
  text-transform: uppercase;
}

.content-source::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #c58a31;
  box-shadow: 0 0 10px rgba(197, 138, 49, .8);
}

.content-source.is-live {
  color: #b2f1c3;
  border-color: rgba(75, 208, 126, .4);
}

.content-source.is-live::before { background: #4bd07e; }

.content-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(320px, 440px);
  gap: 30px;
  padding: clamp(25px, 4vw, 46px);
  border: 1px solid rgba(210, 151, 54, .32);
  background: rgba(13, 7, 3, .82);
}

.content-kind {
  color: #dca84a;
  font: 700 12px/1 "Orbitron", sans-serif;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.content-title {
  margin: 14px 0;
  max-width: 900px;
  color: #fff1d8;
  font: 700 clamp(38px, 5.5vw, 64px)/1.03 "Rajdhani", sans-serif;
}

.content-summary {
  margin: 0 0 20px;
  max-width: 780px;
  color: rgba(244, 226, 194, .82);
  font: 400 17px/1.55 "Inter", sans-serif;
}

.content-meta,
.content-actions,
.content-tags,
.ticket-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}

.content-meta {
  margin-bottom: 22px;
  color: rgba(232, 205, 160, .75);
  font: 600 13px/1.2 "Inter", sans-serif;
}

.content-meta span + span::before {
  content: "/";
  margin-right: 10px;
  color: rgba(210, 151, 54, .46);
}

.content-button {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  min-height: 44px;
  padding: 0 18px;
  border: 1px solid rgba(210, 151, 54, .5);
  border-radius: 5px;
  color: #f8ddb0;
  background: rgba(36, 17, 7, .9);
  font: 700 14px/1 "Rajdhani", sans-serif;
  text-decoration: none;
  cursor: pointer;
}

.content-button.primary {
  color: #160a03;
  background: linear-gradient(135deg, #e2ac4d, #b97516);
}

.content-hero-media {
  position: relative;
  min-height: 340px;
  border: 1px solid rgba(210, 151, 54, .3);
  overflow: hidden;
}

.content-hero-media img {
  width: 100%;
  height: 100%;
  min-height: 340px;
  object-fit: cover;
}

.content-tags {
  margin-top: 22px;
}

.content-tag {
  padding: 7px 11px;
  border: 1px solid rgba(210, 151, 54, .26);
  border-radius: 999px;
  color: #dcb674;
  font: 600 12px "Inter", sans-serif;
}

.content-columns {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 330px;
  gap: 28px;
  margin-top: 28px;
}

.content-panel {
  padding: clamp(20px, 3vw, 34px);
  border: 1px solid rgba(210, 151, 54, .25);
  background: rgba(14, 7, 3, .77);
}

.content-panel h2 {
  margin: 0 0 18px;
  color: #f0c47a;
  font: 700 27px "Rajdhani", sans-serif;
}

.reading-body {
  color: rgba(251, 235, 207, .89);
  font: 400 17px/1.8 "Inter", sans-serif;
}

.reading-body p { margin: 0 0 20px; }

.reading-body h3 {
  margin: 32px 0 10px;
  color: #ffe8bf;
  font: 700 28px "Rajdhani", sans-serif;
}

.side-list,
.playlist,
.ticket-list,
.recommendation-rail {
  display: grid;
  gap: 12px;
}

.side-card,
.playlist-item,
.ticket-option,
.recommendation-card {
  padding: 14px;
  border: 1px solid rgba(210, 151, 54, .2);
  background: rgba(37, 18, 7, .48);
}

.side-card strong,
.playlist-item strong,
.recommendation-card strong {
  display: block;
  margin-bottom: 5px;
  color: #f5ddad;
}

.side-card small,
.playlist-item small,
.recommendation-card small {
  color: rgba(224, 198, 157, .68);
  font: 500 12px "Inter", sans-serif;
}

.video-stage {
  position: relative;
  aspect-ratio: 16 / 9;
  background: #070402;
  border: 1px solid rgba(210, 151, 54, .34);
  overflow: hidden;
}

.video-stage img,
.video-stage iframe {
  width: 100%;
  height: 100%;
  border: 0;
  object-fit: cover;
}

.video-play {
  position: absolute;
  inset: 50% auto auto 50%;
  transform: translate(-50%, -50%);
  width: 72px;
  height: 54px;
  border: 0;
  border-radius: 14px;
  color: #140801;
  background: #df9e31;
  font-size: 25px;
  cursor: pointer;
}

.media-detail-main {
  margin-top: 22px;
}

.music-player {
  display: grid;
  grid-template-columns: 250px minmax(0, 1fr);
  gap: 28px;
}

.album-cover {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  border: 1px solid rgba(210, 151, 54, .34);
}

.music-player audio {
  width: 100%;
  margin: 24px 0 18px;
}

.music-price {
  color: #f0c267;
  font: 700 34px "Rajdhani", sans-serif;
}

.ticket-checkout {
  position: sticky;
  top: 106px;
}

.event-utility-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin: 28px 0;
}

.event-utility {
  display: grid;
  gap: 5px;
  padding: 15px;
  border: 1px solid rgba(210,151,54,.25);
  background: rgba(37,18,7,.45);
  color: #f5dcac;
  text-decoration: none;
}

.event-utility strong {
  color: #efbd61;
  font: 700 18px "Rajdhani", sans-serif;
}

.event-utility small {
  color: rgba(224,198,157,.72);
}

.ticket-option {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 10px;
  align-items: center;
}

.ticket-option input {
  width: 58px;
  min-height: 38px;
  border: 1px solid rgba(210, 151, 54, .3);
  background: #120803;
  color: #f8e6c7;
  text-align: center;
}

.ticket-price {
  color: #f0bf60;
  font: 700 20px "Rajdhani", sans-serif;
}

.ticket-total {
  display: flex;
  justify-content: space-between;
  padding: 18px 0;
  margin-top: 16px;
  border-top: 1px solid rgba(210, 151, 54, .22);
  color: #f5ddb0;
  font: 700 21px "Rajdhani", sans-serif;
}

.feature-list {
  display: grid;
  gap: 10px;
  margin-top: 26px;
}

.feature-row {
  display: grid;
  gap: 5px;
  padding: 14px 16px;
  border: 1px solid rgba(210, 151, 54, .18);
  background: rgba(42, 20, 8, .4);
}

.feature-row strong {
  color: #f0bd63;
  font: 700 16px "Rajdhani", sans-serif;
}

.feature-row span {
  color: rgba(236, 214, 177, .8);
  font: 400 13px/1.4 "Inter", sans-serif;
}

.action-card {
  display: flex;
  flex-direction: column;
  gap: 14px;
  align-self: start;
}

.offer-price {
  color: #f1bd5b;
  font: 700 clamp(42px, 5vw, 54px)/1 "Rajdhani", sans-serif;
}

.profile-stat-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
  border: 1px solid rgba(210, 151, 54, .24);
  margin-top: 22px;
}

.profile-stat {
  display: grid;
  gap: 6px;
  padding: 20px;
  border-right: 1px solid rgba(210, 151, 54, .2);
  background: rgba(17, 8, 3, .8);
}

.profile-stat:last-child { border-right: 0; }

.profile-stat strong {
  color: #e8b457;
  font: 700 34px "Rajdhani", sans-serif;
}

.profile-stat span {
  color: rgba(231, 204, 159, .72);
  font: 600 12px "Inter", sans-serif;
  text-transform: uppercase;
}

.lesson-list {
  display: grid;
  border: 1px solid rgba(210, 151, 54, .18);
}

.lesson-row {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) 36px 36px;
  align-items: center;
  gap: 12px;
  padding: 15px;
  border-bottom: 1px solid rgba(210, 151, 54, .16);
}

.lesson-row:last-child { border-bottom: 0; }

.lesson-row b {
  color: #d99c38;
  font: 700 22px "Rajdhani", sans-serif;
}

.lesson-row strong {
  display: block;
  color: #f5deb1;
}

.lesson-row small {
  color: rgba(225, 199, 157, .65);
}

.lesson-row button {
  height: 34px;
  border: 1px solid rgba(210, 151, 54, .36);
  color: #f0bd63;
  background: transparent;
  cursor: pointer;
}

.comments-panel {
  margin-top: 28px;
}

.comment-preview {
  padding: 16px;
  border-top: 1px solid rgba(210, 151, 54, .18);
  color: rgba(244, 226, 194, .82);
}

.comment-preview strong {
  color: #f3ca83;
  margin-right: 8px;
}

.seo-sign {
  display: grid;
  grid-template-columns: 260px 1fr;
  align-items: center;
  gap: clamp(22px, 4vw, 46px);
  margin-top: 42px;
  padding: 28px;
  border-top: 1px solid rgba(210, 151, 54, .28);
  border-bottom: 1px solid rgba(210, 151, 54, .28);
  background: rgba(14, 7, 3, .7);
}

.seo-sign img {
  max-width: 100%;
  max-height: 160px;
  object-fit: contain;
}

.seo-sign h2 {
  margin: 0 0 8px;
  color: #ffe4b3;
  font: 700 34px "Rajdhani", sans-serif;
}

.seo-sign p {
  margin: 0;
  color: rgba(234, 210, 173, .82);
  font: 400 15px/1.55 "Inter", sans-serif;
}

@media (max-width: 920px) {
  .content-shell { width: min(100% - 24px, 720px); padding-top: 96px; }
  .content-hero,
  .content-columns,
  .music-player,
  .seo-sign { grid-template-columns: 1fr; }
  .ticket-checkout { position: static; }
  .content-hero-media { order: -1; min-height: 240px; }
  .content-hero-media img { min-height: 240px; }
  .seo-sign img { justify-self: center; }
  .profile-stat-grid { grid-template-columns: 1fr; }
  .event-utility-grid { grid-template-columns: 1fr; }
  .profile-stat { border-right: 0; border-bottom: 1px solid rgba(210, 151, 54, .2); }
}

/* ============================================================
   CONTEXTUAL TYPE STRIP + SKELETONS + TYPE ACCENTS
   ============================================================ */

/* Sticky breadcrumb / type indicator strip */
.content-type-strip {
  position: sticky;
  top: 64px;
  z-index: 80;
  background: rgba(8,4,2,.96);
  border-bottom: 1px solid rgba(210,151,54,.2);
  backdrop-filter: blur(10px);
}
.type-strip-inner {
  display: flex;
  align-items: center;
  gap: 14px;
  width: min(1380px, calc(100% - 48px));
  margin: 0 auto;
  padding: 9px 0;
  font: 600 11px/1 "Orbitron", sans-serif;
  text-transform: uppercase;
  letter-spacing: .08em;
}
.type-icon { font-size: 1.3em; line-height: 1; }
.type-strip-inner a {
  color: #dca84a;
  text-decoration: none;
}
.type-strip-inner a:hover { text-decoration: underline; }
.type-label {
  margin-left: auto;
  color: rgba(255,220,150,.4);
  font-size: 10px;
}

/* Skeleton loader (hides once JS fills #content-detail-root) */
.content-skeleton {
  display: grid;
  gap: 16px;
  padding: clamp(20px,3vw,34px);
  border: 1px solid rgba(210,151,54,.18);
  background: rgba(14,7,3,.77);
}
#content-detail-root:not(:empty) > .content-skeleton { display: none; }
@keyframes skel-pulse { 0%,100%{opacity:.4} 50%{opacity:.85} }
.skel-bar,.skel-title,.skel-img {
  border-radius: 4px;
  background: rgba(210,151,54,.15);
  animation: skel-pulse 1.7s ease-in-out infinite;
}
.skel-bar { height: 13px; }
.skel-bar.wide { width: 72%; }
.skel-bar.medium { width: 50%; }
.skel-bar.short { width: 28%; }
.skel-title { height: 44px; width: 80%; }
.skel-img { height: 260px; }

/* --- Per-type accent overrides --- */
/* Events — blue */
body[data-content-type="events"] .content-type-strip { border-bottom-color: rgba(80,180,255,.2); }
body[data-content-type="events"] .type-strip-inner a { color: #6ec4f0; }
body[data-content-type="events"] .content-hero { border-color: rgba(80,180,255,.25); }

/* Gigs — green */
body[data-content-type="gigs"] .content-type-strip { border-bottom-color: rgba(80,220,130,.2); }
body[data-content-type="gigs"] .type-strip-inner a { color: #5de88f; }
body[data-content-type="gigs"] .content-hero { border-color: rgba(80,220,130,.22); }
body[data-content-type="gigs"] .content-button.primary {
  background: linear-gradient(135deg,#3dc771,#1d8f4c);
  color: #fff;
}

/* Services — purple */
body[data-content-type="services"] .content-type-strip { border-bottom-color: rgba(170,100,255,.2); }
body[data-content-type="services"] .type-strip-inner a { color: #c080ff; }
body[data-content-type="services"] .content-hero { border-color: rgba(170,100,255,.22); }
body[data-content-type="services"] .content-button.primary {
  background: linear-gradient(135deg,#9040e0,#6010b0);
  color: #fff;
}

/* Discussions — orange */
body[data-content-type="discussions"] .content-type-strip { border-bottom-color: rgba(255,160,40,.2); }
body[data-content-type="discussions"] .type-strip-inner a { color: #ffb340; }
body[data-content-type="discussions"] .content-hero { border-color: rgba(255,160,40,.22); }
body[data-content-type="discussions"] .content-button.primary {
  background: linear-gradient(135deg,#e07c10,#b05200);
  color: #fff;
}

/* Grants / funding — gold */
body[data-content-type="grants"] .content-type-strip { border-bottom-color: rgba(255,210,40,.22); }
body[data-content-type="grants"] .type-strip-inner a { color: #ffd740; }
body[data-content-type="grants"] .content-hero { border-color: rgba(255,210,40,.25); }

/* Promos — red */
body[data-content-type="promos"] .content-type-strip { border-bottom-color: rgba(255,60,60,.2); }
body[data-content-type="promos"] .type-strip-inner a { color: #ff6060; }
body[data-content-type="promos"] .content-hero { border-color: rgba(255,60,60,.22); }
body[data-content-type="promos"] .content-button.primary {
  background: linear-gradient(135deg,#e03030,#a80000);
  color: #fff;
}
.promo-code-display {
  display: flex; align-items: center; gap: 12px;
  padding: 16px 20px; margin: 16px 0;
  border: 2px dashed rgba(255,60,60,.4); border-radius: 10px;
  background: rgba(80,8,8,.25);
}
.promo-code-display .code {
  font: 700 30px/1 "Orbitron", sans-serif;
  color: #ff6060; letter-spacing: .12em; flex: 1;
}
.promo-copy-btn {
  padding: 8px 14px; border: 1px solid rgba(255,60,60,.4); border-radius: 6px;
  background: rgba(255,60,60,.1); color: #ff6060; cursor: pointer;
  font: 700 11px "Orbitron", sans-serif; letter-spacing: .05em;
}
.promo-copy-btn:hover { background: rgba(255,60,60,.2); }
.savings-badge {
  display: inline-flex; align-items: center; justify-content: center;
  width: 68px; height: 68px; border-radius: 50%;
  background: linear-gradient(135deg,#ff3333,#cc0000);
  font: 700 20px/1 "Rajdhani", sans-serif; color: #fff;
  box-shadow: 0 4px 18px rgba(255,40,40,.4); flex-shrink: 0;
}

/* Articles / blogs — sky blue */
body[data-content-type="articles"] .content-type-strip,
body[data-content-type="blogs"] .content-type-strip { border-bottom-color: rgba(120,190,255,.18); }
body[data-content-type="articles"] .type-strip-inner a,
body[data-content-type="blogs"] .type-strip-inner a { color: #8ec8ff; }
.reading-progress {
  position: fixed; top: 0; left: 0; height: 3px; z-index: 9999;
  background: linear-gradient(90deg,#8ec8ff,#5090d0); width: 0%;
  transition: width .12s linear; pointer-events: none;
}
.article-byline {
  display: flex; align-items: center; gap: 12px; margin-bottom: 18px;
}
.byline-avatar {
  width: 42px; height: 42px; border-radius: 50%;
  background: rgba(142,200,255,.12); border: 2px solid rgba(142,200,255,.3);
  display: flex; align-items: center; justify-content: center;
  font: 700 20px "Rajdhani", sans-serif; color: #8ec8ff; flex-shrink: 0;
}
.byline-info strong { display: block; font: 600 14px "Inter", sans-serif; color: #fff; }
.byline-info small { color: rgba(142,200,255,.6); font-size: 12px; }

/* Videos / movies — violet */
body[data-content-type="movies"] .content-type-strip,
body[data-content-type="videos"] .content-type-strip { border-bottom-color: rgba(190,80,255,.2); }
body[data-content-type="movies"] .type-strip-inner a,
body[data-content-type="videos"] .type-strip-inner a { color: #cc60ff; }

/* Podcasts — teal */
body[data-content-type="podcasts"] .content-type-strip { border-bottom-color: rgba(60,230,190,.2); }
body[data-content-type="podcasts"] .type-strip-inner a { color: #40e8c0; }

/* Education / courses — amber */
body[data-content-type="education"] .content-type-strip,
body[data-content-type="courses"] .content-type-strip { border-bottom-color: rgba(255,160,20,.2); }
body[data-content-type="education"] .type-strip-inner a,
body[data-content-type="courses"] .type-strip-inner a { color: #ffa020; }
body[data-content-type="education"] .content-button.primary,
body[data-content-type="courses"] .content-button.primary {
  background: linear-gradient(135deg,#e09010,#b06000);
  color: #fff;
}
.edu-track-badge {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 12px; border-radius: 999px;
  background: rgba(255,160,20,.1); border: 1px solid rgba(255,160,20,.3);
  font: 700 11px "Orbitron", sans-serif; color: #ffa020;
  letter-spacing: .08em;
}
.course-progress-bar {
  display: flex; align-items: center; gap: 10px; margin: 16px 0;
}
.course-progress-bar .bar {
  flex: 1; height: 7px; border-radius: 999px;
  background: rgba(255,160,20,.12);
}
.course-progress-bar .fill {
  height: 100%; border-radius: 999px;
  background: linear-gradient(90deg,#ffa020,#ffd040);
  transition: width .4s ease;
}
.course-progress-bar span { font: 700 12px "Orbitron", sans-serif; color: #ffa020; }

/* Gig-specific chips */
.gig-status-bar { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 16px; }
.gig-chip {
  padding: 5px 13px; border-radius: 999px;
  font: 700 11px/1 "Orbitron", sans-serif; letter-spacing: .07em;
}
.gig-chip.open { background: rgba(80,220,130,.1); border: 1px solid rgba(80,220,130,.35); color: #5de88f; }
.gig-chip.pay { background: rgba(210,151,54,.1); border: 1px solid rgba(210,151,54,.3); color: #dca84a; }
.gig-chip.remote { background: rgba(120,120,255,.1); border: 1px solid rgba(120,120,255,.3); color: #aab0ff; }
.gig-pay-display {
  font: 700 42px/1 "Rajdhani", sans-serif; color: #5de88f; margin: 12px 0 6px;
}
.gig-pay-display small { font: 400 15px "Inter", sans-serif; color: rgba(93,232,143,.6); margin-left: 4px; }

/* Funding-specific */
.funding-amount-hero {
  text-align: center; padding: 24px; margin-bottom: 18px;
  border: 1px solid rgba(255,210,40,.28); border-radius: 10px;
  background: rgba(50,35,0,.3);
}
.funding-amount-hero .amount {
  display: block; font: 700 58px/1 "Rajdhani", sans-serif; color: #ffd740;
}
.funding-amount-hero small {
  font: 400 13px "Inter", sans-serif; color: rgba(255,210,40,.55);
}
.bbbb-meter { display: flex; align-items: center; gap: 10px; margin: 16px 0; }
.bbbb-meter .bar {
  flex: 1; height: 8px; border-radius: 999px;
  background: rgba(255,210,40,.12); overflow: hidden;
}
.bbbb-meter .fill {
  height: 100%; border-radius: 999px;
  background: linear-gradient(90deg,#ffd740,#e2ac4d);
}
.bbbb-meter span { font: 700 12px "Orbitron", sans-serif; color: #ffd740; white-space: nowrap; }

/* Event countdown */
.event-countdown { display: flex; gap: 12px; flex-wrap: wrap; margin: 16px 0; }
.countdown-unit {
  display: flex; flex-direction: column; align-items: center;
  padding: 10px 14px; min-width: 54px;
  border: 1px solid rgba(80,180,255,.25); border-radius: 7px;
  background: rgba(0,60,120,.15);
}
.countdown-unit strong { font: 700 30px/1 "Rajdhani", sans-serif; color: #a8dcf5; }
.countdown-unit small {
  font: 600 9px "Orbitron", sans-serif; color: rgba(168,220,245,.5);
  text-transform: uppercase; margin-top: 4px;
}

/* Thread / discussion reply box */
.thread-reply-box {
  display: flex; gap: 10px; align-items: flex-start;
  padding: 14px 16px; margin: 18px 0;
  border: 1px solid rgba(255,160,40,.18); border-radius: 8px;
  background: rgba(60,30,0,.18);
}
.thread-reply-box textarea {
  flex: 1; min-height: 60px; resize: none;
  background: transparent; border: none; outline: none;
  color: #f5e6cc; font: 400 14px "Inter", sans-serif;
}
.thread-reply-box textarea::placeholder { color: rgba(245,230,204,.3); }
.reaction-bar { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.reaction-btn {
  padding: 5px 11px; border-radius: 999px;
  border: 1px solid rgba(255,160,40,.2); background: rgba(255,160,40,.06);
  color: #ffb340; cursor: pointer; font: 600 13px "Inter", sans-serif;
  transition: background .15s;
}
.reaction-btn:hover { background: rgba(255,160,40,.15); }