/* AVIHPSAM Responsive Styles - responsive.css */
/* Mobile-first responsive breakpoints */

/* ============================================
   TABLET (768px and up)
   ============================================ */

@media (max-width: 1024px) {
  :root {
    --text-4xl: 2rem;
    --text-5xl: 2.5rem;
  }

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

  .evolution-diagram {
    flex-direction: column;
    align-items: center;
  }

  .evolution-stage {
    max-width: 100%;
    width: 100%;
  }

  .evolution-arrow {
    transform: rotate(90deg);
  }
}

/* ============================================
   MOBILE (768px and below)
   ============================================ */

@media (max-width: 768px) {
  :root {
    --text-3xl: 1.5rem;
    --text-4xl: 1.75rem;
    --text-5xl: 2rem;
    --space-2xl: 2rem;
    --space-3xl: 3rem;
  }

  body {
    font-size: var(--text-base);
  }

  /* Header */
  .header-inner {
    padding: 0 var(--space-md);
  }

  .header-nav {
    display: none;
    position: absolute;
    top: var(--header-height);
    left: 0;
    right: 0;
    background-color: var(--color-surface);
    flex-direction: column;
    padding: var(--space-md);
    border-bottom: 1px solid var(--color-border);
    box-shadow: var(--shadow-md);
  }

  .header-nav.open {
    display: flex;
  }

  .header-nav-link {
    padding: var(--space-md);
    border-bottom: 1px solid var(--color-border-light);
  }

  .header-chat-btn {
    padding: var(--space-sm);
  }

  .header-chat-btn span {
    display: none;
  }

  .header-menu-toggle {
    display: block;
  }

  /* Grid layouts */
  .grid-cols-2,
  .grid-cols-3,
  .grid-cols-4 {
    grid-template-columns: 1fr;
  }

  /* Hero section */
  .hero {
    padding: var(--space-2xl) var(--space-md);
  }

  .hero h1 {
    font-size: var(--text-3xl);
  }

  /* Mode cards */
  .mode-cards {
    grid-template-columns: 1fr 1fr;
  }

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

  .mode-card-icon {
    font-size: 2rem;
  }

  .mode-card-label {
    font-size: var(--text-lg);
  }

  /* Domain grid */
  .domain-grid {
    grid-template-columns: 1fr;
  }

  /* Topic cards */
  .topic-card {
    padding: var(--space-md);
  }

  /* Tabs - scrollable on mobile */
  .tabs {
    overflow-x: auto;
    flex-wrap: nowrap;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  .tabs::-webkit-scrollbar {
    display: none;
  }

  .tab {
    flex-shrink: 0;
    padding: var(--space-sm);
    font-size: var(--text-sm);
  }

  /* Timeline */
  .timeline {
    padding-left: var(--space-lg);
  }

  .timeline-item::before {
    left: calc(-1 * var(--space-lg) + 4px);
  }

  /* Footer */
  .footer-grid {
    grid-template-columns: 1fr;
    text-align: center;
  }

  .footer-links {
    margin-bottom: var(--space-lg);
  }

  /* Inquiry prompts */
  .inquiry-prompt {
    flex-direction: column;
    text-align: center;
  }

  /* Source cards */
  .source-card {
    padding: var(--space-sm);
  }

  /* Related topics */
  .related-topics-grid {
    grid-template-columns: 1fr;
  }

  /* Buttons */
  .btn {
    width: 100%;
    justify-content: center;
  }

  .btn + .btn {
    margin-top: var(--space-sm);
  }

  /* Container padding */
  .container {
    padding: 0 var(--space-md);
  }

  /* Section spacing */
  .section {
    padding: var(--space-2xl) 0;
  }

  /* Breadcrumbs - truncate on mobile */
  .breadcrumbs {
    font-size: var(--text-xs);
    overflow-x: auto;
    white-space: nowrap;
  }
}

/* ============================================
   CHAT PANEL MOBILE
   ============================================ */

@media (max-width: 768px) {
  .chat-panel {
    width: 100%;
    max-width: 100%;
    height: 100%;
    max-height: 100%;
    border-radius: 0;
    right: 0;
    bottom: 0;
    top: 0;
  }

  .chat-panel.expanded {
    width: 100%;
    height: 100%;
  }

  .chat-header {
    padding: var(--space-md);
  }

  .chat-messages {
    padding: var(--space-md);
  }

  .chat-suggestions {
    padding: var(--space-sm);
    flex-wrap: wrap;
  }

  .chat-suggestions .suggestion {
    font-size: var(--text-sm);
    padding: var(--space-xs) var(--space-sm);
  }

  .chat-input-form {
    padding: var(--space-sm);
  }

  .chat-input-form input {
    font-size: 16px; /* Prevents zoom on iOS */
  }
}

/* ============================================
   SEARCH MOBILE
   ============================================ */

@media (max-width: 768px) {
  .search-page-header {
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-md);
  }

  .search-filters {
    flex-direction: column;
    gap: var(--space-sm);
  }

  .search-filter {
    width: 100%;
  }

  .search-result-card {
    padding: var(--space-md);
  }

  .search-result-header {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-xs);
  }

  .search-result-meta {
    flex-wrap: wrap;
  }

  .search-empty {
    padding: var(--space-lg);
  }

  .suggestion-chips {
    flex-direction: column;
  }

  .suggestion-chip {
    width: 100%;
    text-align: center;
  }

  /* External links */
  .external-links-grid {
    grid-template-columns: 1fr;
  }
}

/* ============================================
   USER MODE MOBILE
   ============================================ */

@media (max-width: 768px) {
  .mode-indicator {
    padding: var(--space-xs) var(--space-sm);
    font-size: var(--text-xs);
  }

  .mode-indicator span:last-child {
    display: none;
  }

  .mode-modal-content {
    width: 95%;
    max-height: 90vh;
    margin: var(--space-md);
    padding: var(--space-lg);
  }

  .mode-selector-grid {
    grid-template-columns: 1fr;
    gap: var(--space-sm);
  }

  .mode-selector-card {
    padding: var(--space-md);
    flex-direction: row;
    text-align: left;
  }

  .mode-selector-card .mode-icon {
    font-size: 1.5rem;
  }

  .toast {
    left: var(--space-md);
    right: var(--space-md);
    bottom: var(--space-md);
    max-width: none;
  }
}

/* ============================================
   FLAGGED TOPIC MOBILE
   ============================================ */

@media (max-width: 768px) {
  .flagged-warning {
    padding: var(--space-md);
    margin-bottom: var(--space-lg);
  }

  .flagged-warning h3 {
    font-size: var(--text-lg);
  }

  .why-flagged-item {
    padding: var(--space-sm);
  }
}

/* ============================================
   METHODOLOGY PAGE MOBILE
   ============================================ */

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

  .pramana-card {
    padding: var(--space-md);
  }

  .process-flow {
    flex-direction: column;
    padding: var(--space-md);
  }

  .process-arrow {
    transform: rotate(90deg);
  }

  .standards-list {
    grid-template-columns: 1fr;
  }

  .tier-card {
    padding: var(--space-md);
  }
}

/* ============================================
   ABOUT PAGE MOBILE
   ============================================ */

@media (max-width: 768px) {
  .houses-detailed .house-item {
    padding: var(--space-md);
  }

  .contact-info {
    flex-direction: column;
    gap: var(--space-md);
  }
}

/* ============================================
   SMALL MOBILE (480px and below)
   ============================================ */

@media (max-width: 480px) {
  :root {
    --text-2xl: 1.25rem;
    --text-3xl: 1.375rem;
    --text-4xl: 1.5rem;
  }

  .mode-cards {
    grid-template-columns: 1fr;
  }

  .mode-card {
    flex-direction: row;
    text-align: left;
    padding: var(--space-md);
    gap: var(--space-md);
  }

  .mode-card-icon {
    font-size: 1.5rem;
    margin-bottom: 0;
  }

  .mode-card-content {
    flex-grow: 1;
  }

  .evolution-diagram {
    padding: var(--space-md);
  }

  .evolution-stage {
    padding: var(--space-md);
  }

  .tier-badge-full {
    font-size: var(--text-sm);
    padding: var(--space-xs) var(--space-sm);
  }

  /* Topic header */
  .topic-header {
    padding: var(--space-md);
  }

  .topic-header h1 {
    font-size: var(--text-2xl);
  }
}

/* ============================================
   LANDSCAPE MOBILE
   ============================================ */

@media (max-width: 768px) and (orientation: landscape) {
  .hero {
    padding: var(--space-lg) var(--space-md);
    min-height: auto;
  }

  .mode-cards {
    grid-template-columns: repeat(4, 1fr);
  }

  .mode-card {
    padding: var(--space-md);
  }
}

/* ============================================
   LARGE SCREENS (1400px and up)
   ============================================ */

@media (min-width: 1400px) {
  :root {
    --text-5xl: 3.5rem;
  }

  .container {
    padding: 0 var(--space-xl);
  }

  .grid-cols-4 {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* ============================================
   HIGH DPI / RETINA DISPLAYS
   ============================================ */

@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  /* Sharper borders */
  .card,
  .domain-card,
  .topic-card {
    border-width: 0.5px;
  }
}

/* ============================================
   REDUCED MOTION
   ============================================ */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  html {
    scroll-behavior: auto;
  }
}

/* ============================================
   DARK MODE (if supported)
   ============================================ */

@media (prefers-color-scheme: dark) {
  /* Note: Dark mode is optional for this project
     Uncomment and customize if needed */
  /*
  :root {
    --color-background: #1a1a1a;
    --color-background-alt: #2a2a2a;
    --color-surface: #333333;
    --color-text: #e0e0e0;
    --color-text-light: #a0a0a0;
    --color-border: #444444;
  }
  */
}

/* ============================================
   PRINT ADJUSTMENTS
   ============================================ */

@media print {
  .container {
    max-width: 100%;
    padding: 0;
  }

  .section {
    padding: 1cm 0;
  }

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

  .tabs {
    display: none;
  }

  .tab-content {
    display: block !important;
    page-break-inside: avoid;
  }

  .tier-badge {
    border: 1px solid currentColor;
  }
}