/* ============================================================
   Mobile Responsiveness Safety Layer — v72 · 08 Aug 2026
   Purpose: strengthen phone/tablet behavior without changing the
   established desktop visual language, content, maps, or JS logic.
   All overrides are intentionally scoped to <=1050px.
   ============================================================ */

@media (max-width:1050px){
  /* Let every grid/flex child shrink instead of forcing page overflow. */
  main,section,article,aside,div,figure,header,footer,nav{min-width:0}
  img,video,iframe,canvas{max-width:100%}
  video,iframe{width:100%}
  pre{max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}
  code{overflow-wrap:anywhere}

  /* Mobile navigation: preserve the existing menu logic, but keep the
     expanded menu usable on short screens and narrow devices. */
  .site-header .nav-wrap{position:relative;max-width:100%}
  .brand-text-only{min-width:0!important;flex:1 1 auto}
  .brand-text-only strong{display:block;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .site-header nav{max-height:calc(100dvh - 72px);overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}

  /* Scrollable scientific/code tables remain readable instead of
     widening the entire page. */
  .academic-table-wrap,.automation-evidence-table,.rs-evidence-table{max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}

  /* Map canvases must never impose an intrinsic width on their parent. */
  .leaflet-container,.story-map,.story-map-fallback,.ha-map,.compact-contact-map,.field-map-wrap{max-width:100%;min-width:0}
}

@media (max-width:780px){
  /* Shared type and action safety. */
  h1,h2,h3,h4,h5,h6,p,li,dt,dd,figcaption,address,a,strong,span{overflow-wrap:break-word}
  .hero-actions,.button-row,.portfolio-route-actions,.professor-quick-actions,.ha-actions{max-width:100%}
  input,select,textarea{max-width:100%}

  /* Keep header controls from squeezing the portfolio name off-screen. */
  .nav-wrap{width:min(calc(100% - 20px),1240px)!important;gap:8px!important}
  .brand-text-only strong{font-size:1.02rem!important}
  .theme,.menu{flex:0 0 36px!important}

  /* Standard layouts that can appear on legacy/dynamic detail pages. */
  .detail-layout,.split,.feature,.academic-hero-grid,.story-home-grid,
  .contact-grid,.gallery-grid,.project-grid,.grid-2,.grid-3,
  .research-detail-layout,.academic-paper-layout{min-width:0}

  /* Dynamic detail content generated by site.js. */
  .detail-content,.detail-media,.rs-auto-page,.rs-auto-section,.rs-auto-row,
  .automation-project-detail,.automation-project-browser{min-width:0}
  .detail-video iframe{display:block;width:100%;aspect-ratio:16/9;height:auto}

  /* Footer contact strings and long external identifiers. */
  .site-footer a,.professor-email-list a,.professor-resource-links a{overflow-wrap:anywhere;word-break:break-word}
}

@media (max-width:640px){
  /* Comfortable phone gutters without changing tablet/desktop spacing. */
  .container{width:min(calc(100% - 22px),var(--max))}
  .page-hero,.content,.section{max-width:100%}

  /* Buttons remain tappable and do not overflow when labels are long. */
  .button,.story-more,.automation-project-github,.auto-code-link,.auto-download-link{
    max-width:100%;white-space:normal;text-align:center
  }

  /* Publication / research tables intentionally scroll horizontally;
     the surrounding page stays fixed to the viewport. */
  .academic-table-wrap{margin-left:0;margin-right:0;border-radius:0}

  /* Professor contact page: one clear action per row on small phones. */
  .professor-quick-actions{grid-template-columns:1fr!important}
  .professor-primary-action{min-width:0}
  .professor-contact-row,.professor-resource-row,.compact-address-row{min-width:0}

  /* Teaching evidence images keep their natural aspect ratio after the
     existing one-column switch. */
  .teaching-capacity-page .tc-photo-main img,
  .teaching-capacity-page .tc-photo-pair img,
  .teaching-capacity-page .tc-barc-visual img,
  .teaching-capacity-page .tc-esri-visual img{width:100%;height:auto;max-height:none}

  /* Research-detail side facts and authorship terms cannot force a
     wider column on narrow screens. */
  .academic-authorship-box dl>div{grid-template-columns:1fr!important;gap:3px!important}
  .academic-authorship-box dd{margin-left:0}

  /* UAV/field-survey filters are easier to tap and wrap cleanly. */
  .field-map-filters{display:flex;flex-wrap:wrap;max-width:100%}
  .field-map-filters button{flex:1 1 auto;min-width:0}
}

@media (max-width:520px){
  /* Header keeps name + menu + theme on one row at 320–430 px widths. */
  .nav-wrap{width:min(calc(100% - 14px),1240px)!important;gap:6px!important}
  .brand-text-only strong{font-size:.96rem!important}
  .theme,.menu{height:34px!important;min-width:34px!important;flex-basis:34px!important}
  .site-header nav{left:8px!important;right:8px!important;border-radius:12px!important}

  /* Home / Research Journey map: its overlay controls previously share
     a compact map canvas. Give them enough vertical room on phones and
     keep each overlay inside the map frame. */
  .home-atlas-page .ha-map-option6{min-height:560px!important}
  .home-atlas-page .ha-o6-header{left:10px;right:10px;top:10px;padding:9px 10px}
  .home-atlas-page .ha-o6-header strong{font-size:1rem}
  .home-atlas-page .ha-o6-header small{font-size:.54rem;line-height:1.35}
  .home-atlas-page .ha-o6-steps{left:10px;top:120px;width:128px;max-height:270px;overflow-y:auto;padding-right:2px;overscroll-behavior:contain}
  .home-atlas-page .ha-o6-steps button{grid-template-columns:24px 1fr;gap:6px;padding:6px 7px}
  .home-atlas-page .ha-o6-steps i{width:23px;height:23px}
  .home-atlas-page .ha-o6-steps small{display:none}
  .home-atlas-page .ha-o6-play{right:10px;bottom:150px;padding:7px 9px}
  .home-atlas-page .ha-o6-panel{left:10px;right:10px;bottom:10px;grid-template-columns:1fr 1fr}
  .home-atlas-page .ha-o6-panel>div{padding:8px 9px}
  .home-atlas-page .ha-o6-panel strong{font-size:.62rem;line-height:1.23}

  /* The three angled journal covers remain an intentional stack, but
     are constrained to the phone viewport. */
  .ha-cover-stack{max-width:100%;min-height:235px;overflow:hidden}
  .ha-cover-stack a{width:112px;flex:0 1 112px}
  .ha-cover-stack a:nth-child(1){transform:rotate(-6deg) translateX(18px)}
  .ha-cover-stack a:nth-child(3){transform:rotate(6deg) translateX(-18px)}

  /* Homepage headline/caption overlays get room for long academic text. */
  .ha-main-caption{left:14px!important;right:14px!important;bottom:154px!important}
  .ha-main-caption h2{font-size:1.65rem}
  .ha-result-dials{left:14px!important;right:14px!important;bottom:14px!important;gap:5px!important}

  /* Compact research cards and dynamic content. */
  .research-detail-intro h1,.compact-research-detail .research-detail-intro h1{overflow-wrap:anywhere}
  .research-detail-tags,.tags{max-width:100%}
  .research-detail-tags span,.tags span{max-width:100%;white-space:normal}

  /* Inputs in the local content editor remain usable on mobile too. */
  .editor-shell,.editor-grid,.editor-card,.editor-toolbar{max-width:100%}
  .editor-card input,.editor-card textarea,.editor-card select{width:100%}
}

@media (max-width:380px){
  /* Extra-small devices: preserve the visual identity without clipping. */
  .brand-text-only strong{font-size:.9rem!important}
  .home-atlas-page .ha-name-row{grid-template-columns:58px minmax(0,1fr);gap:10px}
  .home-atlas-page .ha-name-row img{width:58px;height:58px}
  .home-atlas-page .ha-identity h2{font-size:2rem}
  .home-atlas-page .ha-signal-strip{grid-template-columns:1fr 1fr}
  .home-atlas-page .ha-o6-steps{width:118px}
  .home-atlas-page .ha-o6-play{font-size:.52rem}
  .home-atlas-page .ha-o6-panel strong{font-size:.58rem}
  .publication-record-card,.credential-card,.story-chapter{max-width:100%}
}