/* Site-wide image collapse and small/medium viewport fixes
   Purpose: centralize the safe overrides used on tech_support to prevent
   large vertical gaps caused by images/background shapes and min-height rules.
   Rules are intentionally conservative and scoped to common selectors.
*/

/* Prevent decorative backgrounds from creating large off-screen space */
@media (max-width: 1400px) {
  .hero-bg, .main-bg, .main-bg-alt { display: none !important; }
}

/* Ensure interactive containers don't force large min-heights on narrower viewports */
@media (max-width: 1368px) {
  .interactive-content,
  #services-content-container,
  .service-content-section,
  .accordion,
  .accordion .accordion-content {
    min-height: 0 !important;
    max-height: none !important;
    padding-bottom: 0.5rem !important;
  }
}

/* Force hero paragraphs to stack and cap hero images across breakpoints */
@media (max-width: 1368px) {
  .hero-paragraph,
  .hero-paragraph.hero-image-text-align {
    display: block !important;
    align-items: stretch !important;
    gap: 0.75rem !important;
  }

  .hero-paragraph img,
  .hero-image.active,
  #waiting-image,
  #default-image,
  #wires-image {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    max-height: 520px !important;
    object-fit: cover !important;
    margin: 0 0 1rem 0 !important;
    float: none !important;
  }
}

/* Also cover the rotator images used on index.html */
@media (max-width: 1368px) {
  .hero-image.fade,
  .hero-image.show,
  .hero-image-rotator img {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    max-height: 520px !important;
    object-fit: cover !important;
    margin: 0 0 1rem 0 !important;
  }
}

@media (max-width: 1024px) {
  .hero-paragraph img,
  .hero-image.active { max-height: 420px !important; }
}

@media (max-width: 820px) {
  .hero-paragraph img,
  .hero-image.active { max-height: 360px !important; }
}

@media (max-width: 540px) {
  .hero-paragraph img,
  .hero-image.active { max-height: 300px !important; }
}

/* Make sure cards stack on narrower desktop/tablet widths */
@media (max-width: 1368px) {
  .main-cards { grid-template-columns: 1fr !important; gap: 1.5rem !important; width: 100% !important; }
  .main-card { width: 100% !important; max-width: none !important; }
}

/* Center small/stacked media in document_services (video and images) on narrow viewports */
@media (max-width: 820px) {
  .scanning-container,
  .cloud-container,
  .template-container {
    text-align: center !important;
    float: none !important; /* stop floats so auto margins can center */
    margin-left: auto !important;
    margin-right: auto !important;
    margin-bottom: 1rem !important;
    display: block !important;
    max-width: 360px !important; /* limit container width so centered media doesn't span full width */
  }

  .scanning-container video,
  .cloud-container img,
  .template-container img {
    display: block !important;
    margin-left: auto !important;
    margin-right: auto !important;
    max-width: 100% !important;
    height: auto !important;
  }
}

/* About page: center image containers and ensure text is left-aligned when stacked */
@media (max-width: 820px) {
  .too-much-image-container,
  .spoon-kid-image-container,
  .autocorrect-container,
  .hands-container,
  .too-much-image-container img,
  .spoon-kid-image-container img,
  .autocorrect-container img,
  .hands-container img {
    float: none !important;
    display: block !important;
    margin-left: auto !important;
    margin-right: auto !important;
    text-align: center !important;
    max-width: 360px !important;
    width: auto !important;
    height: auto !important;
  }

  /* Override accidental center-alignment applied on very small screens */
  .hero-header,
  .hero-header h2,
  .hero-paragraph,
  .design-philosophy p,
  .design-philosophy ul,
  .service-description,
  .service-description p {
    text-align: left !important;
  }

  /* If any section set text-align:center at narrower breakpoints, ensure left alignment */
  .container .hero-header,
  .container p,
  .container ul {
    text-align: left !important;
  }
}

/* Strengthen image sizing to prevent overflow on very narrow viewports */
@media (max-width: 820px) {
  .too-much-image-container img,
  .spoon-kid-image-container img,
  .autocorrect-container img,
  .hands-container img,
  .scanning-container img,
  .scanning-container video,
  .cloud-container img,
  .template-container img,
  .hero-image,
  .hero-image.active {
    max-width: 100% !important;
    width: auto !important;
    height: auto !important;
    display: block !important;
    box-sizing: border-box !important;
    object-fit: contain !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  /* Ensure containers include padding in their width so images fit */
  .too-much-image-container,
  .spoon-kid-image-container,
  .autocorrect-container,
  .hands-container,
  .scanning-container,
  .cloud-container,
  .template-container {
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: 360px !important;
    padding-left: 10px !important;
    padding-right: 10px !important;
    overflow: hidden !important;
  }
}