/* Y85N v2 responsive layer — applied centrally to ALL original HTML templates.
   Original markup and image URLs remain untouched. */
:root {
  --y85n-content-max-width: 1280px;
  --y85n-content-gutter: clamp(12px, 2.8vw, 30px);
}
html { max-width: 100%; -webkit-text-size-adjust: 100%; }
body { max-width: 100%; overflow-x: clip; }
*, *::before, *::after { box-sizing: border-box; }
main, main > *, main section, main article, main .container, main figure,
main .split, main .grid, main .hero-media, main .warehouse-visual,
main .direct-media, main .feature-picture, main .hero-picture,
main .square-picture { min-width: 0; }

/* ONE consistent content line for the top, body, and footer of every page.
   Keep existing grid proportions within that consistent content width. */
:where(.topbar, .site-header, header, main, footer) > .container,
main > section > .container,
main section.section > .container,
main section.hero > .container,
main section > .container,
footer section > .container,
footer .footer-links > .container {
  width: min(var(--y85n-content-max-width), calc(100% - 2 * var(--y85n-content-gutter))) !important;
  max-width: 100% !important;
  margin-inline: auto;
}

/* All editorial photos fill their own content column equally, retain ratio,
   never overflow. Site logos and small icons are deliberately excluded. */
main :where(.hero-picture, .feature-picture, .square-picture, .article-picture,
  .content-picture, .post-picture, .editorial-picture),
main :where(.hero-picture, .feature-picture, .square-picture,
  .article-picture, .content-picture, .post-picture, .editorial-picture) img {
  display: block;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0;
}
main :where(.hero-picture, .feature-picture, .square-picture,
  .article-picture, .content-picture, .post-picture, .editorial-picture) img,
main figure > img, main article > img, main .content-image {
  height: auto !important;
  max-height: none;
}
main :where(img, picture, video, iframe, svg, canvas) { max-width: 100%; }
main picture source { max-width: 100%; }
main :where(figure, .hero-media, .feature-media, .warehouse-visual,
  .direct-media) { max-width: 100%; }
main :where(.btn, .button, a[role="button"]) { max-width: 100%; }

@media (max-width: 767px) {
  :root { --y85n-content-gutter: 12px; }
  main :where(.split, .two-col, .two-column, .hero-grid, .hero-layout,
    .warehouse-grid, .direct-grid, .image-text-grid, .feature-grid) {
    grid-template-columns: minmax(0, 1fr) !important;
  }
  main :where(.container, .split, .hero-media, .feature-media,
    .warehouse-visual, .direct-media) { min-width: 0; }
  main :where(h1, h2, h3, h4, p, li, blockquote) { overflow-wrap: anywhere; }
  main :where(.btn, .button, a[role="button"]) {
    white-space: normal;
    overflow-wrap: anywhere;
    text-align: center;
  }
  main :where(table, pre, code) { max-width: 100%; }
  main :where(table, pre) { overflow-x: auto; }
  main :where(.hero-picture, .feature-picture, .square-picture) img {
    max-width: 100% !important;
    height: auto !important;
  }
}
@media (max-width: 360px) {
  :root { --y85n-content-gutter: 10px; }
  main :where(.container, .card, .service-card, .feature-card) { max-width: 100%; }
  main :where(a, button) { overflow-wrap: anywhere; }
}