/* =====================================================================
   responsive.css — Fusion Miss World
   Mobile + tablet layer. Loaded AFTER style.css (via includes/header.php).
   Breakpoints:
     <= 1280  small laptop        (nav spacing tightens)
     <= 1100  tablet landscape    (burger menu starts here)
     <= 1024  tablet              (slider stacks, section spacing shrinks)
     <=  768  tablet portrait / large phone
     <=  640  phone
     <=  480  small phone
     <=  360  very small phone
   ===================================================================== */

/* ---------- 0. Global safety ---------- */
html.nav-lock,html.nav-lock body{overflow:hidden;}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;}
body{min-width:320px;}
img,svg,video,canvas,iframe{max-width:100%;}
img{height:auto;}
h1,h2,h3,h4,p,li,a,span{overflow-wrap:break-word;}

/* Rich text coming from the database (news articles) must never break the layout */
.news-article-body img,
.news-article-body video,
.news-article-body iframe{max-width:100%;height:auto;}
.news-article-body iframe{aspect-ratio:16/9;width:100%;}
.news-article-body table{display:block;max-width:100%;overflow-x:auto;}
.news-article-body pre{max-width:100%;overflow-x:auto;}

/* FAQ answers were clipped at 200px — long answers need more room */
.faq-item.open .faq-a{max-height:520px;}

/* Bigger invisible tap area for the tiny slider dots */
#promo-slider .promo-dot{position:relative;}
#promo-slider .promo-dot::after{content:'';position:absolute;inset:-10px;}

/* Vision / Mission cards on about.php (was an inline 2-col grid with no breakpoint) */
.vm-grid{margin-top:3.5rem;display:grid;grid-template-columns:1fr 1fr;gap:1.6rem;}

/* Hidden by default, shown only on very small phones (see below) */
.nav-apply-mobile{display:none;}

/* ---------- 1. Header on small laptops ---------- */
@media (max-width:1280px){
  .nav-links{gap:clamp(.9rem,1.7vw,2.4rem);}
  .nav-links a{font-size:.78rem;}
  .nav-cta{gap:.8rem;}
  .nav-cta .btn{padding:.7rem 1.15rem;font-size:.68rem;}
  #siteHeader .container{padding-left:1.6rem;padding-right:1.6rem;}
}

/* ---------- 2. Header: burger menu range (<= 1100px) ---------- */
@media (max-width:1100px){
  header{padding:1rem 0;}
  header.scrolled{padding:.7rem 0;}
  #siteHeader .logo h2{font-size:1.35rem;white-space:nowrap;}
  /* bigger touch area for the burger without changing how it looks */
  #siteHeader .burger{
    box-sizing:content-box;
    padding:12px 10px;
    margin-right:-10px;
  }
}

/* ---------- 3. Tablet (<= 1024px) ---------- */
@media (max-width:1024px){
  /* section rhythm: 8rem is too airy on tablets */
  .about,.why,.categories,.journey,.winners,.gallery,.video-gallery,
  .testi,.split,.careers{padding-top:5.5rem;padding-bottom:5.5rem;}
  .cta-band{padding:5rem 0;}
  .sponsors{padding:4.5rem 0;}
  footer{padding:4rem 0 2rem;}

  /* about: badge hung off the left edge and caused sideways scroll */
  .about-media{max-width:520px;margin-left:auto;margin-right:auto;width:100%;}
  .about-badge{left:1rem;bottom:-1.5rem;}
  .about-grid{gap:3.5rem;}

  .scroll-cue{display:none;}

  /* ---- Promo slider: stop using fixed heights + absolute positioning ----
     All slides share one grid cell, so the slider is exactly as tall as the
     tallest slide. Nothing can overlap and nothing gets cut off.            */
  #promo-slider,
  #promo-slider .promo-slides{min-height:0;}
  #promo-slider .promo-slides{display:grid;}
  #promo-slider .promo-slide{
    position:relative;inset:auto;grid-area:1/1;
    display:flex;flex-direction:column;align-items:stretch;justify-content:flex-start;
    min-height:min(100vh,860px);
    min-height:min(100svh,860px);
  }
  #promo-slider .promo-slide-inner{
    flex:1 1 auto;display:flex;align-items:center;
    padding-top:7rem;padding-bottom:2.2rem;
  }
  #promo-slider .promo-content{width:100%;}
  #promo-slider .promo-slide .hero-bottom{
    position:relative;left:auto;right:auto;bottom:auto;
    margin-top:0;padding-bottom:3.6rem;      /* room for the dots/arrows row */
  }
  #promo-slider .promo-dots{bottom:1.5rem;}
  #promo-slider .promo-arrow{
    top:auto;bottom:.8rem;transform:none;width:40px;height:40px;
  }
  #promo-slider .promo-prev{left:1rem;}
  #promo-slider .promo-next{right:1rem;}

  .testi-track{grid-template-columns:1fr 1fr;}
  .testi-track .testi-card:last-child:nth-child(odd){grid-column:1/-1;}

  .vm-grid{gap:1.2rem;}
}

/* ---------- 4. Large phone / tablet portrait (<= 768px) ---------- */
@media (max-width:768px){
  .hero-inner{padding-top:6.5rem;}
  .hero-bottom{margin-top:3rem;}
  .hero-stats{gap:1.6rem;flex-wrap:wrap;}
  .hero-actions .btn{flex:1 1 220px;justify-content:center;}

  .vm-grid{grid-template-columns:1fr;}
  .testi-track{grid-template-columns:1fr;}

  /* iOS Safari zooms the whole page when an input is < 16px. Stop that. */
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]),
  select,textarea{font-size:16px !important;}

  /* live widget: use dynamic viewport so browser bars don't hide the controls */
  #liveFloatWidget.maximized{height:100dvh !important;}
}

/* ---------- 5. Phone (<= 640px) ---------- */
@media (max-width:640px){
  .about,.why,.categories,.journey,.winners,.gallery,.video-gallery,
  .testi,.split,.careers{padding-top:4rem;padding-bottom:4rem;}
  .cta-band{padding:4rem 0;}
  .sponsors{padding:3.5rem 0;}
  .about{padding-top:4.5rem;}

  .eyebrow{letter-spacing:.22em;font-size:.68rem;margin-bottom:1rem;}
  .section-title{font-size:clamp(1.75rem,8vw,2.2rem);}
  .section-lede{font-size:.96rem;}
  .btn{padding:.95rem 1.6rem;font-size:.76rem;}

  .form-grid{grid-template-columns:1fr;}

  /* Countdown wraps neatly instead of pushing the page wider */
  .hero-bottom-inner{padding:1.2rem 0;gap:1rem;}
  .countdown{flex-wrap:wrap;gap:.9rem 1.3rem;}
  .cd-unit b{font-size:1.45rem;}
  .cd-unit:last-child{flex:1 1 100%;text-align:left !important;}

  /* modal / popups */
  .modal-overlay{padding:.8rem;}
  .modal-box{padding:1.8rem 1.2rem;max-height:92vh;max-height:92dvh;border-radius:14px;}
  .modal-close{top:.8rem;right:.8rem;}

  /* newsletter card */
  .news-card{padding:2rem 1.4rem;}
  .news-card h3{font-size:1.45rem;}
  .news-form input{min-width:0;width:100%;}
  .news-form .btn{width:100%;justify-content:center;}

  .t-item{gap:1.1rem;}
  .spon-card{padding:1.4rem;}

  /* footer */
  footer{padding:3.2rem 0 1.6rem;}
  .foot-grid{grid-template-columns:1fr 1fr;gap:2rem 1.4rem;padding-bottom:2.4rem;}
  .foot-grid > div:first-child,
  .foot-grid > div:last-child{grid-column:1/-1;}
  .foot-grid p{max-width:none;}
  .foot-col li{margin-bottom:.9rem;}
  .foot-col a{display:inline-block;padding:.1rem 0;}
  .foot-bottom{flex-direction:column;align-items:flex-start;gap:.6rem;}

  /* article pages */
  .news-hero h1{font-size:1.9rem;}
  .news-section{padding:3.2rem 0;}
}

/* ---------- 6. Small phone (<= 480px) ---------- */
@media (max-width:480px){
  .hero h1{font-size:clamp(2.3rem,11vw,3rem);}
  .hero-sub{font-size:1rem;}
  .hero-actions{flex-direction:column;align-items:stretch;}
  .hero-actions .btn{flex:0 0 auto;width:100%;}
  .promo-content h2{font-size:1.7rem !important;}
  #promo-slider .promo-slide-inner{padding-top:6.2rem;}

  #siteHeader .logo h2{font-size:1.1rem;}
  .nav-cta .btn-gold{padding:.55rem .95rem;font-size:.64rem;letter-spacing:.05em;}
  .nav-cta .btn-gold svg{display:none;}

  .why-card{padding:2rem 1.5rem;}
  .testi-card{padding:1.8rem 1.4rem;}
  .modal-box h2{font-size:1.4rem;}
  .gal-filter{padding:.6rem 1rem;}
}

/* ---------- 7. Very small phone (<= 360px) ---------- */
@media (max-width:360px){
  /* "Apply Now" moves from the header bar into the burger menu */
  .nav-cta .btn-gold{display:none;}
  .nav-apply-mobile{display:block;}
  .container{padding-left:1.1rem;padding-right:1.1rem;}
  .cd-unit b{font-size:1.25rem;}
  .countdown{gap:.8rem 1rem;}
}

/* ---------- 8. Short landscape phones ---------- */
@media (max-height:500px) and (orientation:landscape){
  #promo-slider .promo-slide{min-height:0;}
  #promo-slider .promo-slide-inner{padding-top:5.5rem;}
  .hero{min-height:0;}
  .modal-box{max-height:94vh;}
}

/* ---------- 9. Notch / rounded-corner safe areas ---------- */
@supports (padding:max(0px)){
  @media (max-width:1100px){
    #siteHeader .container{
      padding-left:max(1.2rem,env(safe-area-inset-left));
      padding-right:max(1.2rem,env(safe-area-inset-right));
    }
  }
}

/* ---------- 10. Touch devices: no sticky hover lift ---------- */
@media (hover:none){
  .cat-card:hover,.career-card:hover,.spon-card:hover{transform:none;}
  .gal-item:hover img,.vid-card:hover img{transform:none;}
}