/* ============================================
   Fully Responsive — All Devices
   Mobile · Tablet · Laptop · Desktop · Ultra-wide
   Portrait · Landscape · Touch · Safe areas
   ============================================ */

/* ---------- Base fluid type & spacing ---------- */
:root {
  --section-pad-y: clamp(4rem, 8vw, 6.875rem);
  --section-pad-x: clamp(0.75rem, 3vw, 1rem);
  --card-pad: clamp(1.1rem, 3vw, 2rem);
}

.section {
  padding: var(--section-pad-y) 0;
}

.section-title {
  font-size: clamp(1.55rem, 4.2vw, 2.75rem);
  word-wrap: break-word;
  overflow-wrap: break-word;
}

.section-subtitle {
  font-size: clamp(0.95rem, 2.2vw, 1.05rem);
  padding: 0 4px;
}

/* Prevent horizontal overflow from decorative layers */
.bg-blobs,
#particles-js,
.cursor-glow {
  max-width: 100vw;
  overflow: hidden;
}

.blob {
  max-width: 50vw;
  max-height: 50vw;
}

/* Touch-friendly targets */
@media (pointer: coarse) {
  .nav-link,
  .filter-btn,
  .icon-btn,
  .social-icon,
  .faq-question,
  .btn {
    min-height: 44px;
  }

  .cursor-glow {
    display: none !important;
  }

  .magnetic {
    transform: none !important;
  }
}

/* Kill horizontal AOS offsets that push content off-screen on mobile */
@media (max-width: 991.98px) {
  [data-aos],
  [data-aos].aos-animate {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }

  .row {
    margin-left: 0;
    margin-right: 0;
  }

  .row > * {
    padding-left: 12px;
    padding-right: 12px;
    max-width: 100%;
  }

  .hero-copy,
  .hero-desc,
  .hero-roles,
  .hero-title,
  .hero-cta {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
  }

  .hero-roles,
  .hero-desc,
  .hero-title {
    overflow-wrap: anywhere;
    word-break: break-word;
    white-space: normal;
  }
}

/* ---------- Ultra-wide (≥1600px) ---------- */
@media (min-width: 1600px) {
  .container {
    max-width: 1400px;
  }

  .hero-title {
    font-size: 4.5rem;
  }

  .hero-photo-ring {
    width: 400px;
    height: 400px;
  }

  .project-image {
    height: 220px;
  }
}

/* ---------- Large desktop (1200–1599px) ---------- */
@media (min-width: 1200px) and (max-width: 1599.98px) {
  .hero-photo-ring {
    width: min(360px, 32vw);
    height: min(360px, 32vw);
  }
}

/* ---------- Laptop / small desktop (≤1199px) ---------- */
@media (max-width: 1199.98px) {
  .process-track {
    grid-template-columns: repeat(4, 1fr);
  }

  .modal-hero-img {
    max-height: 300px;
  }

  .terminal-body {
    min-height: 220px;
  }
}

/* ---------- Tablet (≤991px) ---------- */
@media (max-width: 991.98px) {
  :root {
    --nav-height: 64px;
  }

  .navbar {
    padding-top: max(0.45rem, env(safe-area-inset-top));
  }

  .navbar.scrolled,
  .navbar {
    background: rgba(5, 8, 22, 0.92);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
  }

  [data-theme="light"] .navbar,
  [data-theme="light"] .navbar.scrolled {
    background: rgba(248, 250, 252, 0.94);
  }

  .navbar-collapse {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    margin-top: 10px;
    padding: 12px;
    box-shadow: var(--shadow-soft);
    max-height: min(70vh, 520px);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  .navbar-nav {
    gap: 2px;
  }

  .nav-link {
    padding: 0.7rem 0.9rem !important;
    border-radius: 10px;
  }

  .nav-link:hover,
  .nav-link.active {
    background: rgba(59, 130, 246, 0.1);
  }

  .nav-link.active::after {
    display: none;
  }

  .mega-menu {
    position: static !important;
    transform: none !important;
    margin: 4px 0 8px !important;
    box-shadow: none;
    border: 1px solid var(--border) !important;
  }

  .navbar-nav .btn {
    width: 100%;
    margin-top: 6px;
  }

  .hero-section {
    padding-top: calc(var(--nav-height) + 4px);
  }

  .hero-row {
    min-height: auto;
    text-align: center;
    padding-top: 0.75rem;
    padding-bottom: 0.5rem;
  }

  .hero-copy {
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .hero-desc {
    margin-left: auto;
    margin-right: auto;
  }

  .hero-cta {
    width: 100%;
    max-width: 420px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }

  .hero-cta-primary {
    grid-column: 1 / -1;
  }

  .hero-cta .btn {
    width: 100%;
    justify-content: center;
    padding: 0.6rem 0.7rem;
    font-size: 0.84rem;
    white-space: nowrap;
  }

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

  .hero-visual {
    margin: 0 auto;
    padding: 20px;
  }

  .hero-photo-ring {
    width: min(220px, 58vw);
    height: min(220px, 58vw);
    margin: 0 auto;
  }

  .hero-photo {
    animation: none;
  }

  .orbit-icon {
    width: 36px;
    height: 36px;
    font-size: 0.95rem;
    animation: none;
  }

  .hero-stats {
    margin-top: 20px;
    margin-bottom: 24px;
  }

  .scroll-indicator {
    margin-bottom: 4px;
  }

  .timeline,
  .experience-timeline {
    padding-left: 24px;
  }

  .process-track {
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
  }

  .projects-toolbar {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
  }

  .search-box {
    min-width: 0;
    width: 100%;
  }

  .modal-dialog {
    margin: 0.75rem;
    max-width: calc(100% - 1.5rem);
  }

  .modal-gallery {
    grid-template-columns: repeat(3, 1fr);
  }

  .stack-logos {
    gap: 10px;
  }

  .stack-logo {
    padding: 10px 14px;
    font-size: 0.85rem;
  }

  .widgets-stack {
    margin-top: 8px;
  }
}

/* ---------- Large phones / small tablets (≤767px) ---------- */
@media (max-width: 767.98px) {
  :root {
    --nav-height: 60px;
  }

  .section-header {
    margin-bottom: 28px;
  }

  .section-tag {
    font-size: 0.72rem;
    padding: 5px 12px;
  }

  .hero-badge {
    font-size: 0.78rem;
    padding: 6px 12px;
  }

  .hero-roles {
    min-height: 3em;
    font-size: 0.95rem;
    padding: 0 4px;
  }

  .hero-stats .col-6 {
    padding-left: 6px;
    padding-right: 6px;
  }

  .stat-card {
    padding: 14px 10px;
  }

  .stat-value {
    font-size: 1.45rem;
  }

  .stat-label {
    font-size: 0.78rem;
    line-height: 1.3;
  }

  .about-card,
  .contact-info,
  .contact-form,
  .exp-card,
  .edu-card,
  .service-card,
  .achieve-card,
  .testimonial-card,
  .blog-body,
  .project-body {
    padding: var(--card-pad);
  }

  .about-item {
    flex-direction: column;
    align-items: flex-start;
  }

  .timeline-content,
  .exp-card {
    padding: 16px;
  }

  .timeline-content h4,
  .exp-card h3 {
    font-size: 1rem;
  }

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

  .process-step {
    padding: 18px 12px;
  }

  .process-num {
    font-size: 1.3rem;
  }

  .skills-filters,
  .certs-filters,
  .projects-filters {
    justify-content: flex-start;
    overflow-x: auto;
    flex-wrap: nowrap;
    padding-bottom: 10px;
    margin-bottom: 20px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    mask-image: linear-gradient(90deg, #000 90%, transparent);
  }

  .skills-filters::-webkit-scrollbar,
  .certs-filters::-webkit-scrollbar,
  .projects-filters::-webkit-scrollbar {
    height: 4px;
  }

  .filter-btn {
    white-space: nowrap;
    flex-shrink: 0;
    font-size: 0.78rem;
    padding: 8px 12px;
  }

  .project-image {
    height: 180px;
  }

  .project-actions {
    gap: 6px;
  }

  .project-actions .btn {
    flex: 1 1 auto;
    text-align: center;
  }

  .circular-skill svg {
    width: 100px;
    height: 100px;
  }

  .circular-value {
    font-size: 1.05rem;
  }

  .modal-dialog {
    margin: 0.5rem;
    max-width: calc(100% - 1rem);
  }

  .modal-content {
    border-radius: 14px !important;
  }

  .modal-header,
  .modal-body {
    padding: 14px;
  }

  .modal-hero-img {
    max-height: 220px;
  }

  .modal-gallery {
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
  }

  .modal-gallery-item {
    height: 56px;
  }

  .terminal-body {
    min-height: 200px;
    font-size: 0.8rem;
    padding: 14px;
  }

  .widget-body {
    font-size: 1.3rem;
  }

  .map-placeholder {
    height: 130px;
  }

  .site-footer {
    padding: 48px 0 calc(28px + env(safe-area-inset-bottom));
  }

  .footer-bottom {
    flex-direction: column;
    text-align: center;
  }

  .back-to-top {
    bottom: max(16px, env(safe-area-inset-bottom));
    right: max(12px, env(safe-area-inset-right));
    width: 44px;
    height: 44px;
  }

  .fab-menu {
    bottom: max(16px, env(safe-area-inset-bottom));
    left: max(12px, env(safe-area-inset-left));
  }

  .fab-main {
    width: 50px;
    height: 50px;
  }

  .ai-chat {
    left: max(12px, env(safe-area-inset-left));
    right: max(12px, env(safe-area-inset-right));
    bottom: calc(80px + env(safe-area-inset-bottom));
    width: auto;
    height: min(400px, 60vh);
  }

  .cookie-notice {
    bottom: max(10px, env(safe-area-inset-bottom));
    left: 12px;
    right: 12px;
    width: auto;
    transform: none;
    flex-direction: column;
    text-align: center;
    padding: 14px;
  }

  .cookie-actions {
    width: 100%;
    justify-content: center;
  }

  .swiper-button-prev,
  .swiper-button-next {
    display: none !important;
  }

  .testimonials-swiper {
    padding-bottom: 40px;
  }

  .faq-question {
    font-size: 0.92rem;
    padding: 14px 16px;
    text-align: left;
  }

  .faq-answer p {
    padding: 0 16px 14px;
    font-size: 0.9rem;
  }

  /* Reduce motion-heavy decor on small screens for performance */
  #particles-js {
    opacity: 0.45;
  }

  .blob {
    filter: blur(60px);
    opacity: 0.22;
  }
}

/* ---------- Small phones (≤575px) ---------- */
@media (max-width: 575.98px) {
  .container,
  .container-fluid {
    padding-left: max(12px, env(safe-area-inset-left));
    padding-right: max(12px, env(safe-area-inset-right));
  }

  .brand-text {
    display: inline;
    font-size: 0.95rem;
  }

  .icon-btn {
    width: 38px;
    height: 38px;
  }

  .hero-photo-ring {
    width: min(200px, 56vw);
    height: min(200px, 56vw);
  }

  .orbit-icon {
    width: 32px;
    height: 32px;
    font-size: 0.85rem;
  }

  .orbit-1 { top: 2%; right: -2%; }
  .orbit-2 { bottom: 10%; right: -8%; }
  .orbit-3 { bottom: 2%; left: 0; }
  .orbit-4 { top: 12%; left: -8%; }

  .hero-cta .btn {
    font-size: 0.8rem;
    padding: 0.55rem 0.5rem;
  }

  .hero-cta .btn i {
    margin-right: 0.25rem !important;
  }

  .hero-social .social-icon {
    width: 40px;
    height: 40px;
  }

  .process-track {
    grid-template-columns: 1fr 1fr;
    gap: 10px;
  }

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

  .stack-logo span {
    font-size: 0.8rem;
  }

  .achieve-value {
    font-size: 1.8rem;
  }

  .contact-list li {
    align-items: flex-start;
  }

  .contact-list a,
  .contact-list span {
    word-break: break-word;
  }

  .form-control {
    font-size: 16px; /* prevents iOS zoom on focus */
  }
}

/* ---------- Extra-small phones (≤400px) ---------- */
@media (max-width: 400px) {
  .process-track {
    grid-template-columns: 1fr;
  }

  .hero-photo-ring {
    width: min(180px, 52vw);
    height: min(180px, 52vw);
  }

  .orbit-icon {
    display: none;
  }

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

  .hero-cta-primary {
    grid-column: auto;
  }

  .stat-value {
    font-size: 1.25rem;
  }

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

  .project-image {
    height: 160px;
  }

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

  .ai-chat {
    height: min(360px, 55vh);
  }
}

/* ---------- Landscape phones ---------- */
@media (max-height: 500px) and (orientation: landscape) {
  .hero-row {
    min-height: auto;
    padding-top: 12px;
    padding-bottom: 12px;
  }

  .scroll-indicator,
  .orbit-icon {
    display: none;
  }

  .hero-photo-ring {
    width: min(140px, 28vw);
    height: min(140px, 28vw);
  }

  .hero-stats {
    margin-bottom: 16px;
  }

  .navbar-collapse {
    max-height: 60vh;
  }

  .ai-chat {
    height: min(280px, 70vh);
  }

  .loader-inner {
    transform: scale(0.9);
  }
}

/* ---------- Print ---------- */
@media print {
  .loader,
  .navbar,
  .cursor-glow,
  #particles-js,
  .bg-blobs,
  .back-to-top,
  .fab-menu,
  .ai-chat,
  .cookie-notice,
  .scroll-progress,
  .scroll-indicator,
  .orbit-icon {
    display: none !important;
  }

  body {
    background: #fff;
    color: #000;
  }

  .section {
    padding: 16px 0;
    break-inside: avoid;
  }

  .glass-card,
  .project-card,
  .stat-card {
    box-shadow: none;
    border: 1px solid #ddd;
  }
}

/* ---------- High contrast ---------- */
@media (prefers-contrast: more) {
  :root {
    --border: rgba(255, 255, 255, 0.35);
    --text-gray: #CBD5E1;
  }

  .glass-card {
    border-width: 2px;
  }

  .btn-primary {
    outline: 1px solid #fff;
  }
}

/* ---------- Reduced motion (mobile-friendly) ---------- */
@media (prefers-reduced-motion: reduce) {
  .hero-photo,
  .orbit-icon,
  .blob,
  .project-cover {
    animation: none !important;
    transition: none !important;
  }
}