/* === Mobile & Tablet Fix Pack — 2025‑07‑18 === */

/* --- General helpers ---------------------------------- */
@media (max-width: 991.98px){
  :root{
    --side-pad: 1rem;       /* easy tweak if you want wider/narrower later */
  }
}

/* --- NAVBAR ------------------------------------------- */
@media (max-width: 991.98px){
  .nav-container{padding:.5rem var(--side-pad)!important;}
  .nav-logo img{height:56px!important;width:auto!important;}
  .nav-menu{flex-direction:column!important;gap:1rem!important;width:100%!important;padding:.5rem 0!important;}
  .btn-lang-switch,.btn-login{width:100%!important;text-align:center!important;}
}

/* --- HERO full‑bleed & centring ----------------------- */
.hero{
  background:#2563eb!important;                /* solid blue gradient was causing width drift */
  width:100vw!important;
  margin-left:calc(50% - 50vw)!important;      /* flush‑edge trick, kills white gutter */
}
@media (max-width: 991.98px){
  /* remove decorative layers that push the canvas wider */
  .hero-background,.hero-gradient,.hero-particles,.hero-shape,
  .hero::before,.hero::after{display:none!important;}
  .hero-content{
    display:flex!important;flex-direction:column!important;
    padding:0 var(--side-pad)!important;text-align:center!important;gap:2rem!important;
  }
  .cta-buttons{
    flex-direction:column!important;align-items:stretch!important;gap:1rem!important;width:100%!important;
  }
  .cta-buttons .btn{width:100%!important;}
  .hero-title{color:#fff!important;}
  .hero-subtitle{color:#e0e7ff!important;}
}

/* --- GRID -> single column on phones ------------------ */
@media (max-width: 991.98px){
  .features-grid,.advantages-grid,.showcase-grid,.footer-grid{
    display:flex!important;flex-direction:column!important;gap:2rem!important;grid-template:none!important;
  }
  .feature-card,.advantage-card,.showcase-card{
    max-width:480px!important;width:100%!important;margin:0 auto!important;text-align:center!important;
  }
}

/* --- Contrast tweak for feature descriptions ---------- */
.features-grid .feature-desc{color:#dbeafe!important;}

/* --- Section padding tighter on phones ---------------- */
@media (max-width: 991.98px){
  section{padding:4rem 0!important;}
}

/* --- Safe anchor offset below fixed navbar ------------ */
:target{scroll-margin-top:80px;}

/* === 2025‑07‑18  ·  EXTRA STACK‑GRID & CONTRAST FIXES === */
@media (max-width: 991.98px){

  /* 1️⃣ Stack ANY grid‑ish wrapper vertically */
  [class*="grid"],
  [class*="row"],
  section > div:where(.grid,.row){
    display:flex!important;
    flex-direction:column!important;
    gap:2rem!important;
  }

  /* 2️⃣ Make each child full‑width and centred */
  [class*="grid"] > *,
  [class*="row"]  > *{
    width:100%!important;
    max-width:480px!important;
    margin:0 auto!important;
    text-align:center!important;
  }

  /* 3️⃣ Readable body copy on blue background */
  [class*="grid"] p,
  [class*="row"]  p{
    color:#dbeafe!important;     /* light blue ≈ 95% WCAG contrast */
  }

  /* 4️⃣ Add breathing room so text never clips */
  [class*="grid"]{padding:0 1rem!important;}
}

/* === 2025-07-18 · ABSOLUTE FINAL FIX === */

@media (max-width: 991.98px) {
  /* Completely remove potential overflow */
  html, body {
    overflow-x: hidden !important;
    width: 100% !important;
    position: relative !important;
  }

  /* Fix Hero Overflow & width issues */
  .hero, .hero-content {
    width: 100vw !important;
    max-width: 100vw !important;
    box-sizing: border-box !important;
    padding-left: 1rem !important;
    padding-right: 1rem !important;
    overflow: hidden !important;
    margin-left: calc(50% - 50vw) !important;
  }

  .hero-background,
  .hero-gradient,
  .hero-particles,
  .hero-shape,
  .hero::before,
  .hero::after {
    display: none !important;
  }

  /* Force Single Column (Highest Specificity Guaranteed) */
  .features-grid, .advantages-grid, .showcase-grid {
    display: flex !important;
    flex-direction: column !important;
    gap: 2rem !important;
    grid-template-columns: none !important;
    grid-template-areas: none !important;
    padding: 0 !important;
    margin: 0 auto !important;
    box-sizing: border-box !important;
  }

  .features-grid > *, .advantages-grid > *, .showcase-grid > * {
    width: 100% !important;
    max-width: 480px !important;
    margin: 0 auto !important;
    box-sizing: border-box !important;
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }

  /* Text Contrast Fix */
  .features-grid p, .advantages-grid p, .showcase-grid p {
    color: #dbeafe !important;
  }

  /* Navbar padding fix for neatness */
  .nav-container {
    padding: 0.5rem 1rem !important;
  }

  /* Logo size */
  .nav-logo img {
    height: 56px !important;
    width: auto !important;
  }
}

/* === TARGETED FIX: IMAGE & TEXT ALIGNMENT ONLY === */
@media (max-width: 991.98px) {
  
  /* ONLY images within hero or showcase explicitly targeted */
  .hero img,
  .showcase-grid img {
    max-width: 100% !important;
    height: auto !important;
    display: block !important;
    margin: 1rem auto !important;
  }

  /* Explicitly centering only problematic text above images */
  .section-header, 
  .section-title, 
  .section-subtitle,
  .showcase-grid .showcase-title,
  .showcase-grid .showcase-desc {
    text-align: center !important;
    width: 100% !important;
    max-width: 480px !important;
    margin: 0 auto 1rem auto !important;
  }

  /* Fix potential overflow ONLY for showcase images */
  .showcase-grid {
    overflow-x: hidden !important;
    padding: 0 1rem !important;
    box-sizing: border-box !important;
  }

  /* Prevent any horizontal scrolling issue caused by images */
  body, html {
    overflow-x: hidden !important;
  }
}