/* ==========================================================================
   O&G Engineering — responsive.css
   Breakpoint refinements and print. Loaded last; it only ever narrows.
   ========================================================================== */

/* --- Large desktop ------------------------------------------------------- */

@media (min-width: 1600px) {
  :root { --shell: 1360px; }
}

/* --- Tablet -------------------------------------------------------------- */

@media (max-width: 1039px) {
  :root { --header-h: 76px; }
  .site-header.is-stuck .header-inner { height: 64px; }
}

@media (max-width: 899px) {
  .split figure { max-width: 560px; }
}

/* --- Mobile -------------------------------------------------------------- */

@media (max-width: 767px) {
  :root { --header-h: 68px; }

  .brand img { height: 38px; }
  .site-header.is-stuck .brand img { height: 34px; }

  .hero-inner { min-height: 0; }
  .hero h1 { max-width: none; }
  .hero .hero-lede { font-size: var(--fs-body); }

  .standing-list { gap: 9px 18px; }
  .standing-list li { font-size: var(--fs-sm); }

  .card-body { padding: 20px; }

  .register-wrap { border-radius: var(--radius); }

  /* The completed-projects pairs reflow to stacked rows — 36 two-cell rows
     read fine as blocks, unlike the six-column current-projects register,
     which keeps its horizontal scroll. */
  .pairs, .pairs tbody, .pairs tr, .pairs td { display: block; width: 100%; }
  .pairs tr { padding: 14px 16px; border-bottom: 1px solid var(--border); }
  .pairs tr:last-child { border-bottom: 0; }
  .pairs td { padding: 0; border: 0; }
  .pairs .client { text-align: start; margin-top: 6px; }

  .lightbox { padding: 12px; }
  .lightbox img { max-height: calc(100vh - 150px); }
  .lightbox-bar { padding: 12px 14px; font-size: var(--fs-xs); }
  .lightbox-caption { display: none; }

  .footer-base { flex-direction: column; align-items: flex-start; }

  .to-top { inset-inline-end: 14px; inset-block-end: 14px; }
}

/* Below 360px the logo and the labelled burger no longer fit side by side,
   so the burger drops its label and keeps only the icon. */
@media (max-width: 359px) {
  .brand img, .site-header.is-stuck .brand img { height: 30px; }
  .burger { padding: 9px 10px; font-size: 0; gap: 0; }
  .burger span { width: 18px; }
}

@media (max-width: 479px) {
  .wall--portrait  { grid-template-columns: 1fr; }
  .wall--landscape { grid-template-columns: 1fr; }
  .btn { width: 100%; justify-content: center; }
  .btn-row { flex-direction: column; }
  .numbered-item > h3 { flex-wrap: wrap; }
}

/* --- Print --------------------------------------------------------------- */

@media print {
  .site-header, .drawer, .to-top, .hero-dots, .lightbox, .cta { display: none !important; }

  body { color: #000; font-size: 11pt; background: #fff; }

  .hero, .page-head { background: #fff !important; color: #000; }
  .hero::after, .page-head::before, .hero-slides { display: none !important; }
  .hero h1, .page-head h1, .hero .hero-lede, .page-head .page-lede,
  .standing-list li, .standing-label, .crumb li { color: #000 !important; }

  .band { padding-block: 18pt; }
  .card, .register-wrap, .spec, .plate-link { border-color: #999; box-shadow: none; }
  .register { min-width: 0; }
  .register-wrap { overflow: visible; }
  tr, .card, .numbered-item { break-inside: avoid; }

  .site-footer { background: #fff !important; color: #000; padding-block: 12pt 0; }
  .site-footer a, .footer-col h2, .footer-contact dt, .footer-brand p,
  .footer-contact, .footer-base { color: #000 !important; }

  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 9pt; word-break: break-all; }
}