/* Fedora2 V7.9 – Mobile Responsive Pass
   Desktop >= 1200px untouched. Artwork itself is not modified. */

@media (max-width:1199px){
  html,body{max-width:100%!important;overflow-x:hidden!important}
  img,iframe{max-width:100%!important}
  .v4-wide{width:94%!important;max-width:100%!important}

  /* Top status bar can wrap instead of becoming microscopic/off-screen. */
  .v4-top{height:auto!important;min-height:32px!important;padding:5px 0!important}
  .v4-top .v4-wide{display:flex!important;flex-wrap:wrap!important;justify-content:center!important;gap:5px 10px!important}
  .f2-ch-statuses{flex-wrap:wrap!important;justify-content:center!important}

  /* Preserve the header composition; only scale/crop it for smaller viewports. */
  .v4-hero{min-height:190px!important;background-position:center top!important}
  .v4-brand{max-width:92vw!important}

  /* Navigation remains recognizable and touch friendly. */
  .v4-nav{height:auto!important}
  .v4-nav .v4-wide{display:flex!important;flex-wrap:wrap!important;justify-content:center!important}
  .v4-nav a{min-height:46px!important;display:flex!important;align-items:center!important;justify-content:center!important;padding:0 14px!important}

  /* Main layout becomes one clean column on tablet/mobile. */
  .v4-grid{width:94%!important;max-width:760px!important;display:flex!important;flex-direction:column!important;gap:12px!important;margin-left:auto!important;margin-right:auto!important}
  .v4-left,.v4-right,main{width:100%!important;max-width:none!important;min-width:0!important}
  main{order:1!important}.v4-left{order:2!important}.v4-right{order:3!important}

  .v4-panel{width:100%!important;box-sizing:border-box!important}
  .v4-body{box-sizing:border-box!important}
  .v4-mainhero{min-height:300px!important;background-position:center!important}
  .v4-mainhero-content{padding-left:18px!important;padding-right:18px!important}
  .v4-mainhero-content h1{font-size:clamp(25px,6vw,42px)!important;line-height:1.05!important}
  .v4-mainhero-content p{font-size:11px!important;letter-spacing:.5px!important}

  /* CTAs become comfortable touch targets. */
  .v4-btn{min-height:48px!important;padding:0 18px!important;display:flex!important;align-items:center!important;justify-content:center!important;box-sizing:border-box!important}
  .v4-left .v4-btn,.v4-mainhero .v4-btn,.v4-right .v4-btn{width:100%!important}

  /* Forms/tables must never force horizontal page scrolling. */
  .v4-content input:not([type=checkbox]):not([type=radio]),
  .v4-content select,.v4-content textarea,.v4-login input{max-width:100%!important;box-sizing:border-box!important}
  .v4-content table,.f2-rank-table{width:100%!important;max-width:100%!important}
  .v4-content{overflow-wrap:anywhere!important}
  .f2-news-card{max-width:100%!important;box-sizing:border-box!important}

  .v4-features{flex-wrap:wrap!important;justify-content:center!important}
  .v4-feature{min-width:210px!important;flex:1 1 45%!important}
}

@media (max-width:760px){
  .v4-wide,.v4-grid{width:calc(100% - 20px)!important}

  .v4-top{font-size:10px!important}
  .v4-language-wrap{margin-right:2px!important}
  .f2-ch-label,.f2-ch{font-size:10px!important}
  .f2-ch-statuses{gap:5px 8px!important}
  .f2-ch i{width:7px!important;height:7px!important}

  .v4-hero{min-height:145px!important;background-size:auto 145px!important}
  .v4-brand{height:132px!important;width:92vw!important}

  .v4-nav a{flex:1 1 33.333%!important;min-width:105px!important;font-size:11px!important;padding:0 8px!important}
  .v4-nav a i{margin-right:5px!important}

  .v4-grid{padding-top:10px!important;padding-bottom:12px!important}
  .v4-title{min-height:39px!important;padding-left:12px!important;padding-right:12px!important}
  .v4-body{padding-left:10px!important;padding-right:10px!important}

  .v4-mainhero{min-height:245px!important;background-size:cover!important}
  .v4-mainhero-content h1{font-size:27px!important;text-align:center!important}
  .v4-mainhero-content p{text-align:center!important;font-size:10px!important}
  .v4-mainhero-content .v4-btn{max-width:310px!important;margin-left:auto!important;margin-right:auto!important}

  /* Registration/admin/content forms: stack label/value cells when legacy markup allows it. */
  .v4-content table:not(.f2-rank-table){display:block!important;overflow-x:auto!important;-webkit-overflow-scrolling:touch!important}
  .v4-content textarea{width:100%!important}
  .f2-news-empty{min-height:180px!important;padding-left:15px!important;padding-right:15px!important}

  .v4-features{display:grid!important;grid-template-columns:1fr 1fr!important}
  .v4-feature{min-width:0!important;width:auto!important}
  .v4-copy{text-align:center!important;padding-left:12px!important;padding-right:12px!important}
}

@media (max-width:430px){
  .v4-top .v4-wide{gap:4px 7px!important}
  .f2-ch-label{display:none!important}
  .f2-ch-statuses{width:100%!important}
  .v4-hero{min-height:125px!important;background-size:auto 125px!important}
  .v4-brand{height:112px!important}

  .v4-nav a{flex-basis:50%!important;font-size:10px!important;min-height:44px!important}
  .v4-mainhero{min-height:220px!important}
  .v4-mainhero-content h1{font-size:23px!important}
  .v4-mainhero-content p{font-size:9px!important}
  .v4-btn{font-size:12px!important;min-height:48px!important}

  .v4-login input{width:100%!important}
  .v4-status-row{font-size:11px!important}
  .v4-features{grid-template-columns:1fr!important}
}

@media (max-width:390px){
  .v4-wide,.v4-grid{width:calc(100% - 14px)!important}
  .v4-nav a{padding-left:5px!important;padding-right:5px!important}
  .v4-mainhero-content h1{font-size:21px!important}
}