/* Virtual Summit Production Agency - Responsive CSS */

/* ===== RESPONSIVE BREAKPOINTS ===== */
/* Bootstrap 5 breakpoints:
   xs: <576px
   sm: ≥576px
   md: ≥768px
   lg: ≥992px
   xl: ≥1200px
   xxl: ≥1400px
*/

/* ===== DISABLE ALL ANIMATIONS FOR MOBILE ===== */
@media (max-width: 767.98px) {
  /* Disable all animations, transitions and transforms for mobile */
  /* BUT preserve Bootstrap functionality */
  *:not(.navbar-collapse):not(.navbar-toggler):not(.collapse):not(.collapsing):not(.modal):not(.modal-dialog):not(.fade):not(.dropdown-menu):not(.dropdown-toggle):not(.show):not(.showing):not(.hiding),
  *:not(.navbar-collapse):not(.navbar-toggler):not(.collapse):not(.collapsing):not(.modal):not(.modal-dialog):not(.fade):not(.dropdown-menu):not(.dropdown-toggle):not(.show):not(.showing):not(.hiding)::before,
  *:not(.navbar-collapse):not(.navbar-toggler):not(.collapse):not(.collapsing):not(.modal):not(.modal-dialog):not(.fade):not(.dropdown-menu):not(.dropdown-toggle):not(.show):not(.showing):not(.hiding)::after {
    animation-duration: 0s !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0s !important;
    transition-delay: 0s !important;
    transition-property: none !important;
    transform: none !important;
  }
  
  /* Preserve Bootstrap navbar functionality */
  .navbar-collapse,
  .navbar-toggler,
  .collapse,
  .collapsing,
  .modal,
  .modal-dialog,
  .fade,
  .dropdown-menu,
  .dropdown-toggle,
  .show,
  .showing,
  .hiding {
    transition: inherit !important;
    animation: inherit !important;
    transform: inherit !important;
  }
  
  /* Disable hover effects for cards */
  .card:hover,
  .card:focus {
    transform: none !important;
    box-shadow: 0 6px 6px -1px rgba(0, 0, 0, 0.1) !important;
  }
  
  /* Disable hover effects for service items */
  .service-item:hover,
  .service-item:focus {
    transform: none !important;
    box-shadow: 0 6px 6px -1px rgba(0, 0, 0, 0.1) !important;
  }
  
  /* Disable hover effects for team members */
  .team-member:hover,
  .team-member:focus {
    transform: none !important;
    box-shadow: 0 6px 6px -1px rgba(0, 0, 0, 0.1) !important;
  }
  
  .team-photo:hover,
  .team-photo:focus {
    transform: none !important;
  }
  
  /* Disable hover effects for gallery items */
  .gallery-item:hover,
  .gallery-item:focus {
    transform: none !important;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1) !important;
  }
  
  /* Disable hover effects for review cards */
  .review-card:hover,
  .review-card:focus {
    transform: none !important;
    box-shadow: 0 8px 6px -1px rgba(0, 0, 0, 0.1) !important;
  }
  
  /* Disable hover effects for FAQ cards */
  .faq-card:hover,
  .faq-card:focus {
    transform: none !important;
    box-shadow: 0 5px 7px -1px rgba(0, 0, 0, 0.1) !important;
  }
  
  /* Disable hover effects for buttons */
  .btn-primary:hover,
  .btn-primary:focus {
    background-color: var(--primary-blue) !important;
    border-color: var(--primary-blue) !important;
    transform: none !important;
  }
  
  /* Disable hover effects for social links */
  .social-link:hover,
  .social-link:focus {
    transform: none !important;
    background: white !important;
    color: #666 !important;
    border-color: #e0e0e0 !important;
  }
  
  .facebook-link:hover,
  .facebook-link:focus {
    background: white !important;
    border-color: #e0e0e0 !important;
    color: #666 !important;
  }
  
  .linkedin-link:hover,
  .linkedin-link:focus {
    background: white !important;
    border-color: #e0e0e0 !important;
    color: #666 !important;
  }
  
  .x-link:hover,
  .x-link:focus {
    background: white !important;
    border-color: #e0e0e0 !important;
    color: #666 !important;
  }
  
  /* Disable form focus effects */
  .form-control:focus {
    border-color: var(--neutral-300) !important;
    box-shadow: none !important;
  }
  
  /* Disable footer link hover effects */
  .footer a:hover,
  .footer a:focus {
    color: var(--neutral-300) !important;
  }
  
  /* Disable hero blob animation */
  .hero-blob {
    animation: none !important;
  }
  
  /* Disable scroll behavior for mobile */
  html {
    scroll-behavior: auto !important;
  }
  
  /* Disable any remaining transform effects */
  .navbar-toggler,
  .navbar-collapse,
  .breadcrumb-image,
  .contact-form,
  .section-title,
  .section-subtitle {
    transform: none !important;
    transition: none !important;
  }
  
  /* Disable all keyframe animations */
  @keyframes none {
    0%, 100% { transform: none; }
  }
  
  /* Override all animation names */
  [class*="animate"],
  [class*="animation"],
  .animated,
  .float,
  .bounce,
  .pulse,
  .zoom,
  .fade {
    animation: none !important;
  }
  
  /* Disable progressive enhancement effects */
  .scroll-to-top {
    transition: none !important;
    opacity: 1 !important;
  }
  
  /* Disable any CSS variables related to transitions */
  :root {
    --transition-base: none !important;
    --transition-fast: none !important;
  }
  
  /* Disable image loading effects */
  img {
    transition: none !important;
    transform: none !important;
  }
  
  /* Disable any modal or overlay animations */
  .modal,
  .overlay,
  .popup {
    transition: none !important;
    animation: none !important;
  }
}

/* ===== MOBILE FIRST APPROACH ===== */

/* Extra Small devices (phones, less than 576px) */
@media (max-width: 575.98px) {
  /* Typography adjustments for mobile */
  :root {
    --font-size-3xl: 1.5rem;
    --font-size-2xl: 1.25rem;
    --font-size-xl: 1.125rem;
    --section-padding: 3rem 0;
  }
  
  /* Hero section mobile */
  .hero-section {
    min-height: 80vh;
    text-align: center;
  }
  
  .hero-content {
    padding: 0 1rem;
    padding-top: 275px;
}
  
  /* Cards mobile spacing */
  .card {
    margin-bottom: 1rem;
  }
  
  /* Services mobile */
  .service-item {
    padding: 1.5rem;
    margin-bottom: 1rem;
  }
  
  /* Team mobile */
  .team-member {
    padding: 1rem;
    margin-bottom: 1rem;
  }
  
  .team-photo {
    width: 80px;
    height: 80px;
  }
  
  /* Contact form mobile */
  .contact-form {
    padding: 1.5rem;
  }
  
  /* Gallery mobile */
  .gallery-grid {
    grid-template-columns: 1fr;
    gap: 1rem;
  }
  
  /* Footer mobile */
  .footer {
    padding: 2rem 0 1rem;
  }
  
  /* Utility classes mobile */
  .text-center-mobile {
    text-align: center;
  }
  
  .mb-mobile-3 {
    margin-bottom: 1.71rem;
  }
}

/* Small devices (landscape phones, 576px and up) */
@media (min-width: 576px) and (max-width: 767.98px) {
  /* Typography adjustments for small tablets */
  :root {
    --font-size-3xl: 1.75rem;
    --font-size-2xl: 1.5rem;
    --section-padding: 4rem 0;
  }
  
  /* Hero section small */
  .hero-section {
    min-height: 85vh;
  }
  
  /* Gallery small */
  .gallery-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 1.25rem;
  }
  
  /* Services small */
  .service-item {
    margin-bottom: 1.70rem;
  }
  
  /* Team small */
  .team-photo {
    width: 100px;
    height: 100px;
  }
}

/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) and (max-width: 991.98px) {
  /* Typography adjustments for tablets */
  :root {
    --font-size-3xl: 2rem;
    --font-size-2xl: 1.5rem;
    --section-padding: 4.5rem 0;
  }
  
  /* Hero section tablet */
  .hero-section {
    min-height: 90vh;
  }
  
  /* Gallery tablet */
  .gallery-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
  }
  
  /* Services tablet - 2 columns */
  .services-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
  }
  
  /* Team tablet */
  .team-photo {
    width: 110px;
    height: 110px;
  }
}

/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) and (max-width: 1199.98px) {
  /* Typography adjustments for desktop */
  :root {
    --font-size-3xl: 2.25rem;
    --font-size-2xl: 1.5rem;
    --section-padding: 5rem 0;
  }
  
  /* Gallery desktop */
  .gallery-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
  }
  
  /* Services desktop - 3 columns */
  .services-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
  }
}

/* Extra large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {
  /* Typography adjustments for large desktop */
  :root {
    --font-size-3xl: 2.5rem;
    --font-size-2xl: 1.75rem;
    --section-padding: 6rem 0;
  }
  
  /* Hero section large desktop */
  .hero-section {
    min-height: 100vh;
  }
  
  /* Gallery large desktop */
  .gallery-grid {
    grid-template-columns: repeat(4, 1fr);
    gap: 2rem;
  }
  
  /* Services large desktop - 3 columns */
  .services-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
  }
  
  /* Container max-width adjustments */
  .container-custom {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 2rem;
  }
}

/* ===== PRINT STYLES ===== */
@media print {
  /* Remove animations and transitions for print */
  *,
  *::before,
  *::after {
    animation-duration: 0s !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0s !important;
    transition-delay: 0s !important;
  }
  
  /* Remove shadows and gradients for print */
  .card,
  .service-item,
  .team-member,
  .review-card,
  .faq-card,
  .contact-form,
  .gallery-item {
    box-shadow: none !important;
    background: white !important;
  }
  
  /* Ensure text is readable in print */
  body {
    color: black !important;
    background: white !important;
  }
  
  /* Hide non-essential elements */
  .hero-decorative,
  .hero-blob {
    display: none !important;
  }
}

/* ===== ACCESSIBILITY IMPROVEMENTS ===== */
@media (prefers-reduced-motion: reduce) {
  /* Remove all animations and transitions */
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  
  /* Remove hover effects */
  .card:hover,
  .service-item:hover,
  .team-member:hover,
  .gallery-item:hover {
    transform: none !important;
  }
}

/* High contrast mode support */
@media (prefers-contrast: high) {
  :root {
    --neutral-300: #727272;
    --neutral-600: #383435;
    --neutral-800: #000000;
    --neutral-900: #000000;
  }
  
  .card,
  .service-item,
  .team-member,
  .review-card,
  .faq-card,
  .contact-form {
    border: 2px solid var(--neutral-800);
  }
  
  .btn-primary {
    border: 2px solid var(--primary-blue-dark);
  }
}

/* ===== DARK MODE SUPPORT ===== */