/* ============================================================
   Mobile Fixes — loads AFTER chase-hostler-design.css
   Minimal overrides for mobile rendering issues
   ============================================================ */

/* ---- Tablet (≤991px) ---- */
@media screen and (max-width:991px) {
  /* ASCII container: base is width:121%, top:-81px — causes squish */
  .ascii-container {
    width: 100vw !important;
    height: 100vh !important;
    top: 0 !important;
    left: 0 !important;
    overflow: hidden;
  }

  /* Nav-logo: Webflow JS sets inline width:94.5vw — too wide */
  .nav-logo {
    width: 50vw !important;
    max-width: 250px !important;
  }

  /* Tablet-logo: center it properly */
  .tablet-logo {
    width: 80vw !important;
    max-width: 320px !important;
    left: 50% !important;
    right: auto !important;
    transform: translateX(-50%) !important;
  }
}

/* ---- Mobile (≤767px) ---- */
@media screen and (max-width:767px) {
  .ascii-container {
    width: 100vw !important;
    height: 100vh !important;
    overflow: hidden;
  }
}

/* ---- Phone (≤479px) ---- */
@media screen and (max-width:479px) {
  body {
    overflow-x: hidden;
  }

  /* ASCII container: constrain to viewport */
  .ascii-container {
    width: 100vw !important;
    height: 100vh !important;
    top: 0 !important;
    left: 0 !important;
    overflow: hidden;
  }

  .ascii-canvas {
    width: 100% !important;
    height: 100% !important;
  }

  .ascii-canvas iframe {
    width: 100% !important;
    height: 100% !important;
  }

  /* Nav-logo: override Webflow's inline 94.5vw */
  .nav-logo {
    width: 50vw !important;
    max-width: 200px !important;
  }

  /* Tablet-logo: center and constrain */
  .tablet-logo {
    width: 85vw !important;
    max-width: 300px !important;
    left: 50% !important;
    right: auto !important;
    transform: translateX(-50%) !important;
    bottom: 1.5rem !important;
  }

  /* Intro image: was width:264% — massive overflow */
  .intro-image-wrap {
    width: 100% !important;
    max-width: 100vw !important;
    margin-right: 0 !important;
  }

  /* Work tiles: remove negative margins that cause overlap */
  .work-item-wrapper._2 {
    margin-top: 0 !important;
  }

  .work-image-wrapper._1 {
    margin-left: 0 !important;
    height: auto !important;
    min-height: 200px !important;
  }

  .work-image-wrapper._2 {
    margin-top: 0 !important;
    margin-right: 0 !important;
    height: auto !important;
    min-height: 200px !important;
  }

  .work-image-wrapper {
    height: auto !important;
    min-height: 200px !important;
  }

  /* Type sizing: ensure readable on phone */
  .heading-style-h1 {
    font-size: 14vw !important;
  }

  .heading-style-h2.mobile-smaller {
    font-size: 14vw !important;
  }
}