/* ==========================================================================
   Page-Specific Styles
   ========================================================================== */

/* Hero */
.page-hero { padding-top: var(--space-16); padding-bottom: var(--space-16); }
.page-hero .container { display: grid; grid-template-columns: 1fr; gap: var(--space-8); align-items: center; }

@media (min-width: 1024px) {
  .page-hero .container { grid-template-columns: 1fr 380px; }
}

.hero-label { font-family: var(--font-mono); font-size: var(--font-size-sm); color: var(--color-accent); letter-spacing: var(--letter-spacing-wide); margin-bottom: var(--space-4); }
.hero-title { font-size: var(--font-size-5xl); font-weight: var(--font-weight-bold); color: var(--color-text-primary); line-height: var(--line-height-tight); letter-spacing: var(--letter-spacing-tight); margin-bottom: var(--space-6); }

@media (max-width: 639px) {
  .hero-title { font-size: var(--font-size-4xl); }
}

.hero-text { font-size: var(--font-size-lg); color: var(--color-text-secondary); line-height: var(--line-height-snug); max-width: 560px; margin-bottom: var(--space-8); }
.hero-actions { display: flex; flex-wrap: wrap; gap: var(--space-4); }

/* Trust Section */
.trust-section { padding: var(--space-12) 0; border-top: 1px solid var(--color-border); border-bottom: 1px solid var(--color-border); background-color: var(--color-bg-secondary); background-image: none; }
.trust-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: var(--space-6); text-align: center; }
.trust-item { display: flex; flex-direction: column; align-items: center; gap: var(--space-2); padding: var(--space-4); }
.trust-icon { width: 40px; height: 40px; color: var(--color-accent); }
.trust-label { font-size: var(--font-size-sm); font-weight: var(--font-weight-medium); color: var(--color-text-primary); }

/* Section backgrounds */
.section--alt { background-color: var(--color-bg-secondary); background-image: none; }

/* Page Header */
.page-header { padding-top: var(--space-16); padding-bottom: var(--space-8); }
.page-header-title { font-size: var(--font-size-4xl); font-weight: var(--font-weight-bold); color: var(--color-text-primary); margin-bottom: var(--space-4); }

@media (max-width: 639px) {
  .page-header-title { font-size: var(--font-size-3xl); }
}

.page-header-text { font-size: var(--font-size-lg); color: var(--color-text-secondary); max-width: 640px; }

/* About Grid */
.about-grid { display: grid; grid-template-columns: 1fr; gap: var(--space-8); align-items: start; }

@media (min-width: 768px) {
  .about-grid { grid-template-columns: 1fr 1fr; }
}

/* Contact CTA */
.contact-cta { text-align: center; padding: var(--space-20) 0; background-color: var(--color-accent-muted); background-image: none; }
.contact-cta-title { font-size: var(--font-size-3xl); font-weight: var(--font-weight-bold); color: var(--color-text-primary); margin-bottom: var(--space-4); }

@media (max-width: 639px) {
  .contact-cta-title { font-size: var(--font-size-2xl); }
}

.contact-cta-text { font-size: var(--font-size-lg); color: var(--color-text-secondary); max-width: 560px; margin-left: auto; margin-right: auto; margin-bottom: var(--space-8); }

/* Skills Preview Grid */
.skills-preview-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: var(--space-6); }

/* Articles Grid */
.articles-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); gap: var(--space-6); }

/* Filter Bar */
.filter-bar { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-bottom: var(--space-8); }
.filter-btn { display: inline-flex; align-items: center; padding: var(--space-2) var(--space-4); min-height: 36px; font-family: var(--font-mono); font-size: var(--font-size-sm); font-weight: var(--font-weight-medium); color: var(--color-text-secondary); background-color: var(--color-bg-secondary); border: 1px solid var(--color-border); border-radius: var(--radius-md); cursor: pointer; transition: color var(--transition-fast) var(--transition-easing), background-color var(--transition-fast) var(--transition-easing), border-color var(--transition-fast) var(--transition-easing); }
.filter-btn:hover { color: var(--color-text-primary); border-color: var(--color-border-hover); }
.filter-btn:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.filter-btn[aria-pressed="true"] { color: var(--color-accent); background-color: var(--color-accent-muted); border-color: var(--color-accent); }
.filter-item[hidden] { display: none; }

/* Contact Page */
.contact-grid { display: grid; grid-template-columns: 1fr; gap: var(--space-8); }

@media (min-width: 768px) {
  .contact-grid { grid-template-columns: 1fr 360px; }
}

.contact-info { display: flex; flex-direction: column; gap: var(--space-6); }
.contact-info-item { display: flex; flex-direction: column; gap: var(--space-1); }
.contact-info-label { font-size: var(--font-size-sm); font-weight: var(--font-weight-medium); color: var(--color-text-primary); }
.contact-info-value { font-size: var(--font-size-sm); color: var(--color-text-secondary); }
.contact-info-value a { color: var(--color-accent); }

.form-status { padding: var(--space-4); border-radius: var(--radius-md); font-size: var(--font-size-sm); margin-top: var(--space-4); }
.form-status--success { background-color: var(--color-success-muted); color: var(--color-success); border: 1px solid var(--color-success); }
.form-status--error { background-color: var(--color-error-muted); color: var(--color-error); border: 1px solid var(--color-error); }

.form-honeypot { position: absolute; left: -9999px; top: -9999px; opacity: 0; height: 0; width: 0; overflow: hidden; pointer-events: none; tab-index: -1; }

/* Resume */
.resume-section { margin-bottom: var(--space-10); }
.resume-section:last-child { margin-bottom: 0; }
.resume-section-title { font-size: var(--font-size-lg); font-weight: var(--font-weight-semibold); color: var(--color-accent); text-transform: uppercase; letter-spacing: var(--letter-spacing-wider); margin-bottom: var(--space-4); padding-bottom: var(--space-2); border-bottom: 2px solid var(--color-accent); }
.resume-entry { margin-bottom: var(--space-6); }
.resume-entry:last-child { margin-bottom: 0; }
.resume-entry-header { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: var(--space-2); margin-bottom: var(--space-2); }
.resume-entry-title { font-size: var(--font-size-base); font-weight: var(--font-weight-semibold); color: var(--color-text-primary); }
.resume-entry-date { font-family: var(--font-mono); font-size: var(--font-size-sm); color: var(--color-text-tertiary); }
.resume-entry-subtitle { font-size: var(--font-size-sm); color: var(--color-text-secondary); margin-bottom: var(--space-2); }
.resume-entry-list { list-style: disc; padding-left: var(--space-5); margin: 0; }
.resume-entry-list li { font-size: var(--font-size-sm); color: var(--color-text-secondary); margin-bottom: var(--space-1); }

/* 404 */
.page-404 { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 60vh; text-align: center; }
.error-code { font-family: var(--font-mono); font-size: var(--font-size-5xl); font-weight: var(--font-weight-bold); color: var(--color-accent); opacity: 0.4; margin-bottom: var(--space-4); }
.error-title { font-size: var(--font-size-3xl); margin-bottom: var(--space-4); }
.error-text { font-size: var(--font-size-lg); color: var(--color-text-secondary); max-width: 480px; margin-bottom: var(--space-8); }
.error-links { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-4); }

/* Case Study */
.case-study-meta { background-color: var(--color-bg-secondary); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: var(--space-6); position: sticky; top: var(--space-8); }
.case-study-meta-title { font-size: var(--font-size-sm); font-weight: var(--font-weight-medium); color: var(--color-text-tertiary); text-transform: uppercase; letter-spacing: var(--letter-spacing-wider); margin-bottom: var(--space-4); }
.case-study-meta-item { margin-bottom: var(--space-4); }
.case-study-meta-item:last-child { margin-bottom: 0; }
.case-study-meta-label { font-size: var(--font-size-xs); color: var(--color-text-tertiary); margin-bottom: var(--space-1); }
.case-study-meta-value { font-size: var(--font-size-sm); color: var(--color-text-primary); font-weight: var(--font-weight-medium); }

/* Article */
.article-content { max-width: var(--container-md); }
.article-content h2 { margin-top: var(--space-10); margin-bottom: var(--space-4); }
.article-content h3 { margin-top: var(--space-8); margin-bottom: var(--space-3); }
.article-content p { margin-bottom: var(--space-4); line-height: var(--line-height-relaxed); }
.article-content ul, .article-content ol { margin-bottom: var(--space-4); }
.article-meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4); font-size: var(--font-size-sm); color: var(--color-text-tertiary); margin-bottom: var(--space-8); padding-bottom: var(--space-6); border-bottom: 1px solid var(--color-border); }

/* Print */
@media print {
  body { background: white; color: black; }
  .site-header, .site-footer, .btn, .theme-toggle { display: none; }
  .card { border: 1px solid #ccc; box-shadow: none; }
}