/**
 * Mobile Refinements - Premium Editorial Atmosphere
 * Careful refinements for spacing rhythm, typography scale, and visual density
 */

/* ====================================
   Mobile Typography Scale
   ==================================== */

@media (max-width: 767px) {
  /* Hero section - maintain impact but reduce overwhelming scale */
  .hero-section h1,
  .hero-section .display-3,
  .hero-section .display-4 {
    font-size: 2.25rem !important;
    line-height: 1.15 !important;
    letter-spacing: -0.02em !important;
  }

  /* Section headings - balanced hierarchy */
  h2.display-4,
  h2.display-5,
  .display-4,
  .display-5 {
    font-size: 1.875rem !important;
    line-height: 1.2 !important;
    letter-spacing: -0.02em !important;
  }

  /* Body text - comfortable reading */
  .display-28,
  p.display-28 {
    font-size: 1rem !important;
    line-height: 1.65 !important;
  }

  /* Small uppercase labels - maintain delicacy */
  .fs-smallest {
    font-size: 0.6875rem !important;
    letter-spacing: 1.5px !important;
  }
}

/* ====================================
   Mobile Spacing Rhythm
   ==================================== */

@media (max-width: 767px) {
  /* Section padding - calmer vertical rhythm */
  section.pt-8,
  section.pt-lg-12 {
    padding-top: 3.5rem !important;
  }

  section.pb-8,
  section.pb-lg-12 {
    padding-bottom: 3.5rem !important;
  }

  section.pt-6,
  section.pt-lg-9,
  section.pt-lg-10 {
    padding-top: 3rem !important;
  }

  section.pb-6,
  section.pb-lg-9,
  section.pb-lg-10 {
    padding-bottom: 3rem !important;
  }

  /* Internal section spacing - breathing room */
  .mb-8,
  .mb-lg-10,
  .mb-lg-12 {
    margin-bottom: 2.5rem !important;
  }

  .mb-6,
  .mb-lg-8 {
    margin-bottom: 2rem !important;
  }

  .mb-5 {
    margin-bottom: 1.5rem !important;
  }

  /* Container padding - comfortable edges */
  .container {
    padding-left: 1.25rem !important;
    padding-right: 1.25rem !important;
  }
}

/* ====================================
   Mobile Hero Section
   ==================================== */

@media (max-width: 767px) {
  .hero-section {
    min-height: 85vh !important;
    padding-top: 15vh !important;
    padding-bottom: 4rem !important;
  }

  .hero-section .row {
    gap: 2.5rem !important;
  }

  /* Hero image - preserve composition */
  .hero-section img {
    max-height: 50vh;
    object-fit: cover;
    border-radius: 2px;
  }
}

/* ====================================
   Mobile About Section
   ==================================== */

@media (max-width: 767px) {
  .about-section .row {
    gap: 2.5rem !important;
  }

  /* About image - maintain aspect ratio */
  .about-section img {
    width: 100%;
    height: auto;
    max-height: 60vh;
    object-fit: cover;
    border-radius: 2px;
  }
}

/* ====================================
   Mobile Services Section
   ==================================== */

@media (max-width: 767px) {
  /* Services accordion - reduce top padding */
  .services-accordion {
    padding-top: 0 !important;
  }

  .service-item-wrapper {
    padding: 1rem 0 !important;
  }

  /* Process strip - comfortable mobile layout */
  .process-sequence {
    gap: 1.25rem !important;
  }

  .process-label {
    font-size: 0.8125rem !important;
  }

  .process-number {
    font-size: 0.6875rem !important;
  }
}

/* ====================================
   Mobile Case Studies
   ==================================== */

@media (max-width: 767px) {
  /* Case study cards - maintain premium feel */
  .case-study-card {
    margin-bottom: 2rem !important;
  }

  .case-study-card img {
    height: 280px !important;
    object-fit: cover;
  }

  /* Case study grid spacing */
  .case-studies-grid .row {
    row-gap: 2rem !important;
  }
}

/* ====================================
   Mobile Testimonials
   ==================================== */

@media (max-width: 767px) {
  /* Testimonial cards - enhanced readability */
  .testimonial-item {
    padding: 0 !important;
    margin-bottom: 2.5rem !important;
  }

  .testimonial-quote {
    font-size: 1.0625rem !important;
    line-height: 1.7 !important;
    margin-bottom: 1.5rem !important;
  }

  .testimonial-signature {
    font-size: 1rem !important;
    margin-bottom: 0.375rem !important;
  }

  .testimonial-credentials {
    font-size: 0.875rem !important;
    opacity: 0.6 !important;
  }

  /* Remove offset on mobile */
  .testimonial-item-offset {
    margin-top: 0 !important;
  }

  /* Testimonial section header spacing */
  .testimonial-section .mb-8,
  .testimonial-section .mb-lg-12 {
    margin-bottom: 2.5rem !important;
  }
}

/* ====================================
   Mobile Contact Form
   ==================================== */

@media (max-width: 767px) {
  .contact-section-minimal {
    min-height: auto !important;
    padding-top: 3rem !important;
    padding-bottom: 3rem !important;
  }

  .contact-form-warm {
    margin-top: 2rem !important;
  }

  .contact-form-warm .row {
    row-gap: 1.25rem !important;
  }

  .form-input-warm,
  .form-textarea-warm {
    font-size: 1rem !important;
    padding: 0.875rem 1rem !important;
  }

  .form-label-warm {
    font-size: 0.875rem !important;
    margin-bottom: 0.5rem !important;
  }
}

/* ====================================
   Mobile Footer
   ==================================== */

@media (max-width: 767px) {
  footer .row.mt-n2-9 {
    margin-top: 0 !important;
  }

  footer .col-lg-5,
  footer .col-lg-6 {
    margin-bottom: 2rem !important;
  }

  footer .footer-logo {
    margin-bottom: 1.5rem !important;
  }

  footer address {
    font-size: 0.9375rem !important;
    line-height: 1.6 !important;
  }

  /* Footer navigation - clean stack */
  footer .col-md-10.col-lg-8 ul {
    gap: 1rem !important;
  }
}

/* ====================================
   Mobile Header/Navigation
   ==================================== */

@media (max-width: 991px) {
  /* Mobile menu refinements */
  .navbar-nav {
    padding-top: 2rem !important;
    padding-bottom: 2rem !important;
  }

  .navbar-nav li {
    margin-bottom: 1rem !important;
  }

  .navbar-nav a {
    font-size: 1.125rem !important;
    padding: 0.5rem 0 !important;
  }

  /* Hide language switcher on mobile - can add to mobile menu if needed */
  .language-switcher {
    display: none !important;
  }
}

/* ====================================
   Mobile Image Optimization
   ==================================== */

@media (max-width: 767px) {
  /* Ensure all images are responsive */
  img {
    max-width: 100%;
    height: auto;
  }

  /* Maintain aspect ratios for editorial images */
  .img-fluid {
    width: 100%;
    height: auto;
  }

  /* Featured images - comfortable mobile crops */
  .featured-image,
  .case-study-image,
  .portfolio-image {
    aspect-ratio: 4/3;
    object-fit: cover;
    width: 100%;
  }
}

/* ====================================
   Mobile Button Adjustments
   ==================================== */

@media (max-width: 767px) {
  .btn-style01 {
    font-size: 0.8125rem !important;
    letter-spacing: 0.5px !important;
  }

  .btn-style01.md {
    font-size: 0.75rem !important;
  }

  /* Full-width buttons where appropriate */
  .contact-form-warm .btn-style01 {
    width: 100%;
    justify-content: center;
  }
}

/* ====================================
   Mobile Premium Atmosphere Preservation
   ==================================== */

@media (max-width: 767px) {
  /* Maintain subtle transitions and animations */
  .wow {
    animation-duration: 0.6s !important;
  }

  /* Preserve editorial spacing for readability */
  p + p {
    margin-top: 1.25rem;
  }

  /* Maintain visual hierarchy through subtle contrast */
  .bg-light {
    background-color: #f7f7f7 !important;
  }

  .bg-secondary {
    background-color: #1a1a1a !important;
  }

  /* Preserve premium feel through refined borders */
  .border-color-light-white {
    border-color: rgba(255, 255, 255, 0.1) !important;
  }
}