/* ═══════════════════════════════════════════
   08 — YOUTUBE
═══════════════════════════════════════════ */
#youtube {
  padding:120px 72px;
  border-top:1px solid var(--border);
}
.yt-layout {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:64px; align-items:start;
}

/* left: channel card + stats */
.yt-channel-card {
  border:1px solid var(--border);
  background:var(--bg2);
  overflow:hidden;
  position:relative;
}
.yt-banner {
  height:110px;
  background:linear-gradient(135deg,color-mix(in srgb, var(--amber) 6%, #0c0c0a) 0%,color-mix(in srgb, var(--amber) 12%, #0c0c0a) 40%,color-mix(in srgb, var(--amber) 16%, #0c0c0a) 100%);
  position:relative; overflow:hidden;
}
.yt-banner::before {
  content:''; position:absolute; inset:0;
  background-image:linear-gradient(rgba(var(--amber-rgb),.06) 1px,transparent 1px),
    linear-gradient(90deg,rgba(var(--amber-rgb),.06) 1px,transparent 1px);
  background-size:32px 32px;
}
.yt-banner::after {
  content:''; position:absolute; inset:0;
  background:radial-gradient(ellipse 60% 100% at 80% 50%,rgba(var(--amber-rgb),.15),transparent 70%);
}
.yt-banner-logo {
  position:absolute; right:24px; top:50%; transform:translateY(-50%);
  z-index:1;
}
.yt-banner-logo svg { opacity:.2; }

.yt-card-body { padding:0 22px 22px; position:relative; }
.yt-avatar-wrap {
  margin-top:-28px; margin-bottom:14px;
  display:flex; align-items:flex-end; justify-content:space-between;
}
.yt-avatar {
  width:56px; height:56px; border-radius:50%;
  background:var(--amber);
  border:3px solid var(--bg2);
  display:flex; align-items:center; justify-content:center;
  flex-shrink:0;
}
.yt-avatar span {
  font-family:'Bebas Neue',sans-serif; font-size:20px;
  color:var(--bg); letter-spacing:1px;
}
.yt-sub-badge {
  font-family:'DM Mono',monospace; font-size:9px; letter-spacing:2px;
  text-transform:uppercase; color:var(--amber);
  border:1px solid var(--amber-dim); padding:4px 10px;
  background:var(--amber-glow);
}

.yt-channel-name {
  font-family:'Bebas Neue',sans-serif; font-size:24px; letter-spacing:1px;
  margin-bottom:4px;
}
.yt-channel-handle {
  font-family:'DM Mono',monospace; font-size:10px; color:var(--muted);
  letter-spacing:1px; margin-bottom:14px;
}
.yt-channel-desc {
  font-family:'DM Mono',monospace; font-size:11px; color:var(--muted);
  line-height:1.7; letter-spacing:.3px; margin-bottom:20px;
}
.yt-stats-row {
  display:grid; grid-template-columns:repeat(3,1fr); gap:1px;
  background:var(--border); border:1px solid var(--border);
  margin-bottom:20px;
}
.yt-stat {
  background:var(--bg); padding:14px 0; text-align:center;
}
.yt-stat-n {
  font-family:'Bebas Neue',sans-serif; font-size:26px; color:var(--text);
  letter-spacing:1px; line-height:1;
}
.yt-stat-n span { color:var(--amber); font-size:16px; }
.yt-stat-l {
  font-family:'DM Mono',monospace; font-size:8px; color:var(--muted);
  letter-spacing:2px; text-transform:uppercase; margin-top:3px;
}
.yt-sub-btn {
  display:flex; align-items:center; justify-content:center; gap:10px;
  width:100%; padding:13px;
  background:var(--amber); border:none; cursor:none;
  clip-path:polygon(0 0,calc(100% - 8px) 0,100% 8px,100% 100%,8px 100%,0 calc(100% - 8px));
  font-family:'DM Mono',monospace; font-size:11px; letter-spacing:2px;
  text-transform:uppercase; color:var(--text);
  transition:background .2s, transform .15s; text-decoration:none;
}
.yt-sub-btn:hover { background:var(--amber-lt); transform:translateY(-2px); }
.yt-sub-btn svg { flex-shrink:0; }

/* right: featured video + grid */
.yt-right { display:flex; flex-direction:column; gap:20px; }

/* featured video facade */
.yt-featured {
  position:relative; cursor:none;
  border:1px solid var(--border);
  overflow:hidden; background:var(--bg2);
}
.yt-featured-thumb {
  width:100%; aspect-ratio:16/9;
  background:linear-gradient(135deg,#0c0c0a,color-mix(in srgb, var(--amber) 8%, #0c0c0a),color-mix(in srgb, var(--amber) 12%, #0c0c0a));
  display:flex; align-items:center; justify-content:center;
  position:relative; overflow:hidden;
}
.yt-featured-thumb::before {
  content:''; position:absolute; inset:0;
  background-image:linear-gradient(rgba(var(--amber-rgb),.04) 1px,transparent 1px),
    linear-gradient(90deg,rgba(var(--amber-rgb),.04) 1px,transparent 1px);
  background-size:40px 40px;
}
.yt-featured-thumb::after {
  content:''; position:absolute; inset:0;
  background:radial-gradient(ellipse 70% 70% at 50% 50%,rgba(var(--amber-rgb),.1),transparent 70%);
}
.yt-play-btn {
  width:64px; height:64px; border-radius:50%;
  background:var(--amber);
  display:flex; align-items:center; justify-content:center;
  z-index:2; position:relative;
  transition:transform .2s, box-shadow .2s;
  box-shadow:0 0 0 0 rgba(var(--amber-rgb),.4);
  animation:yt-ping 2.5s ease-in-out infinite;
}
@keyframes yt-ping {
  0%,100%{ box-shadow:0 0 0 0 rgba(var(--amber-rgb),.4); }
  50%    { box-shadow:0 0 0 16px rgba(var(--amber-rgb),.0); }
}
.yt-featured:hover .yt-play-btn { transform:scale(1.1); }
.yt-play-btn svg { margin-left:4px; }

.yt-featured-meta {
  padding:16px 18px;
  border-top:1px solid var(--border);
  display:flex; align-items:flex-start; justify-content:space-between; gap:12px;
}
.yt-vid-title {
  font-family:'Bebas Neue',sans-serif; font-size:18px; letter-spacing:1px;
  line-height:1.2; flex:1;
}
.yt-vid-meta {
  font-family:'DM Mono',monospace; font-size:9px; color:var(--muted);
  letter-spacing:1px; margin-top:4px;
}
.yt-watch-link {
  font-family:'DM Mono',monospace; font-size:10px; letter-spacing:2px;
  text-transform:uppercase; color:var(--amber); text-decoration:none;
  white-space:nowrap; display:flex; align-items:center; gap:5px;
  margin-top:2px; transition:gap .2s;
}
.yt-watch-link:hover { gap:10px; }

/* iframe reveal on click */
.yt-iframe-wrap {
  display:none; width:100%; aspect-ratio:16/9;
}
.yt-iframe-wrap iframe {
  width:100%; height:100%; border:none;
}

/* recent videos grid */
.yt-videos-grid {
  display:grid; grid-template-columns:repeat(3,1fr); gap:1px;
  background:var(--border); border:1px solid var(--border);
}
.yt-vid-card {
  background:var(--bg); overflow:hidden; cursor:none;
  transition:background .2s; text-decoration:none; display:block;
}
.yt-vid-card:hover { background:var(--bg2); }
.yt-vid-card:hover .yt-vc-play { opacity:1; }
.yt-vc-thumb {
  aspect-ratio:16/9; position:relative; overflow:hidden;
}
.yt-vc-bg {
  width:100%; height:100%;
  display:flex; align-items:center; justify-content:center;
  position:relative;
}
.yt-vc-num {
  font-family:'Bebas Neue',sans-serif; font-size:40px; color:transparent;
  -webkit-text-stroke:1px rgba(var(--amber-rgb),.1); z-index:1;
}
.yt-vc-play {
  position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
  background:rgba(var(--amber-rgb),.08); opacity:0; transition:opacity .2s;
}
.yt-vc-play-icon {
  width:32px; height:32px; border-radius:50%;
  background:var(--amber);
  display:flex; align-items:center; justify-content:center;
}
.yt-vc-play-icon svg { margin-left:2px; }
.yt-vc-body { padding:12px 14px; border-top:1px solid var(--border); }
.yt-vc-tag {
  font-family:'DM Mono',monospace; font-size:8px; letter-spacing:1px;
  color:var(--amber); border:1px solid var(--amber-dim); padding:2px 6px;
  background:var(--amber-glow); text-transform:uppercase;
  display:inline-block; margin-bottom:6px;
}
.yt-vc-title {
  font-family:'DM Mono',monospace; font-size:11px; color:var(--text);
  line-height:1.5; letter-spacing:.3px; margin-bottom:4px;
}
.yt-vc-meta {
  font-family:'DM Mono',monospace; font-size:9px; color:var(--muted); letter-spacing:1px;
}

/* vid thumb gradient variants */
.yt-vc-bg[data-v="1"]{ background:linear-gradient(135deg,#0c0c0a,color-mix(in srgb, var(--amber) 8%, #0c0c0a),color-mix(in srgb, var(--amber) 12%, #0c0c0a)); }
.yt-vc-bg[data-v="2"]{ background:linear-gradient(135deg,#0a0c0c,#081418,#0a1c20); }
.yt-vc-bg[data-v="3"]{ background:linear-gradient(135deg,#0c0a0a,#180c08,#201008); }