/* Commosieur mobile overrides — loaded last, homepage + shared nav pages. */

@media screen and (max-width: 991px) {
  html,
  body {
    overflow-x: hidden;
    max-width: 100%;
  }

  .team-section,
  .marquee,
  .service-area,
  .about-area,
  .section_header,
  .testimonial-area,
  .cta-area,
  .footer-area {
    width: 100% !important;
    max-width: 100%;
  }

  /* Desktop ticker overflows on phones; use the slider instead. */
  .ticker-container {
    display: none !important;
  }

  .slider {
    display: block !important;
    height: auto;
    width: 100%;
    max-width: 100%;
  }

  /* Hamburger lines are black on a dark site by default. */
  .menu-icon_line-top,
  .menu-icon_line-middle,
  .menu-icon_line-middle-inner,
  .menu-icon_line-bottom {
    background-color: #f5f0e6 !important;
  }

  .navbar_component {
    padding-top: max(12px, env(safe-area-inset-top));
    padding-left: max(16px, env(safe-area-inset-left));
    padding-right: max(16px, env(safe-area-inset-right));
  }

  .section_header h1,
  .header_component h1,
  .u-heading-style-h1 {
    font-size: clamp(2rem, 8vw, 4.5rem);
    line-height: 1.1;
    overflow-wrap: break-word;
    word-break: break-word;
  }

  .footer-area img,
  .header_image,
  .team-img,
  video,
  iframe {
    max-width: 100%;
    height: auto;
  }

  .footer-logo,
  .footer_logo,
  .footer-area img {
    max-width: 100%;
    height: auto;
  }

  /* Hero / CTA buttons */
  .button-wrap,
  .header_button-wrap,
  .hero-btn-wrap {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
  }

  .button,
  .btn,
  .w-button,
  a.button {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  /* CTA + forms stack */
  .cta-wrap,
  .cta-inner,
  .footer-form-wrap,
  .form-wrap,
  .w-form form {
    display: flex;
    flex-direction: column;
    gap: 12px;
  }

  input.w-input,
  textarea.w-input,
  select.w-select,
  .form-input {
    width: 100%;
    min-height: 44px;
    box-sizing: border-box;
  }

  .marquee,
  .service-marquee,
  .testimonial-slider,
  .cm-index,
  .project-grid-wrap {
    max-width: 100vw;
    overflow-x: hidden;
  }
}

@media screen and (max-width: 479px) {
  .button,
  .btn,
  .w-button,
  a.button {
    width: 100%;
  }
}

/* ---- Homepage bug fixes (all breakpoints) ---- */

/* Nav hover clone must never paint at the same time as the base label. */
.navbar_link .navbar_text.absolute {
  opacity: 0;
  pointer-events: none;
}
.navbar_link:hover .navbar_text.absolute {
  opacity: 1;
}

/* IX boot CSS hides these until GSAP runs; keep them readable regardless. */
.heading-three.letter-effect,
.heading-three.word-effect,
.heading-three.text-effect,
.heading-three.pb-20.letter-effect,
.heading-three.pb-20.word-effect,
.section-content-sm.text-effect,
.about-content,
.title-animation {
  visibility: visible !important;
  opacity: 1 !important;
}

/* Footer wordmark was rendering at full 3114w. */
.footer-logo {
  max-width: 240px !important;
  width: auto !important;
  height: auto !important;
}

/* THE LOOP: all four cards visible, no multi-thousand-px sticky void. */
.problem_card,
.problem_card.card-1,
.problem_card.card-2,
.problem_card.card-3,
.problem_card.card-4 {
  opacity: 1 !important;
  transform: none !important;
  position: relative !important;
  top: auto !important;
}
.problem_component,
.problem_content,
.problem_list {
  height: auto !important;
  min-height: 0 !important;
}
.problem_list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
  position: static !important;
}

@media screen and (max-width: 767px) {
  .problem_list {
    grid-template-columns: minmax(0, 1fr);
  }

  /* Collectives: single column so the LEARN MORE buttons line up. */
  .player_list,
  .communities-grid,
  .project-grid,
  .player_component {
    grid-template-columns: minmax(0, 1fr) !important;
  }
}

/* ---- Mobile nav overlay ---- */
@media screen and (max-width: 991px) {
  .navbar_button-wrapper {
    display: flex !important;
    align-items: center;
    gap: 12px;
  }

  .navbar_menu-button.w-nav-button {
    display: block !important;
    min-height: 44px;
    min-width: 44px;
    position: relative;
    z-index: 2147483002 !important;
  }

  .navbar_component,
  .navbar_wrapper {
    position: relative;
    z-index: 2147483001 !important;
  }

  .w-nav-menu {
    display: none;
  }

  .w-nav-menu.w--nav-menu-open,
  .w-nav-menu[data-nav-menu-open],
  .w-nav-menu[style*="display: block"],
  .w-nav-menu[style*="display:block"] {
    display: block !important;
    position: fixed !important;
    inset: 0 !important;
    left: 0 !important;
    right: 0 !important;
    top: 0 !important;
    width: 100vw !important;
    max-width: 100vw !important;
    height: 100dvh !important;
    padding: 96px 24px 24px !important;
    background: #14110f !important;
    transform: none !important;
    z-index: 2147483000 !important;
    overflow-y: auto;
  }

  .w-nav-menu .navbar_menu,
  .w-nav-menu .navbar_menu-list {
    display: flex !important;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    width: 100%;
  }

  .w-nav-menu .navbar_link {
    display: flex !important;
    align-items: center;
    width: 100%;
    min-height: 48px;
    font-size: 1.5rem;
    opacity: 1 !important;
  }

  .w-nav-menu .navbar_text {
    color: #f5f0e6 !important;
    opacity: 1 !important;
  }

  .w-nav-menu .navbar_text.absolute {
    display: none !important;
  }

  .w-nav-overlay {
    background: #14110f !important;
    position: fixed !important;
    inset: 0 !important;
    height: 100dvh !important;
    width: 100vw !important;
    z-index: 2147482999 !important;
  }
}