/* ============================================================
   RESPONSIVE
   ============================================================ */

/* Tablet landscape 901–1200px */
@media (max-width: 1200px) {
    .team-grid { grid-template-columns: repeat(3, 1fr); }
    .news-grid { grid-template-columns: repeat(2, 1fr); }
    .pub-grid { grid-template-columns: repeat(2, 1fr); }
}

/* Header: eight menu items no longer fit on one line below ~1100px
   (tablet landscape), so switch to the hamburger there. LinkedIn lives at
   the bottom of the mobile menu; in the bar it would crowd the hamburger. */
@media (max-width: 1100px) {
    .nav-menu { display: none; }
    .nav-hamburger { display: flex; }
    .nav-social { display: none; }
}

/* Tablet portrait ≤900px */
@media (max-width: 900px) {
    .hero { background-position: 68% 30%; }
    .hero__overlay { background: linear-gradient(180deg, #fff 0%, rgba(255,255,255,.9) 38%, rgba(255,255,255,.45) 62%, rgba(255,255,255,.15) 100%); }
    .pi-teaser__card { grid-template-columns: 1fr; text-align: center; }
    .pi-teaser__photo { margin: 0 auto; }
    .research-line__grid,
    .research-line__grid--reverse { grid-template-columns: 1fr; }
    .research-line__grid--reverse .research-line__figure { order: 0; }
    /* Unlike the figure it replaced, the model-selector's cards read better
       AFTER the intro copy on mobile (following "See the experimental models
       we use") rather than above it — order:0 would tie with .research-line
       __copy's own default order and, DOM order being first, place it
       before the text instead. */
    .research-line__grid--reverse .model-selector { order: 1; }
    .model-selector { max-width: none; margin: 0 auto; }
    .model-selector__grid { max-width: 440px; margin: 0 auto; }
    .pi-feature__grid { grid-template-columns: 1fr; }
    .pi-feature__aside { max-width: 420px; margin: 0 auto; width: 100%; }
    .join-panel { grid-template-columns: 1fr; }
    /* Taller than the old 16/9 — that cropped the photo (object-position:
       top center) down to little more than a sliver above the text. */
    .join-panel__photo { aspect-ratio: 4/5; }
    .join-panel__photo::after { background: linear-gradient(0deg, var(--ink) 5%, transparent 60%); }
    .contact-grid { grid-template-columns: 1fr; }
    .site-footer__inner { grid-template-columns: 1fr 1fr; }
    .footer-col--brand { grid-column: 1 / -1; }
}

/* Mobile ≤640px */
@media (max-width: 640px) {
    body { font-size: 16px; }
    .team-grid { grid-template-columns: repeat(2, 1fr); }
    .news-grid { grid-template-columns: 1fr; }
    .pub-grid { grid-template-columns: 1fr; }
    .hero__actions { flex-direction: column; align-items: stretch; }
    .hero__actions .btn { justify-content: center; }
    /* Fixed min-height + vertical centering + overflow:hidden (desktop) can
       clip the bottom of the hero content on narrow phones once the title
       wraps to more lines and the actions stack into a column — the last
       button ends up flush against (or cut off by) the section below with
       no breathing room. Let the hero grow to fit its content instead. */
    .hero { min-height: auto; max-height: none; align-items: flex-start; overflow: visible; }
    .hero__inner { padding-bottom: 3rem; }
    .site-footer__inner { grid-template-columns: 1fr; }
    .pub-card { flex-direction: column; }
    .job-row__head { flex-direction: column; align-items: flex-start; gap: .8rem; }
    .site-header__right { gap: 1rem; }
}