/* Skill detail page styles */

/* Page Header */
.page-header { padding: 80px 0 40px; }
.page-header .container { max-width: 800px; }
.breadcrumb { font-family: 'JetBrains Mono', monospace; font-size: 0.8rem; color: var(--text-secondary); margin-bottom: 16px; }
.breadcrumb a { color: var(--accent); text-decoration: none; }
.breadcrumb a:hover { text-decoration: underline; }
.page-title { font-size: clamp(2rem, 5vw, 2.5rem); font-weight: 700; margin-bottom: 16px; letter-spacing: -0.02em; }
.page-subtitle { font-size: 1.2rem; color: var(--accent); font-weight: 600; margin-bottom: 12px; }
.page-description { font-size: 1.1rem; color: var(--text-secondary); line-height: 1.7; }

/* Content Section */
.content-section { padding: 40px 0; }
.content-section .container { max-width: 800px; }
.content-section h2 { font-size: 1.5rem; font-weight: 700; margin-bottom: 20px; color: var(--text-primary); }
.content-section h3 { font-size: 1.1rem; font-weight: 600; margin-top: 32px; margin-bottom: 12px; color: var(--text-primary); }
.content-section p { color: var(--text-secondary); font-size: 1rem; line-height: 1.8; margin-bottom: 16px; }
.content-section ul { list-style: none; margin: 16px 0 24px; }
.content-section ul li { color: var(--text-secondary); font-size: 1rem; padding: 8px 0; padding-left: 20px; position: relative; line-height: 1.6; }
.content-section ul li::before { content: ""; width: 6px; height: 6px; background: var(--accent); border-radius: 50%; position: absolute; left: 0; top: 14px; }
.content-section strong { color: var(--text-primary); }

/* Phases / Steps */
.phases { display: flex; flex-direction: column; gap: 24px; margin: 32px 0; }
.phase { background: var(--bg-secondary); border: 1px solid var(--border); border-radius: 12px; padding: 24px; }
.phase-number { font-family: 'JetBrains Mono', monospace; font-size: 0.75rem; color: var(--accent); background: rgba(34, 197, 94, 0.1); padding: 4px 10px; border-radius: 4px; display: inline-block; margin-bottom: 12px; }
.phase-title { font-size: 1.1rem; font-weight: 600; margin-bottom: 8px; color: var(--text-primary); }
.phase-description { color: var(--text-secondary); font-size: 0.95rem; line-height: 1.6; }

/* CTA Section */
.cta-section { padding: 60px 0; border-top: 1px solid var(--border); }
.cta-section .container { max-width: 800px; text-align: center; }
.cta-section h2 { font-size: 1.5rem; font-weight: 700; margin-bottom: 16px; }
.cta-section p { color: var(--text-secondary); margin-bottom: 24px; }
.cta-buttons { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; }

/* Code blocks */
code { font-family: 'JetBrains Mono', monospace; font-size: 0.9em; background: var(--bg-tertiary); padding: 2px 6px; border-radius: 4px; color: var(--accent); }

pre { background: var(--bg-secondary); border: 1px solid var(--border); border-radius: 8px; padding: 20px; overflow-x: auto; margin: 16px 0 24px; }
pre code { background: none; padding: 0; color: var(--text-primary); font-size: 0.85rem; line-height: 1.6; }

/* Copy button for code blocks */
.code-block { position: relative; }
.copy-btn { position: absolute; top: 12px; right: 12px; background: var(--bg-tertiary); border: 1px solid var(--border); color: var(--text-secondary); padding: 6px 12px; border-radius: 4px; font-size: 0.75rem; cursor: pointer; transition: all 0.2s; }
.copy-btn:hover { background: var(--border); color: var(--text-primary); }
.copy-btn.copied { color: var(--accent); }

/* Note/Tip boxes */
.note { background: rgba(34, 197, 94, 0.05); border-left: 3px solid var(--accent); padding: 16px 20px; margin: 24px 0; border-radius: 0 8px 8px 0; }
.note p { margin-bottom: 0; font-size: 0.95rem; }
.note strong { color: var(--accent); }

/* Benefits grid */
.benefits-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 20px; margin: 24px 0; }
.benefit { background: var(--bg-secondary); border: 1px solid var(--border); border-radius: 12px; padding: 20px; }
.benefit-title { font-size: 1rem; font-weight: 600; margin-bottom: 8px; color: var(--text-primary); }
.benefit-description { color: var(--text-secondary); font-size: 0.9rem; line-height: 1.5; }