/*==================================================================
  BBC — RESPONSIVE CORRECTIONS
  ------------------------------------------------------------------
  File     : assets/css/bbc-responsive-fix.css
  Loaded   : from header.php, i.e. AFTER every stylesheet in <head>
             (main.css, theme.css, bbc-*.css, bbc-4k.css), so plain
             specificity is enough and `!important` is not used
             anywhere in this file.
  Scope    : responsiveness only. No colour, no typography scale, no
             component, no section order and no desktop layout is
             changed. Every rule below sits inside a media query, so
             at the widths it does not name it contributes nothing.

  WHAT THIS FILE FIXES  (each item is measured, not assumed —
  the width at which the defect was reproduced is quoted)

    1. 768-991  index.php "Industries We Serve": the two-column
                title/grid split kept the heading column at 238px.
    2. 768-991  turnaround.php process panels: four side-by-side
                panels squeezed body copy to a 108px column.
    3. <=1199   clients.php industry blocks: height:100vh left
                453-950px of dead space under every logo wall.
    4. 768-1199 clients.php industry headings: flex:0 0 auto with no
                min-width let long headings run past the section and
                be sliced by its overflow.
    5. 992-1199 industries-we-serve.php cards: 28px titles in a
                172px column broke words mid-word ("Petrochemi/cal").
    6. 576-767  about.php large thumb: a -90px inline-start margin
                that is only reset at <=575px made the image 90px
                wider than the viewport.
    7. <=480    index.php industry tiles: one 100%-wide tile per row
                turned an eight-tile grid into a 1810px column.
    8. <=991    micro-labels rendered at 6-10px.
    9. <=991    privacy-policy / terms-of-service: a 200px desktop
                top padding survived into mobile.
   10. all      defensive guards for media, embeds, form controls and
                (future) tables so nothing can start a horizontal
                scrollbar.

  2K/4K (>=1921px) was measured and deliberately left alone —
  see section 5.

  BREAKPOINTS USED (the project's existing Bootstrap-5 ladder — no
  new breakpoint system is introduced):
      <=480  small mobile      <=767  mobile
      <=991  tablet portrait   <=1199 tablet landscape / small desktop
     >=1921  2K and above (matches bbc-4k.css)
==================================================================*/


/*==================================================================
  0. GLOBAL SAFETY GUARDS
  ------------------------------------------------------------------
  These cannot change an existing layout: they only stop content
  that is already too wide from pushing the page sideways.
==================================================================*/

/* Replaced media keeps its ratio inside whatever box it is given.
   Scoped to content areas so header/footer decoration is untouched. */
main img:not([width]):not([height]),
main video,
main iframe,
main embed,
main object {
  max-width: 100%;
}

main video,
main iframe,
main embed,
main object {
  height: auto;
}

/* Form controls never exceed their field. */
input,
select,
textarea,
button {
  max-width: 100%;
}

/* A table (none exist today) scrolls inside its own box rather than
   scrolling the page. */
main table {
  max-width: 100%;
}

.table-responsive,
.rs-table-wrap {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* Unbroken strings (URLs, e-mail addresses, part numbers) wrap
   instead of overflowing once the column is narrow. Kept below
   992px deliberately: applied at desktop widths it changed the
   line breaking inside `ul.cs-flow` on case-study.php (measured
   +54px page height at 2560px), and no desktop overflow exists
   for it to fix. */
@media only screen and (max-width: 991px) {

  main p,
  main li,
  main dd,
  main address,
  .footer-widget p,
  .footer-widget li {
    overflow-wrap: break-word;
  }
}


/*==================================================================
  1. TABLET PORTRAIT — 768-991
  ------------------------------------------------------------------
  The band the brief calls out. Everything here exists because a
  desktop two-up layout survived into a 768px-wide viewport.
==================================================================*/

@media only screen and (max-width: 991px) {

  /*----------------------------------------------------------------
    1.1  index.php — "Industries We Serve"
    DEFECT (768x1024): `.rs-brand-two .rs-brand-wrapper` stays a
    2-column grid until 767px, so at 768px the heading column was
    238px wide — "Serving Critical Industries" wrapped to three
    lines of nine characters beside a two-column icon grid.
    FIX: stack the title above the grid from 991px down, which is
    what the same component already does below 768px. The sticky
    offset that belongs to the two-column layout is released with
    it, otherwise the heading would pin over the tiles.
  ----------------------------------------------------------------*/
  .rs-brand-two .rs-brand-wrapper {
    grid-template-columns: 1fr;
    gap: 30px;
  }

  .rs-brand-two .rs-section-title-wrapper {
    position: relative;
    top: unset;
  }

  /* With the full width available the tiles can hold three columns
     again instead of the two the desktop split forced. */
  .rs-brand-two .rs-brand-item-wrapper {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .rs-brand-two.has-theme-light-blue .rs-brand-item,
  .rs-brand-two .rs-brand-item {
    width: 100%;
  }

  /*----------------------------------------------------------------
    1.2  turnaround.php — process panels
    DEFECT (768x1024): `.tp-panels` is a flex row of four panels
    with a fixed 540px height. Each panel was ~185px wide and the
    paragraph inside it rendered in a 108px column, eight lines
    deep. The component already stacks at <=767px.
    FIX: apply the same stacked treatment one breakpoint earlier.
  ----------------------------------------------------------------*/
  .tp-panels {
    flex-direction: column;
    height: auto;
    gap: 14px;
  }

  .tp-panel {
    flex: none;
    height: 320px;
  }

  .tp-panel:hover,
  .tp-panel.active {
    flex: none;
  }

  /*----------------------------------------------------------------
    1.3  about.php — large "about" thumbnail
    DEFECT (576x900): `.rs-about-four .rs-about-thumb.has-large-thumb`
    carries margin-inline-start:-90px which main.css only cancels at
    <=575px. At 576-767px the image measured 600px inside a 576px
    viewport (clipped, no scrollbar, but the left edge was lost).
    FIX: cancel the pull-in for the whole single-column band.
  ----------------------------------------------------------------*/
  .rs-about-four .rs-about-thumb.has-large-thumb {
    margin-inline-start: 0;
  }

  .rs-about-four .rs-about-thumb.has-large-thumb img,
  .rs-about-five .rs-about-thumb.has-large img,
  .rs-about-seven .rs-about-thumb.has-large img {
    width: 100%;
    height: auto;
  }

  /*----------------------------------------------------------------
    1.4  privacy-policy.php / terms-of-service.php
    DEFECT (768x1024 and below): the legal pages open with the
    desktop `pt-200` utility, i.e. 200px of empty space above the
    first line of text.
    FIX: a proportionate lead-in. Desktop keeps its 200px.
  ----------------------------------------------------------------*/
  .rs-about-area.pt-200 {
    padding-top: 110px;
  }
}


/*==================================================================
  2. TABLET LANDSCAPE / SMALL DESKTOP — 992-1199
==================================================================*/

@media only screen and (max-width: 1199px) {

  /*----------------------------------------------------------------
    2.1  clients.php — industry blocks
    DEFECT (768x1024, 912x1368, 1024x768): main.css sets
    `.industry-block { height: 100vh }` below 1200px. The tallest
    block needs 571px; the shortest needs 252px. Measured waste:
    453-950px per block, five blocks per page.
    FIX: let the block take its content height and keep a rhythm
    with padding. Desktop (>=1200px) is untouched.
  ----------------------------------------------------------------*/
  .industry-block {
    height: auto;
    min-height: 0;
    padding: 70px 0;
  }

  /*----------------------------------------------------------------
    2.2  clients.php — industry headings
    DEFECT (768-1199): `.industry-heading { flex: 0 0 auto }` in a
    flex row with a flex:1 rule. Long headings ("GOVERNMENT SECTOR
    UNDERTAKINGS") could not shrink, ran past the section and were
    cut by its `overflow: hidden`.
    FIX: let the heading take the row and wrap; the decorative rule
    keeps a minimum width and drops to the next line when needed.
  ----------------------------------------------------------------*/
  .industry-title {
    flex-wrap: wrap;
    align-items: baseline;
  }

  .industry-heading {
    flex: 1 1 100%;
    min-width: 0;
  }

  .industry-heading h2 {
    font-size: clamp(30px, 5.2vw, 52px);
    letter-spacing: -1px;
    overflow-wrap: break-word;
  }

  .industry-line {
    flex: 1 1 100%;
  }

  /*----------------------------------------------------------------
    2.3  industries-we-serve.php — sector cards
    DEFECT (1024x768): 28px card titles inside a 172px column split
    words mid-word — "Petrochemi / cal", "Manufactur / ing",
    "Governmen / t & Public Sector". `word-break: break-word` (a
    deprecated alias that behaves like `anywhere` here) allows it.
    FIX: size the title to the column and restore normal word
    breaking, so a long word is hyphen-broken only as a last resort.
  ----------------------------------------------------------------*/
  .mi-content h3 {
    word-break: normal;
    overflow-wrap: break-word;
  }
}

/* The three-column band is the only place where the column (172px at
   1024px) is narrower than the longest single word at the desktop
   title size. `hyphens` cannot help — the document is lang="zxx", so
   no hyphenation dictionary applies — so the title is sized to the
   column instead. Below 992px the grid drops to two columns and the
   full 28px title fits again, which is why this stops at 991px. */
@media only screen and (min-width: 992px) and (max-width: 1199px) {

  .mi-content h3 {
    font-size: clamp(17px, 2.05vw, 21px);
  }
}

/* The same guard, expressed structurally rather than by component
   name, for any card title that ends up in a narrow column. */
@media only screen and (max-width: 1199px) {

  main h1,
  main h2,
  main h3,
  main h4 {
    word-break: normal;
    overflow-wrap: break-word;
  }
}


/*==================================================================
  3. MOBILE — <=767 and <=480
==================================================================*/

@media only screen and (max-width: 767px) {

  /* The tile grid keeps two columns instead of collapsing into a
     single 100%-wide column (see 3.1 below for the measurement). */
  .rs-brand-two .rs-brand-item-wrapper {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
  }

  .rs-brand-two.has-theme-light-blue .rs-brand-item,
  .rs-brand-two .rs-brand-item {
    width: 100%;
  }
}

@media only screen and (max-width: 575px) {

  /*----------------------------------------------------------------
    3.0  case-study.php — section-title rows
    DEFECT (320x568): `.cs-shell` carries a ~13px auto margin and no
    horizontal padding, so a Bootstrap `.row` inside it (which uses
    -15px side margins expecting 15px of gutter) measured 324px in a
    320px viewport — the only element on the site still reaching
    past the viewport edge. The section clips it, so no scrollbar
    appeared, but the box was outside the page.
    FIX: cancel the negative margin and the matching column padding
    together. 0 - 0 puts the text on exactly the same pixel as
    -15 + 15 did, so nothing moves; only the row box stops
    protruding.
  ----------------------------------------------------------------*/
  .cs-shell .row {
    margin-inline: 0;
  }

  .cs-shell .row > * {
    padding-inline: 0;
  }
}

@media only screen and (max-width: 480px) {

  /*----------------------------------------------------------------
    3.1  index.php — industry tiles
    DEFECT (320x568): `.rs-brand-two.has-theme-light-blue
    .rs-brand-item { width: 100% }` puts one 200px-tall tile per
    row. Eight tiles plus gaps measured 1810px — the section was
    the tallest on the page on the smallest screen.
    FIX: two fluid columns and a tile height that follows the
    column width. Same tiles, same order, same styling.
  ----------------------------------------------------------------*/
  .rs-brand-two .rs-brand-item-wrapper {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
  }

  .rs-brand-two.has-theme-light-blue .rs-brand-item,
  .rs-brand-two .rs-brand-item {
    width: 100%;
    height: auto;
    min-height: 130px;
    aspect-ratio: 1 / 0.9;
  }

  .rs-brand-two .rs-brand-thumb img {
    width: clamp(52px, 22vw, 90px);
  }
}


/*==================================================================
  4. MINIMUM LEGIBLE TYPE — <=991
  ------------------------------------------------------------------
  DEFECT: a family of uppercase micro-labels renders at 6-10px.
  That is a deliberate desktop detail at full size, but on a phone
  it is below the readable floor.
  FIX: a floor, not a re-scale — every label keeps its weight,
  colour, spacing and letter-spacing; only sizes under the floor
  are lifted, and only below 992px. Desktop is untouched.
==================================================================*/

@media only screen and (max-width: 991px) {

  .bbc-project-image-content > span,
  .bis-project-category,
  .cs-case-cat,
  .cs-tag,
  .cs-featured-tag,
  .cs-filter-tally,
  .cs-compare-label,
  .modern-gallery-cat,
  .tp-panel-top span,
  .tp-panel-mini,
  .tp-panel-bottom span,
  .tp-tags span,
  .commitment-center__small,
  .commitment-center__footer,
  .qa-image-label span,
  .training-result-content span,
  .tar-visual-top span,
  .why-baluram-image-caption span,
  .why-baluram-image-caption small,
  .mi-content span,
  .bbc-career-inline-cta-btn span,
  .rs-breadcrumb-menu li,
  .rs-breadcrumb-menu li a {
    font-size: 11px;
    line-height: 1.35;
  }

  .mi-content p,
  .hse-protocol-content p {
    font-size: 13px;
    line-height: 1.5;
  }

  /* Second pass — labels found by re-measuring every page at
     320/375/430/768 after the list above was applied. */
  .tar-flow-item small,
  .tar-flow-item strong,
  .tar-visual-bottom span,
  .tar-status-item small,
  .tar-status-item strong,
  .bis-featured-meta span,
  .bwp-card-count .bwp-card-tot,
  .bwp-card-count span,
  .cs-ledger-list span,
  .cs-ledger-list small,
  .bbc-search-eyebrow,
  .bbc-career-form-header span,
  .bbc-career-upload-text,
  .bbc-career-upload-text span,
  .bbc-career-inline-cta p strong {
    font-size: 11px;
    line-height: 1.35;
  }
}

@media only screen and (max-width: 575px) {

  .bbc-project-image-content > span,
  .tp-tags span,
  .cs-tag {
    font-size: 11px;
    padding-inline: 10px;
  }
}


/*==================================================================
  5. 2K / 4K — >=1921  (INTENTIONALLY EMPTY)
  ------------------------------------------------------------------
  bbc-4k.css widens `.container` to 68% of the physical screen while
  `.container.has-large` keeps main.css's 1720px cap scaled by the
  zoom ladder. On paper the two look inconsistent; rendered at
  3840x2160 they measure 2611px and 2683px, i.e. the two bands line
  up almost exactly and every section shares one left edge.

  A rule that restored the 1920px ratio (has-large = 1.24 x
  container) was written, measured and then removed: it widened the
  "Industries We Serve" band to 84% of the screen while the sections
  above and below stayed at 68%, so the page gained a step in its
  left edge that it does not have today. Screenshot-compared at
  3840x2160 before deciding. Nothing to change here.
==================================================================*/