/* ==========================================================================
   1myguy Studio: Master Mobile Layout Engine
   ========================================================================== */

/* 1. Mandatory Mobile Responsive Reset */
html, body {
  overflow-x: hidden;
  max-width: 100vw;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
*, *::before, *::after {
  box-sizing: inherit;
}

/* 2. Mobile-First Responsive Grid System */
.studio-grid {
  display: grid;
  grid-template-columns: 1fr; /* Default: Single column layout for mobile viewports */
  gap: 1.5rem;
  width: 100%;
}

@media (min-width: 640px) {
  .studio-grid-2-col {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 768px) {
  .studio-grid-3-col {
    grid-template-columns: repeat(3, 1fr);
  }
  .studio-grid-4-col {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* 3. Global Mobile Touch Targets Baseline */
a, button, .btn, [role="button"] {
  min-height: 44px;
  min-width: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  touch-action: manipulation;
}

/* 4. Complete Responsive Hamburger & Navigation Drawer Architecture */
.desktop-nav {
  display: flex;
  align-items: center;
  gap: 2rem;
}

.hamburger-btn {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0.5rem;
  z-index: 1001;
}

/* Navigation layout state switches below the 768px desktop threshold */
@media (max-width: 767px) {
  .desktop-nav { 
    display: none !important; 
  }
  
  .hamburger-btn { 
    display: flex; 
  }
  
  .mobile-menu-drawer {
    position: fixed;
    top: 0;
    right: -280px; /* Fully hidden off-screen layout by default */
    width: 280px;
    height: 100vh;
    background: #ffffff;
    box-shadow: -4px 0 24px rgba(0, 0, 0, 0.1);
    z-index: 1000;
    display: flex;
    flex-direction: column;
    padding: 5rem 2rem 2rem 2rem;
    transition: transform 300ms cubic-bezier(0.32, 0.72, 0, 1);
  }
  
  /* Trigger layout when mobile-menu-open utility class is applied to body element */
  body.mobile-menu-open .mobile-menu-drawer {
    transform: translateX(-280px); /* Slides drawer cleanly into view viewport */
  }
  
  .mobile-menu-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.4);
    opacity: 0;
    visibility: hidden;
    z-index: 999;
    transition: opacity 300ms ease;
  }
  
  body.mobile-menu-open .mobile-menu-overlay {
    opacity: 1;
    visibility: visible;
  }
}

/* 5. Accessibility: skip link and motion safety */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: #111111;
  color: #ffffff;
  padding: 0.75rem 1.25rem;
  z-index: 2000;
}
.skip-link:focus {
  left: 0;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* 6. Mobile Stacking Structural Rules */
@media (max-width: 767px) {
  .flex-stack-mobile {
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    gap: 1.5rem !important;
  }
  
  .sidebar-hide-mobile {
    display: none !important;
  }
}