/**
 * Pharma HealthTech - Responsive Styles
 * Mobile-first responsive design
 * Breakpoints: 320px, 768px, 1024px, 1440px
 */

/* ===========================
   Mobile First Base (320px+)
   =========================== */
/* Most mobile styles are in main.css as default */

/* ===========================
   Tablet (768px and up)
   =========================== */
@media (min-width: 768px) {
  :root {
    --container-padding: 2rem;
  }

  .hero h1 {
    font-size: 3.2rem;
  }

  .hero-subtitle {
    font-size: 1.5rem;
  }

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

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

/* ===========================
   Desktop (1024px and up)
   =========================== */
@media (min-width: 1024px) {
  .hero h1 {
    font-size: 3.5rem;
  }

  .topics-grid,
  .speakers-grid,
  .insights-grid {
    grid-template-columns: repeat(3, 1fr);
  }

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

/* ===========================
   Large Desktop (1440px and up)
   =========================== */
@media (min-width: 1440px) {
  .topics-grid,
  .speakers-grid,
  .insights-grid {
    grid-template-columns: repeat(4, 1fr);
  }

  .partners-grid {
    grid-template-columns: repeat(5, 1fr);
  }
}

/* ===========================
   Mobile Devices (max-width: 767px)
   =========================== */
@media (max-width: 767px) {
  :root {
    --container-padding: 1rem;
    --space-xl: 2.5rem;
  }

  /* Typography adjustments */
  h1 { font-size: 2rem; }
  h2 { font-size: 1.75rem; }
  h3 { font-size: 1.35rem; }
  h4 { font-size: 1.15rem; }

  .lead {
    font-size: 1.125rem;
  }

  /* Header and navigation */
  .site-header {
    padding: var(--space-sm) 0;
  }

  .mobile-menu-toggle {
    display: flex;
  }

  .main-navigation {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: white;
    border-top: 1px solid var(--color-border);
    box-shadow: var(--shadow-lg);
    padding: var(--space-md);
  }

  .main-navigation.is-open {
    display: block;
  }

  .main-navigation ul {
    flex-direction: column;
    gap: 0;
  }

  .main-navigation li {
    width: 100%;
    border-bottom: 1px solid var(--color-border);
  }

  .main-navigation li:last-child {
    border-bottom: none;
  }

  .main-navigation a {
    padding: var(--space-sm) var(--space-md);
    width: 100%;
  }

  /* Hero section */
  .hero {
    padding: var(--space-lg) 0;
  }

  .hero h1 {
    font-size: 1.75rem;
  }

  .hero-subtitle {
    font-size: 1.2rem;
  }

  .hero-description {
    font-size: 1rem;
  }

  /* CTAs */
  .cta-button-large {
    padding: 0.875rem 2rem;
    font-size: 1rem;
  }

  /* Grids */
  .topics-grid,
  .speakers-grid,
  .partners-grid,
  .insights-grid {
    grid-template-columns: 1fr;
    gap: var(--space-md);
  }

  /* Newsletter form */
  .newsletter-form {
    flex-direction: column;
  }

  .newsletter-form button {
    width: 100%;
  }

  /* Footer */
  .footer-grid {
    grid-template-columns: 1fr;
    gap: var(--space-md);
  }

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

  .page-header h1 {
    font-size: 1.75rem;
  }

  /* Cards */
  .card {
    padding: var(--space-md);
  }

  /* Stats */
  .stat-box .number {
    font-size: 2.5rem;
  }
}

/* ===========================
   Touch Device Optimizations
   =========================== */
@media (hover: none) and (pointer: coarse) {
  /* Larger touch targets for mobile */
  .main-navigation a,
  .cta-button,
  button {
    min-height: 44px;
    min-width: 44px;
  }

  /* Remove hover effects on touch devices */
  .card:hover {
    transform: none;
  }

  .partner-logo:hover img {
    filter: grayscale(100%);
    opacity: 0.7;
  }
}

/* ===========================
   Print Styles
   =========================== */
@media print {
  .site-header,
  .main-navigation,
  .site-footer,
  .cta-button,
  .cta-button-large,
  .newsletter-form {
    display: none;
  }

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

  a {
    color: #000;
    text-decoration: underline;
  }

  .hero {
    background: none;
    color: #000;
  }

  .hero h1 {
    color: #000;
  }
}

/* ===========================
   High DPI / Retina Displays
   =========================== */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  /* Optimizations for retina displays if needed */
  .logo img {
    image-rendering: -webkit-optimize-contrast;
  }
}

/* ===========================
   Reduced Motion
   =========================== */
@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  html {
    scroll-behavior: auto;
  }
}

/* ===========================
   Dark Mode Support (Optional)
   =========================== */
@media (prefers-color-scheme: dark) {
  /* Uncomment to enable dark mode */
  /*
  :root {
    --color-background: #1A1A1A;
    --color-text: #E0E0E0;
    --color-dark: #FFFFFF;
    --color-border: #333333;
    --color-background-light: #2A2A2A;
  }

  .site-header,
  .card,
  .partner-logo {
    background: #2A2A2A;
  }
  */
}