/*
 * mobile.css — Champion Architecture
 *
 * Mobile-only responsive overrides.  All visual rules live inside
 * @media (max-width: 768px), so this file has zero effect on desktop.
 */

@media (max-width: 768px) {

  /* ── Tokens ──────────────────────────────────────────────── */
  :root {
    --pad: 20px;
  }

  /* Remove iOS tap flash on interactive elements */
  * { -webkit-tap-highlight-color: transparent; }

  /* ── Header ──────────────────────────────────────────────── */
  .header-inner {
    position: relative;     /* anchor for absolutely-placed nav items */
    align-items: center;    /* vertically center logo + button */
    padding: 13px var(--pad) 11px;
  }

  .logo {
    font-size: 20px;
    position: relative;
    z-index: 1;             /* sit below nav overlay */
    flex-shrink: 0;
    transition: opacity 0.2s ease;
  }

  /*
   * Nav items: absolutely overlaid across the full header width.
   *
   * Both the base state AND the desktop :hover state must be hidden on
   * mobile.  They are combined into one rule so the same specificity
   * (0,3,0) applies to both — preventing the brief touch-hover that
   * fires on tap from accidentally overriding the open state.
   *
   * The open state uses header.nav-open .nav-wrap .nav-items (0,3,1),
   * which beats (0,3,0) and wins even when :hover is briefly active.
   */
  .nav-items,
  .nav-wrap:hover .nav-items {
    position: absolute !important;
    top: 0 !important;
    bottom: 0 !important;
    left: var(--pad) !important;
    right: 48px !important;   /* leave room for the × button */
    max-width: none !important;
    overflow: visible !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 0 !important;
    background: var(--bg);
    opacity: 0 !important;
    transform: translateX(16px) !important;
    pointer-events: none !important;
    transition: opacity 0.22s ease,
                transform 0.28s cubic-bezier(0.4, 0, 0.2, 1) !important;
  }

  .nav-items a,
  .nav-items span {
    font-size: 13.5px;
    letter-spacing: 0.03em;
  }

  /* Make + button tappable and keep it on top of the nav overlay */
  .nav-plus {
    cursor: pointer;
    font-size: 24px;
    padding: 8px;
    margin-right: -8px;
    margin-left: 12px;
    position: relative;
    z-index: 2;
    flex-shrink: 0;
    transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1) !important;
  }

  /* ── Open state (JS adds .nav-open to <header>) ──────────── */
  /* Specificity 0,3,1 — beats .nav-wrap:hover .nav-items at 0,3,0 */
  header.nav-open .logo {
    opacity: 0 !important;
    pointer-events: none;
  }

  header.nav-open .nav-wrap .nav-items {
    opacity: 1 !important;
    transform: translateX(0) !important;
    pointer-events: auto !important;
  }

  header.nav-open .nav-plus {
    transform: rotate(45deg) !important;
  }

  /* ── Footer ──────────────────────────────────────────────── */
  .footer-inner {
    justify-content: center !important;
    padding: 12px var(--pad) !important;
  }

  /* Hide Instagram link (always the first anchor in .footer-inner) */
  .footer-inner > a.footer-link:first-child {
    display: none !important;
  }

  /* Hide copyright line — only the email remains, centered */
  .footer-copy {
    display: none !important;
  }

  /* ──────────────────────────────────────────────────────────
   * HOME / INDEX — 2-column grid  →  single scrollable column
   * ────────────────────────────────────────────────────────── */
  .grid {
    grid-template-columns: 1fr !important;
    gap: 22px !important;
    padding: 22px 22px calc(var(--footer-h) + 32px) !important;
  }

  .grid-image-wrap {
    min-width: 0 !important;
    max-width: 100% !important;
    min-height: 0 !important;
    /* maintain the 4:3 card proportion */
    aspect-ratio: 4 / 3 !important;
  }

  /* ──────────────────────────────────────────────────────────
   * WORK PAGE — side-by-side project rows  →  stacked
   * ────────────────────────────────────────────────────────── */
  .content {
    padding: 16px var(--pad) 80px !important;
  }

  .project {
    grid-template-columns: 1fr !important;
    gap: 12px 0 !important;
    margin-bottom: 40px !important;
  }

  .project-image-wrap {
    min-width: 0 !important;
    max-width: 100% !important;
  }

  .project-image {
    aspect-ratio: 16 / 10 !important;
  }

  /* ──────────────────────────────────────────────────────────
   * ABOUT PAGE — photo | text  →  photo stacked above text
   * ────────────────────────────────────────────────────────── */
  body.page-about main {
    grid-template-columns: 1fr !important;
    max-width: 100% !important;
    padding-top: calc(var(--header-h) + 16px) !important;
    padding-bottom: 80px !important;
  }

  body.page-about .photo-col {
    padding: 0 var(--pad) !important;
    position: static !important;   /* remove sticky */
  }

  body.page-about .headshot {
    min-width: 0 !important;
    max-width: 100% !important;
    width: 100% !important;
    opacity: 1 !important;         /* show immediately; no fade-in on mobile */
  }

  body.page-about .name-credit {
    font-size: 16px;
    margin-top: 8px;
  }

  body.page-about .text-col {
    padding: 24px var(--pad) 40px !important;
  }

  /* ──────────────────────────────────────────────────────────
   * PROJECT PAGES — fixed 2-col viewport  →  scrollable page
   *
   * Desktop layout: html/body overflow:hidden, main position:fixed
   * with a 2-col grid, left col (.images-col) scrolls internally.
   * Mobile layout: page scrolls normally, images stack above info.
   * ────────────────────────────────────────────────────────── */

  /* html class added by mobile.js for pages that need it */
  html.page-project {
    height: auto !important;
    overflow: visible !important;
  }

  /* :has() fallback for browsers that support it (iOS 15.4+) */
  html:has(body.page-project) {
    height: auto !important;
    overflow: visible !important;
  }

  body.page-project {
    height: auto !important;
    overflow: visible !important;
    min-height: 100dvh;
  }

  body.page-project main {
    position: relative !important;
    top: 0 !important;
    left: auto !important;
    transform: none !important;
    width: 100% !important;
    max-width: 100% !important;
    bottom: auto !important;
    display: flex !important;
    flex-direction: column !important;
    padding-top: var(--header-h) !important;
    overflow: visible !important;
  }

  body.page-project .images-col {
    overflow: visible !important;
    padding: 16px var(--pad) 0 !important;
  }

  body.page-project .hero-image {
    min-width: 0 !important;
    max-width: 100% !important;
    width: 100% !important;
    margin-bottom: 16px !important;
  }

  body.page-project .hero-image.portrait {
    width: auto !important;
    max-width: 100% !important;
    max-height: 920px !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  /* Gallery images: disable scroll-fade and show immediately */
  body.page-project .gallery-image-wrap {
    opacity: 1 !important;
    margin-bottom: 16px !important;
  }

  body.page-project .gallery-image {
    min-width: 0 !important;
    max-width: 100% !important;
    width: 100% !important;
  }

  body.page-project .gallery-image.portrait {
    width: auto !important;
    max-width: 100% !important;
    max-height: 920px !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  body.page-project .info {
    padding: 20px var(--pad) calc(var(--footer-h) + 24px) !important;
    overflow: visible !important;
  }

  /* Salton Sea House PDF carousel images */
  body.page-project .pdf-slide img {
    min-width: 0 !important;
    max-width: 100% !important;
    max-height: none !important;
  }

  /* ──────────────────────────────────────────────────────────
   * INQUIRIES PAGE
   * ────────────────────────────────────────────────────────── */
  .inquiry-headline {
    font-size: 18px !important;
    line-height: 1.2 !important;
  }

  .inquiry-email {
    font-size: 13px !important;
  }

  /* ──────────────────────────────────────────────────────────
   * HELDANE DISPLAY SIZE CAP
   * No display-font element may exceed the nav logo (20px) on mobile.
   * ────────────────────────────────────────────────────────── */
  .section-label {
    font-size: 18px !important;
    line-height: 1.2 !important;
  }

  .project-title {
    font-size: 18px !important;
    line-height: 1.2 !important;
  }

  .project-name {
    font-size: 18px !important;
  }

  #intro-logo-el {
    font-size: 20px !important;
  }

  .name-credit {
    font-size: 18px !important;
  }

}