/* youtube.css */
.yt-section { padding: var(--section-pad); }
.art-section { background: white; }
.yt-divider { max-width: 1000px; margin: 0 auto; height: 2px; background: linear-gradient(90deg, transparent, var(--btn-light), transparent); border-radius: 999px; }

.yt-channel-header { display: flex; justify-content: space-between; align-items: flex-end; max-width: 1000px; margin: 0 auto 28px; flex-wrap: wrap; gap: 16px; }

/* dark label badge for channel type */
.yt-channel-badge {
  display: inline-block; font-size: 0.72rem; font-weight: 700;
  padding: 5px 16px; border-radius: 999px; margin-bottom: 8px;
  text-transform: uppercase; letter-spacing: 0.08em;
  background: var(--btn-dark); color: rgb(15, 15, 15);
  box-shadow: 0 4px 0 var(--btn-light);
}
.art-badge { background: var(--accent); box-shadow: 0 4px 0 var(--btn-light); }

/* channel name with dark bg pill + hover */
.yt-channel-name {
  font-family: var(--font-heading); font-size: 1.9rem; font-weight: 700;
  color: white; margin-bottom: 6px;
  display: inline-block;
  background: var(--btn-dark);
  padding: 6px 20px; border-radius: 999px;
  box-shadow: 0 5px 0 var(--btn-light);
  transition: transform 0.2s, box-shadow 0.2s;
  cursor: default;
}
.yt-channel-name:hover { transform: translateY(3px); box-shadow: 0 2px 0 var(--btn-light); }
.yt-channel-name.art-name { background: var(--accent); box-shadow: 0 5px 0 var(--btn-light); }
.yt-channel-title-wrap p { font-size: 0.88rem; color: var(--muted); margin-top: 10px; }

/* 3D subscribe button */
.yt-sub-btn {
  background: var(--btn-dark) !important;
  color: white !important;
  box-shadow: 0 6px 0 var(--btn-light), 0 10px 22px rgba(86,204,242,0.18) !important;
  border-radius: 999px !important;
  white-space: nowrap;
}
.yt-sub-btn:hover { transform: translateY(4px) !important; box-shadow: 0 2px 0 var(--btn-light) !important; }

.yt-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 20px; max-width: 1000px; margin: 0 auto; }
.yt-card {
  background: white; border-radius: var(--radius); overflow: hidden;
  box-shadow: 0 6px 0 var(--shadow-charcoal), 0 12px 26px rgba(35,60,102,0.15);
  border: 1.5px solid rgba(35,60,102,0.1);
  transition: transform 0.2s, box-shadow 0.2s; cursor: pointer;
}
.yt-card:hover { transform: translateY(-4px); box-shadow: 0 10px 0 var(--shadow-charcoal), 0 20px 40px rgba(35,60,102,0.2); }
.yt-thumb { background: linear-gradient(135deg, #0a1628, var(--btn-dark)); height: 160px; display: flex; align-items: center; justify-content: center; position: relative; overflow: hidden; }
.yt-thumb.art-thumb { background: linear-gradient(135deg, #2e1a2e, var(--accent)); }
.yt-thumb-placeholder { text-align: center; color: black; z-index: 1; }
.yt-thumb-placeholder span { font-size: 2rem; display: block; margin-bottom: 8px; opacity: 0.6; }
.yt-thumb-placeholder p { font-size: 0.78rem; opacity: 0.7; padding: 0 12px; line-height: 1.4; }
.yt-play-overlay { position: absolute; inset: 0; background: rgba(8,38,87,0.5); display: flex; align-items: center; justify-content: center; font-size: 2rem; color: white; opacity: 0; transition: opacity 0.2s; }
.yt-card:hover .yt-play-overlay { opacity: 1; }
.yt-info { padding: 16px; }
.yt-info h4 { font-size: 0.9rem; color: var(--text-dark); line-height: 1.4; margin-bottom: 8px; font-weight: 600; }
.yt-tag { font-size: 0.7rem; font-weight: 700; padding: 3px 10px; border-radius: 999px; background: rgba(8,38,87,0.07); color: var(--btn-dark); text-transform: uppercase; letter-spacing: 0.08em; }
.yt-tag.art { background: rgba(123,94,167,0.1); color: var(--accent); }

/* ===== YOUTUBE TARGETED FIXES ===== */
/* Words below the heading line — give dark bg */
.yt-channel-title-wrap p {
  background: rgba(9,105,230,0.07);
  padding: 6px 12px;
  border-radius: 8px;
  display: inline-block;
  color: var(--text-dark) !important;
  font-weight: 500;
}

/* channel name extra highlight */
.yt-channel-name.tech-name {
  display: inline-block;
  padding: 2px 10px;
  background: rgba(9,105,230,0.06);
  border-radius: 8px;
}
.yt-channel-name.art-name {
  display: inline-block;
  padding: 2px 10px;
  background: rgba(123,94,167,0.07);
  border-radius: 8px;
}