/* Anfa Materials — responsive layer.
   The site is built from inline styles, so these rules use attribute selectors
   and !important to reach them. Nothing here changes content or desktop layout;
   it only collapses fixed multi-column grids below the widths where they stop
   fitting, and lets the wide specification tables scroll instead of forcing the
   whole page sideways. */

/* ---------- tablet and below ---------- */
@media (max-width: 1024px) {
  [style*="max-width: 1200px"] { padding-left: 24px !important; padding-right: 24px !important; }
  /* the hero image is pulled 40px past the container on desktop; that bleed has
     nowhere to go once the grid stacks */
  div[style*="margin-right: -40px"] { margin-right: 0 !important; height: 300px !important; }
  div[style*="padding: 72px 56px 72px 0"] { padding: 52px 0 44px 0 !important; }
  section[style*="min-height: 420px"] { min-height: 0 !important; }
  h1[style*="font-size: 44px"] { font-size: 36px !important; }
  [style*="grid-template-columns: 1fr 400px"],
  [style*="grid-template-columns: 1fr 320px"],
  [style*="grid-template-columns: 1fr 340px"],
  [style*="grid-template-columns: 236px 1fr"],
  [style*="grid-template-columns: 1.05fr 1fr"] { grid-template-columns: 1fr !important; }
}

/* ---------- phones ---------- */
@media (max-width: 720px) {

  /* every fixed grid becomes a single column */
  [style*="grid-template-columns"] { grid-template-columns: 1fr !important; }

  /* container padding */
  [style*="max-width: 1200px"],
  [style*="max-width: 1280px"] { padding-left: 20px !important; padding-right: 20px !important; }
  main[style] { padding-left: 0 !important; padding-right: 0 !important; padding-top: 0 !important; }
  main > div[style*="padding: 72px 40px 0"] { padding: 40px 20px 0 !important; }
  main[style*="padding: 64px 40px 96px"] { padding: 36px 20px 64px !important; }

  /* hero: stack, image becomes a band under the text */
  section[style*="min-height: 420px"] { min-height: 0 !important; }
  section[style*="min-height: 420px"] > div { padding-left: 20px !important; padding-right: 20px !important; }
  div[style*="padding: 72px 56px 72px 0"] { padding: 44px 0 36px 0 !important; }
  div[style*="margin-right: -40px"] { margin-right: 0 !important; height: 260px !important; }
  h1[style*="font-size: 44px"] { font-size: 31px !important; max-width: none !important; }
  h1[style*="font-size: 40px"] { font-size: 29px !important; }
  h2[style*="font-size: 25px"] { font-size: 21px !important; }
  p[style*="font-size: 16.5px"] { font-size: 15px !important; max-width: none !important; }

  /* buttons go full width and stack cleanly */
  a[style*="padding: 14px 26px"] { display: block !important; text-align: center !important; }
  div[style*="display: flex; gap: 14px; flex-wrap: wrap"] { flex-direction: column !important; }

  /* header: nav wraps into a tidy row instead of one item per line */
  header nav[style] { margin-left: 0 !important; width: 100% !important; gap: 8px 14px !important; }
  header a[style*="font-size: 20px"] { font-size: 17px !important; }

  /* specification tables scroll horizontally rather than stretching the page */
  /* Scroll the specification table inside its own container rather than letting it
     widen the page. display:block on a table lets the thead escape the scroll box,
     so the container is the thing that scrolls. */
  div:has(> table) { overflow-x: auto !important; max-width: 100% !important;
                     -webkit-overflow-scrolling: touch; }
  table { min-width: 560px !important; }
  table td, table th { white-space: normal !important; }

  /* photographs and drawings never exceed the viewport */
  img { max-width: 100% !important; height: auto !important; }
  div[style*="grid-template-columns: repeat(3, 1fr); gap: 12px"] img { height: 200px !important; object-fit: cover !important; }

  /* two-part rows built with flex (glossary terms, contact rows, parameter labels)
     had a fixed-width term beside the definition; they wrap on a phone */
  div[style*="display: flex; gap: 24px"] { flex-wrap: wrap !important; gap: 4px 24px !important; }

  /* pending bands and the RFQ strip pair a chip with a sentence on one flex line,
     and carry a 280px floor that a small phone cannot give them */
  div[style*="display: flex; align-items: baseline; gap: 12px"] { flex-wrap: wrap !important; gap: 6px 12px !important; }
  /* the RFQ strip is a flex row of text + button with a 280px floor on the text.
     Dropping the floor to 0 collapsed it to one character per line, so wrap the
     row instead and let the text take a full line of its own. */
  div[style*="min-width: 280px"] { min-width: 0 !important; flex: 1 1 100% !important; }
  div[style*="min-width: 280px"] + a,
  div[style*="min-width: 280px"] ~ a { width: 100% !important; text-align: center !important; }
  div[style*="display: flex"] { max-width: 100% !important; }
  div[style*="display: flex; gap: 24px"] > * { flex: 1 1 100% !important; min-width: 0 !important; }

  /* the grade-family sidebar is sticky on desktop; once the grid collapses it
     scrolls over the page content instead of sitting above it */
  [style*="position: sticky"] { position: static !important; top: auto !important; }

  /* form fields */
  input, textarea, select { max-width: 100% !important; box-sizing: border-box !important; }

  /* the two-column label/body rows on About, Quality, Safety read better stacked */
  [style*="grid-template-columns"] > div { min-width: 0 !important; }

  /* long unbroken strings — ASTM designations, grade codes, the glossary terms on
     Technical Resources — were pushing the page wider than the phone at 360 */
  * { overflow-wrap: break-word; }
  [style*="max-width: 62ch"], [style*="max-width: 66ch"], [style*="max-width: 70ch"],
  [style*="max-width: 90ch"], [style*="max-width: 46ch"], [style*="max-width: 48ch"],
  [style*="max-width: 44ch"], [style*="max-width: 17ch"] { max-width: 100% !important; }
}

/* ---------- very small phones (SE-class, 320px) ---------- */
@media (max-width: 400px) {
  table { min-width: 520px !important; }
  table td, table th { padding-left: 8px !important; padding-right: 8px !important; }
  span[style*="width: 96px"] { width: auto !important; flex: 1 1 100% !important; }
  [style*="max-width: 1200px"], [style*="max-width: 1280px"] { padding-left: 16px !important; padding-right: 16px !important; }
  main > div[style*="padding: 72px 40px 0"] { padding-left: 16px !important; padding-right: 16px !important; }
  main[style*="padding: 64px 40px 96px"] { padding-left: 16px !important; padding-right: 16px !important; }
  section[style*="min-height: 420px"] > div { padding-left: 16px !important; padding-right: 16px !important; }
}

@media (max-width: 400px) {
  /* the specification table's own container, not just the table */
  div:has(> table) { max-width: 100% !important; overflow-x: auto !important; }
}


/* ---------- home hero video: desktop bleed into the text column ----------
   Richard, 7 Oct: extend the video left into the empty band beside the text.
   The panel is pulled 120px under the text column and that strip fades from
   the hero's own background colour, so the text never sits on moving footage.
   Desktop only; tablet and phone keep the stacked band above. */
@media (min-width: 1025px) {
  div[data-hero-media] { margin-left: -120px !important; }
  div[data-hero-media]::before {
    content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 120px; z-index: 1;
    background: linear-gradient(to right, #26231f 0%, rgba(38,35,31,0.85) 30%, rgba(38,35,31,0) 100%);
    pointer-events: none;
  }
  div[data-hero-caption] { left: 120px !important; }
  /* keep the text column above the panel so nothing can ever be painted over it */
  div[style*="padding: 72px 56px 72px 0"] { position: relative; z-index: 3; }
}