/* ========================
   Mobile Responsive Enhancements
   Target: 375px minimum (iPhone SE)
   ======================== */

/* ── 375px Base (Small phones) ─────────────────────── */
@media (max-width: 480px) {
  html {
    font-size: 15px;
  }

  /* Navbar */
  .navbar {
    padding: 0 1rem;
    height: 60px;
  }

  :root {
    --nav-height: 60px;
  }

  .nav-logo {
    font-size: 1.1rem;
  }

  /* Page Hero */
  .page-hero {
    padding: 3.5rem 1rem 2.5rem;
  }

  .page-hero h1 {
    font-size: 1.6rem;
    letter-spacing: -1px;
  }

  .page-hero p {
    font-size: 0.9rem;
  }

  /* Section tags */
  .section-tag {
    font-size: 0.7rem;
    padding: 0.25rem 0.7rem;
  }

  /* Footer */
  footer {
    padding: 2rem 1rem;
  }

  .footer-links {
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
  }

  .footer-link {
    font-size: 0.82rem;
  }

  .footer-copy {
    font-size: 0.7rem;
  }

  /* Tags */
  .tag {
    font-size: 0.7rem;
    padding: 0.25rem 0.5rem;
  }

  /* Buttons */
  .btn {
    padding: 0.65rem 1.2rem;
    font-size: 0.88rem;
  }

  /* Section */
  .section {
    padding: 3rem 1rem;
  }

  .section-title {
    font-size: 1.5rem;
  }

  .section-desc {
    font-size: 0.9rem;
  }
}

/* ── 375px - 480px (Small phones specific) ──────────── */
@media (max-width: 375px) {
  html {
    font-size: 14px;
  }

  .navbar {
    padding: 0 0.75rem;
  }

  .page-hero {
    padding: 3rem 0.75rem 2rem;
  }

  .page-hero h1 {
    font-size: 1.4rem;
  }
}

/* ── Index page - Hero ─────────────────────────────── */
@media (max-width: 480px) {
  .hero {
    padding: 3rem 1rem;
    min-height: auto;
  }

  .hero-inner {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }

  .hero-visual {
    order: -1;
  }

  .hero-name {
    font-size: 2rem !important;
    letter-spacing: -1px;
  }

  .hero-label {
    font-size: 0.72rem;
    padding: 0.3rem 0.7rem;
    margin-bottom: 1rem;
  }

  .hero-role {
    font-size: 1rem;
  }

  .hero-role-dynamic {
    min-width: 160px;
  }

  .hero-desc {
    font-size: 0.9rem;
    margin-bottom: 1.5rem;
  }

  .hero-cta {
    flex-direction: column;
    gap: 0.75rem;
  }

  .hero-cta .btn {
    width: 100%;
    justify-content: center;
  }

  .hero-stats {
    gap: 1rem;
    margin-top: 2rem;
    justify-content: center;
  }

  .stat-num {
    font-size: 1.4rem;
  }

  .stat-label {
    font-size: 0.7rem;
  }

  /* Terminal */
  .terminal-body {
    padding: 1rem;
    font-size: 0.72rem;
    max-height: 220px;
  }

  .terminal-bar {
    padding: 0.65rem 0.9rem;
  }

  .terminal-dot {
    width: 10px;
    height: 10px;
  }

  .terminal-title {
    font-size: 0.65rem;
  }

  .keyboard-hint {
    font-size: 0.65rem;
    padding: 0.3rem 0.6rem;
  }

  /* About */
  .about-grid {
    grid-template-columns: 1fr;
    gap: 2rem;
  }

  .about-avatar-wrap {
    position: static;
  }

  .avatar-ring {
    width: 140px;
    height: 140px;
  }

  .avatar-inner {
    font-size: 3.5rem;
  }

  .about-content h3 {
    font-size: 1.2rem;
  }

  .about-content p {
    font-size: 0.88rem;
  }

  .about-highlights {
    grid-template-columns: 1fr;
    gap: 0.75rem;
  }

  .highlight-item {
    padding: 1rem;
  }

  .highlight-title {
    font-size: 0.88rem;
  }

  .highlight-desc {
    font-size: 0.75rem;
  }

  /* Quick nav */
  .quick-nav-grid {
    grid-template-columns: 1fr;
    gap: 1rem;
  }

  .quick-card {
    padding: 1.5rem 1rem;
  }

  .quick-card-icon {
    width: 48px;
    height: 48px;
    font-size: 1.3rem;
  }
}

/* ── Skills page ───────────────────────────────────── */
@media (max-width: 480px) {
  .skills-container {
    padding: 2.5rem 1rem 5rem;
  }

  .skills-summary {
    grid-template-columns: repeat(2, 1fr);
    gap: 0.75rem;
  }

  .summary-card {
    padding: 0.9rem;
  }

  .summary-num {
    font-size: 1.5rem;
  }

  .summary-label {
    font-size: 0.7rem;
  }

  .skills-grid {
    grid-template-columns: 1fr;
    gap: 0.75rem;
  }

  .skill-card {
    padding: 1rem;
  }

  .skill-logo {
    width: 30px;
    height: 30px;
    font-size: 1rem;
  }

  .skill-name {
    font-size: 0.85rem;
  }

  .skill-level {
    font-size: 0.68rem;
  }

  .skill-category-header {
    padding-bottom: 0.75rem;
    margin-bottom: 1rem;
  }

  .skill-category-icon {
    font-size: 1.1rem;
  }

  .skill-category-title {
    font-size: 0.95rem;
  }

  .cert-grid {
    grid-template-columns: 1fr;
    gap: 1rem;
  }

  .cert-card {
    padding: 1.2rem;
    gap: 1rem;
  }

  .cert-badge {
    width: 44px;
    height: 44px;
    font-size: 1.2rem;
  }

  .cert-info h4 {
    font-size: 0.88rem;
  }
}

/* ── Projects page ─────────────────────────────────── */
@media (max-width: 480px) {
  .projects-container {
    padding: 2.5rem 1rem 5rem;
  }

  .filter-bar {
    padding: 0.75rem;
    gap: 0.4rem;
    margin-bottom: 1.5rem;
  }

  .filter-btn {
    font-size: 0.75rem;
    padding: 0.35rem 0.75rem;
  }

  .projects-grid {
    grid-template-columns: 1fr;
    gap: 1rem;
  }

  .project-card.featured-wide {
    grid-column: span 1;
  }

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

  .project-card.featured-wide .project-meta,
  .project-card.featured-wide .project-title,
  .project-card.featured-wide .project-desc,
  .project-card.featured-wide .project-tags,
  .project-card.featured-wide .project-links {
    grid-column: span 1;
  }

  .project-thumb {
    height: 140px;
  }

  .project-body {
    padding: 1.2rem;
  }

  .project-title {
    font-size: 1rem;
  }

  .project-desc {
    font-size: 0.82rem;
  }

  .project-meta {
    flex-wrap: wrap;
  }

  .project-type,
  .project-period {
    font-size: 0.68rem;
  }

  .project-links {
    flex-wrap: wrap;
    gap: 0.5rem;
  }

  .project-link {
    font-size: 0.78rem;
    padding: 0.35rem 0.7rem;
  }
}

/* ── Lightbox mobile fix ───────────────────────────── */
@media (max-width: 480px) {
  #lightbox {
    padding: 1rem;
  }

  #lightbox img {
    max-width: 95vw;
    max-height: 80vh;
  }

  #lightbox-close {
    top: 0.8rem;
    right: 0.8rem;
    font-size: 1.4rem;
  }

  #lightbox-caption {
    font-size: 0.7rem;
    bottom: 1rem;
  }
}

/* ── Touch improvements ────────────────────────────── */
@media (pointer: coarse) {
  /* Increase tap targets */
  .nav-hamburger {
    padding: 12px;
  }

  .filter-btn {
    min-height: 44px;
    display: flex;
    align-items: center;
  }

  .project-link {
    min-height: 44px;
    display: flex;
    align-items: center;
  }

  /* Disable hover effects on touch */
  .project-card:hover {
    transform: none;
    box-shadow: none;
  }

  .skill-card:hover {
    transform: none;
    box-shadow: none;
  }

  .cert-card:hover {
    transform: none;
    box-shadow: none;
  }

  .highlight-item:hover {
    transform: none;
  }

  .quick-card:hover {
    transform: none;
    box-shadow: none;
  }

  /* Remove cursor glow on touch */
  #cursor-glow {
    display: none !important;
  }
}

/* ── Landscape phone ───────────────────────────────── */
@media (max-height: 500px) and (orientation: landscape) {
  .hero {
    min-height: auto;
    padding: 2rem 1rem;
  }

  .terminal-body {
    max-height: 150px;
  }
}

/* ── Tablet (768px - 1024px) ───────────────────────── */
@media (min-width: 481px) and (max-width: 768px) {
  .hero-inner {
    grid-template-columns: 1fr;
    gap: 2rem;
  }

  .hero-visual {
    order: -1;
    max-width: 500px;
    margin: 0 auto;
  }

  .hero-name {
    font-size: 2.8rem;
  }

  .about-grid {
    grid-template-columns: 1fr;
  }

  .about-avatar-wrap {
    position: static;
  }

  .about-highlights {
    grid-template-columns: repeat(2, 1fr);
  }

  .quick-nav-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .skills-summary {
    grid-template-columns: repeat(2, 1fr);
  }

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