/* web/themes/techprosolutions/css/components/et-depth.css */
/**
 * ET Depth — breaks the hard full-bleed seams by floating the dark articles
 * section as an inset, rounded SHEET that overlaps both white neighbours
 * (persona slider above, bento features below).
 *
 * Mechanics: negative block margins pull the neighbours' whitespace under
 * the sheet; position+z-index paint it above them. No transforms → no
 * containing-block side effects, and nothing pokes outside the page's
 * horizontal bounds (the sheet is INSET), so the sitewide
 * `.boxed_wrapper { overflow: hidden }` landmine is never triggered.
 *
 * 4px grid: 1408px cap, 16px side insets, 48px/24px overlaps, 24px radius
 * (radius precedent: sticky-features --bf-radius-lg).
 */

.latest-articles.paragraph--type--latest-articles-section {
  position: relative;
  z-index: 2;
  width: min(1408px, calc(100% - 2rem));
  margin-inline: auto;
  margin-top: -3rem;     /* breach 48px into the persona section's white tail */
  margin-bottom: -3rem;  /* bento's top padding slides 48px under the sheet */
  border-radius: 24px;
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.06),  /* hairline edge definition */
    0 24px 64px rgba(10, 20, 23, 0.28),
    0 4px 16px rgba(10, 20, 23, 0.16);
}

/* Mobile rhythm is tighter (48px section pads) — halve the breach so the
   sheet never collides with the persona tabs above it. */
@media (max-width: 768px) {
  .latest-articles.paragraph--type--latest-articles-section {
    margin-top: -1.5rem;
    margin-bottom: -1.5rem;
  }
}