/* Responsive Design - Mobile First Approach */

/* Base mobile styles are in main.css */

/* Small tablets and large phones (landscape) */
@media (max-width: 768px) {
  :root {
    --space-lg: 2rem;
    --space-xl: 3rem;
  }

  /* Navigation adjustments */
  .nav-links {
    flex-direction: column;
    gap: var(--space-sm);
  }

  /* Hero sections */
  .hero-modern,
  .hero-carousel {
    min-height: 500px !important;
    padding: var(--space-lg) var(--space-md) !important;
  }

  .hero-carousel-content {
    min-height: 500px !important;
  }

  /* Grid layouts - stack on mobile */
  [style*="grid-template-columns: 1fr 1fr"],
  [style*="grid-template-columns: repeat(2"],
  .pill-grid {
    grid-template-columns: 1fr !important;
  }

  /* Ministry detail cards */
  .ministry-detail-image {
    height: clamp(300px, 60vw, 400px) !important;
  }

  /* Sermon cards */
  .sermon-card-image {
    height: 180px !important;
  }

  /* Button groups */
  [style*="display: flex"][style*="gap"] {
    flex-direction: column;
    align-items: stretch !important;
  }

  /* CTA buttons in flex containers */
  .cta-button {
    width: 100% !important;
    justify-content: center !important;
  }

  /* Text sizing */
  h1 {
    font-size: clamp(2rem, 8vw, 3rem) !important;
  }

  h2 {
    font-size: clamp(1.75rem, 6vw, 2.25rem) !important;
  }

  h3 {
    font-size: clamp(1.25rem, 5vw, 1.75rem) !important;
  }

  /* Section padding */
  .section-inner {
    padding: var(--space-lg) var(--space-md) !important;
  }

  .content-section {
    padding: var(--space-xl) 0 !important;
  }

  /* Footer grid */
  .footer-inner > div[style*="grid"] {
    grid-template-columns: 1fr !important;
    gap: var(--space-lg) !important;
  }

  /* About page stats */
  [style*="display: grid"][style*="grid-template-columns: repeat(4"] {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  /* Carousel indicators */
  .carousel-indicators {
    bottom: 15px !important;
  }

  /* Ministry cards on home */
  .pill-card {
    padding: var(--space-md) !important;
  }

  .ministry-image {
    height: 200px !important;
  }

  /* Contact and donate cards */
  .contact-info-card {
    padding: var(--space-md) !important;
  }

  /* Youth church service cards */
  [style*="grid-template-columns: 1fr 1fr"][style*="gap: var(--space-xl)"] {
    grid-template-columns: 1fr !important;
    gap: var(--space-md) !important;
  }
}

/* Extra small devices (phones in portrait) */
@media (max-width: 480px) {
  :root {
    --space-md: 1rem;
    --space-lg: 1.5rem;
    --space-xl: 2rem;
  }

  /* Further reduce hero height */
  .hero-modern,
  .hero-carousel {
    min-height: 400px !important;
  }

  .hero-carousel-content {
    min-height: 400px !important;
  }

  /* Tighter spacing */
  .section-inner {
    padding: var(--space-md) var(--space-sm) !important;
  }

  /* Ministry images smaller */
  .ministry-detail-image {
    height: clamp(250px, 70vw, 350px) !important;
  }

  /* Stats grid single column */
  [style*="display: grid"][style*="grid-template-columns: repeat(4"],
  [style*="display: grid"][style*="grid-template-columns: repeat(2"] {
    grid-template-columns: 1fr !important;
  }

  /* Button padding */
  .cta-button {
    padding: 0.875rem 1.5rem !important;
    font-size: 0.95rem !important;
  }

  /* Reduce icon sizes */
  [style*="font-size: 2rem"] {
    font-size: 1.5rem !important;
  }

  /* Footer social icons */
  .footer-inner a[style*="width: 40px"] {
    width: 36px !important;
    height: 36px !important;
    font-size: 1.1rem !important;
  }
}

/* Medium devices (tablets) */
@media (min-width: 769px) and (max-width: 1024px) {
  /* Adjust grid to 2 columns */
  [style*="grid-template-columns: repeat(auto-fit, minmax(300px, 1fr))"],
  [style*="grid-template-columns: repeat(auto-fill, minmax(300px, 1fr))"] {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  /* Ministry detail cards */
  .ministry-detail-image {
    height: clamp(350px, 45vw, 500px) !important;
  }

  /* Reduce max content width slightly */
  .section-inner {
    max-width: 960px;
    margin: 0 auto;
  }
}

/* Large devices (desktops) */
@media (min-width: 1025px) {
  /* Ensure proper max-width */
  .section-inner {
    max-width: var(--max-content-width);
    margin: 0 auto;
  }

  /* Optimize grid spacing */
  .pill-grid {
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  }
}

/* Landscape orientation adjustments */
@media (max-height: 600px) and (orientation: landscape) {
  .hero-modern,
  .hero-carousel {
    min-height: 100vh !important;
  }

  .hero-carousel-content {
    min-height: 100vh !important;
  }
}

/* Print styles */
@media print {
  .nav,
  .footer,
  .cta-button,
  .carousel-indicators {
    display: none !important;
  }

  body {
    background: white;
    color: black;
  }

  .section-inner {
    max-width: 100%;
    padding: 0;
  }
}

/* High DPI displays */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  img {
    image-rendering: -webkit-optimize-contrast;
  }
}

/* Touch device optimizations */
@media (hover: none) and (pointer: coarse) {
  /* Increase tap targets */
  .cta-button,
  a[href] {
    min-height: 44px;
    min-width: 44px;
  }

  /* Remove hover effects */
  *:hover {
    transform: none !important;
  }

  /* Larger touch-friendly spacing */
  .nav-links a {
    padding: var(--space-sm) var(--space-md);
  }
}