/* =============================================================
   mobile-fix.css
   Add AFTER main.css:
   <link rel="stylesheet" href="assets/css/mobile-fix.css">

   DESKTOP is completely untouched — every rule here is
   wrapped in a max-width media query.
   ============================================================= */

/* ── ≤ 900px: fix project-media row (existing breakpoint missed this) ── */
@media (max-width: 900px) {

  /* The outer card stacks already via main.css, but
     the inner media row was never fixed — video stays
     720 px wide and pushes off-screen */
  .project-media {
    flex-direction: column;
  }

  /* 720px hardcoded width → full width */
  .project-media .project-visual {
    width: 100%;
  }

  /* Fixed 405px / 300px height hides images on narrow screens */
  .project-images {
    height: auto;
    /* keep the 2×2 grid but let rows be naturally tall */
    grid-template-rows: auto auto;
  }

.project-img-item img {
    height: auto;
    object-fit: contain;
    background: var(--surface);
  }
  /* Inline flex-direction:row on project cards 02 & 03 —
     !important is the only way to beat an inline style */
.project-card--main {
    flex-direction: column !important;
}

/* Cap the gif/image so it doesn't balloon when the card narrows */
.project-gif {
    width: 160px    !important;
    max-width: 160px !important;
    flex-shrink: 0  !important;
    align-self: flex-start !important;
    margin-top: 0   !important;
}

/* Cap extracurricular videos so they don't go full-bleed */
.chapter-visual--video {
    max-width: 480px;
    width: 100%;
    margin: 0 auto;
}

  /* Prevent scale(2) hover from overflowing on touch screens
     (touch hover state sticks and the photo blows up) */
  .chapter-photo:hover {
    transform: rotate(var(--rot, 0deg)) translateY(var(--lift, 0px)) !important;
    z-index: 1 !important;
  }
}

/* ── ≤ 600px: small phones ── */
@media (max-width: 600px) {

  /* Stack the two-column image grid to one column on tiny screens */
  .project-images {
    grid-template-columns: 1fr;
  }

  /* Give the chapter-photo row a little breathing room */
  .chapter-photos {
    gap: 0.75rem;
  }
}