/**
 * Itsawan Responsive Styles
 * Mobile-first responsive design with breakpoints for all devices
 */

/* ============================================
   BREAKPOINTS
   ============================================ */

/*
  Mobile First Approach:
  - Base styles are for mobile (< 640px)
  - Use min-width media queries for larger screens

  Breakpoints:
  - sm: 640px  (Small tablets, large phones landscape)
  - md: 768px  (Tablets portrait)
  - lg: 1024px (Tablets landscape, small laptops)
  - xl: 1280px (Desktops)
  - 2xl: 1536px (Large desktops)
*/

/* ============================================
   BASE MOBILE STYLES (< 640px)
   ============================================ */

/* Mobile-first container */
.container {
  padding-inline-start: var(--spacing-md, 1rem);
  padding-inline-end: var(--spacing-md, 1rem);
}

/* Mobile typography adjustments */
body {
  font-size: 16px; /* Prevent zoom on iOS */
}

/* Touch-friendly buttons */
button,
.button,
.btn,
a.button {
  min-height: 44px; /* iOS minimum touch target */
  min-width: 44px;
  padding: var(--spacing-sm, 0.5rem) var(--spacing-lg, 1.5rem);
}

/* Mobile-friendly forms */
input,
textarea,
select {
  font-size: 16px; /* Prevent zoom on iOS */
  min-height: 44px;
  padding: var(--spacing-sm, 0.5rem) var(--spacing-md, 1rem);
}

/* Mobile navigation */
.mobile-menu {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--background);
  z-index: var(--z-modal, 1050);
  transform: translateX(-100%);
  transition: transform var(--transition-slow);
}

.mobile-menu.active {
  transform: translateX(0);
}

/* ============================================
   SMALL TABLETS & LARGE PHONES (≥ 640px)
   ============================================ */

@media (min-width: 640px) {
  /* Container */
  .container {
    padding-inline-start: var(--spacing-lg, 1.5rem);
    padding-inline-end: var(--spacing-lg, 1.5rem);
  }

  /* Typography scaling */
  h1 {
    font-size: clamp(2.5rem, 6vw, 3.5rem);
  }

  h2 {
    font-size: clamp(2rem, 5vw, 3rem);
  }

  /* Grid improvements */
  .grid-cols-sm-2 {
    grid-template-columns: repeat(2, 1fr);
  }

  /* Hero video adjustments */
  .index-entry-video__headline-text {
    font-size: clamp(2.5rem, 6vw, 4rem);
  }
}

/* ============================================
   TABLETS PORTRAIT (≥ 768px)
   ============================================ */

@media (min-width: 768px) {
  /* Container */
  .container {
    padding-inline-start: var(--spacing-xl, 2rem);
    padding-inline-end: var(--spacing-xl, 2rem);
  }

  /* Typography */
  body {
    font-size: 18px;
  }

  /* Header adjustments */
  .site-header {
    height: var(--header-height, 80px);
  }

  /* Grid layouts */
  .grid-cols-md-2 {
    grid-template-columns: repeat(2, 1fr);
  }

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

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

  /* Featured projects - side by side */
  .featured-project-card-inner {
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-2xl, 3rem);
  }

  /* Hide mobile menu toggle */
  .mobile-menu-toggle {
    display: none;
  }
}

/* ============================================
   TABLETS LANDSCAPE & SMALL LAPTOPS (≥ 1024px)
   ============================================ */

@media (min-width: 1024px) {
  /* Container max-width */
  .container {
    max-width: 1024px;
  }

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

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

  /* Grid layouts */
  .grid-cols-lg-3 {
    grid-template-columns: repeat(3, 1fr);
  }

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

  /* Footer grid - 3 columns */
  .footer-grid {
    grid-template-columns: 2fr 1fr 1fr 1fr 1.5fr;
  }

  /* Featured projects - enable 3D transforms */
  .featured-project-card {
    perspective: 1000px;
  }

  .featured-project-card-inner {
    transform-style: preserve-3d;
  }

  /* Hero section spacing */
  .section {
    padding: var(--spacing-5xl, 8rem) 0;
  }
}

/* ============================================
   DESKTOPS (≥ 1280px)
   ============================================ */

@media (min-width: 1280px) {
  /* Container max-width */
  .container {
    max-width: var(--max-width, 1280px);
  }

  /* Grid layouts */
  .grid-cols-xl-4 {
    grid-template-columns: repeat(4, 1fr);
  }

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

  /* Optimal reading width for content */
  .content-wrapper {
    max-width: 65ch; /* 65 characters for optimal readability */
  }

  /* Hero video full effect */
  .index-entry-video--initial-vh {
    height: 100vh;
  }
}

/* ============================================
   LARGE DESKTOPS (≥ 1536px)
   ============================================ */

@media (min-width: 1536px) {
  /* Container max-width */
  .container {
    max-width: 1536px;
  }

  /* Typography scaling for large screens */
  h1 {
    font-size: 5rem;
  }

  h2 {
    font-size: 4rem;
  }

  /* Increased spacing */
  .section {
    padding: var(--spacing-5xl, 8rem) 0;
  }
}

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

@media (max-height: 500px) and (orientation: landscape) {
  /* Reduce vertical spacing */
  .section {
    padding: var(--spacing-2xl, 3rem) 0;
  }

  /* Smaller hero */
  .index-entry-video--initial-vh {
    height: 100vh;
    min-height: 400px;
  }

  /* Adjust footer reveal for mobile landscape */
  .footer-reveal-wrapper {
    height: auto;
  }
}

/* ============================================
   TABLET SPECIFIC
   ============================================ */

@media (min-width: 768px) and (max-width: 1023px) {
  /* Optimize for tablet touch targets */
  button,
  .button,
  .btn {
    min-height: 48px;
    min-width: 48px;
  }

  /* Featured projects - stacked on tablets */
  .featured-project-card-inner {
    grid-template-columns: 1fr;
  }
}

/* ============================================
   TOUCH DEVICE OPTIMIZATIONS
   ============================================ */

@media (hover: none) and (pointer: coarse) {
  /* Increase touch targets */
  button,
  a,
  input,
  select,
  textarea {
    min-height: 48px;
    min-width: 48px;
  }

  /* Remove hover effects on touch devices */
  *:hover {
    opacity: 1;
  }

  /* Larger tap areas for links */
  a {
    padding: var(--spacing-xs, 0.25rem);
  }

  /* Disable parallax on touch devices for performance */
  .featured-project-card {
    perspective: none;
  }

  .featured-project-card-inner {
    transform: none !important;
  }
}

/* ============================================
   HIGH DPI DISPLAYS (RETINA)
   ============================================ */

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

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

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

  /* Disable scroll effects */
  .featured-project-card-inner {
    transform: none !important;
  }

  .index-entry-video--initial-vh {
    transform: none !important;
  }

  .footer-main[data-footer-content] {
    opacity: 1 !important;
    transform: none !important;
  }
}

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

@media print {
  /* Hide non-essential elements */
  .site-header,
  .mobile-menu,
  .back-to-top,
  button,
  .newsletter-form {
    display: none !important;
  }

  /* Full width for print */
  .container {
    max-width: 100%;
  }

  /* Black text for printing */
  body {
    color: var(--awan-text);
    background: var(--awan-bg);
  }

  /* Page breaks */
  .section {
    page-break-inside: avoid;
  }
}

/* ============================================
   UTILITY RESPONSIVE CLASSES
   ============================================ */

/* Hide on specific breakpoints */
.hide-mobile {
  display: none;
}

@media (min-width: 768px) {
  .hide-mobile {
    display: block;
  }
  .hide-tablet {
    display: none;
  }
}

@media (min-width: 1024px) {
  .hide-tablet {
    display: block;
  }
  .hide-desktop {
    display: none;
  }
}

/* Show only on specific breakpoints */
.show-mobile {
  display: block;
}

@media (min-width: 768px) {
  .show-mobile {
    display: none;
  }
  .show-tablet {
    display: block;
  }
}

@media (min-width: 1024px) {
  .show-tablet {
    display: none;
  }
  .show-desktop {
    display: block;
  }
}

/* Responsive text alignment */
@media (max-width: 767px) {
  .text-center-mobile {
    text-align: center;
  }
}

/* Responsive flex direction */
@media (max-width: 767px) {
  .flex-col-mobile {
    flex-direction: column;
  }
}

/* Responsive gaps */
@media (max-width: 767px) {
  .gap-mobile-sm {
    gap: var(--spacing-sm, 0.5rem);
  }
}

@media (min-width: 768px) {
  .gap-tablet-md {
    gap: var(--spacing-md, 1rem);
  }
}

@media (min-width: 1024px) {
  .gap-desktop-lg {
    gap: var(--spacing-lg, 1.5rem);
  }
}