/* ============================================================
   Technology page — grid / gutter normalization.
   Goal: EVERY section's content lines up with the header/footer.
   The site header/footer use .container-fluid { width:1440px; padding:0 80px }
   => effective CONTENT WIDTH = 1280px, centered. So every section's content
   must also be 1280px wide and centered (NOT 1320 + 48px, which over-inset it).

   Two wrapper shapes exist:
     Group A — the max-width element ALSO carries side padding (border-box),
               so content = max-width - 2*padding  => use 1320 + 20px = 1280.
     Group B — the max-width element has NO padding (gutter sits on the <section>),
               so content = max-width            => use 1280; section gets 20px.
   --container (used by the vendor .tvs sections' inner wrappers) is forced to
   1280 so the vendor sections align too.
   ============================================================ */

:root { --container: 1280px !important; }   /* vendor .tvs inner wrappers -> 1280 content */

/* ---------- Group A: wrapper has its own side padding ---------- */
.tech-static-page .max-w-7xl,
.tech-static-page .max-w-\[1280px\],
.tech-static-page [style*="max-width:1200px"],
.tech-static-page [style*="max-width: 1200px"] {
  max-width: 1320px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 20px !important;
  padding-right: 20px !important;
}

/* ---------- Group B: max-width-only wrapper (content = 1280, no own padding) ---------- */
.tech-static-page #cert > div,
.tech-static-page .ub-batches-inner,
.tech-static-page .tp-inner,
.tech-static-page [style*="max-width:1340px"],
.tech-static-page [style*="max-width: 1340px"],
.tech-static-page [style*="max-width:1280px"],
.tech-static-page [style*="max-width: 1280px"],
.tech-static-page [style*="max-width:1100px"],
.tech-static-page [style*="max-width: 1100px"] {
  max-width: 1280px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* ---------- Group B sections: 20px side gutter (narrow screens) ---------- */
.tech-static-page #cert,
.tech-static-page .lfr-sec,
.tech-static-page .ub-batches-sec,
.tech-static-page .tp-sec,
.tech-static-page section[style*="#F0FAFF"] {
  padding-left: 20px !important;
  padding-right: 20px !important;
}

/* ---------- Smaller screens: tighten the gutter to match the header (20 -> 16 -> 12) ---------- */
@media (max-width: 992px) {
  .tech-static-page .max-w-7xl,
  .tech-static-page .max-w-\[1280px\],
  .tech-static-page [style*="max-width:1200px"],
  .tech-static-page [style*="max-width: 1200px"],
  .tech-static-page #cert,
  .tech-static-page .lfr-sec,
  .tech-static-page .ub-batches-sec,
  .tech-static-page .tp-sec,
  .tech-static-page section[style*="#F0FAFF"] {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
}
@media (max-width: 600px) {
  .tech-static-page .max-w-7xl,
  .tech-static-page .max-w-\[1280px\],
  .tech-static-page [style*="max-width:1200px"],
  .tech-static-page [style*="max-width: 1200px"],
  .tech-static-page #cert,
  .tech-static-page .lfr-sec,
  .tech-static-page .ub-batches-sec,
  .tech-static-page .tp-sec,
  .tech-static-page section[style*="#F0FAFF"] {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }
}

/* ============================================================
   Breadcrumb bar (tech page only) — reduce height + equal top/bottom
   around the text. Layout sets nav height:70px and the <ol> has an
   unbalanced padding-top:16px; here we let the bar fit the text with
   symmetric 10px padding. (body-prefixed to beat the layout's !important;
   only loaded on the tech page so other pages are unaffected.)
   ============================================================ */
body #breadcrumb .breadcrumb-header { height: auto !important; min-height: 0 !important; display: flex !important; align-items: center !important; }
body #breadcrumb .breadcrumb-header .breadcrumb { padding-top: 10px !important; padding-bottom: 10px !important; margin-top: 0 !important; margin-bottom: 0 !important; align-items: center !important; }