/* Hide hamburger menu list items under Projects (show only Ahoy, About, Experience, Philosophy, Projects) */
.left-nav-drawer ul li:nth-child(n+6) {
  display: none;
}

/* Mobile-friendly overrides – only apply below 768px. Desktop unchanged. */
@media (max-width: 768px) {
  body {
    padding-left: 16px;
    padding-right: 16px;
  }

  /* Prevent images and video from overflowing on small screens */
  .ux-design-detail img,
  .final-accordion-video-wrap video,
  .final-main-img {
    max-width: 100%;
    height: auto;
  }

  /* Page containers: full width with safe padding */
  .why-page,
  .touchpoints-page,
  .users-page,
  .di-page,
  .thanks-page {
    max-width: 100%;
    padding-left: 0;
    padding-right: 0;
  }

  .ux-page,
  .final-page,
  .workflow-page {
    max-width: 100%;
  }

  /* Projects: single column (backup if page uses different breakpoint) */
  .projects-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .project-card {
    min-height: 320px;
    height: auto;
    padding: 24px 20px;
  }

  .project-card.project-card-alarms,
  .project-card.project-card-ftp {
    min-height: 0;
    height: 256px;
    padding: 20px 20px;
  }

  /* Philosophy grid: single column */
  .phil-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .phil-card {
    height: auto;
    min-height: 280px;
    padding: 24px 20px;
  }

  /* UX Design: stack nav above content */
  .ux-design-layout {
    grid-template-columns: 1fr;
    min-height: 0;
  }

  .ux-design-nav {
    border-right: none;
    border-bottom: 1px solid #e5e7eb;
    padding: 8px 0;
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
  }

  .ux-design-nav-btn {
    padding: 10px 14px;
    font-size: 0.875rem;
  }

  /* Tabs: wrap and comfortable tap size */
  .ux-iteration-tabs,
  .di-iteration-tabs {
    gap: 6px;
  }

  .ux-iteration-tab,
  .di-iteration-tab {
    padding: 10px 14px;
    min-height: 44px;
  }

  /* Images in content: don't overflow */
  .ux-iteration-image-wrap img,
  .di-iteration-image-wrap img {
    max-height: 50vh;
  }

  /* Fullscreen overlay: less padding on small screens */
  .ux-image-fullscreen,
  .di-image-fullscreen {
    padding: 16px;
  }

  .ux-image-fullscreen .ux-fs-arrow,
  .di-image-fullscreen .di-minimize-btn {
    width: 44px;
    height: 44px;
  }

  .ux-image-fullscreen .ux-fs-prev {
    left: 12px;
  }

  .ux-image-fullscreen .ux-fs-next {
    right: 12px;
  }

  .ux-image-fullscreen .ux-minimize-btn {
    top: 16px;
    right: 16px;
  }

  /* Final design: gallery and thumbs stack */
  .final-gallery {
    flex-direction: column;
    padding: 20px 16px;
    min-height: 320px;
  }

  .final-thumbs {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
  }

  .final-thumb {
    width: 64px;
    height: 64px;
  }

  .final-accordion-video-wrap video {
    max-height: 50vh;
  }

  /* Workflow: lanes and arrows stack */
  .workflow-page .lane,
  .workflow-page .arrow-between {
    margin-left: 0;
    margin-right: 0;
  }

  .workflow-footer {
    padding: 16px 0;
  }

  /* Touchpoints: table scroll */
  .comparison-table {
    font-size: 0.875rem;
  }

  .comparison-table thead th,
  .comparison-table tbody td {
    padding: 10px 12px;
  }

  /* User journey: stage grid single column */
  .stage-grid {
    grid-template-columns: 1fr;
  }

  /* Index / Ahoy: comfortable padding and tap targets */
  .ahoy-content {
    padding-left: 16px;
    padding-right: 16px;
  }

  .ahoy-greeting {
    font-size: clamp(1.75rem, 5vw, 2.5rem);
    margin-bottom: 24px;
  }

  .ahoy-password-input,
  .ahoy-enter {
    min-height: 48px;
    width: 100%;
    max-width: 280px;
  }

  /* Carousel (users): constrain width */
  .carousel-wrap {
    max-width: 100%;
  }

  .carousel-slide {
    padding: 20px 16px;
  }

  .carousel-slide-body p,
  .carousel-slide-body ul {
    font-size: 16px;
  }

  .carousel-arrows-wrap {
    gap: 8px;
    padding: 0 8px;
  }

  .carousel-arrow {
    width: 44px;
    height: 44px;
  }

  /* Left nav: on mobile, move hamburger to top-right corner */
  .left-nav-trigger {
    min-width: 44px;
    min-height: 44px;
    left: auto;
    right: 20px;
  }
  .left-nav-drawer {
    left: auto;
    right: 0;
    transform: translateX(100%);
  }
  .left-nav-drawer.is-open {
    transform: translateX(0);
  }
  .left-nav-drawer a {
    border-left: none;
    border-right: 3px solid transparent;
  }
  .left-nav-drawer a.current {
    border-left: none;
    border-right-color: #111827;
  }

  /* Buttons and links: minimum touch target */
  .btn-secondary,
  .why-next,
  .ux-next,
  .touchpoints-next,
  .final-next,
  .thanks-back,
  .flow-details-btn,
  .show-after-btn {
    min-height: 44px;
    padding: 12px 16px;
  }

  /* Problem / Flow accordions */
  .problem-accordion summary,
  .lane summary.lane-header {
    padding: 14px 16px;
  }

  /* Thanks page */
  .thanks-emoji {
    font-size: 3rem;
  }

  .thanks-title {
    font-size: clamp(1.5rem, 5vw, 2.25rem);
  }
}