/* ============================================
   MOBILE-FIRST RESPONSIVE — مصطفى كامل Portfolio
   Breakpoints: 480px / 640px / 768px
   ============================================ */

/* ---- NAV MOBILE ---- */
@media (max-width: 768px) {

  /* NAV */
  nav {
    padding: 0 1rem;
    height: 56px;
    position: fixed;
  }
  .nav-logo { font-size: 15px; }
  .nav-links {
    gap: 0;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: 2px;
  }
  .nav-links::-webkit-scrollbar { display: none; }
  .nav-links a {
    font-size: 12px;
    padding: 5px 10px;
    white-space: nowrap;
  }

  /* PAGE */
  .page { padding-top: 56px; }
  .page-hero { padding: 2.5rem 1.25rem 1.5rem; }
  .page-title { font-size: clamp(1.7rem, 7vw, 2.4rem); line-height: 1.2; }
  .page-sub { font-size: 14px; line-height: 1.8; }
  .content { padding: 1.25rem 1.25rem 4rem; }

  /* GRIDS */
  .grid-3, .grid-2 { grid-template-columns: 1fr; gap: 1rem; }

  /* CARDS */
  .card { padding: 1.25rem; }

  /* BUTTONS */
  .btn-primary, .btn-outline {
    padding: 12px 20px;
    font-size: 14px;
    width: 100%;
    text-align: center;
    display: block;
  }
  .hero-actions { flex-direction: column; gap: .75rem; }

  /* TAGS */
  .tag { font-size: 11px; padding: 3px 10px; }

  /* FOOTER */
  footer { font-size: 12px; padding: 1.5rem 1rem; }
}

/* ---- INDEX PAGE ---- */
@media (max-width: 768px) {

  /* HERO */
  .hero { padding: 70px 1.25rem 2rem; min-height: auto; }
  .hero-inner { grid-template-columns: 1fr !important; gap: 2rem; }
  .avatar-box {
    width: 140px !important; height: 140px !important;
    font-size: 42px !important;
    border-radius: 16px !important;
    margin: 0 auto;
    display: flex !important;
  }
  .hero h1 { font-size: clamp(1.8rem, 7vw, 2.5rem); }
  .hero-sub { font-size: 14px; max-width: 100%; margin-bottom: 1.5rem; }
  .hero-tag { font-size: 11px; padding: 5px 12px; }

  /* HERO STATS */
  .hero-stats {
    gap: 1rem;
    display: grid !important;
    grid-template-columns: 1fr 1fr;
  }
  .hero-stat-num { font-size: 1.5rem; }
  .hero-stat-label { font-size: 11px; }

  /* HIGHLIGHTS */
  .highlights {
    grid-template-columns: repeat(2, 1fr) !important;
    margin: 0 !important;
    width: 100% !important;
  }
  .hl-item { padding: 1.25rem 1rem; }
  .hl-num { font-size: 1.75rem; }
  .hl-desc { font-size: 11px; }

  /* QUICK SECTION */
  .quick-section { padding: 2.5rem 1.25rem; }
  .services-grid { grid-template-columns: 1fr !important; gap: 1rem; }
  .s-card { padding: 1.25rem; }
  .s-icon { font-size: 24px; margin-bottom: .5rem; }
  .s-card h3 { font-size: 15px; }
  .s-card p { font-size: 13px; }

  /* CTA */
  .cta-section { padding: 0 1.25rem 3rem; }
  .cta-card { padding: 2rem 1.25rem; }
  .cta-card h2 { font-size: 1.4rem; }
  .cta-card p { font-size: 14px; }
}

/* ---- SERVICES PAGE ---- */
@media (max-width: 768px) {
  .service-block {
    grid-template-columns: 1fr !important;
    gap: 1rem;
    padding: 1.5rem;
  }
  .service-icon-lg { width: 56px; height: 56px; font-size: 28px; }
  .service-block h2 { font-size: 18px; }
  .service-block .sub { font-size: 12px; }
  .service-block p { font-size: 14px; }
  .feature-list { grid-template-columns: 1fr !important; gap: 6px; }
  .feature-list li { font-size: 13px; }
  .pricing-note { font-size: 12px; }
  .cta-strip { padding: 2rem 1.25rem; }
  .cta-strip h2 { font-size: 1.4rem; }
}

/* ---- PROJECTS PAGE ---- */
@media (max-width: 768px) {
  .project-card {
    padding: 1.5rem;
    margin-bottom: 1.25rem;
  }
  .project-header {
    flex-direction: column;
    gap: .75rem;
  }
  .project-header-left h2 { font-size: 17px; }
  .metrics-row { gap: .75rem; }
  .metric { padding: 10px 14px; }
  .metric-val { font-size: 18px; }
  .project-card .desc { font-size: 13px; }
  .result-list { grid-template-columns: 1fr !important; gap: 5px; }
  .result-list li { font-size: 13px; }

  /* CASE STUDY TABLE */
  .perf-table { font-size: 12px; }
  .perf-table th, .perf-table td { padding: 10px 10px; }

  /* AI FEATURE CARD */
  .ai-feature-card { padding: 1.5rem; }
  .ai-feature-card h2 { font-size: 17px; }
  .ai-features-grid { grid-template-columns: 1fr !important; gap: .75rem; }
  .ai-feat { font-size: 13px; padding: .75rem 1rem; }
}

/* ---- EXPERIENCE PAGE ---- */
@media (max-width: 768px) {
  .timeline-wrap { padding-right: 1.75rem; }
  .tl-card { padding: 1.25rem; }
  .tl-top {
    flex-direction: column;
    gap: .5rem;
  }
  .tl-title { font-size: 16px; }
  .tl-company { font-size: 13px; }
  .tl-body { font-size: 13px; }
  .tl-results { grid-template-columns: repeat(2, 1fr) !important; gap: .75rem; }
  .tl-bullet-list { grid-template-columns: 1fr !important; }
  .tl-bullet-list li { font-size: 12px; }
  .edu-section { grid-template-columns: 1fr !important; gap: 1rem; margin-top: 2rem; }
  .edu-card { padding: 1.25rem; }
  .edu-card h3 { font-size: 15px; }
  .cert-list li { font-size: 13px; }
}

/* ---- TOOLS PAGE ---- */
@media (max-width: 768px) {
  .tools-section-title { font-size: 15px; }
  .tools-grid { grid-template-columns: repeat(2, 1fr) !important; gap: .75rem; }
  .tool-card { padding: 1rem .75rem; }
  .tool-emoji { font-size: 24px; margin-bottom: 6px; }
  .tool-name { font-size: 12px; }
  .tool-cat { font-size: 10px; }
  .skill-bars { margin-top: 2.5rem; }
  .skill-name { font-size: 13px; }
  .skill-pct { font-size: 12px; }
}

/* ---- CONTACT PAGE ---- */
@media (max-width: 768px) {
  .contact-layout { grid-template-columns: 1fr !important; gap: 1.25rem; }
  .contact-info-card, .contact-form-card { padding: 1.5rem; }
  .contact-info-card h2, .contact-form-card h2 { font-size: 18px; }
  .contact-item { padding: .875rem 0; gap: .75rem; }
  .c-icon { width: 38px; height: 38px; font-size: 18px; border-radius: 8px; }
  .contact-item-text { font-size: 13px; }
  .availability-card { padding: 1.25rem; flex-direction: row; gap: 1rem; margin-top: 1.25rem; }
  .avail-text { font-size: 14px; }
  .avail-sub { font-size: 12px; }
  .form-group input, .form-group select, .form-group textarea {
    font-size: 14px; padding: 11px 13px;
  }
  .form-submit { font-size: 15px; padding: 13px; }
}

/* ---- WORK PAGE ---- */
@media (max-width: 768px) {
  .logos-grid { grid-template-columns: repeat(2, 1fr) !important; gap: .75rem; }
  .logo-card { padding: 1rem .75rem; }
  .logo-card img { width: 64px; height: 64px; }
  .logo-card span { font-size: 11px; }

  .gallery { grid-template-columns: repeat(2, 1fr) !important; gap: .75rem; }
  .gallery-item.rect { aspect-ratio: 4/3; }

  .n8n-grid { grid-template-columns: 1fr !important; gap: 1.25rem; }
  .n8n-card img { height: 180px; }
  .n8n-info { padding: 1rem; }
  .n8n-info h3 { font-size: 15px; }
  .n8n-info p { font-size: 13px; }

  .video-links { grid-template-columns: 1fr 1fr !important; gap: .75rem; }
  .video-link-card { padding: 1rem .75rem; }
  .video-link-card .v-icon { font-size: 24px; }
  .video-link-card span { font-size: 11px; }
  .video-note { padding: 1.5rem 1rem; }

  /* Layaly section */
  .layaly-grid, [style*="grid-template-columns:180px"] {
    grid-template-columns: 1fr !important;
  }
}

/* ---- VERY SMALL SCREENS (< 400px) ---- */
@media (max-width: 400px) {
  .nav-links a { font-size: 11px; padding: 5px 7px; }
  .hero h1 { font-size: 1.6rem; }
  .hero-stats { grid-template-columns: 1fr 1fr; gap: .75rem; }
  .hero-stat-num { font-size: 1.3rem; }
  .gallery { grid-template-columns: 1fr 1fr !important; }
  .logos-grid { grid-template-columns: 1fr 1fr !important; }
  .tools-grid { grid-template-columns: repeat(2, 1fr) !important; }
  .tl-results { grid-template-columns: 1fr 1fr !important; }
}

/* ---- HAMBURGER MENU ---- */
.hamburger {
  display: none;
  flex-direction: column;
  gap: 5px;
  cursor: pointer;
  padding: 8px;
  background: none;
  border: none;
  z-index: 200;
}
.hamburger span {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--text-main);
  border-radius: 2px;
  transition: all .3s;
}
.hamburger.open span:nth-child(1) { transform: rotate(45deg) translate(5px, 5px); }
.hamburger.open span:nth-child(2) { opacity: 0; }
.hamburger.open span:nth-child(3) { transform: rotate(-45deg) translate(5px, -5px); }

@media (max-width: 640px) {
  .hamburger { display: flex; }
  .nav-links {
    position: fixed;
    top: 56px; right: 0; left: 0;
    background: rgba(10,10,10,0.98);
    backdrop-filter: blur(16px);
    flex-direction: column;
    padding: 1rem;
    gap: .25rem;
    border-bottom: 1px solid var(--border);
    transform: translateY(-120%);
    transition: transform .3s ease;
    z-index: 99;
    overflow: visible;
  }
  .nav-links.open { transform: translateY(0); }
  .nav-links a { font-size: 15px; padding: 12px 16px; border-radius: 10px; }
}