/* ============================================
   SBTI Responsive Breakpoints
   ============================================ */

/* === Tablet (768px) === */
@media (max-width: 768px) {
  .hero {
    min-height: 60vh;
    padding: var(--space-3xl) var(--space-lg);
  }

  .hero h1 {
    font-size: clamp(2rem, 8vw, 3rem);
  }

  .hero-sub {
    font-size: var(--text-base);
  }

  .type-grid {
    grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
  }

  .result-type-display .type-code {
    font-size: var(--text-4xl);
  }

  .share-card {
    width: 360px;
  }

  .navbar-url {
    display: none;
  }
}

/* === Mobile (480px) === */
@media (max-width: 480px) {
  :root {
    --navbar-height: 52px;
  }

  .shell {
    padding: var(--space-lg) var(--space-md) var(--space-3xl);
  }

  .hero {
    min-height: auto;
    padding: var(--space-2xl) var(--space-md);
  }

  .hero h1 {
    font-size: clamp(1.75rem, 9vw, 2.5rem);
  }

  .btn-lg {
    padding: 16px 28px;
    font-size: var(--text-base);
    width: 100%;
  }

  .hero-social-proof {
    flex-direction: column;
    gap: var(--space-sm);
  }

  .hero-social-proof .dot {
    display: none;
  }

  .type-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-sm);
  }

  .type-grid-card {
    padding: var(--space-lg) var(--space-md);
  }

  .type-grid-card .emoji {
    font-size: 1.5rem;
  }

  .type-grid-card .code {
    font-size: var(--text-base);
  }

  .card-body {
    padding: var(--space-lg);
  }

  .question-text-single {
    font-size: var(--text-xl);
  }

  .option-card-single {
    padding: var(--space-lg);
  }

  .option-card-single .option-letter {
    width: 32px;
    height: 32px;
    font-size: var(--text-xs);
  }

  .option-card-single .option-text {
    font-size: var(--text-sm);
  }

  .result-header-card {
    padding: var(--space-2xl) var(--space-lg);
  }

  .result-header-card .type-emoji {
    font-size: 3rem;
  }

  .result-header-card .type-name {
    font-size: var(--text-3xl);
  }

  .result-header-card .type-code {
    font-size: var(--text-lg);
  }

  .result-type-display {
    padding: var(--space-2xl) var(--space-lg);
  }

  .result-type-display .type-emoji {
    font-size: 3rem;
  }

  .result-type-display .type-code {
    font-size: var(--text-3xl);
  }

  .type-info-name {
    font-size: var(--text-2xl);
  }

  .share-card {
    width: 320px;
  }

  .share-card .type-code {
    font-size: var(--text-3xl);
  }

  .share-card .dims-mini {
    grid-template-columns: 1fr;
  }

  .share-section {
    flex-direction: column;
  }

  .share-section .btn {
    width: 100%;
  }

  .actions-row {
    flex-direction: column;
    align-items: stretch;
  }

  .actions-row .btn {
    width: 100%;
  }

  .dim-item-header {
    flex-direction: column;
    gap: var(--space-xs);
  }

  .faq-item summary {
    padding: var(--space-lg);
    font-size: var(--text-sm);
  }

  .faq-answer {
    padding: 0 var(--space-lg) var(--space-lg);
    font-size: var(--text-xs);
  }

  .section-title {
    font-size: var(--text-xl);
  }

  .progress-container {
    padding: var(--space-md) var(--space-lg);
    margin: calc(-1 * var(--space-lg));
    margin-bottom: var(--space-lg);
  }

  .navbar {
    padding: 0 var(--space-lg);
  }

  .navbar-brand .brand-name {
    font-size: 1.1rem;
  }

  .navbar-brand .brand-sub {
    font-size: 0.5rem;
  }

  .navbar-cta {
    padding: 6px 14px;
    font-size: var(--text-xs);
  }

  .question-nav {
    flex-direction: column;
    gap: var(--space-sm);
  }
}

/* === Small Mobile (375px and below) === */
@media (max-width: 375px) {
  :root {
    --text-hero: 1.75rem;
  }

  .type-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .share-card {
    width: 300px;
  }

  .question-text-single {
    font-size: var(--text-lg);
  }
}