/* ============================================================
   Projects page — put the sections on the page container
   ------------------------------------------------------------
   Every section here was built with a flat 120px gutter on one
   side and nothing on the other, so the content ran right off the
   left edge of the screen and sat at the wrong distance from the
   right. The rest of the site keeps to a column of 80% of the
   viewport capped at 1400px, centred; these sections now do too.

   Scoped to the page by its body class. The section wrappers are
   GenerateBlocks classes — generated hashes, no good as hooks —
   so the sections are picked out structurally instead, skipping
   the two that are meant to be full width: the layout helper and
   the video header.
   ============================================================ */

@media (min-width: 782px) {

  body.page-id-590 .wp-block-post-content > div:not(.blur-right):not(:has(.video-top)) {
    /* The page gutter: what "80%, capped at 1400px, centred" leaves
       at each side. Same figure the rest of the site sits on. */
    padding-inline: calc((100% - min(80%, 1400px)) / 2) !important;
  }

  /* Children carried their own copy of the 120px gutter to make up for the
     side the section left open. The section covers both sides now, so a
     leftover inset here would push the content off centre. */
  body.page-id-590 .wp-block-post-content > div:not(.blur-right):not(:has(.video-top)) > * {
    padding-inline: 0 !important;

    /* One section sets its block to 85% and pins it to the starting edge, so
       the leftover 15% all piles up on the far side and that section's gaps
       come out lopsided. Fill the column, the way every other section does. */
    width: 100% !important;
  }

  /* The picture in each split section is narrower than the half it sits in and
     hugs the inner edge, so all the slack fell on the outside and the picture
     stopped short of the page margin the text opposite it reaches. Push it out
     to that margin and let the slack sit between picture and text instead. */
  body.page-id-590 .wp-block-post-content > div:not(.blur-right):not(:has(.video-top)) img {
    display: block;
    margin-inline-start: auto;
    margin-inline-end: 0;
  }

  /* Slider cards fill their slide — they are not the split-section pictures. */
  body.page-id-590 .wp-block-post-content .swiper img {
    margin-inline: 0;
  }

}