/* ══════════════════════════════════════════════════════════════
   RESPONSIVE STYLES
   
   Consolidated media queries for all breakpoints.
   Eliminates duplication from original 960px and 640px blocks.
   
   Related files:
   - vorasense-pages.css (base styles)
   - landing-artifact.css (landing layout)
   - settings-*.css (settings layouts)
   ══════════════════════════════════════════════════════════════ */

/* Tablet Breakpoint (max-width: 960px) */
@media (max-width: 960px) {
  .vs-hero {
    grid-template-columns: 1fr;
    gap: var(--vs-space-xl);
  }

  .vs-hero__visual {
    order: -1;
  }

  .vs-steps,
  .vs-benefits-grid,
  .vs-stats-grid,
  .vs-quick-links {
    grid-template-columns: 1fr;
  }

  /* Settings responsive */
  .vs-settings-hero__main {
    grid-template-columns: 1fr;
  }

  .vs-settings-tiles {
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  }

  /* Settings container tablet */
  .vs-settings-container {
    max-width: calc(100% - var(--vs-space-lg) * 2);
  }

  /* Settings navigation tablet */
  .vs-settings-nav-tabs {
    gap: var(--vs-space-sm);
  }

  .vs-settings-nav-tab {
    padding: var(--vs-space-md) var(--vs-space-lg);
    font-size: var(--vs-text-sm);
  }

  /* Connections tablet */
  .vs-provider-header {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
  }

  /* Form row responsive */
  .vs-form-row {
    grid-template-columns: 1fr;
  }

  /* Artifact Showcase Responsive */
  .vs-download-artifact__trust {
    gap: var(--vs-space-lg);
    padding: var(--vs-space-lg);
  }

  .vs-download-artifact__showcase {
    padding: var(--vs-space-2xl);
  }

  .vs-download-badges-grid {
    gap: var(--vs-space-xl);
  }
}

/* Mobile Breakpoint (max-width: 640px) */
@media (max-width: 640px) {
  .vs-container {
    width: calc(100% - var(--vs-space-md) * 2);
  }

  .vs-hero__actions,
  .vs-final-cta__actions,
  .vs-auth-actions {
    flex-direction: column;
    width: 100%;
  }

  .vs-button,
  .vs-social-button {
    width: 100%;
  }

  .vs-form-actions {
    flex-direction: column-reverse;
  }

  h1 {
    font-size: var(--vs-text-2xl);
  }

  h2 {
    font-size: var(--vs-text-xl);
  }

  /* Settings mobile */
  .vs-settings-hero {
    padding: var(--vs-space-2xl) var(--vs-space-lg);
  }

  .vs-settings-hero__stats {
    grid-template-columns: 1fr;
    gap: var(--vs-space-lg);
  }

  .vs-settings-hero__main {
    grid-template-columns: 1fr;
    gap: var(--vs-space-md);
  }

  .vs-settings-hero__cta {
    width: 100%;
  }

  .vs-settings-tiles {
    grid-template-columns: 1fr;
    gap: var(--vs-space-md);
  }

  .vs-settings-tile {
    padding: var(--vs-space-xl) !important;
  }

  /* Settings undersides mobile */
  .vs-settings-container {
    max-width: 100%;
    padding: 0 var(--vs-space-md);
    margin: 0 auto;
  }

  .vs-settings-header {
    margin-bottom: var(--vs-space-lg);
  }

  .vs-settings-header h1 {
    font-size: var(--vs-text-xl);
    margin-bottom: var(--vs-space-sm);
  }

  .vs-settings-header p {
    font-size: var(--vs-text-sm);
  }

  /* Settings navigation mobile */
  .vs-settings-nav {
    margin-bottom: var(--vs-space-lg);
    margin-left: -var(--vs-space-md);
    margin-right: -var(--vs-space-md);
    padding: 0 var(--vs-space-md);
  }

  .vs-settings-nav-tabs {
    gap: var(--vs-space-xs);
  }

  .vs-settings-nav-tab {
    padding: var(--vs-space-md) var(--vs-space-md);
    font-size: var(--vs-text-xs);
  }

  /* Connections mobile */
  .vs-provider-header {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--vs-space-sm);
    padding-bottom: var(--vs-space-md);
  }

  .vs-provider-header h3 {
    font-size: var(--vs-text-base);
  }

  .vs-provider-actions {
    width: 100%;
  }

  .vs-provider-actions x-button,
  .vs-provider-actions .vs-form-inline x-button,
  .vs-provider-actions .vs-form-inline button {
    width: 100%;
  }

  /* Danger zone mobile */
  .vs-danger-section {
    gap: var(--vs-space-lg);
  }

  .vs-form-inline {
    gap: var(--vs-space-md);
  }

  .vs-form-inline x-button,
  .vs-form-inline button {
    width: 100%;
  }

  .vs-settings-content {
    gap: var(--vs-space-lg);
  }

  .vs-card-header {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--vs-space-md);
    padding-bottom: var(--vs-space-md);
  }

  .vs-card-header h2 {
    font-size: var(--vs-text-base);
  }

  /* Form mobile adjustments */
  .vs-form {
    gap: var(--vs-space-md);
  }

  .vs-form-group {
    gap: var(--vs-space-xs);
  }

  .vs-form-group label {
    font-size: var(--vs-text-xs);
  }

  .vs-form-group input,
  .vs-form-group select,
  .vs-form-group textarea {
    font-size: var(--vs-text-sm);
    padding: var(--vs-space-md);
  }

  .vs-input-readonly {
    font-size: var(--vs-text-xs);
    padding: var(--vs-space-md);
  }

  .vs-form > .vs-button,
  .vs-form > x-button {
    width: 100%;
  }

  /* Settings footer mobile */
  .vs-settings-footer {
    margin-top: var(--vs-space-lg);
    padding-top: var(--vs-space-lg);
    font-size: var(--vs-text-sm);
  }

  /* Settings cards mobile padding */
  .vs-settings-content .vs-card {
    gap: var(--vs-space-md);
    padding: var(--vs-space-lg);
  }

  /* Pricing section mobile (consolidated from separate block) */
  .vs-pricing-comparison {
    grid-template-columns: 1fr;
    gap: var(--vs-space-md);
  }

  .vs-pricing-comparison__current {
    padding: var(--vs-space-md);
  }

  .vs-pricing-price__amount {
    font-size: clamp(2rem, 5vw, 3rem);
  }

  .vs-pricing-card {
    padding: var(--vs-space-xl);
  }

  .vs-pricing-guarantee {
    flex-direction: column;
    gap: var(--vs-space-md);
    align-items: center;
    text-align: center;
  }

  .vs-pricing-guarantee__seal {
    width: 44px;
    height: 44px;
  }

  .vs-pricing-lock__icon {
    font-size: 2.5rem;
  }

  .vs-pricing-badge {
    top: -24px;
    padding: var(--vs-space-xs) var(--vs-space-md);
    font-size: var(--vs-text-xs);
  }

  /* Artifact Showcase Mobile */
  .vs-download-artifact {
    padding: var(--vs-space-2xl) var(--vs-space-md);
    margin: 0 auto var(--vs-space-3xl);
  }

  .vs-download-artifact__content {
    gap: var(--vs-space-2xl);
  }

  .vs-download-artifact__title {
    font-size: clamp(1.75rem, 6vw, 3rem);
  }

  .vs-download-artifact__description {
    font-size: var(--vs-text-base);
  }

  .vs-download-artifact__trust {
    flex-direction: column;
    gap: var(--vs-space-md);
    padding: var(--vs-space-lg);
  }

  .vs-download-trust-item {
    justify-content: center;
    width: 100%;
  }

  .vs-download-artifact__showcase {
    padding: var(--vs-space-xl);
  }

  .vs-download-frame-corner {
    width: 24px;
    height: 24px;
    border-width: 1px;
  }

  .vs-download-frame-corner--tl {
    top: 12px;
    left: 12px;
  }

  .vs-download-frame-corner--tr {
    top: 12px;
    right: 12px;
  }

  .vs-download-frame-corner--bl {
    bottom: 12px;
    left: 12px;
  }

  .vs-download-frame-corner--br {
    bottom: 12px;
    right: 12px;
  }

  .vs-download-badges-grid {
    grid-template-columns: 1fr;
    gap: var(--vs-space-lg);
  }

  .vs-download-badge img {
    width: 180px;
  }

  .vs-download-platforms-list {
    justify-content: center;
    gap: var(--vs-space-sm);
  }

  .vs-download-platform-tag {
    font-size: var(--vs-text-xs);
    padding: var(--vs-space-xs) var(--vs-space-sm);
  }

  .vs-final-cta__badges {
    flex-direction: column;
    width: 100%;
  }

  .vs-final-cta__badges .vs-download-badge img {
    width: 180px;
  }
}