/* Inteltronics Responsive CSS - Mobile Support */
/* This file adds mobile responsiveness without changing desktop appearance */
/* Content scales to fit screen while maintaining original layout */

/* Mobile viewport fixes */
@media screen and (max-width: 768px) {
  /* Scale the entire page to fit screen width */
  html {
    overflow-x: hidden;
  }
  
  body {
    overflow-x: auto;
    min-width: 100%;
    padding: 5px !important;
    margin: 0 !important;
    -webkit-text-size-adjust: 100%;
  }

  /* Scale tables to fit viewport while keeping layout */
  table {
    transform-origin: top left;
    max-width: 100vw;
  }

  /* Make images scale down to fit */
  img {
    max-width: 100%;
    height: auto !important;
  }

  /* Handle fixed-width divs - scale to fit */
  div[style*="width:"], 
  div[style*="width :"] {
    max-width: 100% !important;
    box-sizing: border-box;
  }

  /* Handle fixed-width table cells */
  td, th {
    max-width: 100%;
  }

  /* Ensure text doesn't overflow */
  p, span, font, h1, h2, h3, h4, h5, h6 {
    word-wrap: break-word;
    overflow-wrap: break-word;
  }

  /* Make horizontal rules responsive */
  hr {
    max-width: 100% !important;
    width: 100% !important;
  }

  /* Keep header layout but scale */
  .header {
    flex-wrap: wrap;
  }

  /* Gallery sections responsive */
  .gallery-section {
    width: 100%;
  }

  .section-heading {
    width: auto !important;
    max-width: 100%;
    box-sizing: border-box;
  }

  .gallery-images {
    flex-wrap: wrap;
  }

  .gallery-images img {
    max-width: 100% !important;
    height: auto !important;
  }
}

/* Smaller mobile screens - scale content to fit */
@media screen and (max-width: 480px) {
  body {
    padding: 3px !important;
  }

  /* Scale down text slightly for small screens */
  h1, h2 {
    font-size: 1.1em !important;
  }

  h3, h4 {
    font-size: 0.95em !important;
  }

  /* Keep text readable */
  font[size="1"], 
  font[size="2"] {
    font-size: 11px !important;
  }
  
  /* Scale images to fill available width */
  img {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
  }
}

/* Ensure viewport-aware scaling */
@media screen and (max-width: 1024px) {
  /* Prevent tables from being too wide */
  table[width], 
  table[style*="width"] {
    max-width: 100% !important;
  }

  /* Handle inline width attributes on divs */
  div {
    max-width: 100%;
    box-sizing: border-box;
  }
}