/* =========================================================
   JRA FITNESS HUB — RESPONSIVE STYLES
   Desktop (>1400px) layout is untouched — see style.css.
   Breakpoints used: 1400 / 1200 / 992 / 768 / 576 / 400
   ========================================================= */

/* ---------------------------------------------------------
   GLOBAL SAFETY NETS (all sizes)
   Prevent horizontal scroll, text overflow, layout shift.
   --------------------------------------------------------- */
html, body{
  max-width:100%;
  overflow-x:hidden;
}
* { min-width:0; } /* stop flex/grid children from forcing overflow */
img, svg, video, canvas, iframe{max-width:100%;height:auto;}
h1,h2,h3,h4,h5,h6,p,span,a,li{overflow-wrap:break-word;word-break:break-word;}
.container, .container-fluid{max-width:100%;}

/* Consistent touch target sizing on all touch devices */
@media (max-width: 991.98px){
  a.nav-link, .btn-nav-cta, .btn-primary-jra, .btn-outline-jra, .btn-wa-jra,
  .float-btn, #backToTop, .accordion-button, .video-play, .trainer-photo .social a{
    min-height:44px;
  }
  .hero-person{

height:55%;

right:-40px;

opacity:.45;

}
}
.hero-person{

height:55%;

right:-40px;

opacity:.45;

}

/* =========================================================
   ≤ 1399.98px  (just under the 1400 breakpoint)
   ========================================================= */
@media (max-width: 1399.98px){
  .hero-visual{height:500px;}
}

/* =========================================================
   ≤ 1199.98px  (large tablets / small laptops)
   ========================================================= */
@media (max-width: 1199.98px){
  .hero-visual{height:460px;}
  .hud-ring{width:360px;height:360px;}
  .hud-ring.r2{width:280px;height:280px;}
  .sf-1{left:0;}
  .sf-2{right:0;}
  .stat-float{min-width:150px;padding:12px 16px;}
  .section-pad{padding:90px 0;}
  .hero-stats-strip .stat-item{padding:22px 12px;}
  .hero-stats-strip b,.hero-stats-strip .plus{font-size:1.6rem;}
}

/* =========================================================
   ≤ 991.98px  (TABLET — navbar becomes hamburger here,
   matching Bootstrap's .navbar-expand-lg breakpoint)
   ========================================================= */
@media (max-width: 991.98px){
  /* Navbar / hamburger menu */
  .navbar-collapse{
    background:rgba(5,5,5,.97);backdrop-filter:blur(20px);
    margin-top:16px;border-radius:16px;padding:18px;border:1px solid var(--line);
    max-height:80vh;overflow-y:auto;
  }
  .nav-link{padding:12px 10px !important;}
  .navbar-nav{width:100%;}
  .navbar-nav .nav-item{width:100%;}

  /* Hero */
  .hero{padding-top:130px;text-align:center;overflow:hidden;}
  .hero-content{max-width:100%;}
  .hero-bg img{object-position:center 22%;filter:brightness(.85) contrast(1.05) saturate(1.02);}
  .hero-bg::after{
    background:
      linear-gradient(180deg, transparent 0%, rgba(5,5,5,.15) 35%, rgba(5,5,5,.75) 100%),
      radial-gradient(60% 45% at 50% 15%, rgba(255,122,0,.1), transparent 70%);
  }
  .hero-desc{margin-left:auto;margin-right:auto;}
  .hero-btns{justify-content:center;}
  .hero-visual{height:auto;min-height:0;margin-top:24px;}
  .stat-float{position:static;display:inline-flex;margin:8px;}
  .hero-floats{display:flex;flex-wrap:wrap;justify-content:center;margin-top:30px;}

  .hero-members-badge{
    position:static;display:inline-flex;margin:0 auto;
  }
  .hero-stats-strip{
    grid-template-columns:repeat(2,1fr);margin-top:36px;gap:14px;
  }

  /* About */
  .about-badge{position:static;margin-top:-40px;margin-left:20px;display:inline-block;}
  .about-frame{height:400px;}

  /* Why choose us */
  .why-visual{min-height:340px;margin-top:40px;}

  /* Section titles wrap nicely on tablet */
  .section-title{font-size:clamp(2.1rem,6vw,3.2rem);}

  /* Footer bottom row centers on tablet, goes single column at 576px */
  .footer-bottom{text-align:center;justify-content:center;}
}

/* =========================================================
   ≤ 767.98px  (MOBILE)
   ========================================================= */
@media (max-width: 767.98px){
  .section-pad{padding:64px 0;}
  .hero{min-height:auto;padding-bottom:60px;overflow:hidden;}
  .hero-title{font-size:clamp(2.4rem,10vw,3.6rem);}
  .hero-title small{letter-spacing:3px;font-size:.42em;}
  .hud-ring{width:280px;height:280px;}
  .hud-ring.r2{width:210px;height:210px;}
  .hud-core{width:150px;height:150px;}
  .hud-core i{font-size:2.4rem;}
  .hero-visual{height:auto;}

  .hero-members-badge{min-width:0;padding:14px 18px;gap:10px;}
  .hero-members-badge b{font-size:1.25rem;}
  .hero-stats-strip .stat-item{padding:20px 10px;}
  .hero-stats-strip i{font-size:1.3rem;margin-bottom:6px;}
  .hero-stats-strip b,.hero-stats-strip .plus{font-size:1.4rem;}
  .hero-stats-strip small{font-size:10px;}

  .brands-track span{font-size:1.2rem;}

  /* Cards stack gracefully with even spacing */
  .service-card, .plan-card, .trainer-card, .testimonial-card{margin-bottom:4px;}

  /* Pricing cards: stack vertically, remove tilt/lift transforms */
  .plan-card.featured{transform:none;}
  .plan-card:hover{transform:none;}
  .plan-price{font-size:2.6rem;}

  /* Buttons full width on small screens */
  .hero-btns .btn-primary-jra,
  .hero-btns .btn-outline-jra,
  .hero-btns .btn-wa-jra{
    width:100%;justify-content:center;
  }
  .hero-btns{flex-direction:column;gap:12px;}
  .plan-card a.btn-primary-jra,
  .plan-card a.btn-outline-jra{width:100%;}

  .bmi-box{padding:28px;}
  .bmi-box form button{width:100%;justify-content:center;}

  .contact-form button[type="submit"]{width:100%;}

  /* Footer: single column on mobile */
  .footer-bottom{flex-direction:column;text-align:center;gap:8px;}

  /* Floating buttons + back to top: comfortable touch size, no overlap */
  .float-btn{width:50px;height:50px;font-size:1.2rem;right:16px;}
  .float-wa{bottom:82px;}
  .float-call{bottom:20px;}
  #backToTop{left:16px;bottom:20px;width:46px;height:46px;}

  .page-hero{padding:150px 0 60px;}
  .cursor-dot,.cursor-ring{display:none;}

  /* Reduce parallax/rotation intensity for smoother mobile scroll */
  .hero-rays{filter:blur(20px);}
}

/* =========================================================
   ≤ 575.98px  (SMALL MOBILE)
   ========================================================= */
@media (max-width: 575.98px){
  .hero-visual{height:auto;}
  .hud-ring{width:230px;height:230px;}
  .hud-ring.r2{width:170px;height:170px;}
  .hud-core{width:120px;height:120px;}
  .stat-float{min-width:auto;padding:10px 14px;}
  .stat-float b{font-size:1.1rem;}
  .stat-float span{font-size:9.5px;}

  .about-badge{margin-left:0;}
  .about-badge b{font-size:2rem;}

  .testimonial-card{padding:26px 20px;}
  .bmi-result .num{font-size:3rem;}

  /* Footer single column, links + socials centered */
  .footer-links{text-align:center;}
  .footer-social{justify-content:center;}

  .plan-tag{right:50%;transform:translateX(50%);}
}

/* =========================================================
   ≤ 400px  (VERY SMALL DEVICES)
   ========================================================= */
@media (max-width: 400px){
  .hero-title{font-size:clamp(2rem,11vw,2.8rem);}
  .section-title{font-size:clamp(1.8rem,7vw,2.4rem);}
  .eyebrow{font-size:11px;letter-spacing:3px;}
  .btn-primary-jra, .btn-outline-jra, .btn-wa-jra{
    padding:14px 22px;font-size:12px;
  }
  .hud-ring{width:200px;height:200px;}
  .hud-ring.r2{width:150px;height:150px;}
  .hud-core{width:104px;height:104px;}
  .hud-core i{font-size:1.8rem;}
  .service-card, .plan-card, .bmi-box{padding-left:22px;padding-right:22px;}
  .plan-price{font-size:2.2rem;}
}

/* =========================================================
   TESTIMONIAL SWIPER — swipeable on touch, comfortable size
   ========================================================= */
@media (max-width: 767.98px){
  .testimonial-swiper{padding-bottom:8px;touch-action:pan-y;}
  .testimonial-swiper .swiper-slide{height:auto;}
  .testimonial-card{min-height:260px;}
}

/* =========================================================
   TRANSFORMATION GALLERY — refine height at mobile 1-col
   (2/2/1 column count itself is set via Bootstrap col classes
   in the HTML: col-md-6 col-lg-6, full width below md)
   ========================================================= */
@media (max-width: 767.98px){
  .transform-card{height:320px;}
}

/* =========================================================
   REAL PHOTOGRAPHY — mobile tuning
   Keep fixed heights (already set in style.css) so images
   never cause layout shift while loading.
   ========================================================= */
@media (max-width: 767.98px){
  .gallery-tile{height:220px;}
  .trainer-photo{height:300px;}
  .video-card{height:220px;}
  .about-frame{height:340px;}
  .why-visual{min-height:300px;}
  .hud-core img{object-position:center 10%;}
}
@media (max-width: 575.98px){
  .gallery-tile{height:190px;}
  .trainer-photo{height:280px;}
  .video-card{height:190px;}
  .about-frame{height:280px;}
}

/* =========================================================
   Reduced motion / touch devices — keep animations smooth
   ========================================================= */
@media (hover:none){
  .service-card:hover, .plan-card:hover, .trainer-card:hover{transform:none;}
}
/* Mobile */
@media (max-width: 768px){

    .map-frame{
        width:100%;
        height:260px;
        border-radius:18px;
    }

}

/* Small Mobile */
@media (max-width: 480px){

    .map-frame{
        height:220px;
    }

}