/* v13 mobile hardening for CloudCrew */
html, body {
  max-width: 100%;
  overflow-x: hidden;
}

@media (max-width: 1023px) {
  html, body {
    overflow-x: hidden !important;
  }

  body {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
  }

  img, svg, video, canvas {
    max-width: 100%;
    height: auto;
  }
}

/* iPhone / safe-area support */
@supports (padding: max(0px)) {
  @media (max-width: 1023px) {
    .navigationHeader[data-v-d5b69af0],
    .mobileHeader,
    .mobileHeaderWrap,
    .navBarWrap {
      padding-left: max(16px, env(safe-area-inset-left)) !important;
      padding-right: max(16px, env(safe-area-inset-right)) !important;
    }

    .form,
    .homePage .latestWorks[data-v-170a754a],
    .latestWorksMobileBlockWrap[data-v-170a754a],
    .homePage .gotIdea .gotIdeaActionsWrap[data-v-170a754a] {
      padding-left: max(30px, env(safe-area-inset-left)) !important;
      padding-right: max(30px, env(safe-area-inset-right)) !important;
    }
  }
}

/* Fixed cookie action on mobile */
@media (max-width: 760px) {
  .ccc-trigger {
    right: max(16px, env(safe-area-inset-right)) !important;
    bottom: max(16px, env(safe-area-inset-bottom)) !important;
  }

  .ccc-banner {
    left: max(12px, env(safe-area-inset-left)) !important;
    right: max(12px, env(safe-area-inset-right)) !important;
    bottom: max(12px, env(safe-area-inset-bottom)) !important;
  }
}

/* Keep mobile menu button visible and stable */
@media (max-width: 1023px) {
  .mobileHeader img[src*="burgerMenuBlack"],
  .mobileHeader img[src*="burgerMenuWhite"],
  .navigationHeader img[src*="burgerMenuBlack"],
  .navigationHeader img[src*="burgerMenuWhite"] {
    max-width: none !important;
    width: 60px !important;
    height: 60px !important;
    object-fit: contain !important;
    flex: 0 0 auto;
  }
}

/* Prevent large hero/art blocks from causing sideways layout issues */
@media (max-width: 1023px) {
  .homePage,
  .homePage * {
    box-sizing: border-box;
  }

  .homePage .gotIdea,
  .homePage .latestWorks,
  .homePage .ourWorks,
  .latestWorksMobileBlockWrap,
  .latestWorksMobileBlock {
    width: 100% !important;
    max-width: 100% !important;
  }

  .latestWorksMobileBlock img,
  .latestWorksMobileBlock picture,
  .latestWorksMobileBlock source {
    max-width: 100% !important;
  }
}

/* Keep Black on White mobile genius block inside the viewport at 320px. */
@media (max-width: 768px) {
  .blackOnWhiteWrap,
  .blackOnWhiteWrap .blackOnWhite,
  .blackOnWhiteWrap .blackOnWhite .genius,
  .blackOnWhiteWrap .blackOnWhite .genius .geniusLeft,
  .blackOnWhiteWrap .blackOnWhite .genius .geniusRight {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  .blackOnWhiteWrap .blackOnWhite .genius .geniusLink,
  .blackOnWhiteWrap .blackOnWhite .genius .geniusLink a {
    overflow-wrap: anywhere !important;
    word-break: break-word !important;
  }

  .blackOnWhiteWrap .blackOnWhite .payOnly {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
  }

  .blackOnWhiteWrap .blackOnWhite .payOnly img {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    min-width: 0 !important;
  }

  .blackOnWhiteWrap .blackOnWhite .payOnly p {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    overflow-wrap: anywhere !important;
  }
}

/* Keep narrow project detail layouts from creating sideways scroll. */
@media (max-width: 768px) {
  .levelSound,
  .levelSound .levelSoundContent,
  .levelSound .whatDone,
  .levelSound .whatDoneLeft,
  .levelSound .whatDoneLeftContentWrap,
  .sevenForceWrap,
  .sevenForceWrap .sevenForce,
  .sevenForceWrap .sevenForce .thirdBlock,
  .sevenForceWrap .sevenForce .thirdBlock .thirdBlockRight {
    max-width: 100% !important;
    box-sizing: border-box !important;
    overflow-x: hidden !important;
  }

  .levelSound .levelSoundContent {
    width: 100% !important;
    padding-right: max(30px, env(safe-area-inset-right)) !important;
  }

  .levelSound .whatDoneLeftContentWrap {
    width: 100% !important;
  }

  .sevenForceWrap .sevenForce .thirdBlock .thirdBlockRight img {
    max-width: 100% !important;
  }
}

@media (min-width: 769px) {
  .sevenForceWrap,
  .sevenForceWrap .sevenForce,
  .sevenForceWrap .sevenForce .thirdBlock,
  .sevenForceWrap .sevenForce .thirdBlock .thirdBlockRight {
    max-width: 100% !important;
    box-sizing: border-box !important;
    overflow-x: hidden !important;
  }
}

/* Reduce accidental overlap between floating controls and content */
@media (max-width: 760px) {
  .homePage,
  .form,
  .latestWorksMobileBlockWrap {
    padding-bottom: calc(110px + env(safe-area-inset-bottom)) !important;
  }
}

/* Improve tap behavior */
@media (max-width: 1023px) {
  a, button, .actionButton, .ccc-trigger {
    touch-action: manipulation;
  }
}


/* v14: full-width mobile header/menu + visible portfolio cards */
@media (max-width: 768px) {
  .navBarWrap[data-v-d5b69af0],
  .mobileHeader[data-v-d5b69af0],
  .menuWrap[data-v-d5b69af0] {
    left: 0 !important;
    right: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    width: 100vw !important;
    max-width: 100vw !important;
    transform: none !important;
    box-sizing: border-box !important;
  }

  .mobileHeader[data-v-d5b69af0] {
    top: 0 !important;
  }

  .menuWrap[data-v-d5b69af0] {
    inset: 0 !important;
    min-height: 100dvh !important;
    height: 100dvh !important;
  }

  .mobileHeader .mobileHeaderIcons[data-v-d5b69af0],
  .menuWrap .menuContent[data-v-d5b69af0] {
    padding-left: max(30px, env(safe-area-inset-left)) !important;
    padding-right: max(30px, env(safe-area-inset-right)) !important;
  }

  /* Make sure mobile portfolio cards really render */
  .latestWorksMobile[data-v-170a754a] {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  .latestWorksMobileBlock[data-v-170a754a] {
    display: block !important;
    width: 100% !important;
  }

  .latestWorksMobileBlockWrap[data-v-170a754a] {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    max-width: 100% !important;
    opacity: 1 !important;
    visibility: visible !important;
  }

  .latestWorksMobileBlockWrap[data-v-170a754a] img {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    opacity: 1 !important;
    visibility: visible !important;
    object-fit: cover !important;
    background: #f2f2ef;
  }
}

/* Hide cookie control when mobile menu overlay is open */
html.cloudcrew-menu-open .ccc-trigger {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}


/* v15: mobile menu must fully cover viewport and stop project bleed-through */
@media (max-width: 768px) {
  html.cloudcrew-menu-open,
  body.cloudcrew-menu-open {
    overflow: hidden !important;
    height: 100dvh !important;
    overscroll-behavior: none !important;
  }

  .menuWrap[data-v-d5b69af0] {
    position: fixed !important;
    inset: 0 !important;
    left: 0 !important;
    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100vw !important;
    max-width: 100vw !important;
    min-height: 100dvh !important;
    height: 100dvh !important;
    z-index: 2147482900 !important;
    background: #0b1118 !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch !important;
  }

  .menuWrap[data-v-d5b69af0]::before {
    content: "" !important;
    position: fixed !important;
    inset: 0 !important;
    background: #0b1118 !important;
    z-index: -1 !important;
  }

  .menuWrap .menuContent[data-v-d5b69af0] {
    min-height: 100dvh !important;
    height: auto !important;
    box-sizing: border-box !important;
    padding-top: max(22px, env(safe-area-inset-top)) !important;
    padding-bottom: max(120px, calc(env(safe-area-inset-bottom) + 120px)) !important;
  }

  /* Keep socials inside menu flow and prevent underlying cards from showing through */
  .menuWrap .menuContent .menuLinksWrap[data-v-d5b69af0] {
    min-height: calc(100dvh - 120px) !important;
  }
}