/*
 * Responsive overrides for the marketing pages that are styled with inline
 * CSS (home, recycling, it-recycling, data-destruction, certifications,
 * inkoopprijzen). Inline styles cannot be overridden by normal specificity,
 * so these rules use attribute selectors on the style attribute plus
 * !important. Loaded after style.css from base.html.
 */

/* ---- Tablet and below: 4-column grids become 2 columns ---- */
@media (max-width: 1024px) {
  div[style*="grid-template-columns:repeat(4,1fr)"] {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

/* ---- Mobile ---- */
@media (max-width: 768px) {

  /* 1. All the fixed "Xpx 64px" horizontal section paddings become narrow.
     (The 64px substring only occurs in these paddings; vertical padding
     inside the shorthand is preserved because we only override left/right.) */
  div[style*="64px"] {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }

  /* Hero / CTA sections: also reduce the large vertical padding.
     Kept separate so normal content sections keep their rhythm. */
  div[style*="padding:120px 64px 100px"],
  div[style*="padding:110px 64px 76px"],
  div[style*="padding:100px 64px 70px"],
  div[style*="padding:90px 64px 70px"] {
    padding-top: 64px !important;
    padding-bottom: 48px !important;
  }
  /* Dark CTA bars at the bottom of each page */
  div[style*="padding:80px 64px"] {
    padding-top: 56px !important;
    padding-bottom: 56px !important;
  }
  /* Big alternating content sections */
  div[style*="padding:90px 64px"] {
    padding-top: 64px !important;
    padding-bottom: 64px !important;
  }

  /* 2. Every fixed multi-column grid collapses to a single column */
  div[style*="grid-template-columns"] {
    grid-template-columns: 1fr !important;
  }

  /* Oversized grid gutters tightened */
  div[style*="gap:56px"],
  div[style*="gap:44px"] {
    gap: 28px !important;
  }

  /* 3. Headings scale down */
  h1[style*="font-size:56px"],
  h1[style*="font-size:48px"],
  h1[style*="font-size:44px"] {
    font-size: 30px !important;
  }
  h2[style*="font-size:34px"],
  h2[style*="font-size:32px"],
  h2[style*="font-size:30px"],
  h2[style*="font-size:28px"] {
    font-size: 24px !important;
  }

  /* 4. Home page: hide the horizontal connector line between process steps */
  div[style*="left:12.5%"] {
    display: none !important;
  }

  /* 5. Split image/text rows: images get a sane fixed height when stacked */
  img[style*="height:380px"],
  img[style*="height:300px"],
  img[style*="height:340px"],
  img[style*="max-height:380px"] {
    height: 230px !important;
    max-height: 230px !important;
  }
  img[style*="height:100%"] {
    height: auto !important;
    max-height: 260px !important;
  }

  /* 6. Full-width buttons in stacked hero/CTA blocks are easier to tap */
  div[style*="display:flex;gap:14px;justify-content:center"] a,
  div[style*="display:flex;gap:14px;flex-wrap:wrap"] a {
    width: 100%;
    text-align: center;
    box-sizing: border-box;
  }

  /* 7. Breadcrumbs and small rows: allow wrapping */
  div[style*="display:flex;align-items:center;gap:14px;border:1px solid #cfd8e3"] {
    flex-wrap: wrap;
  }
}

/* ---- Very small phones ---- */
@media (max-width: 420px) {
  div[style*="64px"] {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
  h1[style*="font-size:56px"],
  h1[style*="font-size:48px"],
  h1[style*="font-size:44px"] {
    font-size: 26px !important;
  }
}