/* =========================================================
   resources.html — Resources Page
   ========================================================= */

/* ── Search ── */
.search-container { background: var(--bg-surface); border: 1px solid var(--border-color); padding: 20px 30px; border-radius: 4px; display: flex; align-items: center; gap: 20px; margin-bottom: 60px; }
.search-box { flex: 1; display: flex; align-items: center; background: var(--bg-deep); border: 1px solid var(--border-color); padding: 12px 20px; border-radius: 2px; }
.search-box i { color: var(--text-muted); margin-right: 15px; font-size: 1.1rem; }
.search-box input { background: transparent; border: none; color: #fff; font-size: 1rem; width: 100%; outline: none; }
.search-box input::placeholder { color: #4a5061; }
.search-hint { font-family: monospace; font-size: 0.8rem; color: var(--text-muted); }
.search-hint span { color: var(--tech-blue); margin-right: 8px; cursor: pointer; }

/* ── Layout ── */
.resources-layout { display: flex; align-items: flex-start; gap: 60px; }
.resources-layout > .sidebar-wrapper { flex: 0 0 200px; position: sticky; top: 79px; align-self: flex-start; }
.resources-layout > .sidebar-menu { flex: 0 0 320px; align-self: flex-start; }
.resources-layout > .blog-list { flex: 1; min-width: 0; }

/* ── Sidebar ── */
.sidebar-wrapper { display: flex; flex-direction: column; gap: 30px; background: var(--bg-deep); z-index: 10; }
.sidebar-menu { display: flex; flex-direction: column; gap: 6px; padding: 0; margin: 0; list-style: none; }
.menu-item {
    display: flex; align-items: center; justify-content: space-between;
    padding: 16px 24px; color: var(--text-muted); text-decoration: none;
    font-size: 0.8rem; font-weight: 600; border-radius: 4px;
    background: transparent; border: 1px solid transparent; cursor: pointer;
}
.menu-item:hover { color: #fff; background: rgba(255,255,255,0.02); border-color: var(--border-color); }
.menu-item.active {
    color: var(--neon-green);
    background: var(--bg-surface);
    border-color: var(--border-color);
    box-shadow: inset 3px 0 0 var(--neon-green);
}
.menu-item .menu-meta { font-family: monospace; font-size: 0.75rem; color: #4a5061; }

/* ── Sidebar CTA Card ── */
.cta-sidebar-card { background: linear-gradient(135deg, #0b0c11 0%, #121520 100%); border: 1px solid var(--border-color); border-top: 2px solid var(--neon-green); padding: 25px; border-radius: 4px; }
.cta-sidebar-card h5 { margin: 0 0 10px 0; font-size: 1.1rem; color: #fff; font-weight: 800; }
.cta-sidebar-card p { margin: 0 0 20px 0; font-size: 0.85rem; color: var(--text-muted); line-height: 1.6; }
.cta-card-btn { display: inline-block; width: 100%; text-align: center; background: transparent; border: 1px solid var(--neon-green); color: var(--neon-green); padding: 10px 0; border-radius: 2px; font-size: 0.85rem; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; text-decoration: none; }
.cta-card-btn:hover { background: var(--neon-green); color: #000; box-shadow: 0 0 15px rgba(0, 255, 102, 0.2); }

/* ── Resources Grid ── */
.resources-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 45px; }
.resource-card { display: flex; flex-direction: column; background: transparent; text-decoration: none; color: inherit; }

/* ── Media Container ── */
.media-container {
    width: 100%;
    aspect-ratio: 16 / 10;
    background: #090a0e;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    position: relative;
    overflow: hidden;
    display: flex; align-items: center; justify-content: center;
}
.media-container img { width: 100%; height: 100%; object-fit: cover; opacity: 0.75; }
.video-overlay { position: absolute; inset: 0; background: rgba(0,0,0,0.3); display: flex; align-items: center; justify-content: center; }
.play-btn { width: 60px; height: 60px; background: rgba(6, 6, 8, 0.85); border: 1px solid var(--neon-green); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: var(--neon-green); font-size: 1.2rem; padding-left: 4px; box-shadow: 0 0 20px rgba(0, 255, 102, 0.15); }
.resource-card:hover .media-container { border-color: rgba(0, 255, 102, 0.3); box-shadow: 0 15px 35px rgba(0,0,0,0.4); }
.resource-card:hover .media-container img { opacity: 0.95; transform: scale(1.03); }
.resource-card:hover .play-btn { background: var(--neon-green); color: #000; transform: scale(1.1); box-shadow: 0 0 25px rgba(0, 255, 102, 0.4); }

/* ── Resource Meta ── */
.resource-meta { display: flex; align-items: center; gap: 15px; margin: 20px 0 10px 0; font-family: monospace; font-size: 0.75rem; color: var(--text-muted); }
.meta-category { color: var(--tech-blue); font-weight: 700; text-transform: uppercase; }

/* ── Resource Content ── */
.resource-content h4 { margin: 0 0 12px 0; font-size: 1.3rem; font-weight: 800; color: #fff; line-height: 1.4; letter-spacing: -0.3px; }
.resource-card:hover .resource-content h4 { color: var(--neon-green); }
.resource-content p { margin: 0; font-size: 0.92rem; color: var(--text-muted); line-height: 1.6; }

/* ── Blog List (Row Layout) ── */
.blog-list { display:flex; flex-direction:column; min-width:0; width:100%; box-sizing:border-box; }
.blog-row { display:flex; align-items:stretch; gap:18px; padding:0 0 40px 0;margin-bottom: 25px; border-bottom:1px dashed var(--border-color); overflow:hidden; }
.blog-row:last-child { border-bottom:none; }
.blog-row-thumb { width:150px; height:150px; flex-shrink:0; background:#090a0e; border-radius:3px; overflow:hidden; display:flex; align-items:center; justify-content:center; align-self:center; }
.blog-row-thumb img { max-width:150px; max-height:150px; width:100%; height:100%; object-fit:cover; display:block; }
.blog-row-thumb-placeholder { font-size:.7rem; color:var(--text-muted); }
.blog-row-body { flex:1; min-width:0; display:flex; flex-direction:column; gap:4px; }
.blog-row-title { font-size:.95rem; font-weight:700; color:#fff; line-height:1.4; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;margin-bottom:15px; }
.blog-row-desc { font-size:.8rem; color:var(--text-muted); line-height:1.4; display:-webkit-box; -webkit-line-clamp:7; -webkit-box-orient:vertical; overflow:hidden; }
.blog-row-date { flex-shrink:0; font-family:monospace; font-size:.78rem; color:var(--text-muted); white-space:nowrap; padding-bottom:2px; }
.blog-row-link { flex-shrink:0; }
.blog-row-actions { flex-shrink:0; align-self:flex-end; display:flex; align-items:center; gap:16px; }
.blog-readmore { display:inline-block; padding:6px 16px; background:transparent; border:1px solid var(--border-color); color:var(--neon-green); font-size:.78rem; font-weight:700; text-transform:uppercase; letter-spacing:.5px; text-decoration:none; border-radius:3px; transition:background .2s,color .2s; white-space:nowrap; }
.blog-readmore:hover { background:var(--neon-green); color:#000; border-color:var(--neon-green); }

/* ── Blog Modal ── */
.blog-modal { position:fixed; inset:0; z-index:30000; display:flex; align-items:center; justify-content:center; }
.blog-modal-overlay { position:absolute; inset:0; background:rgba(0,0,0,0.8); }
.blog-modal-box { position:relative; max-width:1200px; width:92%; max-height:85vh; background:var(--bg-surface); border:1px solid var(--border-color); border-radius:6px; overflow:hidden; }
/* 滚动条样式 */
.blog-modal ::-webkit-scrollbar { width:6px; }
.blog-modal ::-webkit-scrollbar-track { background:transparent; }
.blog-modal ::-webkit-scrollbar-thumb { background:var(--border-color); border-radius:3px; }
.blog-modal ::-webkit-scrollbar-thumb:hover { background:var(--text-muted); }
.blog-modal-close { position:absolute; top:8px; right:12px; width:30px; height:30px; background:rgba(0,0,0,0.5); border:1px solid var(--border-color); border-radius:50%; color:#fff; font-size:1.1rem; cursor:pointer; display:flex; align-items:center; justify-content:center; z-index:10; line-height:1; }
.blog-modal-close:hover { background:var(--neon-green); color:#000; border-color:var(--neon-green); }

/* 模态窗口专属页眉页脚 */
.blog-modal-header { height:40px; background:#222835; border-bottom:1px solid var(--border-color); line-height:40px; padding:0 24px; font-size:.82rem; color:var(--text-muted); font-weight:600; text-transform:uppercase; letter-spacing:.5px; }
.blog-modal-footer { height:40px; background:#222835; border-top:1px solid var(--border-color); }

.blog-modal-content { max-height:calc(85vh - 80px); overflow-y:auto; padding:30px 36px 36px 36px; -webkit-overflow-scrolling:touch; }

.blog-detail-title { margin:0 0 8px 0; font-size:1.6rem; font-weight:800; color:#fff; line-height:1.3; }
.blog-detail-meta { font-family:monospace; font-size:.8rem; color:var(--text-muted); margin-bottom:24px; }
.blog-detail-body { font-size:.95rem; color:var(--text-main); line-height:1.8; }
.blog-detail-body img { max-width:100%; height:auto; border-radius:4px; margin:16px 0; display:block; }
.blog-detail-body video { max-width:100%; border-radius:4px; margin:16px 0; display:block; }
.blog-detail-body iframe { max-width:100%; border-radius:4px; margin:16px 0; }
.blog-detail-body p { margin:0 0 16px 0; }
.blog-detail-body h1,.blog-detail-body h2,.blog-detail-body h3 { color:#fff; margin:24px 0 12px 0; }

/* ── Responsive ── */
@media (max-width: 1100px) {
    .resources-layout { flex-direction: column; gap: 30px; }
    .resources-layout > .sidebar-wrapper { flex: none; width: 100%; position: relative; background: transparent; }
    .resources-layout > .sidebar-menu { flex: none; width: 100%; }
    .resources-layout > .blog-list { width:100%; }
    .sidebar-menu { flex-direction: row; flex-wrap: wrap; gap: 6px; }
    .menu-item { padding: 12px 18px; font-size: .85rem; }
}
@media (max-width: 750px) {
    .resources-grid { grid-template-columns: 1fr; gap: 35px; }
    .blog-row { flex-wrap: wrap; gap: 6px; }
    .blog-row-thumb { width: 80px; height: 80px; align-self:flex-start; }
    .blog-row-body { flex: 1; min-width: 0; width:auto; overflow:hidden; }
    .blog-row-title { font-size: .85rem; }
    .blog-row-desc { font-size: .75rem; -webkit-line-clamp:3; }
    .blog-row-date { display: inline; align-self:auto; padding-bottom:0; font-size:.72rem; }
    .blog-row-actions { flex: 0 0 100%; display:flex; justify-content:flex-end; align-items:center; gap:12px; margin-top:4px; box-sizing:border-box; }
    .blog-readmore { width: auto; text-align: center; padding: 4px 10px; font-size: .7rem; letter-spacing: 0; white-space:nowrap; }
}
@media (max-width: 480px) {
    .sidebar-menu { flex-direction: column; width: 100%; }
    .resources-layout > .sidebar-wrapper { position: relative; top: auto; background: transparent; }
    .menu-item { white-space: normal; width: 100%; }
}