/* ==========================================================================
   INFRASTRUCTURE PAGE STYLES — MRB Metals Child Theme
   ========================================================================== */

/* SECTION 1: INFRASTRUCTURE INTRO (.infra-main-container .bs-about-5-area) */
/* var(--mrb-sec-gap) is the site-wide section rhythm from home.css (80/60/40px
   desktop/tablet/mobile) — using it instead of a flat 80px keeps this section
   in step with every other page at every breakpoint. */
.infra-main-container .bs-about-5-area {
  padding-top: var(--mrb-sec-gap) !important;
  padding-bottom: var(--mrb-sec-gap) !important;
}

/* Figma sets the eyebrow in Inter, brand orange, own case — cancel the
   theme's default dark/capitalize styling on .bs-subtitle-5 */
.infra-main-container .bs-subtitle-5,
.infra-main-container .bs-subtitle-5 * {
  text-transform: none !important;
}
.infra-main-container .bs-subtitle-5 {
  font-family: "Inter", sans-serif;
  font-size: 18px;
  font-weight: 500;
  color: #f5821f;
  display: flex;
  width: 100%;
  margin-bottom: 0;
  padding-bottom: 16px;
  border-bottom: 1px solid #e5e5e9;
}

/* Theme centers/right-shifts the title block via max-width + margin-left:auto —
   Figma keeps it flush left, spanning the full content width */
.infra-main-container .bs-about-5-sec-title {
  max-width: 100%;
  margin-left: 0;
  margin-bottom: 40px;
  text-align: left;
}
.infra-main-container .bs-sec-title-4,
.infra-main-container .bs-subtitle-5 {
  text-align: left;
}

.infra-main-container .bs-sec-title-4 {
  font-family: "Albert Sans", sans-serif;
  font-weight: 700;
  font-size: clamp(32px, 2.8vw, 54px);
  line-height: 1.2;
  color: #1a1a1a;
}

.infra-main-container .bs-p-4.disc {
  color: #2d2d2d;
}

.infra-main-container .bs-pr-btn-3 {
  font-family: "Albert Sans", sans-serif;
  font-weight: 600;
}

/* Figma's two side images sit in near-equal columns with a tighter gap —
   left image is short/wide, right image runs the full row height */
.infra-main-container .bs-about-5-wrap {
  grid-template-columns: 1fr 1fr;
  gap: 64px;
}
.infra-main-container .bs-about-5-img-1 {
  height: 257px;
}
.infra-main-container .bs-about-5-img-2 {
  height: 650px;
  margin-bottom: 0;
}

/* SECTION 2: MANUFACTURING PROCESS (.facility-title-container / .facility-process-container) */

/* Container width and side gutter now come from the site-wide content box in
   containers.css, which puts every section on every page on the same left and
   right edge. The 1344px + 12px this section used to set for itself was a
   max-width INCLUDING the gutter, so at 1440px it centered at 48px and started
   its text at 88px while the sections above and below started at 48px. */

/* Eyebrow "Facility" — same Inter/orange/hairline treatment as section 1's eyebrow.
   The theme's icon slot ships with an empty src (broken image), so hide it. */
.facility-title-container .bs-subtitle-1 .icon {
  display: none !important;
}
.facility-title-container .bs-subtitle-1,
.facility-title-container .bs-subtitle-1 * {
  text-transform: none !important;
}
.facility-title-container .bs-subtitle-1 {
  font-family: "Inter", sans-serif;
  font-size: 18px;
  font-weight: 500;
  color: #f5821f;
  width: 100%;
  padding-bottom: 16px;
  border-bottom: 1px solid #e5e5e9;
}

.facility-title-container .bs-sec-title-1 {
  font-family: "Albert Sans", sans-serif;
  font-weight: 700;
  font-size: clamp(32px, 2.8vw, 54px);
  line-height: 1.2;
  color: #1a1a1a;
}

/* The 6 process cards ship as two separate 3-column Elementor sections.
   infrastructure.js merges the second section's cards into the first at
   runtime, then this turns the survivor into a real CSS grid so all 6 cards
   share one continuous row-wrapping context (needed for a clean 2-per-row
   tablet layout — see the responsive block below). */
.facility-process-container .elementor-container {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.facility-process-container .elementor-column {
  width: auto !important;
}
/* Grid stretches each column cell to the row's tallest item by default, but
   Elementor's own column markup is column-1: .elementor-column (flex, row
   axis) > .elementor-widget-wrap (flex, COLUMN axis) > the widget's root
   .elementor-element div > .elementor-widget-container > our card. The
   widget-wrap's cross-axis stretch fills fine, but everything below it
   sits on flex-direction:column's MAIN axis, which sizes to content by
   default (no stretch) — that's the missing link letting a card with more
   copy grow taller than its row-mate. flex:1 down that whole chain (rather
   than percentage heights, which need every ancestor to have a resolvable
   height) fixes it regardless of content length. */
.facility-process-container .elementor-widget-wrap {
  align-items: stretch;
}
.facility-process-container .elementor-widget-wrap > .elementor-element,
.facility-process-container .elementor-widget-container,
.facility-process-container .bs-career-item-single {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  height: auto;
}
.facility-process-container .bs-career-item-single {
  box-sizing: border-box;
}
.facility-process-container .item-disc {
  flex-grow: 1;
}
/* The second row's own bottom padding (40px) is lost once its <section> is
   removed by the merge script — restore it on the surviving section */
.facility-process-container {
  padding-bottom: 40px !important;
}

/* The heading block and the cards are two separate Elementor sections, so the
   site-wide rhythm was applying its full 40px TWICE at the seam (bottom of the
   title section + top of the cards section) on top of the h2's own 24px margin
   — ~129px of dead air. Halve each side so the heading reads as one tight
   block with the grid it introduces. Padding (not margin) keeps the section's
   own #F8F8F9 background filling the gap instead of showing a seam.
   Specificity has to match the site-wide rhythm rules in spacing.css, which
   set this padding via the page-scoped section selectors mirrored below. */
body.page-id-61
  .elementor
  > .elementor-top-section.facility-title-container:not(
    :has(.elementor-widget-container > [class*="-area"])
  ):not(:has(.elementor-widget-container > .mrb-section)) {
  padding-bottom: 0 !important;
}
body.page-id-61
  .elementor
  > .elementor-top-section.facility-process-container:not(
    :has(.elementor-widget-container > [class*="-area"])
  ):not(:has(.elementor-widget-container > .mrb-section)) {
  padding-top: 24px !important;
}

/* Process cards — Figma's card frame does carry a border (0.8px #BEBEBE, 8px radius),
   matching the theme default almost exactly, so keep it. Only recolor the icons and
   bump the title/body type to Figma's sizes. */
.facility-process-container .item-icon svg path {
  fill: #f5821f !important;
}
.facility-process-container .item-title {
  font-family: "Albert Sans", sans-serif;
  font-weight: 500;
  font-size: 22px;
  color: #1a1a1a;
}
.facility-process-container .item-disc {
  font-family: "DM Sans", sans-serif;
  font-size: 18px;
  line-height: 1.3;
  color: #2d2d2d;
}

/* SECTION 3: ADVANCED MACHINERY & EQUIPMENT (.infra-machinary-container) */

/* Content width and gutter come from containers.css (see section 2 above).
   This one also stacked its 6px on the inner sections' own gutter. */

/* Eyebrow "Facility" — same Inter/orange treatment as the other sections. Color/
   font-family are already correct via inline Elementor overrides for THIS widget,
   but the theme still centers it and uses the wrong font-family/size, and the
   broken empty-src icon slot needs hiding. Line color is a soft white hairline
   (Figma reuses the same light hairline token here, dropped onto the dark bg). */
.infra-machinary-container .bs-subtitle-1 .icon {
  display: none !important;
}
.infra-machinary-container .bs-subtitle-1,
.infra-machinary-container .bs-subtitle-1 * {
  text-transform: none !important;
}
.infra-machinary-container .bs-subtitle-1 {
  font-family: "Inter", sans-serif;
  font-size: 18px;
  font-weight: 500;
  align-items: flex-start !important;
  text-align: left;
  width: 100%;
  padding-bottom: 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.15);
}

.infra-machinary-container .bs-sec-title-1 {
  font-family: "Albert Sans", sans-serif;
  font-weight: 700;
  font-size: clamp(32px, 2.8vw, 54px);
  line-height: 1.2;
  text-align: left;
}

/* 62px here plus the cards' own ~39px of internal top padding read as ~100px of
   air. 32px keeps the heading visually tied to its cards while still separating
   them, and matches the tightened Manufacturing Process seam above. */
.infra-machinary-container .bs-award-1-sec-title {
  margin-bottom: 32px;
}

/* Cards — theme ships this widget in a navy-tinted dark palette
   (bg rgb(1,13,33), border rgb(0,26,73)); Figma uses the brand's neutral
   dark-gray palette instead. */
.infra-machinary-container .bs-services-3-card {
  background-color: #2d2d2d;
  border-color: #393939;
}
.infra-machinary-container .card-icon {
  color: #f5821f;
  font-size: 52px;
}
.infra-machinary-container .card-title {
  font-family: "Albert Sans", sans-serif;
  font-size: 22px;
  font-weight: 500;
}
.infra-machinary-container .card-disc {
  font-family: "DM Sans", sans-serif;
  font-size: 18px;
  color: #aeaeb8;
}
.infra-machinary-container .card-btn {
  background-color: #393939;
  border-color: #2d2d2d;
}
.infra-machinary-container .card-number {
  -webkit-text-stroke: 1px #696969;
}

/* SECTION 4: WAREHOUSE & LOGISTICS FACILITIES (last section, reuses the
   About page's .about-hero-container widget markup). It stacks TWO top
   paddings — the outer Elementor section (100px inline) plus the widget's
   own pt-125 utility class (125px) — leaving ~225px of dead air above the
   heading right after the machinery section's own bottom padding. Zero
   both out; the machinery section's spacing already provides the gap.

   The outer Elementor padding stays at 0, but the widget keeps a top
   padding, because this widget's decorative building image is absolutely
   positioned at `top: -290px` (barsi-core.css:7495) and deliberately rises
   out of its own column. With both paddings at 0 it cleared the section's
   top edge entirely and collided with the machinery card above it.

   The clearance it needs now lives in spacing.css (EXCEPTIONS), because
   the site-wide section rhythm sets this padding and outranks anything
   declared here. Only the outer Elementor padding is zeroed below. */
.elementor-element-42b462f {
  padding-top: 0 !important;
}

/* How far the image rises is fixed at -290px by the theme, but the room
   available for it is not: it is pulled up past the section heading, and
   that heading is 176px tall while it wraps to two lines and only ~91px
   once it fits on one. So between 992px and 1399px — where the heading
   collapses — there is ~80px less room and no realistic amount of top
   padding keeps the image inside its section. Shorten the pull-up over
   that range instead; above 1400px the heading is tall enough that the
   original -290px still clears. */
@media (min-width: 992px) and (max-width: 1399px) {
  .about-hero-container .bs-about-3-img-1 {
    top: -200px;
  }
}

/* ==========================================================================
   RESPONSIVE — ALL DEVICES (13"/14" laptops, tablets of every size, phones)

   Font sizes above already use var(--mrb-sec-gap) / clamp() so they scale
   continuously through laptop widths (1280–1536px covers 13"/14" MacBooks)
   without a hard breakpoint. What's left here is what CAN'T be fluid: grid
   columns that must stack, fixed image heights that must shrink, and gaps
   that must tighten once the two-column layouts collapse to one column.
   Breakpoints mirror about.css: 1199 (small laptop/large tablet landscape),
   991 (tablet portrait, iPad), 767 (large phones), 575 (small phones).
   ========================================================================== */

@media (max-width: 1199px) {
  .infra-main-container .bs-about-5-wrap {
    gap: 40px;
  }
  .facility-process-container .elementor-column-gap-custom .elementor-column > .elementor-element-populated {
    padding: 12px;
  }

  /* Manufacturing Process cards: 2-per-row across the whole tablet tier
     (all 6 cards now share one grid — see the merge script + grid rule
     above — so this gives a clean 2,2,2 instead of 2,1,2,1). Tighten the
     gap between the two columns/rows now that there's less horizontal
     room to spare. */
  .facility-process-container .elementor-container {
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
  }
}

@media (max-width: 991px) {
  /* Section 1: image pair stacks under the copy instead of running beside it */
  .infra-main-container .bs-about-5-wrap {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .infra-main-container .bs-about-5-img-1 {
    height: 240px;
  }
  .infra-main-container .bs-about-5-img-2 {
    height: 360px;
  }

  /* Section 2 & 3 headings: less top air once the two-column desktop rhythm
     no longer applies, and the gap before the cards tightens a step */
  body.page-id-61
    .elementor
    > .elementor-top-section.facility-title-container:not(
      :has(.elementor-widget-container > [class*="-area"])
    ):not(:has(.elementor-widget-container > .mrb-section)) {
    padding-bottom: 0 !important;
  }
  body.page-id-61
    .elementor
    > .elementor-top-section.facility-process-container:not(
      :has(.elementor-widget-container > [class*="-area"])
    ):not(:has(.elementor-widget-container > .mrb-section)) {
    padding-top: 20px !important;
  }
  .infra-machinary-container .bs-award-1-sec-title {
    margin-bottom: 28px;
  }

  /* Section 4: the building image that needed the 140px of clearance is
     hidden from this breakpoint down (barsi-core.css:7503), so the padding
     would be pure dead air. Drop back to a normal section gap. */
  .about-hero-container .bs-about-3-area {
    padding-top: 60px !important;
  }
}

@media (max-width: 767px) {
  /* Eyebrow hairlines look overly wide at phone width once padding shrinks —
     trim the row padding so the rule sits closer to the text like Figma's mobile frames */
  .infra-main-container .bs-subtitle-5,
  .facility-title-container .bs-subtitle-1,
  .infra-machinary-container .bs-subtitle-1 {
    padding-bottom: 12px;
  }

  /* One card per row on phones */
  .facility-process-container .elementor-container {
    grid-template-columns: 1fr;
  }

  /* Elementor's default column padding (15px, plus the 12px added at the
     1199px tier for the 3→2 column layout) stacks on top of the section's
     own 12px gutter, so cards actually sit 24–27px in from the edge. On
     mobile the section's 12px gutter should be the ONLY left/right inset. */
  .facility-title-container .elementor-column > .elementor-element-populated,
  .facility-process-container .elementor-column > .elementor-element-populated,
  .infra-machinary-container .elementor-column > .elementor-element-populated {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  .infra-main-container .bs-about-5-img-1 {
    height: 200px;
  }
  .infra-main-container .bs-about-5-img-2 {
    height: 260px;
  }

  /* Manufacturing-process card icon/type step down one notch on phones */
  .facility-process-container .item-title {
    font-size: 20px;
  }
  .facility-process-container .item-disc {
    font-size: 16px;
  }

  /* Machinery cards: the theme's own padding (25–55px) plus a 100px outline
     number is too heavy for a phone-width card — tighten both */
  .infra-machinary-container .bs-services-3-card {
    padding: 25px 24px;
  }
  .infra-machinary-container .card-icon {
    font-size: 40px;
    margin-bottom: 24px;
  }
  .infra-machinary-container .card-title {
    font-size: 20px;
  }
  .infra-machinary-container .card-disc {
    font-size: 16px;
  }
  .infra-machinary-container .card-number {
    font-size: 64px;
    right: 24px;
    top: 16px;
  }
}

@media (max-width: 575px) {
  /* Smallest phones: the button/CTA in section 1 shouldn't force horizontal
     scroll if the viewport is narrower than its fixed padding assumes */
  .infra-main-container .bs-pr-btn-3 {
    width: 100%;
    text-align: center;
    justify-content: center;
  }
  .infra-machinary-container .card-number {
    font-size: 48px;
  }
}