/* ==========================================================================
   Responsive Styles
   Mobile-First Approach
   ========================================================================== */

/* ========================================
   Base (Mobile: 390px)
   Default styles are mobile-first
   ======================================== */

/* Container Padding */
.container {
  padding: 0 var(--spacing-md);
}

/* Typography Adjustments */
h1, .hero-title {
  font-size: var(--font-size-4xl);
}

h2, .section-title {
  font-size: var(--font-size-2xl);
}

/* Navigation Mobile */
.nav-right {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
}

.nav-menu {
  display: none;
  position: absolute;
  top: var(--nav-height);
  left: 0;
  right: 0;
  flex-direction: column;
  padding: var(--spacing-lg);
  background-color: var(--color-bg-nav);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--color-border);
  gap: var(--spacing-md);
}

.nav-menu.active {
  display: flex;
}

.nav-toggle {
  display: flex;
}

.nav-actions .btn {
  display: none;
}

.nav-brand-text {
  display: none;
}

/* Mobile nav link active state - no pill on mobile */
.nav-link.active {
  background-color: transparent;
  color: var(--color-accent-primary);
}

/* Hero Mobile */
.hero {
  padding-top: calc(var(--nav-height) + var(--spacing-2xl));
  padding-bottom: var(--spacing-2xl);
  min-height: auto;
}

.hero-container {
  grid-template-columns: 1fr;
  gap: var(--spacing-2xl);
}

.hero-content {
  text-align: left;
}

.hero-actions {
  flex-direction: row;
}

.hero-actions .btn {
  flex: 1;
}

.hero-terminal {
  max-width: 100%;
}

/* About Mobile */
.about-container {
  flex-direction: column;
}

.about-stats {
  width: 100%;
  max-width: 100%;
}

/* Dastur Section Mobile */
.dastur-features {
  grid-template-columns: 1fr;
}

.dastur-showcase-card {
  grid-template-columns: 1fr;
}

.dastur-showcase-terminal-wrapper {
  border-left: none;
  border-top: 1px solid #334155;
}

/* Skills Mobile */
.skills-grid {
  grid-template-columns: 1fr;
}

/* Projects Mobile */
.projects-grid {
  grid-template-columns: 1fr;
}

.card-featured {
  grid-template-columns: 1fr;
}

/* Contact Mobile */
.contact-socials {
  flex-wrap: wrap;
}

/* Footer Mobile */
.footer-container {
  flex-direction: column;
  text-align: center;
  gap: var(--spacing-lg);
}

.footer-links {
  flex-wrap: wrap;
  justify-content: center;
}

.footer-social {
  justify-content: center;
}

/* Hero Card Mobile */
.hero-card {
  max-width: 100%;
}

/* Expertise Mobile */
.expertise-grid {
  grid-template-columns: 1fr;
}

/* Meet Dastur Mobile */
.meet-dastur-container {
  grid-template-columns: 1fr;
}

.meet-dastur-card {
  grid-template-columns: 1fr;
}

/* Projects Grid Mobile */
.projects-grid-4 {
  grid-template-columns: 1fr;
}

/* News Grid Mobile */
.news-grid {
  grid-template-columns: 1fr;
}

/* Section header with link mobile */
.section-header-with-link {
  flex-direction: column;
  align-items: flex-start;
  gap: var(--spacing-md);
}

.news-header {
  flex-direction: column;
  align-items: flex-start;
  gap: var(--spacing-md);
}

/* Hero actions mobile - side by side when fits, wrap when doesn't */
.hero-actions {
  flex-direction: row;
  flex-wrap: wrap;
}

.hero-actions .btn {
  flex: 1 1 auto;
  justify-content: center;
}

/* Contact CTA Mobile */
.contact-cta-actions {
  flex-direction: column;
}

.contact-cta-actions .btn {
  width: 100%;
}

/* ========================================
   Tablet (768px)
   ======================================== */
@media (min-width: 768px) {
  /* Container */
  .container {
    padding: 0 var(--spacing-xl);
  }

  /* Typography */
  h1, .hero-title {
    font-size: var(--font-size-5xl);
  }

  h2, .section-title {
    font-size: var(--font-size-3xl);
  }

  /* Hero */
  .hero {
    padding-top: calc(var(--nav-height) + var(--spacing-3xl));
    padding-bottom: var(--spacing-3xl);
  }

  .hero-actions {
    flex-direction: row;
  }

  .hero-actions .btn {
    width: auto;
  }

  /* Dastur Features - 2x2 grid */
  .dastur-features {
    grid-template-columns: repeat(2, 1fr);
  }

  /* Projects Grid */
  .projects-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  /* About - start transitioning to row */
  .about-container {
    flex-direction: row;
  }

  .about-stats {
    width: auto;
    max-width: 500px;
  }

  /* Footer */
  .footer-container {
    flex-direction: row;
    text-align: left;
  }

  .footer-social {
    justify-content: flex-end;
  }

  /* Hero actions */
  .hero-actions {
    flex-direction: row;
  }

  .hero-actions .btn {
    width: auto;
  }

  /* Expertise Tablet - 2 columns */
  .expertise-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  /* Meet Dastur Tablet */
  .meet-dastur-card {
    grid-template-columns: repeat(2, 1fr);
  }

  /* Projects Tablet - 2 columns */
  .projects-grid-4 {
    grid-template-columns: repeat(2, 1fr);
  }

  /* News Tablet - 2 columns */
  .news-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  /* Section header with link */
  .section-header-with-link {
    flex-direction: row;
    align-items: flex-start;
    justify-content: space-between;
  }

  .news-header {
    flex-direction: row;
    align-items: flex-start;
    justify-content: space-between;
  }

  /* Contact CTA */
  .contact-cta-actions {
    flex-direction: row;
    justify-content: center;
  }

  .contact-cta-actions .btn {
    width: auto;
  }
}

/* ========================================
   Desktop (1024px)
   ======================================== */
@media (min-width: 1024px) {
  /* Container */
  .container {
    padding: 0 var(--spacing-2xl);
  }

  /* Typography */
  h1, .hero-title {
    font-size: 56px;
  }

  h2, .section-title {
    font-size: var(--font-size-4xl);
  }

  /* Navigation Desktop */
  .nav-right {
    gap: var(--spacing-lg);
  }

  .nav-menu {
    display: flex;
    position: static;
    flex-direction: row;
    padding: 0;
    background: none;
    backdrop-filter: none;
    border: none;
    gap: var(--spacing-sm);
  }

  .nav-toggle {
    display: none;
  }

  .nav-actions .btn {
    display: inline-flex;
  }

  .nav-brand-text {
    display: flex;
  }

  /* Desktop nav link active state - pill background */
  .nav-link.active {
    background-color: #1E293B;
    color: #F8FAFC;
  }

  [data-theme="light"] .nav-link.active {
    background-color: #EFF6FF;
    color: #2563EB;
  }

  /* Hero Desktop */
  .hero {
    min-height: 100vh;
    padding-top: calc(var(--nav-height) + var(--spacing-3xl));
    padding-bottom: var(--spacing-3xl);
  }

  .hero-container {
    grid-template-columns: 1fr 1fr;
  }

  /* About Desktop */
  .about-container {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
  }

  .about-stats {
    margin-top: 0;
  }

  .about-stats .card-stat {
    width: 100%;
  }

  /* Dastur Features - 4 columns */
  .dastur-features {
    grid-template-columns: repeat(4, 1fr);
  }

  .dastur-showcase-card {
    grid-template-columns: 1fr 1fr;
  }

  .dastur-showcase-terminal-wrapper {
    border-left: 1px solid #334155;
    border-top: none;
  }

  /* Skills Desktop */
  .skills-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  /* Featured Project */
  .card-featured {
    grid-template-columns: 1fr 1fr;
  }

  /* Expertise Desktop - 3 columns */
  .expertise-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  /* Meet Dastur Desktop */
  .meet-dastur-container {
    grid-template-columns: 1fr 1fr;
  }

  /* Projects Desktop - 4 columns */
  .projects-grid-4 {
    grid-template-columns: repeat(4, 1fr);
  }

  /* News Desktop - 3 columns */
  .news-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* ========================================
   Large Desktop (1440px)
   ======================================== */
@media (min-width: 1440px) {
  /* Container */
  .container {
    padding: 0 var(--spacing-3xl);
  }
}

/* ========================================
   Full Width Desktop (1920px)
   ======================================== */
@media (min-width: 1920px) {
  /* Container - Max width with larger padding */
  .container {
    max-width: 1440px;
    padding: 0 var(--spacing-4xl);
  }
}

/* ========================================
   Reduced Motion
   ======================================== */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ========================================
   Print Styles
   ======================================== */
@media print {
  .nav,
  .theme-toggle,
  .nav-toggle {
    display: none !important;
  }

  body {
    background: white;
    color: black;
  }

  .hero {
    min-height: auto;
    padding: var(--spacing-lg) 0;
  }
}