/* ================================================================
   CodeX — Dev Toolbox Platform
   assets/css/responsive.css | Responsive Media Queries
   Author: Sabbir Hasan | GitHub: Dark-Devil-king
================================================================ */

/* ===== TABLET: ≤1024px ===== */
@media (max-width: 1024px) {
  .hero-split-wrap      { gap: 36px; }
  .features-grid        { grid-template-columns: repeat(2,1fr); }
  .skills-grid          { grid-template-columns: repeat(3,1fr); }
  .services-grid        { grid-template-columns: repeat(2,1fr); }
  .portfolio-grid       { grid-template-columns: repeat(2,1fr); }
  .why-grid             { grid-template-columns: repeat(2,1fr); }
  .stats-grid           { grid-template-columns: repeat(2,1fr); }
  .tool-wrapper         { grid-template-columns: 1fr; }
  .hero-logo            { font-size: clamp(2.5rem,7vw,4.5rem); }
}

/* ===== LAPTOP: ≤900px ===== */
@media (max-width: 900px) {
  .hero-split-wrap { flex-direction: column; text-align: center; gap: 40px; }
  .hero-text-col   { max-width: 100%; }
  .hero-img-col    { order: -1; }
  .hero-cta        { justify-content: center; }
  .hero-stats-row  { justify-content: center; }
  .hero-badge      { justify-content: center; }
  .hero-subtitle   { text-align: center; }
  .hero-founder-tag { text-align: center; }
  .typing-line     { justify-content: center; }
  .contact-wrap    { grid-template-columns: 1fr; }
  .activity-wrapper{ grid-template-columns: 1fr; }
}

/* ===== TABLET SMALL: ≤768px ===== */
@media (max-width: 768px) {
  /* Navbar */
  .nav-links      { display: none; }
  .hamburger      { display: flex; }

  /* Bottom nav */
  .bottom-nav     { display: block; }

  /* Sections */
  .section        { padding: 70px 0; }
  .section-header { margin-bottom: 44px; }

  /* Grids */
  .features-grid  { grid-template-columns: 1fr; }
  .skills-grid    { grid-template-columns: repeat(2,1fr); }
  .services-grid  { grid-template-columns: 1fr; }
  .portfolio-grid { grid-template-columns: 1fr; }
  .why-grid       { grid-template-columns: 1fr; }
  .stats-grid     { grid-template-columns: repeat(2,1fr); }
  .steps-grid     { grid-template-columns: 1fr; }

  /* Hero profile */
  .hero-profile-container { width: 170px; height: 170px; }
  .hero-orbit-dot { animation: rotateDot 4s linear infinite; }

  /* Status bar */
  .status-bar span:nth-child(2),
  .status-bar span:nth-child(3) { display: none; }

  /* Floating buttons */
  .floating-btns  { bottom: 80px; right: 14px; }
  .float-btn      { width: 40px; height: 40px; font-size: 1rem; }

  /* Footer */
  footer          { padding: 32px 16px 80px; }

  /* Tool */
  .tool-textarea  { height: 180px; }
  .lang-tab       { padding: 7px 11px; font-size: 0.74rem; }
  .lang-tab-icon  { display: none; }
  .tool-actions   { gap: 6px; }
  .tool-btn       { padding: 8px 12px; font-size: 0.74rem; }

  /* Contact */
  .contact-info,
  .contact-form   { padding: 24px; }
}

/* ===== MOBILE: ≤480px ===== */
@media (max-width: 480px) {
  /* Container */
  .container      { padding: 0 16px; }

  /* Hero */
  .hero-logo      { font-size: clamp(2.2rem,10vw,3.5rem); }
  .hero-cta       { flex-direction: column; align-items: center; }
  .hero-cta .btn  { width: 100%; justify-content: center; }
  .hero-stats-row { flex-wrap: wrap; gap: 16px; justify-content: center; }
  .hs-divider     { display: none; }
  .hero-profile-container { width: 150px; height: 150px; }
  .hero-img-badge { font-size: 0.62rem; padding: 4px 10px; }

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

  /* Stats */
  .stats-grid     { grid-template-columns: repeat(2,1fr); gap: 12px; }
  .stat-number    { font-size: 2rem; }

  /* Notif */
  .notif-container{ right: 10px; left: 10px; }
  .notif          { min-width: unset; width: 100%; }

  /* Tool */
  .tool-actions   { flex-wrap: wrap; }
  .tool-btn       { flex: 1; min-width: 80px; justify-content: center; }

  /* Lang tabs */
  .lang-tabs      { gap: 4px; }
  .lang-tab       { padding: 6px 10px; font-size: 0.7rem; }

  /* Nav logo */
  .nav-profile-wrap { width: 32px; height: 32px; }
  .nav-profile-img  { width: 32px; height: 32px; }
  .nav-logo .C-big  { font-size: 1.2rem; }

  /* Steps */
  .step-card      { padding: 24px 16px; }

  /* Service tag wrap */
  .service-tag    { display: block; margin-top: 8px; }

  /* Why card */
  .why-card       { padding: 22px; }

  /* Project */
  .project-preview{ height: 150px; }
  .proj-link      { padding: 7px 14px; font-size: 0.76rem; }

  /* Form */
  .form-group input,
  .form-group textarea { padding: 11px 14px; font-size: 0.84rem; }

  /* Footer socials */
  .footer-socials { gap: 10px; }
  .footer-socials a{ width: 38px; height: 38px; font-size: 0.9rem; }

  /* Skill terminal */
  .skill-terminal-body { padding: 14px 16px; }
  .terminal-output     { font-size: 0.74rem; }

  /* Section title */
  .section-title  { font-size: 1.6rem; }
}

/* ===== VERY SMALL: ≤360px ===== */
@media (max-width: 360px) {
  .hero-logo { font-size: 2rem; }
  .hero-profile-container { width: 130px; height: 130px; }
  .btn { padding: 10px 18px; font-size: 0.82rem; }
  .lang-tab { padding: 5px 8px; font-size: 0.66rem; }
  .stats-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
  .stat-number { font-size: 1.7rem; }
}

/* ===== REDUCED MOTION ===== */
@media (prefers-reduced-motion: reduce) {
  *,*::before,*::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .pl-bar { animation: none; width: 100%; }
  #preloader { transition: none; }
}

/* ===== HIGH CONTRAST / ACCESSIBILITY ===== */
@media (prefers-contrast: high) {
  :root {
    --glass-border: rgba(0,245,255,0.4);
    --text-secondary: rgba(232,234,246,0.85);
    --text-dim: rgba(232,234,246,0.6);
  }
  .glass { border-width: 2px; }
  .lang-tab { border-width: 2px; }
}

/* ===== PRINT ===== */
@media print {
  #preloader, #cursor-glow, .neon-grid-overlay,
  #particle-canvas, .neon-lines, .floating-btns,
  .status-bar, #navbar, .bottom-nav,
  .notif-container { display: none !important; }
  body { background: #fff; color: #000; }
  .section { padding: 20px 0; }
}