/* ============================================
   SKILLS ISSUE — Content Pages Stylesheet
   Shared styles for Read, Watch, Listen, About.
   ============================================
   Sections:
     1.  Page Header
     2.  Content Grid
     3.  Content Cards
     4.  Empty / Coming Soon State
     5.  About Page
     6.  Platform Links
   ============================================ */


/* ============================================
   1. PAGE HEADER
   ============================================ */

.page-header {
  border-bottom: 1px solid var(--border);
  padding:       3rem var(--page-padding) 2rem;
  position:      relative;
  overflow:      hidden;
}

/* Accent stripe — consistent with nav */
.page-header::before {
  content:    '';
  position:   absolute;
  top:        0;
  left:       0;
  right:      0;
  height:     3px;
  background: var(--accent);
}

.page-header-inner {
  max-width: 1400px;
  margin:    0 auto;
  display:   flex;
  align-items: flex-end;
  justify-content: space-between;
  gap:       2rem;
  flex-wrap: wrap;
}

.page-header-left { flex: 1; }

.page-eyebrow {
  font-family:    var(--font-mono);
  font-size:      0.6rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color:          var(--accent);
  margin-bottom:  0.75rem;
  display:        block;
}

.page-title {
  font-family:    var(--font-display);
  font-size:      clamp(2.5rem, 6vw, 4.5rem);
  font-weight:    900;
  letter-spacing: -0.03em;
  text-transform: uppercase;
  color:          var(--text-primary);
  line-height:    0.95;
}

.page-description {
  font-size:   0.9rem;
  color:       var(--text-secondary);
  font-style:  italic;
  line-height: 1.6;
  max-width:   480px;
  margin-top:  1rem;
}

.page-header-right {
  text-align: right;
}

.page-count {
  font-family:    var(--font-mono);
  font-size:      0.62rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color:          var(--text-faint);
}

.page-count strong {
  font-size:   1.8rem;
  font-weight: 900;
  font-family: var(--font-display);
  color:       var(--bg-subtle);
  display:     block;
  line-height: 1;
  letter-spacing: -0.04em;
}


/* ============================================
   2. CONTENT GRID
   ============================================ */

.page-main {
  max-width: 1400px;
  margin:    0 auto;
  padding:   2.5rem var(--page-padding) 5rem;
}

.content-grid {
  display:               grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap:                   1px;
  background:            var(--border);
  border:                1px solid var(--border);
}

/* List-style layout for podcast episodes */
.content-grid.list-layout {
  grid-template-columns: 1fr;
}


/* ============================================
   3. CONTENT CARDS
   ============================================ */

.content-card {
  background:     var(--bg-surface);
  padding:        1.75rem;
  display:        flex;
  flex-direction: column;
  gap:            0.5rem;
  text-decoration: none;
  color:          inherit;
  transition:     background 0.2s;
  min-height:     220px;
  cursor:         pointer;
}

.content-card:hover { background: var(--bg-subtle); }

.content-card.coming-soon {
  opacity:        0.5;
  cursor:         default;
  pointer-events: none;
}

/* Type eyebrow */
.content-card-eyebrow {
  font-family:    var(--font-mono);
  font-size:      0.56rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color:          var(--text-faint);
  display:        flex;
  align-items:    center;
  justify-content: space-between;
  margin-bottom:  0.25rem;
}

.content-card-status {
  font-family:    var(--font-mono);
  font-size:      0.52rem;
  letter-spacing: 0.12em;
  color:          var(--text-faint);
  border:         1px solid var(--border);
  padding:        0.1rem 0.45rem;
  border-radius:  999px;
}

/* Title */
.content-card-title {
  font-family:    var(--font-display);
  font-size:      1.15rem;
  font-weight:    900;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  color:          var(--text-primary);
  line-height:    1.1;
}

/* Tagline */
.content-card-tagline {
  font-size:   0.82rem;
  color:       var(--text-secondary);
  font-style:  italic;
  line-height: 1.5;
}

/* Tags */
.content-card-tags {
  display:   flex;
  flex-wrap: wrap;
  gap:       0.3rem;
  margin-top: 0.25rem;
}

.content-card-tag {
  font-family:    var(--font-mono);
  font-size:      0.54rem;
  letter-spacing: 0.08em;
  padding:        0.1rem 0.45rem;
  border:         1px solid var(--border);
  color:          var(--text-faint);
  border-radius:  999px;
}

/* Footer row */
.content-card-footer {
  display:     flex;
  align-items: center;
  justify-content: space-between;
  margin-top:  auto;
  padding-top: 1rem;
  border-top:  1px solid var(--border);
  font-family: var(--font-mono);
  font-size:   0.56rem;
  letter-spacing: 0.1em;
  color:       var(--text-faint);
}

.content-card-cta {
  color:       var(--accent);
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

/* Podcast — list layout override */
.content-grid.list-layout .content-card {
  min-height:     auto;
  flex-direction: row;
  align-items:    flex-start;
  gap:            1.5rem;
}

.content-grid.list-layout .content-card-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.episode-number {
  font-family:    var(--font-display);
  font-size:      2rem;
  font-weight:    900;
  color:          var(--bg-hover);
  letter-spacing: -0.04em;
  line-height:    1;
  flex-shrink:    0;
  width:          3rem;
  padding-top:    0.15rem;
}

/* Video cards — thumbnail placeholder */
.video-thumb {
  width:         100%;
  aspect-ratio:  16 / 9;
  background:    var(--bg-subtle);
  border:        1px solid var(--border);
  display:       flex;
  align-items:   center;
  justify-content: center;
  margin-bottom: 0.75rem;
  overflow:      hidden;
  position:      relative;
  flex-shrink:   0;
}

.video-thumb img {
  width:      100%;
  height:     100%;
  object-fit: cover;
}

.video-thumb-placeholder {
  font-family:    var(--font-mono);
  font-size:      0.58rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color:          var(--text-faint);
}

.video-play-icon {
  position:      absolute;
  width:         40px;
  height:        40px;
  background:    var(--accent);
  border-radius: 50%;
  display:       flex;
  align-items:   center;
  justify-content: center;
  opacity:       0;
  transition:    opacity 0.2s;
}

.content-card:hover .video-play-icon { opacity: 1; }

.video-play-icon::after {
  content:      '';
  width:        0;
  height:       0;
  border-top:   6px solid transparent;
  border-bottom: 6px solid transparent;
  border-left:  10px solid #0f0f0f;
  margin-left:  2px;
}


/* ============================================
   4. EMPTY / COMING SOON STATE
   ============================================ */

.page-coming-soon {
  border:      1px solid var(--border);
  background:  var(--bg-surface);
  padding:     5rem var(--page-padding);
  text-align:  center;
  position:    relative;
  overflow:    hidden;
}

/* Large ghost text behind */
.page-coming-soon::before {
  content:        attr(data-ghost);
  position:       absolute;
  top:            50%;
  left:           50%;
  transform:      translate(-50%, -50%);
  font-family:    var(--font-display);
  font-size:      clamp(4rem, 15vw, 12rem);
  font-weight:    900;
  letter-spacing: -0.04em;
  text-transform: uppercase;
  color:          var(--bg-subtle);
  pointer-events: none;
  white-space:    nowrap;
  line-height:    1;
}

.coming-soon-eyebrow {
  font-family:    var(--font-mono);
  font-size:      0.6rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color:          var(--accent);
  margin-bottom:  1.25rem;
  display:        block;
}

.coming-soon-title {
  font-family:    var(--font-display);
  font-size:      clamp(1.5rem, 3vw, 2.25rem);
  font-weight:    900;
  letter-spacing: -0.025em;
  text-transform: uppercase;
  color:          var(--text-primary);
  margin-bottom:  0.75rem;
  position:       relative;
}

.coming-soon-body {
  font-size:   0.9rem;
  color:       var(--text-secondary);
  font-style:  italic;
  line-height: 1.6;
  max-width:   440px;
  margin:      0 auto 2rem;
  position:    relative;
}

/* Platform link buttons — used on watch/listen */
.platform-links {
  display:         flex;
  justify-content: center;
  flex-wrap:       wrap;
  gap:             0.5rem;
  position:        relative;
}

.platform-link {
  font-family:    var(--font-mono);
  font-size:      0.62rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding:        0.55rem 1.1rem;
  border:         1px solid var(--border-strong);
  color:          var(--text-secondary);
  text-decoration: none;
  transition:     all 0.2s;
  display:        inline-flex;
  align-items:    center;
  gap:            0.5rem;
}

.platform-link:hover {
  border-color: var(--accent);
  color:        var(--accent);
}

.platform-link.disabled {
  opacity:        0.35;
  pointer-events: none;
}


/* ============================================
   5. ABOUT PAGE
   ============================================ */

.about-layout {
  display:   grid;
  grid-template-columns: 2fr 1fr;
  gap:       4rem;
  max-width: 1000px;
}

@media (max-width: 768px) {
  .about-layout {
    grid-template-columns: 1fr;
    gap:                   2.5rem;
  }
}

.about-body h2 {
  font-family:    var(--font-display);
  font-size:      1rem;
  font-weight:    900;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  color:          var(--text-primary);
  margin-bottom:  0.75rem;
  margin-top:     2rem;
  padding-top:    2rem;
  border-top:     1px solid var(--border);
}

.about-body h2:first-child {
  margin-top:  0;
  padding-top: 0;
  border-top:  none;
}

.about-body p {
  font-size:     0.9rem;
  color:         var(--text-secondary);
  line-height:   1.75;
  margin-bottom: 1rem;
}

.about-body p:last-child { margin-bottom: 0; }

.about-body a {
  color:      var(--accent);
  transition: opacity 0.2s;
}

.about-body a:hover { opacity: 0.75; }

/* Sidebar */
.about-sidebar {
  display:        flex;
  flex-direction: column;
  gap:            2rem;
}

.sidebar-block {
  border:  1px solid var(--border);
  padding: 1.5rem;
}

.sidebar-block-label {
  font-family:    var(--font-mono);
  font-size:      0.58rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color:          var(--accent);
  margin-bottom:  1rem;
  display:        block;
}

.sidebar-block-title {
  font-family:    var(--font-display);
  font-size:      0.95rem;
  font-weight:    700;
  letter-spacing: -0.01em;
  color:          var(--text-primary);
  margin-bottom:  0.5rem;
}

.sidebar-block-body {
  font-size:   0.8rem;
  color:       var(--text-secondary);
  font-style:  italic;
  line-height: 1.6;
}

/* "Now" block — what's shipping */
.now-list {
  list-style: none;
  display:    flex;
  flex-direction: column;
  gap:        0.5rem;
  margin-top: 0.5rem;
}

.now-list li {
  font-family:    var(--font-mono);
  font-size:      0.7rem;
  color:          var(--text-secondary);
  letter-spacing: 0.04em;
  display:        flex;
  align-items:    baseline;
  gap:            0.5rem;
}

.now-list li::before {
  content:    '→';
  color:      var(--accent);
  flex-shrink: 0;
  font-size:  0.6rem;
}