/* ==========================================================================
   BIRL responsive layer (page content)
   --------------------------------------------------------------------------
   Loaded after every page's own CSS and after home-header-footer.css, which
   owns the masthead and footer. This file only collapses page content for
   small screens. Several pages set desktop layout with !important via
   homepage-parity.css, so some rules here have to match that weight.
   ========================================================================== */

/* --- Universal guards -------------------------------------------------- */

img,
video,
iframe,
canvas,
svg {
  max-width: 100%;
}

img {
  height: auto;
}

/* The at-sign images in the footer email line are sized by attribute and
   must stay inline, so exempt them from the rule above. */
.footer-email-line img {
  width: 10px;
  height: 10px;
}

table {
  max-width: 100%;
}

/* Long URLs and unbroken strings must not widen the page. */
p,
li,
td,
h1,
h2,
h3,
h4 {
  overflow-wrap: break-word;
}

/* --- Tablet ------------------------------------------------------------ */

@media (max-width: 1024px) {
  .research-grid,
  .grid-2,
  .engagement-container,
  .news-top,
  .news-layout {
    grid-template-columns: 1fr !important;
    display: block;
  }

  .hub-grid,
  .impact-grid,
  .metrics,
  .theme-spectrum,
  .awards-showcase,
  .software-grid,
  .team-grid,
  .cards-container,
  .stats-inner,
  .hero-stat-grid {
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)) !important;
  }
}

/* --- Phone ------------------------------------------------------------- */

@media (max-width: 860px) {
  /* Heroes carry ~86px of vertical padding from homepage-parity.css. */
  .hero,
  .page-hero,
  .hero-strata {
    padding: 44px 0 40px !important;
  }

  .hero-inner,
  .hero-content,
  .hero-card {
    padding: 22px 18px !important;
    border-radius: 14px !important;
  }

  .hero h1,
  .page-hero h1,
  .hero-content h1,
  .hero-title {
    font-size: 1.75rem !important;
    line-height: 1.22;
  }

  .hero-lead,
  .hero p,
  .page-hero p,
  .hero-content p {
    font-size: 0.95rem;
    text-align: left;
  }

  .hero-actions,
  .hero-ctas,
  .section-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
  }

  /* Comfortable tap targets. */
  .btn,
  .btn-primary,
  .btn-light,
  .btn-outline,
  .btn-outline-light,
  .btn-footer,
  .link-btn,
  .filter-btn,
  .filter-pill,
  .soft-reset-btn,
  .reset-filter-btn,
  .alumni-letter-btn {
    min-height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  /* One column for everything that is a grid on desktop. */
  .hub-grid,
  .impact-grid,
  .metrics,
  .theme-spectrum,
  .awards-showcase,
  .software-grid,
  .team-grid,
  .cards-container,
  .stats-inner,
  .hero-stat-grid,
  .team-stats-grid,
  .pipeline-track,
  .thesis-stack,
  .mini-stack,
  .research-grid,
  .grid-2 {
    grid-template-columns: 1fr !important;
    display: grid !important;
    gap: 14px !important;
  }

  .stats-row {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
  }

  .stat-pill {
    width: auto !important;
    min-width: 0 !important;
  }

  .section-panel,
  .panel,
  .glass-panel,
  .section,
  .footer-cta {
    padding-left: 16px !important;
    padding-right: 16px !important;
    border-radius: 14px !important;
  }

  .footer-cta {
    display: block !important;
    text-align: left;
  }

  .footer-cta .btn,
  .footer-cta .btn-footer {
    margin-top: 14px;
  }

  .section-title {
    font-size: 1.4rem;
  }

  /* Wide data tables scroll inside their wrapper rather than the page. */
  .table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .thesis-card .table-wrap-scroll {
    min-height: 0;
    max-height: 420px;
  }

  /* Grid and flex children default to min-width:auto, so a wide table inside
     stretches its card instead of scrolling within it. */
  .thesis-stack > *,
  .thesis-card,
  .thesis-card .table-wrap {
    min-width: 0;
    max-width: 100%;
  }

  .thesis-card .table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* Fixed percentage columns squeeze the headings to one character per line
     at this width. Size to content instead and let the card scroll. */
  .thesis-card .table-wrap table {
    table-layout: auto;
    min-width: 560px;
  }

  .thesis-card-phd .table-wrap table {
    min-width: 640px;
  }

  .thesis-card th,
  .thesis-card td,
  .thesis-card-phd th,
  .thesis-card-phd td {
    width: auto !important;
    white-space: normal;
  }

  .thesis-card th:first-child,
  .thesis-card td:first-child {
    width: 56px !important;
    text-align: center;
    white-space: nowrap;
  }

  .table-tools,
  .software-toolbar-row {
    display: flex;
    flex-direction: column;
    gap: 10px;
  }

  .table-tools input,
  .table-tools select,
  .software-search,
  .search-input {
    width: 100%;
    box-sizing: border-box;
  }

  /* Journals controls: stack, and let the year chips scroll sideways. */
  .controls-bar {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }

  /* Children carry flex-basis values meant for a row (e.g. `flex: 1 1 480px`).
     Once the bar stacks, that basis is read as a height and leaves big empty
     bands between the controls, so reset it. */
  .controls-bar > * {
    flex: 0 0 auto !important;
    width: 100%;
    min-width: 0 !important;
  }

  .filter-mode-toggle {
    justify-content: center;
  }

  .filter-options-container {
    width: 100%;
    min-width: 0;
  }

  .filters-panel {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    flex-wrap: nowrap;
    padding-bottom: 4px;
  }

  .filters-panel .filter-btn {
    flex: 0 0 auto;
  }

  .software-filters {
    flex-wrap: wrap;
  }

  /* Carousels: shorter, and side previews stay inside the stage. */
  .home-carousel-stage,
  .carousel-stage {
    height: clamp(200px, 56vw, 320px);
    aspect-ratio: auto;
    overflow: hidden;
  }

  .home-carousel-nav,
  .carousel-nav {
    width: 36px;
    height: 36px;
  }

  .map-panel {
    height: 300px;
  }

  .map-embed {
    width: 100%;
    height: 100%;
  }

  /* Team cards read better stacked than side by side at this width. */
  .member-top {
    gap: 12px;
  }

  .team-leader-layout {
    display: block !important;
  }

  .team-leader-left {
    margin-bottom: 14px;
  }

  .alumni-letter-filter {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
  }

  .record-scroll {
    max-height: 420px;
  }
}

@media (max-width: 480px) {
  .stats-row {
    grid-template-columns: 1fr !important;
  }

  .hero h1,
  .page-hero h1,
  .hero-content h1,
  .hero-title {
    font-size: 1.5rem !important;
  }

  .motto {
    font-size: 1.1rem !important;
    white-space: normal !important;
    padding: 0 8px !important;
    max-width: 100% !important;
  }

  .btn,
  .btn-primary,
  .btn-light,
  .btn-outline,
  .btn-outline-light {
    width: 100%;
  }
}