/* ===================================================================
   MOBILE-FIRST RESPONSIVE ENHANCEMENTS
   Option C: Keep Retro Vibe But Refine with Modern UX
   In The House Productions
   ================================================================== */

/* ===== ROOT VARIABLES ===== */
:root {
  --spacing-xs: 0.5rem;    /* 8px */
  --spacing-sm: 0.75rem;   /* 12px */
  --spacing-md: 1rem;      /* 16px */
  --spacing-lg: 1.5rem;    /* 24px */
  --spacing-xl: 2rem;      /* 32px */
  --spacing-2xl: 3rem;     /* 48px */
  
  --touch-target: 44px;    /* iOS/Android minimum */
  --border-radius: 12px;
  --transition-speed: 0.3s;
}

/* ===== RESPONSIVE CONTAINER ===== */
.responsive-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 1rem; /* Mobile default */
  width: 100%;
}

@media (min-width: 768px) {
  .responsive-container {
    padding: 0 2rem; /* Tablet */
  }
}

@media (min-width: 1024px) {
  .responsive-container {
    padding: 0 3rem; /* Desktop */
  }
}

/* ===== MOBILE-OPTIMIZED HERO LOGO ===== */
.hero-logo-wrapper {
  width: 100%;
  max-width: 320px; /* Mobile: much smaller */
  margin: 1rem auto;
  padding: 0 1rem;
  transition: all var(--transition-speed) ease;
}

@media (min-width: 480px) {
  .hero-logo-wrapper {
    max-width: 400px; /* Large phone */
  }
}

@media (min-width: 768px) {
  .hero-logo-wrapper {
    max-width: 500px; /* Tablet */
    margin: 1.5rem auto;
  }
}

@media (min-width: 1024px) {
  .hero-logo-wrapper {
    max-width: 650px; /* Desktop: full glory */
    margin: 2rem auto;
  }
}

.hero-logo-wrapper img {
  width: 100%;
  height: auto;
  display: block;
}

/* ===== RESPONSIVE TAGLINE ===== */
.tagline {
  font-size: 1.25rem; /* 20px mobile */
  font-weight: 600;
  text-align: center;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.9);
  margin: var(--spacing-lg) auto;
  padding: 0 var(--spacing-md);
  line-height: 1.4;
  letter-spacing: 0.02em;
}

@media (min-width: 480px) {
  .tagline {
    font-size: 1.5rem; /* 24px */
  }
}

@media (min-width: 768px) {
  .tagline {
    font-size: 1.75rem; /* 28px */
    margin: var(--spacing-xl) auto;
  }
}

@media (min-width: 1024px) {
  .tagline {
    font-size: 2rem; /* 32px */
    margin: var(--spacing-2xl) auto;
  }
}

/* ===== MOBILE-OPTIMIZED SERVICE CARDS ===== */
.service-card {
  max-width: 90%; /* Not full width */
  margin: 0 auto var(--spacing-lg);
  padding: var(--spacing-lg);
  border-radius: var(--border-radius);
  transition: all var(--transition-speed) ease;
  cursor: pointer;
  background: rgba(10, 10, 10, 0.95);
  border: 2px solid #C0C0C0;
  box-shadow: 
    0 4px 6px rgba(0, 0, 0, 0.3),
    0 0 20px rgba(227, 30, 36, 0.15);
}

@media (min-width: 480px) {
  .service-card {
    max-width: 85%;
    padding: var(--spacing-xl);
  }
}

@media (min-width: 768px) {
  .service-card {
    max-width: 400px;
    margin: 0 auto var(--spacing-xl);
  }
}

@media (min-width: 1024px) {
  .service-card {
    max-width: 450px;
  }
}

.service-card:hover {
  transform: translateY(-4px);
  border-color: #E31E24;
  box-shadow: 
    0 8px 16px rgba(0, 0, 0, 0.4),
    0 0 30px rgba(227, 30, 36, 0.4);
}

.service-card:active {
  transform: translateY(-2px);
}

/* ===== SERVICE CARD ICONS ===== */
.service-card-icon {
  width: 70px;  /* Smaller on mobile */
  height: 70px;
  margin: 0 auto var(--spacing-md);
  display: block;
  filter: drop-shadow(0 0 12px rgba(227, 30, 36, 0.6));
  transition: all var(--transition-speed) ease;
}

@media (min-width: 480px) {
  .service-card-icon {
    width: 90px;
    height: 90px;
  }
}

@media (min-width: 768px) {
  .service-card-icon {
    width: 110px;
    height: 110px;
    margin-bottom: var(--spacing-lg);
  }
}

@media (min-width: 1024px) {
  .service-card-icon {
    width: 130px;
    height: 130px;
  }
}

.service-card:hover .service-card-icon {
  filter: drop-shadow(0 0 20px rgba(227, 30, 36, 0.9));
  transform: scale(1.05);
}

/* ===== SERVICE CARD TEXT ===== */
.service-card-title {
  font-size: 1.5rem; /* 24px mobile */
  font-weight: 800;
  text-align: center;
  margin-bottom: var(--spacing-sm);
  letter-spacing: 0.05em;
}

@media (min-width: 768px) {
  .service-card-title {
    font-size: 1.75rem; /* 28px */
  }
}

@media (min-width: 1024px) {
  .service-card-title {
    font-size: 2rem; /* 32px */
  }
}

.service-card-subtitle {
  font-size: 0.875rem; /* 14px mobile */
  text-align: center;
  color: #C0C0C0;
  line-height: 1.5;
}

@media (min-width: 768px) {
  .service-card-subtitle {
    font-size: 1rem; /* 16px */
  }
}

/* ===== TOUCH-FRIENDLY BUTTONS ===== */
.btn-responsive {
  min-height: var(--touch-target);
  padding: 0.875rem 2rem;
  font-size: 1rem;
  font-weight: 700;
  border-radius: 8px;
  border: none;
  cursor: pointer;
  transition: all var(--transition-speed) ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  width: 100%; /* Full width on mobile */
  max-width: 100%;
}

@media (min-width: 480px) {
  .btn-responsive {
    width: auto;
    min-width: 200px;
  }
}

@media (min-width: 768px) {
  .btn-responsive {
    padding: 1rem 2.5rem;
    font-size: 1.125rem;
  }
}

/* ===== SPACING UTILITIES ===== */
.section-spacing {
  padding: var(--spacing-xl) 0;
}

@media (min-width: 768px) {
  .section-spacing {
    padding: var(--spacing-2xl) 0;
  }
}

@media (min-width: 1024px) {
  .section-spacing {
    padding: 4rem 0;
  }
}

.breathing-room {
  margin-bottom: var(--spacing-lg);
}

@media (min-width: 768px) {
  .breathing-room {
    margin-bottom: var(--spacing-xl);
  }
}

/* ===== GRID LAYOUTS ===== */
.service-grid {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-lg);
  padding: var(--spacing-md);
}

@media (min-width: 768px) {
  .service-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--spacing-xl);
    padding: var(--spacing-xl);
  }
}

@media (min-width: 1024px) {
  .service-grid {
    gap: var(--spacing-2xl);
    padding: var(--spacing-2xl);
  }
}

/* ===== SCROLLING IMPROVEMENTS ===== */
.smooth-scroll {
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
}

/* ===== CARD SHADOWS - REFINED ===== */
.card-shadow-mobile {
  box-shadow: 
    0 2px 8px rgba(0, 0, 0, 0.2),
    0 0 15px rgba(227, 30, 36, 0.1);
}

@media (min-width: 768px) {
  .card-shadow-mobile {
    box-shadow: 
      0 4px 12px rgba(0, 0, 0, 0.3),
      0 0 20px rgba(227, 30, 36, 0.15);
  }
}

@media (min-width: 1024px) {
  .card-shadow-mobile {
    box-shadow: 
      5px 5px 0px rgba(192, 192, 192, 0.3),
      10px 10px 20px rgba(0, 0, 0, 0.5),
      0 0 30px rgba(227, 30, 36, 0.2);
  }
}

/* ===== TEXT SIZE SCALING ===== */
.responsive-heading-xl {
  font-size: clamp(2rem, 5vw, 4rem);
  line-height: 1.2;
  margin-bottom: var(--spacing-md);
}

.responsive-heading-lg {
  font-size: clamp(1.5rem, 4vw, 3rem);
  line-height: 1.3;
  margin-bottom: var(--spacing-md);
}

.responsive-heading-md {
  font-size: clamp(1.25rem, 3vw, 2rem);
  line-height: 1.4;
  margin-bottom: var(--spacing-sm);
}

.responsive-body {
  font-size: clamp(0.875rem, 2vw, 1.125rem);
  line-height: 1.6;
}

/* ===== MOBILE PERFORMANCE OPTIMIZATIONS ===== */
@media (max-width: 767px) {
  /* Simplify 3D effects on mobile for performance */
  .text-3d-ultra,
  .text-3d-red,
  .text-3d-logo-12k {
    text-shadow: 
      1px 1px 0px rgba(0, 0, 0, 0.8),
      2px 2px 0px rgba(0, 0, 0, 0.7),
      3px 3px 0px rgba(0, 0, 0, 0.6),
      4px 4px 2px rgba(0, 0, 0, 0.5),
      6px 6px 4px rgba(0, 0, 0, 0.4),
      8px 8px 8px rgba(0, 0, 0, 0.3),
      0 0 15px rgba(227, 30, 36, 0.7),
      0 0 30px rgba(227, 30, 36, 0.4);
    filter: drop-shadow(0 0 15px rgba(227, 30, 36, 0.6));
  }
  
  /* Disable animations on mobile to save battery */
  .reduce-motion {
    animation: none !important;
    transition: none !important;
  }
}

/* ===== ASPECT RATIO HELPERS ===== */
.aspect-square {
  aspect-ratio: 1 / 1;
}

.aspect-video {
  aspect-ratio: 16 / 9;
}

.aspect-portrait {
  aspect-ratio: 9 / 16;
}

/* ===== SAFE AREA PADDING (for notches) ===== */
.safe-area-padding {
  padding-left: env(safe-area-inset-left);
  padding-right: env(safe-area-inset-right);
  padding-top: env(safe-area-inset-top);
  padding-bottom: env(safe-area-inset-bottom);
}

/* ===== FOCUS STYLES FOR ACCESSIBILITY ===== */
.focusable:focus-visible {
  outline: 3px solid #FFD700;
  outline-offset: 2px;
  border-radius: 4px;
}

/* ===== PREVENT TEXT SELECTION ON TAP ===== */
.no-select {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

/* ===== LOADING STATES ===== */
.skeleton-loading {
  background: linear-gradient(
    90deg,
    rgba(192, 192, 192, 0.1) 0%,
    rgba(192, 192, 192, 0.2) 50%,
    rgba(192, 192, 192, 0.1) 100%
  );
  background-size: 200% 100%;
  animation: skeletonShimmer 1.5s ease-in-out infinite;
}

@keyframes skeletonShimmer {
  0% {
    background-position: -200% 0;
  }
  100% {
    background-position: 200% 0;
  }
}

/* ===== HORIZONTAL SCROLL FOR CARDS (MOBILE) ===== */
@media (max-width: 767px) {
  .horizontal-scroll-mobile {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    gap: var(--spacing-md);
    padding: var(--spacing-md);
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none; /* Firefox */
  }
  
  .horizontal-scroll-mobile::-webkit-scrollbar {
    display: none; /* Chrome/Safari */
  }
  
  .horizontal-scroll-mobile > * {
    scroll-snap-align: center;
    flex: 0 0 85%;
    max-width: 320px;
  }
}

/* ===== BOTTOM NAVIGATION SAFE AREA ===== */
.bottom-nav-spacer {
  height: calc(60px + env(safe-area-inset-bottom));
  min-height: 60px;
}

/* ===== IMPROVED TRANSITIONS ===== */
.smooth-transition {
  transition: all var(--transition-speed) cubic-bezier(0.4, 0, 0.2, 1);
}

.smooth-transition-slow {
  transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ===== BACKDROP BLUR FOR MODALS/OVERLAYS ===== */
.backdrop-blur {
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  background: rgba(0, 0, 0, 0.75);
}

/* ===== MOBILE MODAL OPTIMIZATION ===== */
@media (max-width: 767px) {
  .modal-mobile-fullscreen {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    border-radius: 0;
    max-width: 100%;
    max-height: 100%;
  }
}

/* ===== PULL-TO-REFRESH INDICATOR ===== */
.pull-to-refresh {
  overscroll-behavior-y: contain;
}