/* ==========================================================================
   NIEdge Placement Studio — Responsive Breakpoint Stylesheet (responsive.css)
   ========================================================================== */

/* 1440px+ Wide Screens */
@media (min-width: 1440px) {
  .container {
    max-width: 1320px;
  }
  .hero-title {
    font-size: 3.75rem;
  }
}

/* 1024px to 1280px Laptops */
@media (max-width: 1024px) {
  .mockup-body {
    grid-template-columns: 180px 1fr 240px;
  }
  .hero-title {
    font-size: 2.75rem;
  }
}

/* 768px Tablets */
@media (max-width: 768px) {
  .ps-main {
    padding-top: 85px;
  }
  .ps-section {
    padding: 55px 0;
  }
  .hero-title {
    font-size: 2.25rem;
  }
  .hero-subtitle {
    font-size: 1rem;
  }
  .section-title {
    font-size: 1.85rem;
  }

  /* Collapse Mockup into single Column view for small screens */
  .mockup-body {
    grid-template-columns: 1fr;
  }
  .mockup-sidebar {
    display: flex;
    overflow-x: auto;
    border-right: none;
    border-bottom: 1px solid var(--ps-card-border);
    padding: 12px;
  }
  .mockup-user-info {
    display: none;
  }
  .sidebar-tab {
    white-space: nowrap;
    margin-bottom: 0;
  }
  .mockup-analytics {
    border-left: none;
    border-top: 1px solid var(--ps-card-border);
  }

  .feature-panels-grid {
    grid-template-columns: 1fr;
  }
}

/* 576px Small Tablets & Phablets */
@media (max-width: 576px) {
  .hero-cta-group {
    flex-direction: column;
    width: 100%;
  }
  .btn-primary, .btn-secondary {
    width: 100%;
  }
  .hero-title {
    font-size: 1.95rem;
  }
  .section-title {
    font-size: 1.6rem;
  }
}

/* 320px - 430px Mobile Devices (iPhone 12/13/14, Galaxy, Pixel) */
@media (max-width: 430px) {
  .container {
    padding: 0 16px;
  }
  .hero-badge {
    font-size: 0.7rem;
    padding: 5px 12px;
  }
  .hero-title {
    font-size: 1.75rem;
  }
  .hero-subtitle {
    font-size: 0.92rem;
  }
  .feature-panel-card {
    padding: 28px 20px;
  }
  .price-display {
    font-size: 1.85rem;
  }
  .faq-question {
    padding: 16px 18px;
    font-size: 0.95rem;
  }
}