/* Geo² Lab – mobile and small-screen refinements */
*, *::before, *::after { box-sizing: border-box; }

html { width: 100%; max-width: 100%; overflow-x: hidden; }
body { width: 100%; max-width: 100%; margin: 0; overflow-x: hidden; }
img, svg, video, iframe { max-width: 100%; height: auto; }
button, a { -webkit-tap-highlight-color: transparent; }

/* Keep the official university mark clean: the university name is already part of the image. */
.university-brand { display: flex; align-items: center; justify-content: center; }
.university-brand .university-mark { display: block; width: min(270px, 30vw); height: auto; object-fit: contain; }
.university-brand > span { display: none !important; }

/* Prevent wide desktop grids/tables from forcing the page wider than the viewport. */
.container { width: min(1200px, calc(100% - 48px)); max-width: 100%; margin-left: auto; margin-right: auto; }
.section, .page-hero, .hero, .footer { max-width: 100%; overflow: hidden; }
.card-grid, .gallery-grid, .team-grid, .two-col, .updates-grid, .project-interactive-grid { min-width: 0; }
.card, .person, .project-card, .pub-item, .statement, .interactive-intro { min-width: 0; max-width: 100%; overflow-wrap: anywhere; }
table { max-width: 100%; }

@media (max-width: 900px) {
  .container { width: min(100% - 32px, 760px); }

  .site-header .header-top {
    width: 100%;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      "lab university"
      "actions actions";
    gap: 8px 12px;
    align-items: center;
    position: relative;
    padding-top: 12px;
    padding-bottom: 12px;
  }

  .lab-brand { grid-area: lab; min-width: 0; max-width: 100%; }
  .lab-mark { width: 52px; height: 52px; flex: 0 0 auto; }
  .lab-brand-text { min-width: 0; }
  .lab-brand-text strong { font-size: clamp(16px, 4vw, 21px); line-height: 1.05; }
  .lab-brand-text span { font-size: clamp(10px, 2.5vw, 13px); line-height: 1.15; }

  .header-top .university-brand {
    grid-area: university;
    width: auto;
    padding: 0;
    justify-self: end;
  }
  .university-brand .university-mark { width: min(235px, 38vw); max-height: 62px; }

  /* Mobile: keep the university logo on the top row; put language and Menu on a clean second row. */
  .language-switcher {
    grid-area: actions;
    position: static;
    justify-self: end;
    white-space: nowrap;
    z-index: 20;
    margin-right: 70px;
  }
  .lang-link { padding: 6px 8px; font-size: 12px; }
  .nav-toggle {
    font-size: 14px;
    padding: 8px 11px;
    position: absolute;
    top: auto;
    bottom: 8px;
    right: 0;
    margin-top: 0;
    z-index: 21;
  }

  .nav-shell { width: 100%; }
  .nav { width: min(100% - 32px, 760px); }

  .hero-content, .page-hero .container { width: min(100% - 32px, 760px); }
  .hero h1, .page-hero h1 { font-size: clamp(2rem, 7vw, 3.5rem); line-height: 1.08; }
  .hero-subtitle { font-size: clamp(1rem, 3.5vw, 1.25rem); line-height: 1.55; }
  .hero-buttons { display: flex; flex-wrap: wrap; gap: 10px; }
  .btn { max-width: 100%; }
  .hero-controls { width: min(100% - 32px, 760px); flex-wrap: wrap; gap: 8px; }

  .two-col, .team-grid, .card-grid, .updates-grid, .project-interactive-grid { grid-template-columns: 1fr !important; }
  .gallery-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .profile-icon-links { flex-wrap: wrap; }

  .footer-grid { grid-template-columns: 1fr !important; }
  .footer-logo { max-width: 220px; }
}

@media (max-width: 600px) {
  .container, .nav, .hero-content, .page-hero .container, .hero-controls { width: calc(100% - 28px); }

  .site-header .header-top {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      "lab university"
      "actions actions";
    gap: 8px 8px;
    padding: 10px 0;
  }
  .lab-mark { width: 46px; height: 46px; }
  .lab-brand-text strong { font-size: 17px; }
  .lab-brand-text span { font-size: 10px; }
  .university-brand .university-mark { width: min(220px, 48vw); max-height: 58px; }

  .language-switcher {
    margin-right: 62px;
    font-size: 12px;
  }
  .lang-link { padding: 5px 7px; font-size: 12px; }
  .nav-toggle { bottom: 7px; right: 0; padding: 8px 10px; font-size: 13px; }

  .nav-shell { padding-bottom: 8px; }
  .nav { padding-left: 0; padding-right: 0; }

  .hero { min-height: 620px; }
  .hero-content { padding-top: 54px; padding-bottom: 120px; }
  .hero h1, .page-hero h1 { font-size: clamp(1.9rem, 9vw, 2.7rem); }
  .hero .eyebrow, .page-hero .eyebrow { font-size: 0.75rem; line-height: 1.6; letter-spacing: 0.12em; }
  .hero-buttons { flex-direction: column; align-items: stretch; }
  .hero-buttons .btn { width: 100%; text-align: center; }
  .hero-controls { position: relative; padding-bottom: 12px; }
  .hero-controls #slideStatus { flex: 1 1 100%; order: 1; }
  .hero-controls #prevSlide { order: 2; }
  .hero-controls #pauseSlide { order: 3; }
  .hero-controls #nextSlide { order: 4; }

  .section { padding-left: 0; padding-right: 0; }
  .section h2, .team-heading { font-size: clamp(1.8rem, 8vw, 2.4rem); line-height: 1.15; }
  .section-label { letter-spacing: 0.14em; }

  .gallery-grid { grid-template-columns: 1fr !important; }
  .gallery-item img { width: 100%; }
  .person-featured, .person { padding: 18px !important; }
  .team-photo, .team-photo-small { max-width: 220px; margin-left: auto; margin-right: auto; }

  .contact-form input, .contact-form textarea, .contact-form select { width: 100%; max-width: 100%; }
  .project-expanded { overflow-wrap: anywhere; }

  /* Tables remain readable without creating a horizontal page overflow. */
  .section table, .statement table { display: block; width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }

  .accessibility-toggle { right: 12px !important; bottom: 82px !important; }
  .accessibility-panel { width: min(92vw, 360px) !important; max-width: calc(100vw - 24px); }
}

@media (max-width: 390px) {
  .lab-brand-text span { display: none; }
  .university-brand .university-mark { width: 195px; max-width: 50vw; max-height: 54px; }
  .language-switcher { font-size: 11px; margin-right: 52px; }
  .nav-toggle { padding: 7px 9px; font-size: 12px; }
  .hero { min-height: 600px; }
}