/* ===== Breakpoints (mobile-first base lives in the other files) ===== */

/* >= 900px: desktop nav + two-column sections */
@media(min-width:900px){
  .menu{display:flex}
  .two{grid-template-columns:1fr 1.3fr;gap:4rem}
}

/* >= 1000px: hero shows the code card to the right of the name */
@media(min-width:1000px){
  .hero-grid{grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:3rem}
  .code{display:block}
}

/* >= 760px: 4-up info strip */
@media(min-width:760px){
  .strip{grid-template-columns:repeat(4,1fr)}
}

/* <= 760px: tablets and phones */
@media(max-width:760px){
  section{padding-top:4.5rem}
  footer{margin-top:4.5rem}
  .hero{padding-top:6.5rem}
  .strip{margin-top:2.4rem}
  .phead{padding-top:6rem}
  .panel{padding:1.2rem 1.1rem .5rem}
  .proj{padding:1.25rem}
  .hint{margin-top:-1.4rem}
}

/* <= 600px: skill rows stack (name + level on top, bar below) */
@media(max-width:600px){
  .sk-row{grid-template-columns:1fr auto;gap:.55rem 1rem;padding:.9rem .3rem}
  .sk-row .bar{grid-column:1/-1;order:3}
  .sk-lvl{font-size:.85rem}
  .cert-grid{grid-template-columns:1fr}
}

/* <= 560px: contact rows */
@media(max-width:560px){
  .crow{grid-template-columns:1fr auto;padding:1rem}
  .c-l{grid-column:1/-1}
  .cta .btn{flex:1 1 auto;justify-content:center}
}

/* <= 420px: small phones, keep the nav on one line */
@media(max-width:420px){
  nav .w{gap:.5rem}
  .logo{font-size:.98rem}
  .tools{gap:.4rem}
  .lang button{padding:.3rem .5rem;font-size:.75rem}
  nav .btn{padding:.5rem .75rem;font-size:.8rem}
  .strip div{padding:.85rem .9rem}
  .crow{gap:.4rem .6rem}
  .crow .v{font-size:.9rem}
  .pop{min-width:8rem}
}

/* <= 360px: very small phones */
@media(max-width:360px){
  .crow .v{font-size:.8rem}
}