/* ==========================================================================
   STVISION Marketing - Comprehensive Responsive Media Queries
   ========================================================================== */

/* Prevent accidental horizontal overflow globally without breaking position: sticky */
html,
body {
  overflow-x: clip;
  max-width: 100vw;
}

/* ==========================================================================
   1. Large Tablets & Small Laptops (max-width: 1024px)
   ========================================================================== */
@media (max-width: 1024px) {
  /* Navigation */
  .st-main-navigation {
    display: none;
  }

  .st-hamburger-btn {
    display: block;
  }

  /* Hero Section */
  .st-hero-inner {
    grid-template-columns: 1fr;
    gap: 3rem;
  }

  .st-hero-content {
    max-width: 100%;
    text-align: left;
  }

  .st-hero-media {
    max-width: 580px;
    margin: 0 auto;
    width: 100%;
  }

  /* Grid Layouts */
  .st-services-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
  }

  .st-why-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
  }

  .st-projects-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
  }

  .st-testimonials-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
  }

  .st-about-grid {
    grid-template-columns: 1fr;
    gap: 3rem;
  }

  .st-about-media {
    max-width: 550px;
    margin: 0 auto;
    width: 100%;
  }

  /* Footer */
  .st-footer-grid {
    grid-template-columns: 1fr 1fr;
    gap: 2.5rem;
  }

  /* Social / Instagram Banner */
  .st-instagram-banner {
    grid-template-columns: 1fr;
    gap: 2rem;
  }

  .st-social-cards-cluster {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.25rem;
  }

  /* CTA Banner */
  .st-cta-banner {
    flex-direction: column;
    align-items: flex-start;
    padding: 3rem 2.25rem;
    gap: 2rem;
  }

  .st-cta-buttons {
    flex-direction: row;
    width: 100%;
    flex-wrap: wrap;
  }
}

/* ==========================================================================
   2. Medium Tablets & Large Mobiles (max-width: 768px)
   ========================================================================== */
@media (max-width: 768px) {
  /* Header Topbar - hidden on mobile to conserve screen space */
  .st-topbar {
    display: none;
  }

  /* Typography & Sections */
  .st-section {
    padding: 3.5rem 0;
  }

  .st-standard-page-header {
    padding: 3.25rem 0;
  }

  .st-page-title {
    font-size: clamp(1.85rem, 5.5vw, 2.5rem);
  }

  .st-page-body {
    padding: 3rem 0;
  }

  .st-hero {
    padding: 4rem 0 3rem;
  }

  .st-hero-title {
    font-size: clamp(2rem, 6vw, 2.75rem);
  }

  /* Trust Bar */
  .st-trust-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
    padding: 1.5rem 0;
  }

  .st-trust-stat .num {
    font-size: 2.2rem;
  }

  /* Single Column Grids for Clean Mobile Viewing */
  .st-services-grid {
    grid-template-columns: 1fr;
  }

  .st-why-grid {
    grid-template-columns: 1fr;
  }

  .st-projects-grid {
    grid-template-columns: 1fr;
  }

  .st-testimonials-grid {
    grid-template-columns: 1fr;
  }

  .st-social-cards-cluster {
    grid-template-columns: 1fr;
  }

  /* About Box Adjustments */
  .st-about-experience-card {
    right: 15px;
    bottom: -15px;
    padding: 0.85rem 1.25rem;
  }

  .st-about-experience-card .num {
    font-size: 1.5rem;
  }

  .st-about-checklist {
    grid-template-columns: 1fr;
    gap: 0.75rem;
  }

  /* Footer */
  .st-footer-grid {
    grid-template-columns: 1fr;
    gap: 2.25rem;
  }

  .st-footer-bottom {
    flex-direction: column;
    text-align: center;
    gap: 1rem;
    padding-top: 2rem;
  }

  .st-legal-links {
    justify-content: center;
    flex-wrap: wrap;
  }

  /* CTA Buttons */
  .st-cta-buttons {
    flex-direction: column;
    width: 100%;
  }

  .st-cta-buttons .st-btn {
    width: 100%;
    text-align: center;
  }

  /* Floating WhatsApp Action Button */
  .st-float-whatsapp {
    bottom: 1.25rem;
    right: 1.25rem;
    width: 52px;
    height: 52px;
  }

  .st-float-whatsapp svg {
    width: 28px;
    height: 28px;
  }

  /* Modal Popup Dialog */
  .st-modal-dialog {
    margin: 1rem;
    width: calc(100% - 2rem);
    max-height: calc(100vh - 2rem);
  }

  .st-modal-header {
    padding: 1.25rem 1.25rem 1rem;
  }

  .st-modal-body {
    padding: 1.25rem;
  }
}

/* ==========================================================================
   3. Small Mobiles (max-width: 480px)
   ========================================================================== */
@media (max-width: 480px) {
  /* Container Edge Spacing */
  .st-container {
    padding-left: 1.15rem;
    padding-right: 1.15rem;
  }

  /* Header Branding */
  .st-navbar-inner {
    padding-top: 0.65rem;
    padding-bottom: 0.65rem;
  }

  .st-logo-title {
    font-size: clamp(1.2rem, 5vw, 1.35rem);
  }

  .st-logo-sub {
    font-size: 0.55rem;
    letter-spacing: 0.08em;
  }

  .st-logo-icon svg {
    width: 28px;
    height: 28px;
  }

  /* Hide desktop CTA button in header on small phones (available in drawer) */
  .st-nav-cta {
    display: none;
  }

  /* Hamburger touch target */
  .st-hamburger-btn {
    padding: 0.5rem;
    margin-right: -0.5rem;
  }

  /* Hero Section */
  .st-hero {
    padding: 3rem 0 2.5rem;
  }

  .st-hero-title {
    font-size: 1.85rem;
    line-height: 1.2;
  }

  .st-hero-desc {
    font-size: 0.95rem;
    line-height: 1.6;
    margin-bottom: 1.5rem;
  }

  .st-hero-actions {
    flex-direction: column;
    width: 100%;
    gap: 0.75rem;
  }

  .st-hero-actions .st-btn {
    width: 100%;
    text-align: center;
    justify-content: center;
  }

  .st-hero-badges-bar {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.6rem;
    margin-top: 1.5rem;
    padding-top: 1.25rem;
  }

  .st-hero-floating-stat {
    position: relative;
    bottom: auto;
    left: auto;
    right: auto;
    margin-top: 0.75rem;
    padding: 0.85rem 1rem;
    border-radius: var(--st-radius-md);
  }

  /* Trust Bar */
  .st-trust-grid {
    grid-template-columns: 1fr;
    gap: 1.25rem;
    text-align: center;
  }

  .st-trust-item {
    border-right: none;
    border-bottom: 1px solid var(--st-border-light);
    padding-bottom: 1rem;
  }

  .st-trust-item:last-child {
    border-bottom: none;
    padding-bottom: 0;
  }

  /* Card Paddings on Mobile */
  .st-card,
  .st-service-card,
  .st-why-card,
  .st-testimonial-card {
    padding: 1.5rem 1.25rem;
  }

  /* Project Image Card */
  .st-project-img-wrap {
    height: 180px;
  }

  .st-project-content {
    padding: 1.25rem;
  }

  /* Form Inputs - prevent iOS zoom by ensuring at least 16px font size */
  .st-form-input,
  .st-form-select,
  .st-form-textarea,
  input[type="text"],
  input[type="tel"],
  input[type="email"],
  select,
  textarea {
    font-size: 16px !important;
    padding: 0.75rem 0.85rem;
  }

  .st-submit-btn {
    font-size: 0.95rem;
    padding: 0.85rem 1rem;
  }

  /* WhatsApp Floating Button */
  .st-float-whatsapp {
    bottom: 1rem;
    right: 1rem;
    width: 48px;
    height: 48px;
  }

  .st-float-whatsapp svg {
    width: 26px;
    height: 26px;
  }

  /* Mobile Drawer Panel */
  .st-drawer-panel {
    width: 90%;
    max-width: 320px;
  }

  .st-mobile-menu-items a {
    font-size: 1.15rem;
    padding: 0.6rem 0;
  }
}

/* ==========================================================================
   4. Extra Small Phones (max-width: 360px)
   ========================================================================== */
@media (max-width: 360px) {
  .st-hero-title {
    font-size: 1.65rem;
  }

  .st-logo-title {
    font-size: 1.15rem;
  }

  .st-logo-sub {
    display: none; /* Hide subtitle to keep top row tidy on extremely narrow screens */
  }

  .st-btn-lg {
    padding: 0.75rem 1rem;
    font-size: 0.95rem;
  }
}