/* Responsive overrides (loaded after page styles) */
@media (max-width:900px){
  .hero{grid-template-columns:1fr;min-height:0;padding:32px 0 48px;}
  .hero-visual{display:none;}
  .trend-grid,.how-grid{grid-template-columns:repeat(2,1fr);}
  .layout-split, .create-wrap{grid-template-columns:1fr;}
  .detail-head{grid-template-columns:1fr;}
  .mp-grid{grid-template-columns:1fr;}
}

@media (max-width:640px){
  /* keep the last content clear of the fixed Discord badge and Jelly */
  main{padding:0 16px 72px;}

  /* hero buttons: equal width, side by side */
  .hero-actions{gap:10px;flex-wrap:nowrap;}
  .hero-actions .btn{flex:1 1 0;min-width:0;justify-content:center;padding:13px 12px;font-size:0.9rem;white-space:nowrap;}

  /* how it works: one card per row, number beside the text */
  .section-head{margin-bottom:18px;}
  .section-head h2{font-size:1.5rem;}
  .how-grid{grid-template-columns:1fr;gap:12px;margin-bottom:40px;}
  .how-card{display:grid;grid-template-columns:auto 1fr;column-gap:14px;align-items:start;padding:18px;}
  .how-num{grid-row:span 2;width:36px;height:36px;margin-bottom:0;}
  .how-card h3{font-size:1rem;margin-bottom:4px;}
  .how-card p{font-size:0.86rem;}

  /* pattern detail */
  .detail-back{margin:18px 0 14px;}
  .detail-head{gap:18px;padding-bottom:22px;margin-bottom:22px;}
  .detail-thumb{height:auto;aspect-ratio:4 / 5;max-height:420px;}
  .detail-info h1{font-size:1.6rem;}
  .detail-facts{gap:14px 22px;}
  .detail-actions{flex-wrap:wrap;gap:8px;}
  .detail-actions .btn{flex:1 1 auto;justify-content:center;}
  .layout-split{gap:20px;}
  .step-card{padding:14px;gap:12px;}
  .step-main h3{flex-wrap:wrap;gap:4px 8px;font-size:0.95rem;}
  .diagram{max-width:100%;}
  .sidebar-card{padding:18px;}
  #constructionModal{padding:10px !important;}
  #constructionModal > div{padding:22px 18px !important;width:100% !important;max-height:92vh !important;}

  /* discord badge shrinks to an icon so it doesn't cover content */
  .fitcheck-link{width:40px;height:40px;padding:0;bottom:14px;left:12px;}
  .fitcheck-link img{width:18px;height:18px;}
  .fitcheck-label{display:none;}
}
@media (max-width:360px){
  .hero-actions{flex-wrap:wrap;}
  .hero-actions .btn{flex:1 1 100%;}
}