
/* =========================================================
   ARM-AKHMAT responsive layer v5.5
   Public website: phones / tablets / laptops / large screens
   ========================================================= */

html{
  -webkit-text-size-adjust:100%;
  text-size-adjust:100%;
}
body{
  overflow-x:hidden;
}
button,input,select,textarea{
  max-width:100%;
}
img,svg,video{
  height:auto;
}
.nav{
  position:relative;
}
.menu{
  min-width:0;
}
.btn{
  -webkit-tap-highlight-color:transparent;
}
.table-wrap{
  -webkit-overflow-scrolling:touch;
  scrollbar-width:thin;
  scrollbar-color:rgba(202,164,81,.35) transparent;
}

/* Large desktop: keep the composition restrained instead of stretched. */
@media (min-width:1440px){
  .container{max-width:1240px}
  .hero{padding-top:64px}
  .section{padding:68px 0}
}

/* Compact laptop / landscape tablet. */
@media (max-width:1180px){
  .container{width:min(100% - 32px,1120px)}
  .menu{gap:14px}
  .menu a{font-size:.9rem}
  .hero-grid{gap:30px}
  .hero-card{min-height:410px}
  .section{padding:64px 0}
  .cards{gap:14px}
  .card{padding:22px}
  .portal-strip{gap:10px}
  .portal-item{padding:18px;min-height:116px}
  .tournament{padding:30px;gap:26px}
  .quick-links{gap:10px}
}

/* Tablet. */
@media (max-width:900px){
  header{z-index:200}
  .nav{height:70px}
  .brand{min-width:0}
  .brand > span:last-child{
    min-width:0;
    max-width:58vw;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
  }
  .brand small{
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
  }
  .mobile-toggle{
    width:44px;height:44px;
    border:1px solid rgba(255,255,255,.08);
    border-radius:12px;
    background:rgba(255,255,255,.035);
    display:grid;
    place-items:center;
    cursor:pointer;
    flex:0 0 auto;
  }
  .menu{
    position:fixed;
    display:none;
    top:78px;
    left:16px;
    right:16px;
    max-height:calc(100dvh - 94px);
    overflow:auto;
    padding:12px;
    border-radius:18px;
    background:rgba(8,18,14,.98);
    border:1px solid rgba(226,194,112,.24);
    box-shadow:0 22px 70px rgba(0,0,0,.5);
    grid-template-columns:1fr 1fr;
    gap:8px;
  }
  .menu.open{display:grid}
  .menu a{
    padding:12px 13px;
    border-radius:12px;
    background:rgba(255,255,255,.025);
    border:1px solid rgba(255,255,255,.045);
    font-size:.91rem;
  }

  .hero{
    padding:50px 0 26px;
  }
  .hero-grid{
    grid-template-columns:minmax(0,1fr);
    gap:24px;
  }
  .hero h1{
    max-width:760px;
  }
  .hero p{
    max-width:760px;
    margin-bottom:0;
  }
  .hero-card{
    min-height:300px;
    max-width:720px;
    width:100%;
    margin:0 auto;
  }
  .hero-card .ring{
    width:190px;height:190px;
    margin-top:24px;
  }
  .hero-card:before{
    font-size:10rem;
  }

  .stats{
    padding:24px 0 52px;
    gap:10px;
  }
  .stat{
    padding:17px;
  }
  .stat b{
    font-size:1.65rem;
  }

  .section{
    padding:52px 0;
  }
  .section-head{
    margin-bottom:22px;
  }
  .section-head p{
    max-width:520px;
  }

  .cards,.leaders{
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:12px;
  }
  .news-grid,.news-list{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
  .news.featured{
    grid-column:1/-1;
  }
  .partner{
    min-height:86px;
  }

  .tournament{
    grid-template-columns:1fr;
    padding:26px;
  }
  .trophy{
    min-height:230px;
  }

  .registration-layout{
    grid-template-columns:1fr;
    gap:16px;
  }
  .filter-panel{
    position:static;
    padding:18px;
  }
  .registration-summary{
    margin-top:0;
  }
  .quick-links{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
  .article{
    width:100%;
  }

  .contact-grid{
    grid-template-columns:1fr;
  }
  .footer-grid{
    grid-template-columns:1fr 1fr;
  }
}

/* Phones. */
@media (max-width:640px){
  :root{
    --radius:18px;
  }

  .container{
    width:min(100% - 20px,1180px);
  }

  .nav{
    height:62px;
  }
  .brand{
    gap:9px;
    font-size:.9rem;
  }
  .brand-mark{
    width:36px;height:36px;
    font-size:.78rem;
    box-shadow:inset 0 0 0 3px rgba(202,164,81,.06);
  }
  .brand small{
    display:none;
  }
  .brand > span:last-child{
    max-width:55vw;
  }
  .mobile-toggle{
    width:40px;height:40px;
    font-size:1.25rem;
  }
  .menu{
    top:68px;
    left:10px;
    right:10px;
    padding:9px;
    border-radius:16px;
    grid-template-columns:1fr 1fr;
  }
  .menu a{
    padding:11px 10px;
    font-size:.84rem;
  }

  h1{
    font-size:clamp(2.25rem,12vw,3.25rem);
    line-height:1.02;
  }
  h2{
    font-size:clamp(1.75rem,8vw,2.45rem);
  }
  h3{
    font-size:1.18rem;
  }
  p{
    font-size:.94rem;
    line-height:1.5;
  }
  .eyebrow{
    font-size:.68rem;
    letter-spacing:.12em;
  }

  .hero{
    padding:34px 0 20px;
  }
  .hero p{
    font-size:.96rem;
  }
  .hero-actions{
    margin-top:20px;
    gap:8px;
  }
  .hero-actions .btn{
    flex:1 1 100%;
    width:100%;
  }
  .hero-card{
    min-height:235px;
    border-radius:24px;
    padding:18px;
  }
  .hero-card .ring{
    width:145px;height:145px;
    margin-top:14px;
    box-shadow:0 0 0 9px rgba(202,164,81,.05),0 0 0 10px rgba(202,164,81,.15);
  }
  .ring strong{
    font-size:2.05rem;
  }
  .hero-card .city{
    height:78px;
  }
  .hero-card:before{
    font-size:7rem;
  }

  .stats{
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:8px;
    padding:18px 0 38px;
  }
  .stat{
    padding:14px;
    border-radius:15px;
  }
  .stat b{
    font-size:1.42rem;
  }
  .stat span{
    font-size:.78rem;
    line-height:1.35;
  }

  .section{
    padding:40px 0;
  }
  .section-head{
    align-items:flex-start;
    flex-direction:column;
    gap:9px;
    margin-bottom:18px;
  }
  .section-head p{
    font-size:.9rem;
  }

  .cards,.leaders,.news-grid,.news-list,.docs,.archive-grid{
    grid-template-columns:1fr;
    gap:10px;
  }
  .card{
    padding:17px;
    border-radius:17px;
  }
  .news,.news-card,.archive-card{
    min-height:auto;
  }
  .news.featured{
    min-height:auto;
  }
  .leader-photo{
    height:220px;
  }

  .portal-strip{
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:8px;
    padding:18px 0 38px;
  }
  .portal-item{
    min-height:104px;
    padding:14px;
    border-radius:15px;
  }
  .portal-item b{
    font-size:1rem;
  }
  .portal-item span{
    font-size:.78rem;
    line-height:1.35;
  }

  .tournament{
    padding:18px;
    border-radius:21px;
    gap:18px;
  }
  .badges{
    gap:6px;
    margin:14px 0;
  }
  .badge{
    padding:6px 9px;
    font-size:.76rem;
  }
  .weights{
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:6px;
    margin-top:14px;
  }
  .weight{
    padding:8px;
    border-radius:10px;
    font-size:.88rem;
  }
  .trophy{
    min-height:175px;
    border-radius:17px;
  }
  .trophy strong{
    font-size:3.5rem;
  }

  .event-card{
    grid-template-columns:1fr;
    gap:12px;
    padding:16px;
    border-radius:17px;
  }
  .event-date{
    border-right:0;
    border-bottom:1px solid rgba(255,255,255,.07);
    padding:0 0 10px;
  }
  .event-date strong{
    font-size:1.6rem;
  }
  .event-card .btn{
    width:100%;
  }

  .article .lead{
    font-size:1rem;
  }
  .article h2{
    font-size:1.7rem;
    margin-top:30px;
  }
  .article-grid,.quick-links{
    grid-template-columns:1fr;
    gap:8px;
  }
  .article-box,.quick-link{
    padding:15px;
  }

  .page-hero{
    padding:40px 0 22px;
  }
  .page-hero p{
    margin-bottom:0;
  }

  .contact-box{
    padding:18px;
  }
  .form input,.form textarea,.select,input.reg-search{
    font-size:16px; /* prevents iOS zoom */
  }
  .form textarea{
    min-height:110px;
  }

  .doc{
    padding:15px;
    border-radius:15px;
  }

  .partners{
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:8px;
  }
  .partner{
    min-height:74px;
    border-radius:14px;
  }

  .cta{
    padding:20px;
    border-radius:20px;
    align-items:flex-start;
    flex-direction:column;
  }
  .cta .btn{
    width:100%;
  }

  .registration-page{
    padding-bottom:82px;
  }
  .filter-panel{
    padding:14px;
    border-radius:16px;
  }
  .filter-group{
    margin-bottom:15px;
  }
  .weight-filters{
    gap:6px;
  }
  .weight-filter{
    min-height:39px;
    padding:8px 11px;
    font-size:.83rem;
  }
  .registration-summary{
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:6px;
    margin-bottom:10px;
  }
  .summary-box{
    padding:11px 9px;
    border-radius:13px;
    min-width:0;
  }
  .summary-box span{
    display:block;
    font-size:.68rem;
    line-height:1.25;
  }
  .summary-box b{
    font-size:1.28rem;
    margin-top:3px;
    overflow-wrap:anywhere;
  }
  .sync-note,.privacy-note{
    font-size:.78rem;
    line-height:1.45;
  }

  /* Registration table becomes cards on a phone. */
  .registration-table-wrap{
    overflow:visible;
    border:0;
    border-radius:0;
  }
  table.registration-table{
    min-width:0;
    display:block;
  }
  .registration-table thead{
    display:none;
  }
  .registration-table tbody{
    display:grid;
    gap:8px;
  }
  .registration-table tr{
    display:grid;
    grid-template-columns:1fr;
    padding:8px 0;
    border:1px solid rgba(255,255,255,.07);
    background:rgba(255,255,255,.025);
    border-radius:15px;
    overflow:hidden;
  }
  .registration-table td{
    display:grid;
    grid-template-columns:100px minmax(0,1fr);
    gap:10px;
    align-items:start;
    padding:7px 12px;
    border:0;
    font-size:.88rem;
    overflow-wrap:anywhere;
  }
  .registration-table td::before{
    content:attr(data-label);
    color:var(--gold-2);
    font-size:.69rem;
    text-transform:uppercase;
    letter-spacing:.07em;
    font-weight:700;
  }
  .registration-table td:first-child{
    padding-bottom:4px;
  }

  /* The main mobile registration action is always visible. */
  .registration-sidebar-cta{
    display:none !important;
  }
  .mobile-registration-cta{
    display:flex;
    position:fixed;
    z-index:7000;
    left:10px;
    right:10px;
    bottom:max(10px, env(safe-area-inset-bottom));
    padding:7px;
    border:1px solid rgba(226,194,112,.35);
    border-radius:17px;
    background:rgba(7,16,13,.94);
    backdrop-filter:blur(14px);
    box-shadow:0 16px 45px rgba(0,0,0,.48);
  }
  .mobile-registration-cta .btn{
    width:100%;
    min-height:48px;
  }

  /* Cookie banner is placed above the fixed registration CTA on phones. */
  .cookie-banner{
    left:8px;
    right:8px;
    bottom:76px;
  }
  .cookie-inner{
    padding:14px;
    border-radius:16px;
    gap:12px;
  }
  .cookie-inner p{
    font-size:.78rem;
    line-height:1.4;
  }
  .cookie-actions{
    width:100%;
    flex-direction:column;
    gap:6px;
  }
  .cookie-actions .btn{
    width:100%;
    min-height:42px;
  }

  .legal-wrap h2{
    font-size:1.65rem;
    margin-top:28px;
  }
  .legal-wrap h3{
    font-size:1.1rem;
  }
  .legal-meta{
    grid-template-columns:1fr;
  }
  .legal-actions{
    flex-direction:column;
  }
  .legal-actions .btn{
    width:100%;
  }

  footer{
    padding:34px 0 20px;
    margin-top:36px;
  }
  .footer-grid{
    grid-template-columns:1fr;
    gap:20px;
  }
  .footer-links{
    gap:7px;
  }
  .copyright{
    margin-top:22px;
    padding-top:16px;
    font-size:.76rem;
  }
}

/* Very narrow devices. */
@media (max-width:420px){
  .container{
    width:min(100% - 16px,1180px);
  }
  .menu{
    grid-template-columns:1fr;
  }
  .brand > span:last-child{
    max-width:52vw;
  }
  h1{
    font-size:2.18rem;
  }
  .hero-card{
    min-height:205px;
  }
  .hero-card .ring{
    width:128px;height:128px;
  }
  .stats{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
  .portal-strip{
    grid-template-columns:1fr;
  }
  .registration-summary{
    grid-template-columns:1fr;
  }
  .summary-box{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:10px;
  }
  .summary-box span{
    font-size:.75rem;
  }
  .summary-box b{
    font-size:1.2rem;
  }
  .registration-table td{
    grid-template-columns:86px minmax(0,1fr);
    font-size:.84rem;
  }
  .partners{
    grid-template-columns:1fr 1fr;
  }
}

/* Desktop-only default for mobile fixed CTA. */
@media (min-width:641px){
  .mobile-registration-cta{display:none!important}
}

/* Landscape short screens */
@media (max-height:560px) and (max-width:900px){
  .menu{
    max-height:calc(100dvh - 76px);
    top:66px;
  }
  .hero-card{
    display:none;
  }
}
