/**
 * Inner Pages – Mobile-only spacing and list fixes
 * Pages: Services, Key Technology, OPCA+, About Us, Contact Us
 *
 * a) Spacing: Reduces gap between header and first section; no font/color changes.
 * b) List: Stacks service lists vertically, consistent spacing, no overflow.
 * Breakpoint: max-width: 768px (mobile only). Desktop/tablet unchanged.
 */

@media (max-width: 768px) {
  /* --------------------------------------------------------------------------
     a) SPACING FIX – Header ↔ first section gap
     Default .slide-container uses padding-top: 19rem on small viewports,
     which wastes above-the-fold space. Header is fixed ~56px + 10px padding.
     We use 4rem so the first content section starts closer to the header
     without overlapping. Do not reduce further or content may sit under header.
  -------------------------------------------------------------------------- */
  .home-horizontal .slide-container {
    padding-top: 4rem;
    padding-bottom: 2rem;
  }

  .home-horizontal .section:first-child .slide-container {
    /* padding-top: 4rem; */
  }

  /* --------------------------------------------------------------------------
     Hero / title block vertical space
     .slide-content has min-height: 50vmin which wastes above-the-fold space
     on mobile. Remove min-height so content dictates height.
  -------------------------------------------------------------------------- */
  .home-horizontal .slide-content {
    min-height: 0;
    margin-bottom: 1rem;
  }

  /* --------------------------------------------------------------------------
     Slide body (text under title): reduce top margin so title and body
     feel like one unit, not separated by large gap
  -------------------------------------------------------------------------- */
  .home-horizontal .slide-body {
    margin-top: 0.5rem;
  }

  /* --------------------------------------------------------------------------
     Main title (h1) under the header: reduce bottom margin so subtitle
     and content sit closer; keeps visual balance
  -------------------------------------------------------------------------- */
  .home-horizontal .slide-title,
  .home-horizontal h1.slide-title {
    margin-bottom: 2vmin;
  }

  /* --------------------------------------------------------------------------
     Subtitle (e.g. "Technology", "Turnkey Solutions"): less margin under
     it so list/content starts sooner
  -------------------------------------------------------------------------- */
  .home-horizontal .slide-title-sub {
    margin-bottom: 1.25rem;
  }

  /* --------------------------------------------------------------------------
     Ensure no overlap with fixed header: reserve space for header height
     so content is never clipped under it
  -------------------------------------------------------------------------- */
  .home-horizontal {
    padding-top: 0;
  }

  /* Optional: tighten slide internal padding so first screen shows more
     content. Only padding/margin, no typography change. */
  .home-horizontal .slide-container .container {
    padding-top: 0;
  }

  /* --------------------------------------------------------------------------
     b) LIST RESPONSIVENESS FIX – Service page long lists (Basic Engineering,
     Process Engineering, etc.)
     On desktop these use .row > .col-6 or .col-md-6 with two .two-col-features
     side by side. On mobile we stack columns and force a single-column list
     so text alignment and spacing are consistent, with no overflow or
     horizontal scroll.
  -------------------------------------------------------------------------- */
  /* Stack two-column layout into one column so lists don’t sit side-by-side */
  .home-horizontal .slide-body .row .col-6,
  .home-horizontal .slide-body .row .col-md-6 {
    flex: 0 0 100%;
    max-width: 100%;
    margin-bottom: 0.5rem;
  }

  /* Single-column list; consistent spacing; no horizontal overflow */
  .home-horizontal .two-col-features {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.5rem 0;
    padding-left: 18px;
    padding-right: 12px;
    margin-bottom: 0.75rem;
    max-width: 100%;
    word-wrap: break-word;
  }

  .home-horizontal .two-col-features li {
    margin-bottom: 0.5rem;
    word-wrap: break-word;
    overflow-wrap: break-word;
  }

  /* Prevent list/content from causing horizontal scroll */
  .home-horizontal .slide-body {
    overflow-x: hidden;
    max-width: 100%;
  }

  /* --------------------------------------------------------------------------
     REVERTED: Do NOT set min-height: auto / height: auto on .section,
     .slide, .slide-container, or .full-height.
     Those containers have only position:absolute children (.slide-bg and
     .slide-video-container). With height:auto they collapse to 0, so the
     absolute content gets a 0-height containing block and nothing is visible
     (white screen). Original min-height:100vh from style.css must remain so
     the slide has a real height and content is visible.
  -------------------------------------------------------------------------- */
}

@media (min-width: 768px) and (max-width: 768px) {
  .home-horizontal .section:first-child .slide-container {
      padding-top: 10rem;
  }
}