/* === iOS SAFARI FIXES === */
/* Ensure body fills viewport properly on iOS */
body {
  /* Add dark background color to fill safe area */
  background-color: #000000;
  /* Ensure proper viewport handling */
  min-height: 100vh;
  min-height: -webkit-fill-available;
}

/* Fill safe area with dark background on iOS */
html {
  background-color: #000000;
}

/* Create a pseudo-element to fill the safe area with dark background */
html::before {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: env(safe-area-inset-top);
  background-color: rgba(0, 0, 0, 0.8);
  backdrop-filter: blur(15px);
  z-index: 999999999999999999998;
  pointer-events: none;
}

/* === RESPONSIVE === */
@media (max-width: 1199px) {
  /* Keep mobile/tablet astrolabe margins as original */
  /* astrolabe icon margins are controlled centrally in css/variables.css */
}

@media (max-width: 768px) {
  .hero-section h1 {
    font-size: var(--font-size-4xl);
  }

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

  .section-subtitle {
    font-size: var(--font-size-base);
  }
  .container {
    padding-left: var(--container-padding-mobile);
    padding-right: var(--container-padding-mobile);
  }
  .hero-section .lead {
    padding-left: 2rem;
    padding-right: 2rem;
    text-align: left;
  }
  
  /* Hide decorative astrolabes on mobile for cleaner look */
  .astrolabe-decoration {
    display: none;
  }
  
  /* Enhanced mobile hero section with iPhone bottom navigation support */
  .hero-section {
    /* Full viewport with safe area support for top AND bottom */
    min-height: 100vh;
    min-height: -webkit-fill-available;
    /* Reduced spacing to accommodate bottom navigation */
    padding-top: calc(5rem + env(safe-area-inset-top)); /* Reduced by 1rem */
    padding-bottom: calc(2rem + env(safe-area-inset-bottom)); /* Account for bottom safe area */
    /* Ensure proper centering with space for bottom navigation */
    justify-content: space-between;
  }
  
  /* Mobile-specific astrolabe icon spacing - reduced as requested */
  /* astrolabe icon margins and hero spacing are controlled in css/variables.css */
  /* If you want different margins on mobile, update variables.css or add an intentional media override here. */
  
  /* Ensure hero content has proper spacing */
  .hero-section .container {
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 1.5rem; /* Add consistent spacing between elements */
  }

}

@media (min-width: 768px) and (max-width: 1199px) {
  .hero-section .lead {
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    padding-left: 2rem;
    padding-right: 2rem;
  }
}

@media (max-width: 1200px) {
  .container {
    padding-left: var(--container-padding-tablet);
    padding-right: var(--container-padding-tablet);
  }
}

@media (max-width: 900px) {
  .container {
    padding-left: var(--container-padding-mobile);
    padding-right: var(--container-padding-mobile);
  }
}

@media (max-width: 991px) {
  /* Add spacing between stacked sections in About area when columns wrap */
  .row.align-items-start.mt-4 {
    row-gap: 3rem !important;
  }
}

@media (max-width: 600px) {
  .container {
    padding-left: var(--container-padding-xs);
    padding-right: var(--container-padding-xs);
  }
}

/* === VERY SMALL SCREENS === */
/* === RESPONSIVE GRID LAYOUT FOR CONTACT CARDS === */
.contact-card-row {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)) !important;
  gap: 1.5rem !important;
  max-width: 100%;
}

.contact-card-row a {
  width: auto !important;
}

.contact-card {
  width: 100% !important;
  max-width: 100% !important;
  min-width: unset !important;
  flex: none !important;
  margin-bottom: 0;
}

/* === MEDIUM-LARGE SCREENS - 3 CARDS IN A ROW === */
@media (min-width: 1200px) {
  .contact-card-row {
    grid-template-columns: repeat(3, 1fr) !important;
    max-width: 100%;
    margin-left: 100px;
    margin-right: 100px;
    padding-left: 0;
    padding-right: 0;
    gap: 2rem !important;
  }
}

/* === TABLET CONTACT CARDS (768px - 1199px) - 2 COLUMN LAYOUT === */
@media (min-width: 768px) and (max-width: 1199px) {
  .contact-card-row {
    grid-template-columns: repeat(2, 1fr) !important;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
  }
}

/* === MOBILE CONTACT CARDS === */
@media (max-width: 767px) {
  .contact-card-row {
    flex-direction: column !important;
    align-items: center !important;
    gap: 1.5rem !important;
  }
  
  .contact-card-row a {
    width: 100% !important;
  }
  
  .contact-card {
    width: 100% !important;
    max-width: 100% !important;
    min-width: unset !important;
    flex: none !important;
    margin-bottom: 0;
  }
}

/* === SERVICES CARDS - SINGLE COLUMN ON PHONES === */
/* Force single-column layout below 820px to prevent cropping on modern phones (iPhone 16 Pro, etc.) */
@media (max-width: 820px) {
  #services .row {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 1.25rem !important;
  }

  #services [class*="col-"] {
    max-width: 100% !important;
    flex: 0 0 100% !important;
    width: 100% !important;
  }

  #services .service-card,
  #services .card,
  #services .glass {
    width: 100% !important;
    box-sizing: border-box !important;
  }
}

@media (max-width: 480px) {
  .container {
    padding-left: 1rem;
    padding-right: 1rem;
    max-width: 100%;
  }
  
  .contact-card-row {
    gap: 1rem !important;
  }
  
  .contact-card-row a {
    width: 100% !important;
  }

  /* Ensure Services cards stack into a single column on very small screens
     to avoid cropping on narrow/proportioned devices (iPhone SE, small Android) */
  #services .row {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 1rem !important;
  }

  /* Make sure service column wrapper classes don't try to keep a multi-column layout */
  #services .col-md-4,
  #services .col-lg-3,
  #services .col-4k-5,
  #services .col-6 {
    max-width: 100% !important;
    flex: 0 0 100% !important;
  }
}

/* === EXTRA SMALL SCREENS === */
@media (max-width: 360px) {
  .container {
    padding-left: 0.5rem;
    padding-right: 0.5rem;
  }
  
  .hero-section h1 {
    font-size: 2rem;
  }
  
  .section-title {
    font-size: 1.75rem;
  }
  
  .contact-card-row a {
    width: 100% !important;
  }
  
  .contact-card {
    padding: 1.5rem 1rem;
    width: 100% !important;
    max-width: 100% !important;
    min-width: unset !important;
    flex: none !important;
  }
  
  /* Ensure cards stack properly */
  .card-custom {
    margin-bottom: 1rem;
  }
  
  /* Fix any potential Bootstrap column overflow */
  .col-md-4,
  .col-lg-3,
  .col-6 {
    max-width: 100% !important;
    flex: 0 0 100% !important;
  }
  
  /* Ensure row doesn't overflow */
  .row {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  
  .g-4 > * {
    padding-left: 0.5rem !important;
    padding-right: 0.5rem !important;
  }
}

/* === LARGE DESKTOP SCREENS (4 cards per row) === */
@media (min-width: 1200px) and (max-width: 1599px) {
  /* Ensure 4-column layout on standard desktop screens */
  #works .card-custom.col-md-4 {
    flex: 0 0 25% !important;
    max-width: 25% !important;
  }
  
  .card-custom .tilt-card img.img-fluid,
  .card-custom .tilt-card video.portfolio-video {
    height: 300px !important; /* Increased standard desktop height */
    min-height: 300px !important;
    max-height: 300px !important;
    width: 100% !important;
    min-width: 100% !important;
    object-fit: cover !important;
    object-position: center !important;
  }
  
  .card-custom .tilt-card {
    min-height: 420px !important;
  }
  
  .card-custom .tilt-card .p-3 {
    min-height: 170px !important;
  }
}

/* === EXTRA WIDE SCREENS (1600px - 1999px) === */
@media (min-width: 1600px) and (max-width: 1999px) {
  /* Custom astrolabe icon size for extra wide screens */
  /* astrolabe icon size now controlled from css/variables.css */
  
  #works .card-custom.col-md-4 {
    flex: 0 0 25%;
    max-width: 25%;
  }
  #services .service-card {
    padding: 3rem;
  }
  .container {
    max-width: 1600px;
  }
  
  /* Larger image and video height for extra wide screens */
  .card-custom .tilt-card img.img-fluid,
  .card-custom .tilt-card video.portfolio-video {
    height: 320px !important; /* Increased height for extra wide screens */
    min-height: 320px !important;
    max-height: 320px !important;
    width: 100% !important;
    min-width: 100% !important;
    object-fit: cover !important;
    object-position: center !important;
  }
}

/* === 4K / ULTRA-WIDE SCREENS (2000px+) === */
@media (min-width: 2000px) {
  /* Custom astrolabe icon size for 4K screens */
  /* astrolabe icon size now controlled from css/variables.css */
  
  /* Custom 5-column layout class */
  .col-4k-5 {
    flex: 0 0 20% !important;
    max-width: 20% !important;
  }
  
  /* Increase container max-width for 4K screens */
  .container {
    max-width: 2000px;
  }
  
  /* Optimize image and video sizing for 5-column layout */
  .card-custom .tilt-card img.img-fluid,
  .card-custom .tilt-card video.portfolio-video {
    height: 280px !important; /* Slightly smaller for 5-column layout */
    min-height: 280px !important;
    max-height: 280px !important;
    width: 100% !important;
    min-width: 100% !important;
    object-fit: cover !important;
    object-position: center !important;
  }
  
  /* Adjust service card padding for 5-column layout */
  #services .service-card {
    padding: 2.5rem;
  }
  
  /* Ensure proper spacing between cards in 5-column layout */
  .row.g-4 {
    --bs-gutter-x: 1.5rem;
  }
  
  /* Portfolio gallery images optimization for 5-column layout */
  .gallery-img {
    height: 240px !important;
    object-fit: cover !important;
    object-position: center !important;
  }
}

/* === LARGE DESKTOP SCREENS (4 cards per row) === */
@media (min-width: 1200px) and (max-width: 1599px) {
  /* Ensure portfolio cards stay 4-column on desktop (25% width) */
  #works .card-custom.col-md-4 {
    flex: 0 0 25% !important;
    max-width: 25% !important;
  }
  
  /* Reduce gutter on desktop to give cards more space */
  #works .row.g-4 {
    --bs-gutter-x: 1rem !important; /* Smaller gap between cards */
  }
  
  .card-custom .tilt-card img.img-fluid,
  .card-custom .tilt-card video.portfolio-video {
    height: 300px !important; /* Increased standard desktop height */
    min-height: 300px !important;
    max-height: 300px !important;
    width: 100% !important;
    min-width: 100% !important;
    object-fit: cover !important;
    object-position: center !important;
  }
  
  .card-custom .tilt-card {
    min-height: 420px !important;
  }
  
  .card-custom .tilt-card .p-3 {
    min-height: 170px !important;
  }
}

/* === MEDIUM SCREENS (3 cards per row) === */
@media (min-width: 769px) and (max-width: 1199px) {
  .card-custom .tilt-card img.img-fluid,
  .card-custom .tilt-card video.portfolio-video {
    height: 280px !important; /* Increased height for 3-card layout */
    min-height: 280px !important;
    max-height: 280px !important;
    width: 100% !important;
    min-width: 100% !important;
    object-fit: cover !important;
    object-position: center !important;
  }
  
  .card-custom .tilt-card {
    min-height: 400px !important; /* Consistent card height */
  }
  
  .card-custom .tilt-card .p-3 {
    min-height: 160px !important; /* Consistent content area */
  }
}

/* === TABLET AND MOBILE RESPONSIVE ADJUSTMENTS === */
@media (max-width: 768px) {
  .card-custom .tilt-card img.img-fluid,
  .card-custom .tilt-card video.portfolio-video {
    height: 250px !important; /* Increased mobile height */
    min-height: 250px !important;
    max-height: 250px !important;
    width: 100% !important;
    min-width: 100% !important;
    object-fit: cover !important;
    object-position: center !important;
  }
  
  .card-custom .tilt-card {
    min-height: 380px !important; /* Reduce minimum height on mobile */
  }
  
  .card-custom .tilt-card .p-3 {
    min-height: 160px !important; /* Adjust content height */
  }
}

@media (max-width: 576px) {
  .card-custom .tilt-card img.img-fluid,
  .card-custom .tilt-card video.portfolio-video {
    height: 230px !important; /* Increased small mobile height */
    min-height: 230px !important;
    max-height: 230px !important;
    width: 100% !important;
    min-width: 100% !important;
    object-fit: cover !important;
    object-position: center !important;
  }
  
  .card-custom .tilt-card {
    min-height: 360px !important;
  }
}

/* === NAVBAR COLLAPSE TRANSITION - MOBILE ONLY === */
@media (max-width: 991.98px) {
  .navbar-collapse {
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    transition: max-height 0.5s cubic-bezier(0.4,0,0.2,1), opacity 0.4s cubic-bezier(0.4,0,0.2,1);
    will-change: max-height, opacity;
  }

  .navbar-collapse.show {
    max-height: 500px;
    opacity: 1;
    overflow: visible;
    transition: max-height 0.5s cubic-bezier(0.4,0,0.2,1), opacity 0.4s cubic-bezier(0.4,0,0.2,1);
  }
}

/* === DESKTOP NAVBAR ALWAYS VISIBLE === */
@media (min-width: 992px) {
  .navbar-collapse {
    display: flex !important;
    max-height: none !important;
    opacity: 1 !important;
    overflow: visible !important;
  }
}

/* === ASTROLABE POSITIONING FOR LARGER SCREENS === */
@media (min-width: 769px) {
  /* astrolabe icon margins and overlay positioning are controlled in css/variables.css */
}


/* Featured Works: fix video preview height in portfolio cards */
.featured-works .card-custom.tilt-card .portfolio-video {
  height: 300px !important;
  min-height: 300px !important;
  max-height: 300px !important;
  width: 100% !important;
  object-fit: cover !important;
  object-position: center !important;
}