/* ============================================================
   RESPONSIVE · RTL, tablets, phones
   ============================================================ */

/* ---------- RTL ---------- */
html[dir="rtl"] .pager{left:auto;right:clamp(.55rem,1.6vw,1.25rem);align-items:flex-end}
html[dir="rtl"] .pager__dot{flex-direction:row}
html[dir="rtl"] .lang-menu{right:auto;left:0;transform-origin:top left}
html[dir="rtl"] .guide__item{grid-template-columns:1fr auto}
html[dir="rtl"] .guide__num{order:2}
html[dir="rtl"] .guide__list li{padding-left:0;padding-right:1.6rem}
html[dir="rtl"] .guide__list li::before{left:auto;right:0}
html[dir="rtl"] .about__body{
  padding-left:0;
  padding-right:clamp(1rem,2.5vw,2rem);
  border-left:0;
  border-right:1px solid rgba(0,229,255,.35);
}
html[dir="rtl"] .about__body::before{left:auto;right:-1px}
html[dir="rtl"] .about__rule-line{background:linear-gradient(270deg,var(--neon),transparent)}
html[dir="rtl"] .field__input{text-align:right}
html[dir="rtl"] .upload__row{flex-direction:row-reverse}
html[dir="rtl"] .hero__globe{right:auto;left:0;transform:translate(-30%, -50%)}
html[dir="rtl"] .ig-btn{right:auto;left:clamp(1rem,3vw,2rem)}
html[dir="rtl"] .ig-btn__tip{
  right:auto;
  left:calc(100% + .7rem);
  transform:translateY(-50%) translateX(-6px);
}
html[dir="rtl"] .ig-btn:hover .ig-btn__tip{transform:translateY(-50%) translateX(0)}
html[dir="rtl"] .cta__btn::after{content:'←'}
html[dir="rtl"] .page-bg__photo{
  background-position:center left;
  -webkit-mask-image:radial-gradient(140% 120% at 28% 50%, #000 0%, #000 62%, transparent 100%);
  mask-image:radial-gradient(140% 120% at 28% 50%, #000 0%, #000 62%, transparent 100%);
}

/* ---------- Tablets ---------- */
@media (max-width:1100px){
  .nav__link{letter-spacing:.18em;font-size:.62rem}
  .nav{gap:.9rem}
  .hero__globe{width:min(110vmin, 720px);transform:translate(36%, -50%)}
}

@media (max-width:900px){
  .pager__dot span{display:none}
  .topbar{
    grid-template-columns:auto auto;
    grid-template-rows:auto auto;
    gap:.7rem 1rem;
    padding-top:calc(.85rem + env(safe-area-inset-top, 0px));
  }
  .brandmark{grid-column:1;grid-row:1;justify-self:start}
  .lang-dd{grid-column:2;grid-row:1;justify-self:end}
  .nav{
    grid-column:1 / -1;
    grid-row:2;
    justify-content:flex-start;
    overflow-x:auto;
    white-space:nowrap;
    padding-bottom:.4rem;
    gap:1.35rem;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
  }
  .nav::-webkit-scrollbar{display:none}
  .guide__item{grid-template-columns:1fr;gap:1rem}
  .guide__num{font-size:2.5rem}
  .form{grid-template-columns:1fr}
  .uploads__grid{grid-template-columns:1fr}
  .about__why{grid-template-columns:1fr;gap:1.75rem}
  .about__why-head{position:static}
  .hero__globe{width:min(120vmin, 640px);transform:translate(44%, -50%);opacity:.85}
  .globe-city__label{padding:.55rem .8rem .5rem;top:18px}
  .next-event{grid-template-columns:1fr;text-align:center}
  .next-event__cal{margin:0 auto}
  .next-event__tag{align-self:center}
  .next-event__meta{justify-content:center}
  .countdown{justify-content:center}

  /* Photo stays readable on small screens — softened, not hidden */
  .page-bg__photo{opacity:.45}
}

/* ---------- Phones ---------- */
@media (max-width:640px){
  .hero__globe{display:none}
  .hero__eyebrow b{letter-spacing:.24em}
  .hero__eyebrow span{letter-spacing:.24em}
  .become,.about,.join,.events{padding-left:clamp(1.4rem,5vw,2rem)}
}

@media (max-width:520px){
  .brand{font-size:clamp(1.9rem,13vw,3rem)}
  .brandmark .logo{width:clamp(46px,12vw,58px)}
  .lang-trigger{padding:.45rem .55rem .45rem .5rem;letter-spacing:.14em}
  .lang-trigger__code{font-size:.6rem}
  .lang-menu{min-width:10rem}
  .cta__btn{padding:.95rem 1.7rem;letter-spacing:.24em;font-size:.72rem}
  .form__submit{max-width:none}
  .about__footer{flex-direction:column;align-items:flex-start;gap:.75rem}
  .countdown__cell{min-width:3.8rem;padding:.45rem .55rem .4rem}
  .ig-btn{width:44px;height:44px}
  .ig-btn__tip{display:none}
}

@media (max-width:640px){
  .topbar{
    padding-top:calc(.6rem + env(safe-area-inset-top, 0px));
    padding-bottom:.4rem;
    gap:.4rem .8rem;
  }
  .nav{gap:1.1rem}
  .nav__link{font-size:.58rem;letter-spacing:.14em}
  .brandmark .logo{width:44px}
}