/* ==========================================================================
   Visas.pt — responsive.css
   All breakpoint overrides for ALL pages in one place.
   Load after common.css, before any page-specific CSS.

   Breakpoints:
     ≤1280px  small laptop / wide tablet
     ≤1024px  tablet portrait — sidebar collapses, hamburger shows
     ≤768px   mobile landscape / large phones
     ≤480px   small phones
   ========================================================================== */


/* ============================================================
   ≤ 1280px
   ============================================================ */
@media (max-width: 1280px) {
  .footer-top { grid-template-columns: 1.2fr 1fr 1fr 1fr; gap: 36px; }
}


/* ============================================================
   ≤ 1024px
   ============================================================ */
@media (max-width: 1024px) {
   /* Completely hide the desktop CTA button on mobile viewports */
   #navbar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    z-index: 200;
  }
  #navbar .btn {
    display: none !important;
  }
  
  /* Ensure the navigation inner container controls layout properly */
  .nav-inner {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 100% !important;
    height: 70px;
  }

  .lead-split.lead-split {  grid-template-columns: 1fr; gap: 36px; }

  /* Topbar: hide contact info, keep switchers */
  .tb-left { display: none; }
  .tb-inner { justify-content: flex-end; }

  /* Navbar: collapse to hamburger */
  .nav-links, #navbar .btn { display: none; }
  .hamburger { display: flex; }

  /* Sidebar: collapse, show mobile CTA bar */
  .sidebar-layout, .shop-layout { grid-template-columns: 1fr; }
  .sl-sidebar, .shop-sidebar { display: none; }
  .mobile-cta-bar { display: flex; }
  body { padding-bottom: calc(  25px + env(safe-area-inset-bottom)); }

  /* Testimonials */
  .cs-inner { grid-template-columns: 1fr; gap: 28px; }

  /* Footer */
  .footer-top { grid-template-columns: 1fr 1fr; gap: 36px; }

  /* Common grids */
  .overview-grid  { grid-template-columns: 1fr; }
  .benefits-grid  { grid-template-columns: repeat(2,1fr); }
  .process-split.process-split  { grid-template-columns: 1fr; gap: 50px;}
  .process-photo  { min-height: 320px; }
  .pricing-grid.pricing-grid   { grid-template-columns: 1fr; max-width: 420px; margin-inline: auto; }
  .req-docs       { grid-template-columns: 1fr; }
  .lead-split     { grid-template-columns: 1fr; gap: 36px; }

  /* At-a-glance bar (4 → 2 cols) */
  .glance-grid.glance-grid { grid-template-columns: repeat(2,1fr); }
  .glance-item { border-right: none; border-bottom: 1px solid rgba(255,255,255,.15); padding: 14px 16px; }
  .glance-item:nth-child(odd).glance-item:nth-child(odd) { border-right: 1px solid rgba(255,255,255,.15); }
  .glance-item:nth-last-child(-n+2) { border-bottom: none; }

  .contact-grid { grid-template-columns: 1fr; }
      .contact-sidebar { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }

  /* Blog */
  .featured-card { grid-template-columns: 1fr; }
  .feat-img      { height: 280px; }
  .blog-grid     { grid-template-columns: repeat(2,1fr); }
  .blog-hero-inner { grid-template-columns: 1fr; gap: 40px; }

  .process-steps {grid-template-columns: 1fr 1fr;gap: 40px;}
  .ps-item::after { display: none; }

  .comp-table.comp-table { display: block;overflow-x: auto;}
  .auth-split { display: block; }
  .auth-brand { display: none; }

  .form-card h2 { font-size: 16px; }

  .intro-strip-inner { justify-content: center; }
  .intro-pill-divider {  display: none; }

  .mobile-cart-bar { display: flex; }
  footer { padding: 40px 10px 0; }

  .ov-split { grid-template-columns: 1fr; gap: 26px; } .ov-photo, .ov-photo img { min-height: 240px; } 
  
}

 @media (max-width: 860px) { .steps { grid-template-columns: 1fr 1fr; gap: 34px 24px; } .steps::before { display: none; } }

/* ============================================================
   ≤ 768px
   ============================================================ */
@media (max-width: 768px) {

  #choose-path#choose-path, #services#services, #how-it-works#how-it-works, #support#support, #integration#integration, #pricing#pricing, #testimonials#testimonials, #comparison#comparison, #faq#faq, #news#news, #closing#closing, #why#why, #visas#visas, #process#process, #compare#compare, #upsell#upsell, #overview#overview, #benefits#benefits, #investments#investments, #features#features, #nhr#nhr, #requirements#requirements, #different#different, #routes#routes { padding: 50px 0; }

  /* Force the grid wrapper to stack elements vertically instead of keeping two columns */
  .blog-hero-inner {
      display: block;
  }

  /* Prevent text boxes from extending beyond the mobile viewport bounds */
  .hero-search-card { margin-top: 15px;}
  .hero-search-card .search-input { width: 100%;}
  .btn-sm { font-size: 13px;}

  /* Container tighten */
  .container.container { padding: 0 20px !important; }

  .why-grid, .visa-cards, .testimonial-grid {grid-template-columns: 1fr;}

  .intg-comp-row.intg-comp-row, .intg-comp-row.intg-comp-row {grid-template-columns: 1fr;display: grid; gap: 0px;}
  .intg-card.intg-card {padding: 20px;}

  #pricing .subtext {margin-top: 0 !important;}

  .pc-lang-pill.pc-lang-pill {font-size: 13px;}

  /* Nav */
  .nav-links, #navbar .btn { display: none; }
  .hamburger { display: flex; }

  /* Hero CTAs */
  .hero-ctas { flex-direction: column; align-items: center; }
  .hero-ctas .btn { width: 100%; max-width: 320px; justify-content: center; }

  /* Closing CTAs */
  .closing-ctas { flex-direction: column; align-items: center; }
  .closing-ctas .btn { width: 100%; max-width: 300px; justify-content: center; }

  /* Grids */
  
  .benefits-grid { grid-template-columns: 1fr; }
  .stats-grid.stats-grid    { grid-template-columns: 1fr 1fr !important; gap: 10px; }
  .blog-grid     { grid-template-columns: 1fr; }
  .news-grid     { grid-template-columns: 1fr; }

  /* Carousel */
  .carousel-slide { padding: 28px 20px; }

  .contact-section { padding: 52px 20px; }
  .form-card { padding: 28px 20px; }
  .form-row { grid-template-columns: 1fr; }
  .stats-grid { grid-template-columns: repeat(2, 1fr); gap: 32px 16px; }
  .contact-sidebar { grid-template-columns: 1fr; }
  .faq-section { padding: 52px 20px; }

  /* Footer */
  .footer-top    { grid-template-columns: 1fr; gap: 28px; }
  .footer-bottom { flex-direction: column; text-align: center; }

  /* Income calculator */
  .income-calc { padding: 24px 20px; }
  .ic-inputs   { gap: 24px; }

  /* Blog */
  .feat-body { padding: 28px 24px; }
  .news-header { flex-direction: column; align-items: flex-start; }
  .blog-hero  { padding: 148px 0 64px; }
  .blog-hero-inner { grid-template-columns: 1fr; gap: 40px; }
  .featured-card { grid-template-columns: 1fr; }
  .feat-img { height: 260px; }
  .feat-body { padding: 28px; }
  .blog-grid { grid-template-columns: 1fr; }
  .content-header { flex-direction: column; align-items: flex-start; }
  .nl-form { flex-direction: column; }
  .nl-input { border-radius: 10px; }
  .nl-submit { border-radius: 10px; }

  .auth-card { padding: 32px 24px; }
  .login-page-body { padding: 120px 16px 48px; }

  .features-grid, .niss-info-grid, .who-grid, .req-grid, .invest-cards, .addons-grid, .expect-grid, .nhr-inner, .curr-grid { grid-template-columns: 1fr; }

  .item-controls{width: 100%;}
  .cart-area .addon-price{margin-bottom: 0;}
  .cart-area .btn-addon-add{padding: 5px 5px;border-radius: 5px;}
  .service-card { grid-template-columns: 36px 1fr; }
  .sc-right {
        grid-column: 1 / -1;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        border-top: 1px solid var(--border);
        padding-top: 12px;
        margin-top: 4px;
        text-align: left;
    }
        .sc-right > div {
        display: flex;
        align-items: baseline;
        gap: 6px;
    }
    .mobile-cta-bar {
        display: flex;
    }
    .mobile-cta-bar .old-price {font-size: 16px;}
}

@media (max-width: 520px) { .steps { grid-template-columns: 1fr; } }

/* ============================================================
   ≤ 480px
   ============================================================ */
@media (max-width: 480px) {

   
   #navbar .topbar-strip .container {
    padding: 0 5px !important;
  }
   #navbar .topbar-strip .container .tb-right {
    gap: 0px;
  }

  .container { padding: 0 16px; }

  /* Buttons full width in stacked groups */
  .closing-ctas .btn, .hero-ctas .btn { max-width: 100%; }

  /* Carousel */
  .carousel-slide { padding: 20px 16px; }

  /* At-a-glance: fully stacked */
  .glance-grid { grid-template-columns: 1fr; }
  .glance-item { border-right: none; border-bottom: 1px solid rgba(255,255,255,.15); }
  .glance-item:last-child { border-bottom: none; }

  /* FAQ max-height for long answers */
  .faq-item.open .faq-a { max-height: 600px; }

  /* Mobile CTA bar tighten */
  .mobile-cta-bar { padding: 8px 16px 12px; padding-bottom: calc(12px + env(safe-area-inset-bottom)); }

  /* Nav tagline hidden */
  /*.nav-tagline { display: none; }*/

  /* Footer */
  .footer-top { gap: 22px; }

  .blog-stats { gap: 20px; }
}


/* ============================================================
   PRINT
   ============================================================ */
@media print {
  .topbar-strip, #navbar, .mobile-menu,
  .mobile-cta-bar, .hamburger, .carousel-controls,
  .footer-social { display: none !important; }

  body { padding-bottom: 0 !important; }
  .sidebar-layout { grid-template-columns: 1fr !important; }
  .sl-sidebar { display: block !important; padding: 0 !important; }
  .sl-sticky  { position: static !important; }
}