/* assets/css/mobile.css */

/* ── Disable custom cursor on touch devices ── */
@media (hover: none) {
  html, body, a, button { cursor: auto !important; }
  .c-r, .c-g, .c-b, .c-dot { display: none !important; }
}

/* ── Mobile breakpoint: 768px and below ── */
@media (max-width: 768px) {

  /* Header */
  .site-header { padding: 16px 24px; }
  .site-header .logo-link img { height: 32px; }
  .site-nav { display: none; }
  .hamburger { display: flex; }

  /* Homepage */
  .home-logo img { width: clamp(160px, 55vw, 260px); }
  .scroll-cue { display: none; }
  .video-indicators { bottom: 24px; }

  /* Portfolio pages */
  .portfolio-page { padding-top: 120px; }
  .page-header { padding: 0 20px 20px; }
  .video-grid { grid-template-columns: 1fr; gap: 3px; }
  .info .title { font-size: 22px; }

  /* Modal */
  .modal-box { width: 100vw; }
  .modal-meta { padding: 12px 16px 16px; flex-direction: column; gap: 12px; align-items: flex-start; }

  /* About page */
  .about-page { grid-template-columns: 1fr; }
  .photo-col {
    position: relative;
    height: 50vh;
    top: auto;
  }
  .photo-col::after {
    background: linear-gradient(to bottom, transparent 60%, rgba(10,10,10,0.9) 100%);
  }
  .text-col { padding: 40px 24px 60px; }
  .bio-name { font-size: 40px; }
  .bio-text { font-size: 14px; }

  /* Contact page */
  .contact-page { padding: 0 24px; }
  .contact-list { max-width: 100%; }
  .contact-row { flex-direction: column; gap: 4px; padding: 16px 0; }
  .contact-row .c-value { font-size: 13px; }

  /* Solid header bg on interior pages (no gradient bleed on small screens) */
  .site-header {
    background: rgba(255,255,255,0.97);
  }
}

/* ── Very small screens ── */
@media (max-width: 420px) {
  .site-header .logo-link img { height: 28px; }
  .home-logo img { width: 70vw; }
  .contact-heading { font-size: 48px; }
}