/*
 * Mobile Responsive Fixes
 * ========================
 * This file contains ONLY mobile-specific fixes.
 * Desktop and tablet layouts remain completely unchanged.
 */

@media only screen and (max-width: 992px) {
  #content {
    margin-top: 70px !important;
  }
  
  /* Hide footer background image on tablet and mobile */
  footer .abs.end-0.bottom-0,
  footer div[style*="width:35%"],
  footer img[src*="c1 (1).png"] {
    display: none !important;
  }
}

@media only screen and (max-width: 767px) {
  /* --------------------------------------------------
     1. Home Page — About Section Image Overlap
     Keep the desktop overlap design, but scale it down.
     -------------------------------------------------- */
  
  /* Make the hardcoded road image responsive */
  section .relative > .d-inline-block img[style*="454"] {
    width: 100% !important;
    max-width: 454px !important;
    height: auto !important;
  }
  
  /* Keep the overlapping people image absolute, but responsive */
  section .relative > .abs.w-80 {
    width: 60% !important; /* Scale down relative to container */
    z-index: 2;
  }
  
  section .relative > .abs.w-80 img {
    width: 100% !important;
    height: auto !important;
  }
  
  /* The yellow "15 years" box should stay bottom-right but scale */
  section .relative > .abs.bottom-0.end-0 {
    padding: 15px !important;
    transform: scale(0.8);
    transform-origin: bottom right;
    margin-bottom: -10px;
    margin-right: -10px;
    z-index: 3;
  }

  /* --------------------------------------------------
     2. Footer Background Image & Contact Section
     Make the person image cover the full footer and 
     hide the empty contact section box on mobile.
     -------------------------------------------------- */
  
  /* Hide the entire section containing the contact info so it doesn't leave an empty colored box */
  section:has(.grid-divider.sm-hide) {
    display: none !important;
  }
  
  footer.section-dark {
    position: relative !important;
    overflow: hidden !important;
  }

  footer.section-dark > img.abs.end-0.bottom-0 {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    opacity: 0.15 !important;
    z-index: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
  }
  
  footer .container {
    position: relative;
    z-index: 2;
  }

  /* --------------------------------------------------
     3. Project Details — Yellow Info Section
     Ensure the yellow info boxes wrap properly but 
     keep the desktop styling.
     -------------------------------------------------- */
  .col-md-1-5 {
    width: 100% !important;
    margin-bottom: 15px;
  }

  /* Keep the yellow background from bg-color */
  .border-gray {
    background-color: #fff; /* Default fallback */
  }

  /* Ensure the highlight section isn't cut off */
  #highlight {
    display: flex !important;
    flex-wrap: wrap !important;
    overflow: visible !important;
  }
  
  #highlight > div {
    width: 100% !important;
  }

  /* --------------------------------------------------
     4. Service Area — Hero Title
     Use a stacked, responsive layout on small screens
     and override any inline margins that break layout.
     -------------------------------------------------- */

  /* Stack the heading lines vertically on mobile */
  .banner-heading {
    display: flex !important;
    flex-direction: column !important;
    flex-wrap: nowrap !important;
    gap: 8px !important;
    align-items: flex-start !important;
    justify-content: center !important;
    padding-right: 10px !important;
  }

  /* Ensure the dynamic area name doesn't use hardcoded offsets */
  #areaName {
    margin: 0 !important;
    font-size: 2.2rem !important;
    line-height: 1.05 !important;
    word-break: normal !important;
    overflow-wrap: break-word !important;
    white-space: normal !important;
  }

  /* Slightly reduce h2 on small screens to avoid forced breaks */
  .banner-heading h2 {
    font-size: 1.4rem !important;
    line-height: 1.05 !important;
    margin: 0 !important;
  }

  /* Tamil-specific normalisation (applies when html[lang=ta] is present) */
  html[lang="ta"] #areaName,
  html[lang="ta"] .banner-heading h1,
  html[lang="ta"] .banner-heading h2 {
    word-break: normal !important;
    overflow-wrap: break-word !important;
    letter-spacing: 0 !important;
  }

  /* --------------------------------------------------
     5. Navbar & Hero Spacing 
     -------------------------------------------------- */
  #content > #top + section {
    padding-top: 60px !important;
  }
  #subheader {
    padding-top: 60px !important;
  }

  /* --------------------------------------------------
     6. Project Image Banner
     Make it scale properly without cropping or rotation.
     -------------------------------------------------- */
  img#banner {
    width: 100% !important;
    height: auto !important;
    object-fit: contain !important;
    max-height: 400px;
  }

  /* General overflow fixes */
  #wrapper, .container {
    overflow-x: hidden !important;
  }
}

@media only screen and (max-width: 480px) {
  #areaName {
    font-size: 2rem !important;
  }
  
  section .relative > .abs.bottom-0.end-0 {
    transform: scale(0.7);
  }
}

/* Ensure hero is left-aligned on mobile for both Tamil and English */
@media only screen and (max-width: 767px) {
  html[lang="ta"] .banner-heading,
  html[lang="en"] .banner-heading,
  .banner-heading {
    flex-direction: column !important;
    align-items: flex-start !important;
    text-align: left !important;
    padding-left: 8px !important;
    padding-right: 8px !important;
  }

  html[lang="ta"] #areaName,
  html[lang="en"] #areaName,
  #areaName {
    text-align: left !important;
    margin-left: 0 !important;
    overflow-wrap: break-word !important;
  }
}