/* Page-specific styles for solution-manufacturing-customer */
/* Add overrides here — never edit compat.css for page-specific changes */

/* The About Us subtitle, the "4.9" rating number and "15.5K Genuine Rating"
   are hardcoded inline to a near-white gray (#D9D9D9) - invisible on this
   section's white background. Reads like it was copied from a dark-panel
   variant of this component. !important is required to beat the inline
   style (inline color alone would otherwise win over any external rule
   that isn't also !important). */
p[style*="color:#D9D9D9"] {
  color: var(--slate) !important;
}

h2[style*="color:#D9D9D9"] {
  color: var(--navy) !important;
}

/* .rightContainer's photo is a 960x960 square. At 50% column width that
   forced the row to a huge height (image width-scaled = its height), so
   the shorter left column (heading + 4 cards) got flex-stretched to match,
   leaving a big empty navy gap under "Let's Build Together". Decouple the
   image from the row's height instead of letting it dictate the layout -
   the row now sizes to the left column's real content, and the image
   crops to fill whatever height that turns out to be.

   The photo has to be OUT OF FLOW for that to work. A plain height:100%
   isn't enough: during flexbox's first pass a percentage height resolves to
   auto, so the square photo still contributes its full natural height (at a
   1920px viewport that's a 944px-tall column against 630px of actual text -
   the photo wins and the section overflows the screen). Absolutely
   positioning it removes it from the height calculation entirely, so the
   text column decides the height and the photo crops to whatever that is.

   overflow:hidden is load-bearing, not decorative - without it an earlier
   version of this spilled the photo outside the navy section when zoomed
   out. */
.completeContainer .col-md-6:has(.rightContainer) {
  position: relative;
}

.rightContainer {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

/* This image also carries .img-fluid, and compat.css's
   `main img.img-fluid { width:auto; height:auto; max-width:100% }` (specificity
   0,1,2) outranks a plain `.rightContainer img` (0,1,1) - so the img rendered
   at its natural square aspect ratio capped to the column's width, instead of
   covering the whole box. Matching .img-fluid explicitly here (0,2,1) beats it. */
.rightContainer img.img-fluid {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* compat.css caps images inside anything named "*-item*" to max-height:300px
   (meant for stray icons inside .feature-item/.list-item cards blowing up to
   full native size). [class*="-item"] is a substring match though, and this
   image's ancestor row carries Bootstrap's align-items-center - which
   contains the literal text "-item" - so it got swept in by accident and
   shrank from its native 574x695 down to a 248x300 thumbnail. */
.aboutBg {
  max-height: none !important;
}

/* This whole navy "Innovative factory..." section didn't fit one viewport -
   its real cause wasn't the photo (already decoupled above), it was the left
   column's content running tall. The four card headings (.card1/.card2 h6)
   had no font-size or margin rule at all, so they fell back to the browser's
   raw h6 default: at this card's inherited font-size that's a ~26px
   margin-bottom under an 11px heading. Tightening that plus the cards' own
   padding and grid gap shrinks the column - and since the photo now tracks
   the column's height, it shrinks the same amount, no separate image rule
   needed. */
.card1 h6,
.card2 h6 {
  font-size: 1rem;
  margin-bottom: .4rem;
}

.completeContainer .card1,
.completeContainer .card2 {
  padding: .8rem 1.1rem;
}

/* .mt-4 (1.5rem) shows up twice in this column - the cards row and the
   closing paragraph - scoped narrowly so other .mt-4 uses elsewhere on the
   page aren't touched. row-gap only: compat.css's .row.g-3 deliberately
   zeroes column-gap (a comment there warns the `gap` shorthand un-does that
   and collapses the 2-up card grid to one column - hit that exact bug while
   testing this fix, this is the corrected version). */
.leftContainer .row.mt-4 {
  margin-top: .75rem;
  row-gap: .6rem !important;
}

.leftContainer > p.mt-4 {
  margin-top: .75rem;
}

/* compat.css's shared "named section shells" list gives .completeContainer
   its own padding-block (56px top + 56px bottom at desktop). This section is
   a full-bleed two-column panel whose text side already carries its own
   padding, so that outer padding only pushed the panel past one screen -
   and it sat *outside* the photo column, so it read as a navy band above and
   below the image rather than as section spacing. */
.completeContainer {
  padding-block: 0 !important;
}