/* ============================================================
   Ezan Engenharia — responsive overrides
   The site's layout is written almost entirely with inline
   style="" attributes (fixed paddings, multi-column CSS grids,
   a non-wrapping nav row). This stylesheet is purely additive:
   it does not touch any markup, it only overrides those inline
   styles at narrower widths using attribute selectors + !important
   (required because an inline style otherwise always wins).
   ============================================================ */

html, body {
  max-width: 100%;
  overflow-x: hidden;
}

img, image-slot, video, iframe {
  max-width: 100%;
}

/* Classic CSS Grid overflow bug: a grid item's default min-width
   is "auto", which lets a large image (or any wide content) force
   its column wider than the track's 1fr share, pushing the whole
   row past the container's right edge. Neutralize it everywhere,
   at every width, not just in the media queries below. */
[style*="grid-template-columns"] > * {
  min-width: 0;
}

/* ---------------------------------------------------------------
   Tablet and below (≤ 1024px)
   --------------------------------------------------------------- */
@media (max-width: 1024px) {

  /* Header: let it wrap instead of squeezing logo+nav+button
     into one fixed row; nav drops to its own full-width row. */
  header {
    flex-wrap: wrap !important;
    row-gap: 10px !important;
    padding: 10px 20px !important;
  }
  header nav {
    order: 3 !important;
    width: 100% !important;
    justify-content: center !important;
    flex: 1 1 100% !important;
  }
  header img {
    height: 42px !important;
    margin-right: 0 !important;
  }
  header a[href="contato.html"] {
    margin-left: auto !important;
  }

  /* Section headings */
  h1 { font-size: 30px !important; line-height: 1.2 !important; }
  h2 { font-size: 23px !important; }
  [style*="font-size: 32px"] { font-size: 26px !important; }

  /* Two-panel "split" layouts (hero, about, forms, doc list)
     stack to a single column at tablet width already — two
     roughly-equal columns get cramped well before phone width. */
  [style*="grid-template-columns: 0.95fr 1.05fr"],
  [style*="grid-template-columns: 0.85fr 1.15fr"],
  [style*="grid-template-columns: 1.3fr 0.7fr"],
  [style*="grid-template-columns: 1fr 1fr"],
  [style*="grid-template-columns: repeat(2, 1fr)"] {
    grid-template-columns: 1fr !important;
  }

  /* Multi-card grids (service/feature cards, stats, bento) go
     to two columns before collapsing further on phones. */
  [style*="grid-template-columns: repeat(3, 1fr)"],
  [style*="grid-template-columns: repeat(4, 1fr)"],
  [style*="grid-template-columns: repeat(6, 1fr)"],
  [style*="grid-template-columns: 1.4fr 1fr 1fr 1fr"] {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  /* Bento-style cards (e.g. "Diferenciais técnicos") place
     themselves with explicit grid-column spans/offsets that only
     make sense against the original 6-column track. Once the
     parent's column count changes above, these must reset too,
     otherwise the browser creates extra narrow implicit columns
     to satisfy the old placement. */
  [style*="grid-column: span 2"],
  [style*="grid-column: 2 / span 2"],
  [style*="grid-column: 4 / span 2"] {
    grid-column: auto !important;
  }

  /* Hero image/rotator: the fixed min-height on its grid parent
     no longer applies once the grid stacks, so give the rotator
     itself an explicit height (it only contains absolutely
     positioned slides, which collapse to 0 height without one). */
  div[style*="grid-template-columns: 0.95fr 1.05fr"] { min-height: 0 !important; }
  #hero-rotator { min-height: 320px !important; }

  /* Oversized section padding */
  [style*="padding: 80px 48px"],
  [style*="padding: 88px 48px"]          { padding: 40px 24px !important; }
  [style*="padding: 88px 48px 96px"]     { padding: 40px 24px 48px !important; }
  [style*="padding: 56px 48px 32px"]     { padding: 32px 24px 24px !important; }
  [style*="padding: 56px 48px"]          { padding: 32px 24px !important; }
  [style*="padding: 44px 48px"]          { padding: 28px 24px !important; }
  [style*="padding: 40px 48px 32px"]     { padding: 24px 24px 20px !important; }
  [style*="padding: 40px 48px 12px"]     { padding: 24px 24px 12px !important; }
  [style*="padding: 40px 48px"]          { padding: 24px 24px !important; }
  [style*="padding: 24px 48px 88px"]     { padding: 16px 24px 40px !important; }
  [style*="padding: 20px 48px"]          { padding: 16px 24px !important; }
  [style*="padding: 12px 48px 88px"]     { padding: 12px 24px 40px !important; }
  [style*="padding: 8px 48px 88px"]      { padding: 8px 24px 40px !important; }
  [style*="padding: 0px 48px 88px"]      { padding: 0px 24px 40px !important; }
}

/* ---------------------------------------------------------------
   Phone (≤ 640px)
   --------------------------------------------------------------- */
@media (max-width: 640px) {

  header { padding: 8px 14px !important; }
  header img { height: 32px !important; }
  header a[href="contato.html"] { padding: 9px 16px !important; font-size: 13px !important; }
  header nav a { font-size: 13px !important; }

  h1 { font-size: 23px !important; }
  h2 { font-size: 19px !important; }
  [style*="font-size: 32px"] { font-size: 22px !important; }

  /* Every remaining grid collapses to one column */
  [style*="grid-template-columns"] { grid-template-columns: 1fr !important; }

  #hero-rotator { min-height: 220px !important; }

  [style*="padding: 80px 48px"],
  [style*="padding: 88px 48px"],
  [style*="padding: 56px 48px"],
  [style*="padding: 44px 48px"],
  [style*="padding: 40px 48px"]          { padding: 24px 16px !important; }
  [style*="padding: 88px 48px 96px"],
  [style*="padding: 56px 48px 32px"],
  [style*="padding: 40px 48px 32px"],
  [style*="padding: 40px 48px 12px"],
  [style*="padding: 24px 48px 88px"],
  [style*="padding: 20px 48px"],
  [style*="padding: 12px 48px 88px"],
  [style*="padding: 8px 48px 88px"],
  [style*="padding: 0px 48px 88px"]      { padding: 16px 16px 32px !important; }

  form { padding: 20px !important; }

  /* Buttons/links that sit side by side should stack cleanly */
  [style*="display: flex"][style*="gap: 14px"] { row-gap: 12px !important; }
}