/**
 * Responsive Design - Media Queries
 * Bora Akü Website Modernization
 * Mobile-first responsive breakpoints
 */

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

@media (max-width: 479px) {
  /* Typography */
  h1 { font-size: 1.75rem; }
  h2 { font-size: 1.5rem; }
  h3 { font-size: 1.25rem; }

  /* Container */
  .container {
    padding-left: var(--space-4);
    padding-right: var(--space-4);
  }

  /* Banner */
  .banner {
    height: var(--banner-height-mobile);
    margin-bottom: var(--space-12);
  }

  .banner-text {
    padding-top: var(--space-12);
  }

  /* Choose Section */
  .choose {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-3);
    padding: var(--space-4);
    bottom: -60px;
    width: 95%;
  }

  .choose-icon {
    padding: var(--space-6) var(--space-2);
  }

  .choose-icon .fa {
    font-size: 2rem;
    margin-bottom: var(--space-2);
  }

  .choose-grid h3 {
    font-size: var(--font-size-sm);
  }

  .choose-grid p {
    font-size: var(--font-size-xs);
  }

  /* Banner Bottom Adjustment */
  .banner-bottom {
    margin-bottom: var(--space-16);
  }

  /* About Section */
  .about {
    padding: var(--space-12) 0;
  }

  .about-grids {
    grid-template-columns: 1fr;
    gap: var(--space-8);
  }

  /* Services */
  .our-services {
    padding: var(--space-12) 0;
  }

  .our-services-grids {
    grid-template-columns: 1fr;
    gap: var(--space-6);
  }

  /* Blog/Product Cards */
  .blog-grids {
    grid-template-columns: 1fr;
    gap: var(--space-6);
  }

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

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

  /* Buttons */
  .btn {
    padding: 0.75rem 1.5rem;
    font-size: var(--font-size-sm);
  }

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

  /* Section Padding */
  section {
    padding: var(--space-12) 0;
  }
}

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

@media (min-width: 480px) and (max-width: 767px) {
  /* Choose Section */
  .choose {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-4);
    padding: var(--space-5);
  }

  /* Banner */
  .banner {
    height: 450px;
  }

  /* About */
  .about-grids {
    grid-template-columns: 1fr;
    gap: var(--space-10);
  }

  /* Services */
  .our-services-grids {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-6);
  }

  /* Blog */
  .blog-grids {
    grid-template-columns: 1fr;
    gap: var(--space-6);
  }

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

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

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

@media (min-width: 768px) and (max-width: 1023px) {
  /* Banner */
  .banner {
    height: var(--banner-height-tablet);
  }

  /* Choose Section */
  .choose {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-4);
  }

  .choose-icon {
    padding: var(--space-6) var(--space-3);
  }

  /* About */
  .about-grids {
    grid-template-columns: 1fr;
    gap: var(--space-10);
  }

  /* Services */
  .our-services-grids {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-6);
  }

  /* Blog */
  .blog-grids {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-6);
  }

  /* Footer */
  .footer-top-grids {
    grid-template-columns: repeat(3, 1fr);
  }

  .footer-grids {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-10);
  }

  /* Container */
  .container {
    padding-left: var(--space-6);
    padding-right: var(--space-6);
  }
}

/* ============================================
   TABLET LANDSCAPE / SMALL DESKTOP (1024px - 1279px)
   ============================================ */

@media (min-width: 1024px) and (max-width: 1279px) {
  /* Choose Section */
  .choose {
    grid-template-columns: repeat(5, 1fr);
    gap: var(--space-4);
    width: 90%;
  }

  /* About */
  .about-grids {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-10);
  }

  /* Services */
  .our-services-grids {
    grid-template-columns: repeat(3, 1fr);
  }

  /* Blog */
  .blog-grids {
    grid-template-columns: repeat(2, 1fr);
  }

  /* Footer */
  .footer-grids {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-10);
  }
}

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

@media (min-width: 1280px) and (max-width: 1439px) {
  .container {
    max-width: 1200px;
  }

  .choose {
    width: 85%;
  }
}

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

@media (min-width: 1440px) {
  .container {
    max-width: 1320px;
  }

  .choose {
    width: 80%;
    max-width: 1200px;
  }

  .banner {
    height: 700px;
  }

  /* Increase spacing for large screens */
  section {
    padding: var(--space-20) 0;
  }

  .our-services-grids {
    gap: var(--space-10);
  }

  .blog-grids {
    gap: var(--space-10);
  }
}

/* ============================================
   ULTRA WIDE (1920px+)
   ============================================ */

@media (min-width: 1920px) {
  .container {
    max-width: 1600px;
  }

  .banner {
    height: 800px;
  }

  h1 {
    font-size: var(--font-size-6xl);
  }

  .section-title h2,
  .section-title h3 {
    font-size: var(--font-size-5xl);
  }
}

/* ============================================
   HEIGHT-BASED MEDIA QUERIES
   ============================================ */

/* Short Screens */
@media (max-height: 600px) {
  .banner {
    height: 400px;
  }

  section {
    padding: var(--space-8) 0;
  }

  .choose-icon {
    padding: var(--space-4) var(--space-2);
  }
}

/* Tall Screens */
@media (min-height: 900px) {
  .banner {
    height: 800px;
  }
}

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

@media print {
  /* Hide non-essential elements */
  header,
  nav,
  .banner,
  .choose,
  .whatsapp-button,
  .call-button,
  .scroll-to-top,
  footer {
    display: none !important;
  }

  /* Reset backgrounds */
  body {
    background: white;
  }

  /* Ensure text is black */
  * {
    color: black !important;
  }

  /* Page breaks */
  h2, h3 {
    page-break-after: avoid;
  }

  img {
    page-break-inside: avoid;
  }

  /* Remove shadows and effects */
  .card,
  .services-inner {
    box-shadow: none !important;
    border: 1px solid #ddd !important;
  }
}

/* ============================================
   LANDSCAPE ORIENTATION
   ============================================ */

@media (orientation: landscape) and (max-height: 600px) {
  /* Reduce vertical spacing in landscape mode on short screens */
  section {
    padding: var(--space-8) 0;
  }

  .banner {
    height: 500px;
  }

  .choose {
    bottom: -50px;
  }

  .banner-bottom {
    margin-bottom: var(--space-12);
  }
}

/* ============================================
   HIGH RESOLUTION / RETINA DISPLAYS
   ============================================ */

@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  /* Optimize for retina displays */
  * {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }

  /* Slightly reduce font weight on retina */
  body {
    font-weight: 400;
  }
}

/* ============================================
   TOUCH DEVICES
   ============================================ */

@media (hover: none) and (pointer: coarse) {
  /* Increase touch targets */
  .btn {
    min-height: 44px;
    min-width: 44px;
  }

  nav ul.menu li a {
    min-height: 44px;
  }

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

  .choose-icon:hover {
    transform: none;
  }

  /* Show mobile buttons */
  .whatsapp-button,
  .call-button {
    display: flex;
  }
}

/* ============================================
   DESKTOP DEVICES (Precise Pointer)
   ============================================ */

@media (hover: hover) and (pointer: fine) {
  /* Enable hover effects */
  .card {
    cursor: pointer;
  }

  .choose-icon {
    cursor: pointer;
  }

  /* Hide mobile-only buttons */
  @media (min-width: 768px) {
    .whatsapp-button,
    .call-button {
      display: none;
    }
  }
}

/* ============================================
   DARK MODE SUPPORT (Future Enhancement)
   ============================================ */

@media (prefers-color-scheme: dark) {
  /* Can be implemented if dark mode is needed */
  /*
  :root {
    --color-bg-primary: #1F2937;
    --color-bg-secondary: #111827;
    --color-text-primary: #F9FAFB;
    --color-text-secondary: #E5E7EB;
  }
  */
}

/* ============================================
   CONTRAST PREFERENCES
   ============================================ */

@media (prefers-contrast: high) {
  /* Increase contrast for accessibility */
  .btn {
    border: 2px solid currentColor;
  }

  .card {
    border: 2px solid var(--color-border-dark);
  }

  a {
    text-decoration: underline;
  }
}

/* ============================================
   REDUCED DATA MODE
   ============================================ */

@media (prefers-reduced-data: reduce) {
  /* Disable background images */
  .banner {
    background-image: none;
    background-color: var(--color-primary);
  }

  /* Remove heavy effects */
  .glass,
  .glass-strong,
  header {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
}

/* ============================================
   SPECIFIC DEVICE ADJUSTMENTS
   ============================================ */

/* iPhone SE and similar small devices */
@media only screen and (max-width: 375px) {
  .choose {
    grid-template-columns: 1fr;
    gap: var(--space-3);
  }

  .footer-top-grids,
  .footer-grids {
    grid-template-columns: 1fr;
  }
}

/* iPad Pro and similar tablets */
@media only screen
  and (min-width: 1024px)
  and (max-width: 1366px)
  and (-webkit-min-device-pixel-ratio: 2) {

  .choose {
    grid-template-columns: repeat(5, 1fr);
    width: 85%;
  }

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