/* ==========================================================================
   INTERLINK INVENT — RESPONSIVE OVERRIDES
   Load LAST. Mobile-first is handled by clamp() in tokens.css; the rules
   below only handle things clamp() cannot: layout changes and nav mode.

   BREAKPOINTS
     1440  xl   — wide desktop, grid may go 4-up on news
     1200  lg   — standard laptop
      900  md   — TABLET / NAV SWITCH POINT (burger below this)
      700  sm   — large phone / small tablet
      520  xs   — phone
   ========================================================================== */


/* ==========================================================================
   >= 900px — DESKTOP ONLY
   ========================================================================== */
@media (min-width:900px){
  .mobile-menu{display:none}
  .nav-toggle{display:none}
}


/* ==========================================================================
   < 1200px — LAPTOP DOWN
   ========================================================================== */
@media (max-width:1199px){
  .grid--4{grid-template-columns:repeat(3,minmax(0,1fr))}
  .principal{grid-template-columns:minmax(0,280px) minmax(0,1fr)}
}


/* ==========================================================================
   < 900px — TABLET AND BELOW  ← THE MAIN BREAK
   Nav collapses to burger; project grid drops to 2-up; project detail
   figures all go full-bleed.
   ========================================================================== */
@media (max-width:899px){

  /* --- Header ----------------------------------------------------------- */
  .nav-primary{display:none}
  .nav-toggle{display:block}
  .site-header__bar{height:var(--header-h-mob)}

  /* Sub-nav stays, but scrolls horizontally and left-aligns */
  .subnav__list{justify-content:flex-start;height:38px}
  .subnav__list::after{content:"";flex:0 0 var(--gutter)}

  /* --- Hero ------------------------------------------------------------- */
  .hero{height:72svh;min-height:440px}
  .hero__caption{bottom:96px;max-width:none;right:var(--gutter)}
  .hero__dots{bottom:64px;left:var(--gutter);right:auto}
  .hero__cue{display:none}

  /* --- Grids ------------------------------------------------------------ */
  .grid,
  .grid--4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .grid--dim:hover .card{opacity:1}      /* no hover dimming on touch */

  /* --- Project detail --------------------------------------------------- */
  .pd-hero{height:56svh;min-height:320px}
  .figure--wide,
  .figure--narrow{max-width:none;margin-inline:0}
  .pd-nav{grid-template-columns:1fr auto 1fr;font-size:var(--fs-nano)}

  /* --- About ------------------------------------------------------------ */
  .principal{grid-template-columns:1fr;gap:var(--sp-5)}
  .principal__img{max-width:320px}

  /* --- Footer ----------------------------------------------------------- */
  .site-footer__row{flex-direction:column;align-items:flex-start;
    gap:var(--sp-3);text-align:left}
}


/* ==========================================================================
   < 700px — LARGE PHONE
   Everything goes single-column. Paired figures stack. Team goes 2-up.
   ========================================================================== */
@media (max-width:699px){

  .grid{grid-template-columns:1fr}
  .grid--2{grid-template-columns:1fr}
  .grid--4{grid-template-columns:repeat(2,minmax(0,1fr))}

  .figure-pair{grid-template-columns:1fr}

  /* Hero switches to a portrait crop so architecture reads on a tall screen */
  .hero{height:auto;aspect-ratio:var(--ar-hero-mob);min-height:0}
  .hero__slide{position:absolute}

  /* Detail images go 4:3 — 3:2 is too letterboxed on a phone */
  .figure__img{aspect-ratio:4/3}

  /* Lightbox arrows move to the bottom corners, out of thumb-drag range */
  .lightbox__prev{left:var(--sp-4);top:auto;bottom:var(--sp-4);transform:none}
  .lightbox__next{right:var(--sp-4);top:auto;bottom:var(--sp-4);transform:none}

  .pd-head{text-align:left}
  .pullquote{text-align:left}

  .to-top{width:40px;height:40px;bottom:var(--sp-4)}
}


/* ==========================================================================
   < 520px — PHONE
   ========================================================================== */
@media (max-width:519px){

  .grid--4{grid-template-columns:1fr 1fr}
  .credits{grid-template-columns:1fr;gap:var(--sp-5)}
  .contact{grid-template-columns:1fr}
  .contact__map{aspect-ratio:4/3}

  .pd-nav{
    grid-template-columns:1fr;
    text-align:center;gap:var(--sp-4);
  }
  .pd-nav__next{text-align:center}

  .mobile-menu__link{font-size:1.125rem}
}


/* ==========================================================================
   TOUCH DEVICES — kill hover-only affordances so nothing sticks
   ========================================================================== */
@media (hover:none){
  .card:hover .card__img,
  .news-card:hover .news-card__img{transform:none}
  .team-card__img{filter:grayscale(0)}
  .nav-drop{display:none}
}


/* ==========================================================================
   PRINT
   ========================================================================== */
@media print{
  .site-header,.mobile-menu,.to-top,.hero__dots,.hero__cue,
  .lightbox,.pager,.subnav{display:none !important}
  body{color:#000;font-size:11pt}  /* print: literal black is correct */
  .hero,.pd-hero{height:auto;page-break-inside:avoid}
  a[href^="http"]::after{content:" (" attr(href) ")";font-size:8pt;color:#666}
}