/*
 * VRPL Website - Responsive Styles
 * Mobile-first responsive design
 */

/* ========================================
   LARGE DESKTOP (1920px+)
   ======================================== */

@media (min-width: 1920px) {
  :root {
    --space-4xl: 10rem;
    --space-5xl: 12rem;
  }

  .container {
    max-width: 1800px;
  }
}

/* ========================================
   DESKTOP (1024px - 1439px)
   ======================================== */

@media (max-width: 1439px) {
  :root {
    --space-4xl: 6rem;
    --space-3xl: 5rem;
  }
}

/* ========================================
   TABLET (768px - 1023px)
   ======================================== */

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

  /* Hide breadcrumb on tablets */
  .breadcrumb-nav {
    display: none;
  }

  /* Adjust header */
  .header-container {
    padding: var(--space-md) var(--space-lg);
  }

  /* Process flow becomes vertical */
  .process-flow {
    flex-direction: column;
  }

  .process-connector {
    transform: rotate(90deg);
    margin: var(--space-md) 0;
  }

  /* Grid adjustments */
  .two-column {
    grid-template-columns: 1fr;
    gap: var(--space-2xl);
  }

  .two-column.reverse {
    direction: ltr;
  }
}

/* ========================================
   MOBILE (480px - 767px)
   ======================================== */

@media (max-width: 767px) {
  :root {
    --space-4xl: 4rem;
    --space-3xl: 3rem;
    --space-2xl: 2.5rem;
    --space-xl: 2rem;
  }

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

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

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

  /* Typography adjustments */
  h1 {
    font-size: var(--text-4xl);
  }

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

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

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

  .header-logo img {
    height: 32px;
  }

  /* Hero section */
  .hero-section {
    min-height: 80vh;
  }

  .hero-content {
    padding: var(--space-lg);
  }

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

  .hero-subtitle {
    font-size: var(--text-lg);
  }

  .hero-stats {
    flex-direction: column;
    gap: var(--space-lg);
  }

  .hero-cta {
    flex-direction: column;
    align-items: center;
  }

  .hero-cta .btn {
    width: 100%;
    max-width: 300px;
  }

  /* Scroll indicator - adjust for mobile */
  .scroll-indicator {
    bottom: 16px;
    gap: 6px;
  }

  .scroll-icon {
    width: 18px;
    height: 28px;
  }

  .scroll-text {
    font-size: 10px;
  }

  /* Overlay menu */
  .overlay-content {
    padding: var(--space-3xl) var(--space-lg);
  }

  .overlay-link {
    font-size: var(--text-2xl);
  }

  .overlay-close {
    top: var(--space-md);
    right: var(--space-md);
    width: 50px;
    height: 50px;
  }

  .close-icon {
    font-size: 24px;
  }

  .overlay-footer {
    bottom: var(--space-md);
    left: var(--space-md);
  }

  .overlay-contact {
    font-size: var(--text-base);
  }

  /* Grids become single column */
  .vision-grid,
  .benefits-grid,
  .programs-grid,
  .alignment-grid,
  .safety-grid,
  .advantages-grid {
    grid-template-columns: 1fr;
    gap: var(--space-lg);
  }

  /* Process hexagon */
  .process-hexagon {
    width: 100px;
    height: 100px;
  }

  /* Stats panel */
  .stats-panel {
    padding: var(--space-xl) var(--space-lg);
    gap: var(--space-lg);
  }

  /* Impact cards */
  .impact-grid {
    grid-template-columns: 1fr;
  }

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

  /* Founder card */
  .founder-card {
    flex-direction: column;
    text-align: center;
    padding: var(--space-xl);
  }

  /* Comparison table */
  .lca-comparison {
    grid-template-columns: 1fr;
  }

  .comparison-row {
    grid-template-columns: 1fr;
    text-align: center;
  }

  .comparison-vs {
    display: none;
  }

  /* Contact grid */
  .contact-grid {
    grid-template-columns: 1fr;
  }

  /* CTA buttons */
  .cta-buttons {
    flex-direction: column;
    align-items: center;
  }

  .cta-buttons .btn {
    width: 100%;
    max-width: 300px;
  }
}

/* ========================================
   SMALL MOBILE (320px - 479px)
   ======================================== */

@media (max-width: 479px) {
  :root {
    --space-4xl: 3rem;
    --space-3xl: 2.5rem;
    --space-2xl: 2rem;
    --space-xl: 1.5rem;
  }

  /* Container */
  .container,
  .container-narrow,
  .container-fluid {
    padding: 0 var(--space-sm);
  }

  /* Typography */
  h1 {
    font-size: var(--text-3xl);
  }

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

  /* Hero */
  .hero-title {
    font-size: var(--text-2xl);
  }

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

  /* Overlay menu */
  .overlay-link {
    font-size: var(--text-xl);
  }

  .link-number {
    font-size: var(--text-sm);
  }

  /* Process hexagon */
  .process-hexagon {
    width: 80px;
    height: 80px;
  }

  /* Cards */
  .industrial-card,
  .vision-card,
  .benefit-card,
  .advantage-card {
    padding: var(--space-lg);
  }

  /* Stats */
  .stat-number {
    font-size: var(--text-3xl);
  }

  .stat-number-large {
    font-size: var(--text-3xl);
  }

  /* Impact */
  .impact-number {
    font-size: var(--text-4xl);
  }

  /* Buttons */
  .btn {
    padding: var(--space-md) var(--space-lg);
    font-size: var(--text-sm);
  }
}

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

@media (max-height: 500px) and (orientation: landscape) {
  .hero-section {
    min-height: 100vh;
  }

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

  .overlay-content {
    padding: var(--space-lg);
    justify-content: flex-start;
    padding-top: var(--space-4xl);
  }

  .overlay-link {
    font-size: var(--text-xl);
  }
}

/* ========================================
   PRINT STYLES
   ======================================== */

@media print {
  .main-header,
  .overlay-menu,
  .menu-trigger,
  .scroll-indicator,
  .btn {
    display: none !important;
  }

  body {
    color: #000;
    background: #fff;
  }

  .section {
    page-break-inside: avoid;
  }
}

/* ========================================
   ACCESSIBILITY - HIGH CONTRAST
   ======================================== */

@media (prefers-contrast: high) {
  :root {
    --text-secondary: #FFFFFF;
    --copper-medium: #D4A574;
    --light-green: #C0E0B0;
  }

  .btn-copper {
    border: 2px solid var(--copper-light);
  }

  .btn-outline-green {
    border-width: 3px;
  }
}

/* ========================================
   TOUCH DEVICE ADJUSTMENTS
   ======================================== */

@media (hover: none) {
  /* Remove hover effects on touch devices */
  .btn-copper:hover::before {
    display: none;
  }

  /* Increase tap targets */
  .btn {
    min-height: 44px;
  }

  .menu-trigger {
    min-width: 44px;
    min-height: 44px;
  }

  .overlay-link {
    padding: var(--space-md) 0;
  }
}