/* ==========================================================================
   Responsive Layout Media Queries
   ========================================================================== */

/* Enable inertial scroll & smooth styling globally */
html {
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
}

@media (max-width: 1020px) {
  .hero__grid {
    grid-template-columns: 1fr;
  }
  .hero__right {
    min-height: 420px;
  }
  .ill {
    width: 420px;
    height: 380px;
    margin: 0 auto;
    transform: none;
  }
  .aboutGrid {
    grid-template-columns: 1fr;
  }
  .serviceGrid {
    grid-template-columns: 1fr;
  }
  .stackGrid {
    grid-template-columns: repeat(3, 1fr);
  }
  .skillsGrid {
    grid-template-columns: 1fr;
  }
  .processGrid {
    grid-template-columns: repeat(2, 1fr);
  }
  .contactGrid {
    grid-template-columns: 1fr;
  }
  .footer__grid {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 720px) {
  .nav__links {
    display: none;
  }
  .nav__burger {
    display: inline-flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }
  .nav__mobile {
    display: block;
  }
  .section {
    padding: 64px 0;
  }
  .sectionHead {
    flex-direction: column;
    align-items: flex-start;
  }
  .stackGrid {
    grid-template-columns: repeat(2, 1fr);
  }
  .processGrid {
    grid-template-columns: 1fr;
  }
  .miniGrid {
    grid-template-columns: 1fr;
  }
  .hero {
    padding-top: 34px;
  }
}

/* ==========================================================================
   Comprehensive Responsive Overrides (Mobile-First / Desktop-First hybrid audits)
   ========================================================================== */

/* Global Viewport Adjustments to prevent horizontal scroll bars */
html, body {
  max-width: 100vw;
  overflow-x: hidden !important;
}

main, section, header, footer {
  overflow-x: hidden !important;
}

/* Large Mobile / Mobile Adjustments (max-width: 720px) */
@media (max-width: 720px) {
  /* 1. Disable heavy GPU/Blur backdrop-filters to restore 60fps scrolling */
  .glassCard, 
  .bentoCard, 
  .projectCard, 
  .nav, 
  .carousel-controls, 
  .aboutPhotoBadge,
  .nav__mobile {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    background-color: rgba(13, 14, 18, 0.96) !important;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.45) !important;
  }

  /* 2. Hide heavy background animated/mesh/glow layers on mobile to optimize CPU cycles */
  .bg__aurora,
  .bg__mesh,
  .bg__blobs,
  .spotlight,
  .bg-afterHeroWrap__blob,
  .bg-heroWrap__blob,
  .hero__bgBlob--1,
  .hero__bgBlob--2,
  .hero__bgBlob--3,
  .bg-afterHeroWrap__dot,
  .bg-afterHeroWrap__grid {
    animation: none !important;
    filter: none !important;
    display: none !important;
    transform: none !important;
  }

  /* Fallback page background to solid dark performant background */
  .bg {
    background-color: #050816 !important;
    background-image: none !important;
  }

  /* Re-design header as a flat sticky bar on mobile to avoid layout clipping */
  .nav {
    top: 0 !important;
    left: 0 !important;
    transform: none !important;
    width: 100% !important;
    border-radius: 0 !important;
    border: none !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
    padding: 10px 16px !important;
  }
  .nav.isScrolled {
    top: 0 !important;
    border-radius: 0 !important;
    padding: 10px 16px !important;
  }
  .nav__inner {
    padding: 0;
    gap: 12px;
  }
  .brand__mark {
    width: 150px;
    height: 44px;
  }
  .nav__mobile {
    width: 100% !important;
    margin: 10px 0 0 0 !important;
    border-radius: 12px !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.8) !important;
  }
  
  /* About section photo card responsiveness & padding to prevent Badge collision */
  .aboutPhoto {
    min-height: 280px !important;
    max-height: 320px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
  .aboutPhoto img {
    object-fit: contain !important;
    padding: 24px 24px 64px 24px !important; /* extra bottom padding for the absolute badge */
    width: 100% !important;
    height: 100% !important;
  }
  .about-bio-card {
    padding: 24px 20px !important;
  }

  /* Bento Grids stacking */
  .bentoGrid {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }
  .bentoCard--2x1 {
    grid-column: span 1 !important;
  }
  .bentoCard--1x2 {
    grid-row: span 1 !important;
  }
  .bentoCard {
    padding: 24px 20px !important;
    min-height: auto !important;
  }
}

/* Hide Hire Me from horizontal header actions and show logo smaller under 640px */
@media (max-width: 640px) {
  .nav__actions .btn--primary {
    display: none !important;
  }
  .brand__mark {
    width: 130px;
    height: 38px;
  }
}

/* Small Mobile / iPhone SE Adjustments (max-width: 480px) */
@media (max-width: 480px) {
  .hero__title {
    font-size: clamp(32px, 8vw, 44px) !important;
  }
  .hero__tagline {
    font-size: 15px !important;
    margin-top: 14px !important;
    margin-bottom: 20px !important;
  }
  
  /* Safe non-overflowing height constraints for scaled 3D portrait */
  .illWrap {
    width: 100% !important;
    overflow: hidden !important;
    height: 280px !important;
  }
  .ill {
    width: 290px !important;
    height: 260px !important;
    transform: scale(0.7) !important;
    transform-origin: center center !important;
    margin: 0 auto !important;
  }
  .ill__portrait {
    width: 200px !important;
    height: 200px !important;
    transform: translate(-50%, -50%) !important; /* flatten 3D transform on mobile for clean rendering */
  }
  .hero__right {
    min-height: 300px !important;
  }
  
  /* Hero Call To Action wrapping */
  .hero__cta {
    width: 100%;
    flex-direction: column;
    gap: 10px !important;
  }
  .hero__cta .btn {
    width: 100% !important;
    text-align: center;
    justify-content: center;
  }
  
  /* Carousels boundaries */
  .projectCard {
    --card-width: 290px !important;
  }
  .perspective-carousel {
    --card-width: 290px !important;
    min-height: 480px !important;
  }
  
  /* Skills and form padding levels */
  .skill-top {
    font-size: 13px !important;
  }
  .glow-card {
    padding: 20px 16px !important;
  }
}

/* Collapse statistics rows to prevent overlapping on tiny mobile cards */
@media (max-width: 540px) {
  .statGrid {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }
}

/* Very Narrow Screen Adjustments (max-width: 360px) */
@media (max-width: 360px) {
  .illWrap {
    height: 240px !important;
  }
  .ill {
    transform: scale(0.58) !important;
  }
  .ill__portrait {
    width: 160px !important;
    height: 160px !important;
  }
  .hero__right {
    min-height: 250px !important;
  }
}

/* Tablet Adjustments (641px - 1024px) */
@media (min-width: 641px) and (max-width: 1024px) {
  .bentoGrid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 20px !important;
  }
  .bentoCard--2x1 {
    grid-column: span 2 !important;
  }
  .bentoCard--1x2 {
    grid-row: span 2 !important;
  }
}

/* Laptop / Responsive Container Padding (max-width: 1440px) */
@media (max-width: 1440px) {
  .container {
    width: min(var(--container), calc(100% - 48px));
  }
}