/* =========================================================
   MICRORETAILX — MOBILE POLISH
   Final mobile overrides for language grid, Team directory,
   founder profile and viewport-safe footer.
   ========================================================= */

/* Never let Team/Profile fixed grids widen the viewport. */
body[data-page="team"],
body[data-page="founder"]{
  overflow-x:hidden !important;
}

body[data-page="team"] .page,
body[data-page="founder"] .page{
  width:100% !important;
  max-width:100vw !important;
  min-height:100svh !important;
  grid-template-rows:auto minmax(0,1fr) auto !important;
}

body[data-page="team"] #mx-main,
body[data-page="founder"] #mx-main{
  width:100% !important;
  max-width:100vw !important;
  min-width:0 !important;
  overflow-x:clip !important;
}

/* Profile: move to a two-column editorial layout before the old fixed
   three-column grid has any chance to overflow on small laptops/tablets. */
@media (min-width:701px) and (max-width:980px){
  body[data-page="founder"] .mx-founder{
    width:min(900px, calc(100% - 40px)) !important;
    padding:clamp(36px,5vh,56px) 0 clamp(40px,6vh,64px) !important;
  }

  body[data-page="founder"] .mx-founder-head,
  body[data-page="founder"] .mx-founder-body{
    grid-template-columns:minmax(190px,240px) minmax(0,1fr) !important;
    column-gap:clamp(24px,4vw,40px) !important;
  }

  body[data-page="founder"] .mx-founder-head h1{
    grid-column:1 !important;
  }

  body[data-page="founder"] .mx-founder-head p{
    grid-column:2 !important;
  }

  body[data-page="founder"] .mx-founder-body{
    row-gap:24px !important;
    padding-top:30px !important;
  }

  body[data-page="founder"] .mx-founder-photo{
    grid-column:1 !important;
    grid-row:1 / 3 !important;
    width:100% !important;
    max-width:240px !important;
  }

  body[data-page="founder"] .mx-founder-meta{
    grid-column:2 !important;
    grid-row:1 !important;
    min-width:0 !important;
  }

  body[data-page="founder"] .mx-founder-copy{
    grid-column:2 !important;
    grid-row:2 !important;
    min-width:0 !important;
    max-width:100% !important;
  }
}

@media (max-width:760px){
  /* Nine languages: keep the final odd item the same size as the rest,
     but centre it instead of stretching it across the whole row. */
  #lang-switch.is-open #lang-rail .lang-pill:last-child:nth-child(odd){
    grid-column:1 / -1 !important;
    width:calc((100% - 10px) / 2) !important;
    justify-self:center !important;
  }

  /* Footer: always belongs to the viewport width, wraps naturally and never
     creates horizontal scrolling. This applies inside and outside Team. */
  footer{
    width:100% !important;
    max-width:100vw !important;
    min-width:0 !important;
    margin:0 !important;
    padding-inline:14px !important;
    overflow:hidden !important;
  }

  footer .footer-inner{
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
    align-items:center !important;
  }

  footer .footer-links{
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
    justify-content:center !important;
    gap:7px 10px !important;
    white-space:normal !important;
    text-align:center !important;
  }

  footer .copyright{
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
    white-space:normal !important;
    overflow-wrap:anywhere !important;
  }

  /* TEAM — keep every numbered slot. The grid contracts instead of deleting
     placeholders, so 01–10 remain visible on mobile without horizontal scroll. */
  body[data-page="team"] .team-shell{
    width:calc(100% - 24px) !important;
    max-width:560px !important;
    margin-inline:auto !important;
    padding:24px 0 30px !important;
  }

  body[data-page="team"] .team-title{
    min-height:58px !important;
    padding-bottom:17px !important;
  }

  body[data-page="team"] .team-title h1{
    font-size:clamp(32px,9vw,42px) !important;
    line-height:.95 !important;
  }

  body[data-page="team"] .team-directory{
    width:100% !important;
    display:grid !important;
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    justify-content:stretch !important;
    column-gap:12px !important;
    row-gap:22px !important;
    padding-top:22px !important;
  }

  body[data-page="team"] .team-card,
  body[data-page="team"] .team-card-empty{
    display:block !important;
    width:100% !important;
    min-width:0 !important;
    max-width:none !important;
    margin:0 !important;
  }

  body[data-page="team"] .team-photo{
    width:100% !important;
    min-width:0 !important;
    aspect-ratio:1.18 / 1 !important;
  }

  body[data-page="team"] .team-photo img{
    width:100% !important;
    height:100% !important;
    object-fit:cover !important;
    object-position:center 22% !important;
  }

  body[data-page="team"] .team-card h2{
    margin:10px 0 3px !important;
    font-size:clamp(11px,3.4vw,14px) !important;
    line-height:1.15 !important;
    overflow-wrap:anywhere !important;
  }

  body[data-page="team"] .team-card p{
    font-size:10px !important;
    line-height:1.25 !important;
  }

  /* FOUNDER PROFILE — compact, centred, and viewport-safe. */
  body[data-page="founder"] .mx-founder{
    width:calc(100% - 28px) !important;
    max-width:560px !important;
    margin-inline:auto !important;
    padding:28px 0 32px !important;
  }

  body[data-page="founder"] .mx-founder-head,
  body[data-page="founder"] .mx-founder-body{
    width:100% !important;
    min-width:0 !important;
    grid-template-columns:minmax(0,1fr) !important;
    column-gap:0 !important;
  }

  body[data-page="founder"] .mx-founder-head{
    gap:7px !important;
    padding-bottom:18px !important;
  }

  body[data-page="founder"] .mx-founder-head h1,
  body[data-page="founder"] .mx-founder-head p,
  body[data-page="founder"] .mx-founder-photo,
  body[data-page="founder"] .mx-founder-meta,
  body[data-page="founder"] .mx-founder-copy{
    grid-column:1 !important;
    min-width:0 !important;
  }

  body[data-page="founder"] .mx-founder-head h1{
    font-size:clamp(28px,9vw,36px) !important;
    transform:none !important;
  }

  body[data-page="founder"] .mx-founder-head p{
    font-size:clamp(17px,5.4vw,22px) !important;
  }

  body[data-page="founder"] .mx-founder-body{
    gap:22px !important;
    padding-top:22px !important;
  }

  body[data-page="founder"] .mx-founder-photo{
    grid-row:auto !important;
    width:min(54vw,190px) !important;
    max-width:190px !important;
    margin-inline:auto !important;
  }

  body[data-page="founder"] .mx-founder-meta{
    grid-row:auto !important;
    width:100% !important;
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    gap:18px 16px !important;
  }

  body[data-page="founder"] .mx-founder-copy{
    grid-row:auto !important;
    width:100% !important;
    max-width:100% !important;
    overflow-wrap:anywhere !important;
  }
}

@media (max-width:380px){
  body[data-page="team"] .team-shell,
  body[data-page="founder"] .mx-founder{
    width:calc(100% - 20px) !important;
  }

  body[data-page="team"] .team-directory{
    column-gap:9px !important;
    row-gap:18px !important;
  }

  body[data-page="founder"] .mx-founder-meta{
    grid-template-columns:1fr !important;
    gap:14px !important;
  }
}