/* Mobile responsive layer for the portfolio.
   Keeps the desktop design intact while making the hero, tools, navigation,
   case studies and CTAs comfortable on phones and small tablets. */

.hero-cta-mobile{ display:none; }
.mobile-only{ display:none; }

@media (max-width: 860px){
  html, body{
    max-width:100%;
    overflow-x:hidden;
  }

  body{
    -webkit-text-size-adjust:100%;
  }

  .container{
    width:100%;
    max-width:100%;
    padding-left:18px !important;
    padding-right:18px !important;
  }

  /* Mobile navigation: compact single-row header on index + every inner page. */
  .topbar{
    position:sticky !important;
    top:8px !important;
    z-index:90 !important;
    width:auto !important;
    padding:8px 9px !important;
    margin-top:8px !important;
    border-radius:14px !important;
    overflow:visible !important;
    display:grid !important;
    grid-template-columns:minmax(0,1fr) auto !important;
    align-items:center !important;
    gap:7px !important;
  }

  /* Inner pages have a floating Back/Home control: reserve room for it instead
     of letting the button cover the navigation. */
  .topbar.topbar-has-floating-back{
    margin-left:58px !important;
  }

  .desktop-inline-nav,
  .portfolio-main-nav{
    width:auto !important;
    min-width:0 !important;
    display:flex !important;
    flex-wrap:nowrap !important;
    align-items:center !important;
    gap:5px !important;
    overflow-x:auto !important;
    overflow-y:hidden !important;
    overscroll-behavior-x:contain;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
    padding:1px 1px 2px !important;
  }
  .desktop-inline-nav::-webkit-scrollbar,
  .portfolio-main-nav::-webkit-scrollbar{ display:none; }

  .desktop-inline-nav a,
  .portfolio-main-nav a{
    flex:0 0 auto !important;
    white-space:nowrap !important;
    font-size:9px !important;
    line-height:1 !important;
    letter-spacing:.025em !important;
    padding:7px 8px !important;
    border:1px solid var(--line) !important;
    border-radius:999px !important;
    background:color-mix(in srgb,var(--card) 92%,transparent) !important;
    text-decoration:none !important;
  }

  .portfolio-lang-wrap{
    margin-left:0 !important;
    align-self:center;
  }

  /* The floating Home button already covers this action on inner pages. */
  .topbar-has-floating-back .portfolio-main-nav > a:first-child{
    display:none !important;
  }

  .rule,
  .rule-strong{
    margin-left:18px !important;
    margin-right:18px !important;
    width:auto !important;
  }

  /* Hero: content first, portrait second. */
  #hero .hero,
  .hero{
    display:grid !important;
    grid-template-columns:1fr !important;
    gap:24px !important;
    margin:14px 0 10px !important;
    padding:24px 18px !important;
    border-radius:20px !important;
  }

  #hero .hero > div:first-child{
    max-width:none !important;
    min-width:0;
    gap:17px !important;
  }

  #hero h1{
    font-size:clamp(34px,11vw,48px) !important;
    line-height:1.02 !important;
    letter-spacing:-.035em;
  }

  .hero-photo{
    order:0 !important;
    width:118px !important;
    height:118px !important;
    margin-top:0;
    justify-self:start;
    border-width:4px !important;
  }

  .role-box{
    width:100%;
    max-width:100%;
    padding:11px 13px !important;
    font-size:10.5px !important;
    line-height:1.45 !important;
  }

  /* Tool cards under availability become a compact vertical stack. */
  .hero-tools{
    width:100%;
    margin-top:0 !important;
  }

  .hero-tools-grid{
    grid-template-columns:1fr !important;
    gap:6px !important;
  }

  .hero-tool-card{
    grid-template-columns:34px minmax(0,1fr) 14px !important;
    gap:7px !important;
    width:100%;
    height:auto !important;
    min-height:58px;
    padding:5px 8px !important;
  }

  .hero-tool-name{
    font-size:11px !important;
    line-height:1.12 !important;
  }

  .hero-tool-kind{
    font-size:7px !important;
  }

  .hero-tool-try{
    font-size:7px !important;
    padding:2px 6px !important;
  }

  /* Contact / availability rows wrap without overflow. */
  #hero [style*="display:flex"]{
    max-width:100%;
  }

  .availability-pill{
    max-width:100%;
    white-space:normal;
    line-height:1.45;
  }

  .hero-cta-desktop{
    display:none !important;
  }

  .hero-cta-mobile{
    display:grid !important;
    grid-template-columns:1fr !important;
    width:100%;
    gap:9px !important;
  }

  .hero-cta-mobile .cta-primary,
  .hero-cta-mobile .cta-secondary{
    width:100%;
    justify-content:center;
    text-align:center;
  }

  /* General sections. */
  .section{
    padding-top:42px !important;
    padding-bottom:42px !important;
  }

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

  .stat-num{
    font-size:clamp(24px,8vw,32px) !important;
  }

  .stat-label{
    font-size:10.5px !important;
    line-height:1.4 !important;
  }

  /* Keep useful case-study context instead of hiding all copy. */
  .case{
    grid-template-columns:1fr !important;
    gap:12px !important;
    padding:24px 0 !important;
  }

  .case .meta{
    display:block !important;
    white-space:normal !important;
    font-size:12px !important;
  }

  .case p{
    display:-webkit-box !important;
    -webkit-box-orient:vertical;
    -webkit-line-clamp:3;
    overflow:hidden;
    font-size:14px !important;
    line-height:1.58 !important;
  }

  .case-metric{
    border-left:0 !important;
    padding:10px 12px !important;
    border-radius:10px !important;
    background:var(--accent-soft);
    display:flex;
    align-items:baseline;
    gap:8px 10px;
    flex-wrap:wrap;
  }

  .case-metric .stat-num{
    font-size:16px !important;
  }

  .case-metric .stat-label{
    margin-top:0 !important;
  }

  /* Navigation chips in Selected Work remain tappable and wrap cleanly. */
  #selected-work .nav-btn{
    font-size:9.5px !important;
    padding:7px 9px !important;
  }

  /* Existing desktop/mobile switches. */
  .mobile-only{ display:block !important; }
  .desktop-only{ display:none !important; }

  .skills-grid,
  .quotes-grid,
  .two-col{
    grid-template-columns:1fr !important;
  }

  .help-cards-grid{
    grid-template-columns:1fr !important;
  }

  .help-card{
    padding:19px !important;
  }

  /* Do not remove descriptions from help cards on mobile. */
  #ways-i-can-help .help-card p{
    display:block !important;
  }

  /* Footer/contact should stack instead of squeezing links. */
  #contact > div{
    align-items:flex-start !important;
    flex-direction:column !important;
  }

  #contact > div > div{
    width:100%;
  }

  .back-to-top{
    right:16px !important;
    bottom:16px !important;
    width:44px !important;
    height:44px !important;
  }

  /* Touch devices should not depend on hover transforms. */
  @media (hover:none){
    .hero-tool-card:hover,
    .hero-photo:hover,
    .product-card:hover,
    .help-card:hover,
    .nav-btn:hover{
      transform:none !important;
    }
  }
}

@media (max-width: 430px){
  .topbar.topbar-has-floating-back{margin-left:54px !important;}
  .portfolio-main-nav a,.desktop-inline-nav a{font-size:8.5px !important;padding:7px 7px !important;}
  .portfolio-lang-wrap{gap:4px !important;padding-left:6px !important;}
  .portfolio-lang-flag{font-size:13px !important;width:17px !important;min-width:17px !important;}
  .container{
    padding-left:14px !important;
    padding-right:14px !important;
  }

  #hero .hero,
  .hero{
    padding:21px 15px !important;
  }

  .stats-row{
    grid-template-columns:1fr 1fr !important;
  }

  #selected-work h2{
    font-size:25px !important;
    line-height:1.15 !important;
  }
}