/* ===================================
   RESPONSIVE CSS FOR INDEX.HTML
   =================================== */

/* ===================================
   GLOBAL RESPONSIVE UTILITIES
   =================================== */

/* Container responsive adjustments */
@media (max-width: 1200px) {
  .container {
    max-width: 95%;
  }
}

@media (max-width: 768px) {
  .container {
    max-width: 98%;
    padding-left: 1rem;
    padding-right: 1rem;
  }
}

@media (max-width: 480px) {
  .container {
    max-width: 100%;
    padding-left: 0.75rem;
    padding-right: 0.75rem;
  }
}

/* ===================================
   NAVIGATION RESPONSIVE
   =================================== */

/* Mobile navigation improvements */
@media (max-width: 991.98px) {
  .navbar {
    padding: 0.5rem 1rem !important;
  }
  
  .navbar-brand img {
    height: 60px !important;
  }
  
  .navbar-burger {
    padding: 0.5rem !important;
    right: 0.75rem !important;
  }
  
  #mobile-menu-overlay {
    padding: 2rem 1rem;
  }
  
  #mobile-menu-overlay ul {
    font-size: 1.5rem !important;
    gap: 1.5rem !important;
  }
  
  #close-mobile-menu {
    top: 1rem !important;
    right: 1rem !important;
    font-size: 2rem !important;
  }
}

@media (max-width: 480px) {
  .navbar-brand img {
    height: 50px !important;
  }
  
  #mobile-menu-overlay ul {
    font-size: 1.3rem !important;
    gap: 1.2rem !important;
  }
}

/* ===================================
   HERO SECTION RESPONSIVE
   =================================== */

@media (max-width: 768px) {
  .hero-section {
    min-height: 80vh;
    padding: 2rem 0;
  }
  
  .hero-content {
    padding: 0 1rem;
    min-height: 50vh;
  }
  
  .hero-headline {
    font-size: 2.2rem !important;
    line-height: 1.2 !important;
    margin-bottom: 1rem !important;
  }
  
  .hero-subtitle {
    font-size: 0.95rem !important;
    margin-bottom: 2rem !important;
    line-height: 1.5 !important;
  }
  
  .hero-button {
    padding: 0.7rem 1.5rem !important;
    font-size: 0.9rem !important;
    width: auto !important;
  }
  
  .hero-divider {
    width: 60% !important;
    margin-bottom: 1.5rem !important;
  }
}

@media (max-width: 480px) {
  .hero-section {
    min-height: 70vh;
  }
  
  .hero-content {
    padding: 0 0.75rem;
    min-height: 40vh;
  }
  
  .hero-headline {
    font-size: 1.8rem !important;
    line-height: 1.1 !important;
    margin-bottom: 0.8rem !important;
  }
  
  .hero-subtitle {
    font-size: 0.9rem !important;
    margin-bottom: 1.5rem !important;
  }
  
  .hero-button {
    padding: 0.6rem 1.2rem !important;
    font-size: 0.85rem !important;
    width: 100% !important;
    justify-content: center !important;
  }
  
  .hero-divider {
    width: 70% !important;
    margin-bottom: 1.2rem !important;
  }
}

/* ===================================
   SPINE COMPARISON SECTION RESPONSIVE
   =================================== */

@media (max-width: 768px) {
  #spine-comparison .section-title {
    font-size: 2.2rem !important;
    margin-bottom: 1.5rem !important;
  }
  
  #spine-comparison p {
    font-size: 1.1rem !important;
    margin-bottom: 2rem !important;
    padding: 0 1rem !important;
  }
  
  .slider-compare-container {
    width: 95vw !important;
    max-width: 95vw !important;
    aspect-ratio: 4/3 !important;
    min-height: 300px !important;
  }
  
  .slider-label {
    font-size: 0.9rem !important;
    padding: 0.3em 0.8em !important;
    top: 15px !important;
  }
  
  .slider-label-left {
    left: 15px !important;
  }
  
  .slider-label-right {
    right: 15px !important;
  }
}

@media (max-width: 480px) {
  #spine-comparison .section-title {
    font-size: 1.8rem !important;
    margin-bottom: 1.2rem !important;
  }
  
  #spine-comparison p {
    font-size: 1rem !important;
    margin-bottom: 1.5rem !important;
    padding: 0 0.75rem !important;
  }
  
  .slider-compare-container {
    width: 98vw !important;
    max-width: 98vw !important;
    aspect-ratio: 1/1 !important;
    min-height: 250px !important;
  }
  
  .slider-label {
    font-size: 0.8rem !important;
    padding: 0.25em 0.6em !important;
    top: 10px !important;
  }
  
  .slider-label-left {
    left: 10px !important;
  }
  
  .slider-label-right {
    right: 10px !important;
  }
  
  .slider-divider-bar {
    height: 60px !important;
  }
}

/* ===================================
   LOGO CAROUSEL SECTION RESPONSIVE
   =================================== */

@media (max-width: 768px) {
  .logo-carousel-section .section-title {
    font-size: 2.2rem !important;
    margin-top: 2rem !important;
  }
  
  .logo-carousel-img {
    max-width: 360px !important;
    max-height: 180px !important;
    width: auto !important;
    height: auto !important;
    min-width: 250px !important;
    object-fit: contain !important;
    object-position: center !important;
  }
  
  .logo-carousel-track {
    gap: 2vw !important;
  }
}

@media (max-width: 480px) {
  .logo-carousel-section .section-title {
    font-size: 1.8rem !important;
    margin-top: 1.5rem !important;
  }
  
  .logo-carousel-img {
    max-width: 280px !important;
    max-height: 140px !important;
    width: auto !important;
    height: auto !important;
    min-width: 200px !important;
    object-fit: contain !important;
    object-position: center !important;
  }
  
  .logo-carousel-track {
    gap: 1.5vw !important;
  }
}

/* ===================================
   NUMBERS SECTION RESPONSIVE
   =================================== */

@media (max-width: 768px) {
  .numbers-section {
    padding-top: 6rem !important;
    padding-bottom: 6rem !important;
  }
  
  .numbers-section .section-title {
    font-size: 2.5rem !important;
    margin-bottom: 3rem !important;
  }
  
  .number-value {
    font-size: 3.5rem !important;
    margin-bottom: 0.8rem !important;
  }
  
  .number-description {
    font-size: 1rem !important;
    line-height: 1.4 !important;
  }
  
  .number-item {
    padding: 1.5rem 0.75rem !important;
    margin-bottom: 2rem !important;
  }
}

@media (max-width: 480px) {
  .numbers-section {
    padding-top: 4rem !important;
    padding-bottom: 4rem !important;
  }
  
  .numbers-section .section-title {
    font-size: 2rem !important;
    margin-bottom: 2.5rem !important;
  }
  
  .number-value {
    font-size: 3rem !important;
    margin-bottom: 0.6rem !important;
  }
  
  .number-description {
    font-size: 0.95rem !important;
    line-height: 1.3 !important;
  }
  
  .number-item {
    padding: 1.2rem 0.5rem !important;
    margin-bottom: 1.5rem !important;
  }
}

/* ===================================
   SKEPTICAL SECTION RESPONSIVE
   =================================== */

@media (max-width: 768px) {
  .skeptical-section {
    padding-bottom: 15rem !important;
  }
  
  .skeptical-title {
    font-size: 2rem !important;
    margin-bottom: 1.2rem !important;
  }
  
  .skeptical-subtitle {
    font-size: 1.1rem !important;
    margin-bottom: 2rem !important;
    padding: 0 1rem !important;
  }
  
  .skeptical-btn {
    font-size: 1rem !important;
    padding: 1rem 2.5rem !important;
    width: auto !important;
  }
}

@media (max-width: 480px) {
  .skeptical-section {
    padding-bottom: 12rem !important;
  }
  
  .skeptical-title {
    font-size: 1.6rem !important;
    margin-bottom: 1rem !important;
  }
  
  .skeptical-subtitle {
    font-size: 1rem !important;
    margin-bottom: 1.5rem !important;
    padding: 0 0.75rem !important;
  }
  
  .skeptical-btn {
    font-size: 0.95rem !important;
    padding: 0.9rem 2rem !important;
    width: 100% !important;
    justify-content: center !important;
  }
}

/* ===================================
   WHY CHOOSE SECTION RESPONSIVE
   =================================== */

@media (max-width: 768px) {
  .why-choose-section {
    padding: 6rem 1.5rem !important;
  }
  
  .why-choose-section .section-title {
    font-size: 2.5rem !important;
    margin-bottom: 3rem !important;
  }
  
  .happy-dog-image {
    max-width: 95% !important;
    margin-bottom: 1.5rem !important;
  }
  
  .features-list {
    max-width: 100% !important;
  }
  
  .feature-item {
    flex-direction: column !important;
    text-align: center !important;
    gap: 1.5rem !important;
    margin-bottom: 2rem !important;
    padding: 1.5rem !important;
  }
  
  .feature-item .feature-icon {
    width: 70px !important;
    height: 70px !important;
    margin-bottom: 1rem !important;
  }
  
  .feature-item .feature-title {
    font-size: 1.3rem !important;
    margin-bottom: 0.6rem !important;
  }
  
  .feature-item .feature-description {
    font-size: 1rem !important;
    line-height: 1.5 !important;
  }
}

@media (max-width: 480px) {
  .why-choose-section {
    padding: 5rem 1rem !important;
  }
  
  .why-choose-section .section-title {
    font-size: 2rem !important;
    margin-bottom: 2.5rem !important;
  }
  
  .happy-dog-image {
    max-width: 98% !important;
    margin-bottom: 1.2rem !important;
  }
  
  .feature-item {
    padding: 1.2rem !important;
    margin-bottom: 1.5rem !important;
  }
  
  .feature-item .feature-icon {
    width: 60px !important;
    height: 60px !important;
    margin-bottom: 0.8rem !important;
  }
  
  .feature-item .feature-title {
    font-size: 1.2rem !important;
    margin-bottom: 0.5rem !important;
  }
  
  .feature-item .feature-description {
    font-size: 0.95rem !important;
    line-height: 1.4 !important;
  }
}

/* ===================================
   TESTIMONIALS SECTION RESPONSIVE
   =================================== */

@media (max-width: 768px) {
  .testimonials-section {
    padding-top: 4rem !important;
    padding-bottom: 4rem !important;
  }
  
  .testimonials-section .section-title {
    font-size: 2.5rem !important;
    margin-bottom: 3rem !important;
  }
  
  .testimonial-card-carousel {
    padding: 2.5rem 2rem !important;
  }
  
  .testimonial-text-carousel {
    font-size: 1.1rem !important;
    line-height: 1.6 !important;
    margin-bottom: 2rem !important;
  }
  
  .author-avatar-carousel {
    width: 70px !important;
    height: 70px !important;
  }
  
  .author-name-carousel {
    font-size: 1.1rem !important;
  }
  
  .author-title-carousel {
    font-size: 0.9rem !important;
  }
  
  .testimonials-carousel-arrow {
    width: 40px !important;
    height: 40px !important;
  }
}

@media (max-width: 480px) {
  .testimonials-section {
    padding-top: 3rem !important;
    padding-bottom: 3rem !important;
  }
  
  .testimonials-section .section-title {
    font-size: 2rem !important;
    margin-bottom: 2.5rem !important;
  }
  
  .testimonial-card-carousel {
    padding: 2rem 1.5rem !important;
  }
  
  .testimonial-text-carousel {
    font-size: 1rem !important;
    line-height: 1.5 !important;
    margin-bottom: 1.5rem !important;
  }
  
  .author-avatar-carousel {
    width: 60px !important;
    height: 60px !important;
  }
  
  .author-name-carousel {
    font-size: 1rem !important;
  }
  
  .author-title-carousel {
    font-size: 0.85rem !important;
  }
  
  .testimonials-carousel-arrow {
    width: 36px !important;
    height: 36px !important;
  }
}

/* ===================================
   TAKE CLOSER LOOK SECTION RESPONSIVE
   =================================== */

@media (max-width: 768px) {
  .take-closer-look-section {
    padding: 4rem 0 !important;
  }
  
  .take-closer-look-section .section-title {
    font-size: 2.5rem !important;
    margin-bottom: 2rem !important;
  }
  
  .apple-carousel {
    max-width: 95vw !important;
    aspect-ratio: 4/3 !important;
  }
  
  .apple-carousel-arrow {
    width: 40px !important;
    height: 40px !important;
  }
  
  .apple-carousel-arrow.left {
    left: 0.25rem !important;
  }
  
  .apple-carousel-arrow.right {
    right: 0.25rem !important;
  }
}

@media (max-width: 480px) {
  .take-closer-look-section {
    padding: 3rem 0 !important;
  }
  
  .take-closer-look-section .section-title {
    font-size: 2rem !important;
    margin-bottom: 1.5rem !important;
  }
  
  .apple-carousel {
    max-width: 98vw !important;
    aspect-ratio: 1/1 !important;
  }
  
  .apple-carousel-arrow {
    width: 36px !important;
    height: 36px !important;
  }
  
  .apple-carousel-arrow.left {
    left: 0.2rem !important;
  }
  
  .apple-carousel-arrow.right {
    right: 0.2rem !important;
  }
}

/* ===================================
   PRICING SECTION RESPONSIVE
   =================================== */

@media (max-width: 768px) {
  .pricing-apple-section {
    padding-top: 4rem !important;
    padding-bottom: 4rem !important;
  }
  
  .pricing-apple-section .section-title {
    font-size: 2.2rem !important;
    margin-bottom: 2rem !important;
  }
  
  .pricing-apple-section .h5 {
    font-size: 1.1rem !important;
  }
  
  .pricing-apple-section .display-3 {
    font-size: 2.2rem !important;
  }
  
  .pricing-apple-section .btn-xl {
    font-size: 1.1rem !important;
    padding: 0.8rem 2rem !important;
    width: auto !important;
  }
  
  .pricing-apple-section model-viewer {
    width: 95vw !important;
    height: 300px !important;
  }
}

@media (max-width: 480px) {
  .pricing-apple-section {
    padding-top: 3rem !important;
    padding-bottom: 3rem !important;
  }
  
  .pricing-apple-section .section-title {
    font-size: 1.8rem !important;
    margin-bottom: 1.5rem !important;
  }
  
  .pricing-apple-section .h5 {
    font-size: 1rem !important;
  }
  
  .pricing-apple-section .display-3 {
    font-size: 1.8rem !important;
  }
  
  .pricing-apple-section .btn-xl {
    font-size: 1rem !important;
    padding: 0.7rem 1.8rem !important;
    width: 100% !important;
    justify-content: center !important;
  }
  
  .pricing-apple-section model-viewer {
    width: 98vw !important;
    height: 250px !important;
  }
}

/* ===================================
   DISCOVER MORE SECTION RESPONSIVE
   =================================== */

@media (max-width: 768px) {
  .discover-more-section {
    padding-top: 4rem !important;
    padding-bottom: 4rem !important;
  }
  
  .discover-more-section .section-title {
    font-size: 2.5rem !important;
    margin-bottom: 3rem !important;
  }
  
  .product-card {
    flex-direction: column !important;
    padding: 2.5rem 2rem !important;
    gap: 2rem !important;
    text-align: center !important;
    min-height: 450px !important;
  }
  
  .product-title {
    font-size: 2rem !important;
    margin-bottom: 1.2rem !important;
  }
  
  .product-description {
    font-size: 1rem !important;
    line-height: 1.6 !important;
    margin-bottom: 1.5rem !important;
  }
  
  .carousel-arrow {
    width: 40px !important;
    height: 40px !important;
  }
  
  .carousel-arrow.prev {
    left: -20px !important;
  }
  
  .carousel-arrow.next {
    right: -20px !important;
  }
}

@media (max-width: 480px) {
  .discover-more-section {
    padding-top: 3rem !important;
    padding-bottom: 3rem !important;
  }
  
  .discover-more-section .section-title {
    font-size: 2rem !important;
    margin-bottom: 2.5rem !important;
  }
  
  .product-card {
    padding: 2rem 1.5rem !important;
    min-height: 400px !important;
  }
  
  .product-title {
    font-size: 1.6rem !important;
    margin-bottom: 1rem !important;
  }
  
  .product-description {
    font-size: 0.95rem !important;
    line-height: 1.5 !important;
    margin-bottom: 1.2rem !important;
  }
  
  .carousel-arrow {
    display: none !important;
  }
}

/* ===================================
   VISUALIZE HAWKSPINE SECTION RESPONSIVE
   =================================== */

/* Hide section on mobile devices */
@media (max-width: 768px) {
  .visualize-hawkspine-section {
    display: none !important;
  }
}

/* ===================================
   FOOTER RESPONSIVE
   =================================== */

@media (max-width: 768px) {
  footer .container {
    padding: 1rem !important;
  }
  
  footer .row {
    text-align: center !important;
  }
  
  footer .border-end {
    border-right: none !important;
    border-bottom: 1px solid #333 !important;
    padding-bottom: 1.5rem !important;
    margin-bottom: 1.5rem !important;
  }
  
  footer .fw-bold {
    font-size: 1.2rem !important;
    margin-bottom: 1rem !important;
  }
  
  footer .nav-link {
    font-size: 0.9rem !important;
    margin-bottom: 0.5rem !important;
  }
}

@media (max-width: 480px) {
  footer .container {
    padding: 0.75rem !important;
  }
  
  footer .fw-bold {
    font-size: 1.1rem !important;
    margin-bottom: 0.8rem !important;
  }
  
  footer .nav-link {
    font-size: 0.85rem !important;
    margin-bottom: 0.4rem !important;
  }
  
  footer .small {
    font-size: 0.8rem !important;
  }
}

/* ===================================
   UTILITY CLASSES FOR RESPONSIVE DESIGN
   =================================== */

/* Hide elements on mobile */
@media (max-width: 768px) {
  .d-md-none {
    display: none !important;
  }
  
  .d-lg-block {
    display: none !important;
  }
}

/* Show elements on mobile */
@media (max-width: 768px) {
  .d-md-block {
    display: block !important;
  }
  
  .d-lg-none {
    display: block !important;
  }
}

/* Text alignment responsive */
@media (max-width: 768px) {
  .text-md-center {
    text-align: center !important;
  }
  
  .text-lg-start {
    text-align: center !important;
  }
}

/* Spacing responsive */
@media (max-width: 768px) {
  .py-md-3 {
    padding-top: 1rem !important;
    padding-bottom: 1rem !important;
  }
  
  .py-md-5 {
    padding-top: 3rem !important;
    padding-bottom: 3rem !important;
  }
  
  .my-md-4 {
    margin-top: 2rem !important;
    margin-bottom: 2rem !important;
  }
}

@media (max-width: 480px) {
  .py-sm-2 {
    padding-top: 0.75rem !important;
    padding-bottom: 0.75rem !important;
  }
  
  .py-sm-4 {
    padding-top: 2rem !important;
    padding-bottom: 2rem !important;
  }
  
  .my-sm-3 {
    margin-top: 1.5rem !important;
    margin-bottom: 1.5rem !important;
  }
}

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

@media (hover: none) and (pointer: coarse) {
  /* Optimize touch interactions */
  .hero-button,
  .cta-button,
  .demo-cta-button,
  .skeptical-btn,
  .learn-more-btn,
  .btn-xl {
    min-height: 44px !important;
    min-width: 44px !important;
  }
  
  /* Increase touch targets */
  .carousel-arrow,
  .testimonials-carousel-arrow,
  .apple-carousel-arrow {
    min-width: 48px !important;
    min-height: 48px !important;
  }
  
  /* Optimize slider for touch */
  .slider-divider {
    min-width: 48px !important;
    min-height: 48px !important;
  }
  
  .slider-divider-circle {
    min-width: 48px !important;
    min-height: 48px !important;
  }
}

/* ===================================
   HIGH DPI DISPLAYS
   =================================== */

@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  /* Ensure crisp images on retina displays */
  .hero-section video,
  .slider-img,
  .happy-dog-image,
  .product-img,
  .author-image-carousel,
  .logo-carousel-img {
    image-rendering: -webkit-optimize-contrast;
    image-rendering: crisp-edges;
  }
}

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

@media print {
  .navbar,
  .scroll-progress-bar,
  .carousel-arrow,
  .testimonials-carousel-arrow,
  .apple-carousel-arrow,
  .slider-divider,
  .hero-button,
  .cta-button,
  .demo-cta-button,
  .skeptical-btn,
  .learn-more-btn,
  .btn-xl {
    display: none !important;
  }
  
  .hero-section {
    min-height: auto !important;
    padding: 2rem 0 !important;
  }
  
  .hero-content {
    position: static !important;
    transform: none !important;
  }
  
  .text-overlay,
  .bottom-vignette {
    display: none !important;
  }
  
  body {
    background: white !important;
    color: black !important;
  }
  
  .bg-black,
  .bg-dark {
    background: white !important;
    color: black !important;
  }
  
  .text-white {
    color: black !important;
  }
  
  .text-secondary {
    color: #666 !important;
  }
}

/* ===================================
   ADDITIONAL RESPONSIVE IMPROVEMENTS
   =================================== */

/* Improve mobile spacing for all sections */
@media (max-width: 768px) {
  .py-vh-5 {
    padding-top: 3rem !important;
    padding-bottom: 3rem !important;
  }
  
  .py-20 {
    padding-top: 4rem !important;
    padding-bottom: 4rem !important;
  }
  
  .py-5 {
    padding-top: 3rem !important;
    padding-bottom: 3rem !important;
  }
  
  .mb-4 {
    margin-bottom: 2rem !important;
  }
  
  .mb-5 {
    margin-bottom: 2.5rem !important;
  }
}

@media (max-width: 480px) {
  .py-vh-5 {
    padding-top: 2rem !important;
    padding-bottom: 2rem !important;
  }
  
  .py-20 {
    padding-top: 3rem !important;
    padding-bottom: 3rem !important;
  }
  
  .py-5 {
    padding-top: 2rem !important;
    padding-bottom: 2rem !important;
  }
  
  .mb-4 {
    margin-bottom: 1.5rem !important;
  }
  
  .mb-5 {
    margin-bottom: 2rem !important;
  }
}

/* Optimize video background for mobile */
@media (max-width: 768px) {
  .video-background-wrapper video {
    object-position: center center !important;
  }
}

/* Improve mobile button spacing */
@media (max-width: 768px) {
  .d-flex.justify-content-center.gap-4 {
    gap: 1rem !important;
    flex-direction: column !important;
    align-items: center !important;
  }
  
  .d-flex.justify-content-center.gap-4 .hero-button {
    width: 100% !important;
    max-width: 300px !important;
  }
}

/* Optimize mobile image display */
@media (max-width: 768px) {
  .happy-dog-image,
  .product-img,
  .author-image-carousel {
    border-radius: 1rem !important;
  }
}

/* Improve mobile text readability */
@media (max-width: 768px) {
  .section-title,
  .hero-headline,
  .product-title,
  .feature-title {
    word-wrap: break-word !important;
    hyphens: auto !important;
  }
}

/* Mobile-first grid improvements */
@media (max-width: 576px) {
  .row.g-4.g-md-6 {
    --bs-gutter-x: 1rem !important;
    --bs-gutter-y: 1rem !important;
  }
  
  .col-12.col-sm-6.col-lg-4 {
    margin-bottom: 1.5rem !important;
  }
}

/* Landscape mobile optimization */
@media (max-width: 768px) and (orientation: landscape) {
  .hero-section {
    min-height: 60vh !important;
  }
  
  .hero-content {
    min-height: 40vh !important;
  }
  
  .py-vh-5,
  .py-20,
  .py-5 {
    padding-top: 2rem !important;
    padding-bottom: 2rem !important;
  }
}

/* Large mobile devices (tablets) */
@media (min-width: 481px) and (max-width: 768px) {
  .hero-headline {
    font-size: 2.5rem !important;
  }
  
  .hero-subtitle {
    font-size: 1rem !important;
  }
  
  .section-title {
    font-size: 2.8rem !important;
  }
  
  .number-value {
    font-size: 4rem !important;
  }
}

/* Extra small devices */
@media (max-width: 360px) {
  .hero-headline {
    font-size: 1.6rem !important;
  }
  
  .hero-subtitle {
    font-size: 0.85rem !important;
  }
  
  .section-title {
    font-size: 1.6rem !important;
  }
  
  .container {
    padding-left: 0.5rem !important;
    padding-right: 0.5rem !important;
  }
}