/*------------------------------------------------------
  Mobile Fix for chrisperrins.com
  Link this file in index.html AFTER all other stylesheets
------------------------------------------------------*/

@media only screen and (max-width: 767px) {

  /* ── Fix 1: Background images ──────────────────────
     iOS doesn't support background-attachment:fixed.
     It zooms into a tiny part of the image instead.
     This switches to 'scroll' on mobile so the full
     image is visible, like a normal photo band.       */

  #content-wrapper .fullwidth-content-section-background-image.background-image-1,
  #content-wrapper .fullwidth-content-section-background-image.background-image-2,
  #content-wrapper .fullwidth-content-section-background-image.background-image-3 {
    background-attachment: scroll !important;
    background-size: cover !important;
    background-position: center center !important;
  }

  /* ── Fix 2: Video ───────────────────────────────────
     The video was locked to a fixed pixel size.
     This makes it stretch to fit the screen width.    */

  .video,
  .video.fullwidth {
    width: 100% !important;
    height: auto !important;
    max-width: 100% !important;
  }

  .video video {
    width: 100% !important;
    height: auto !important;
    display: block;
  }

  /* ── Fix 3: Content section width ──────────────────
     Allows content to use the full screen width
     with a small breathing gap on each side.          */

  #content-wrapper section.content-section {
    max-width: 100% !important;
    padding-left: 20px;
    padding-right: 20px;
    box-sizing: border-box;
  }

  /* ── Fix 4: Contact images ──────────────────────── 
     Stops the illustration and LinkedIn button
     from overflowing off the edge of the screen.      */

  section.content-section img {
    max-width: 100%;
    height: auto;
    display: block;
  }

}