/* ==============================================================================
   SPLIT BLOCK (templates/blocks/split.html)

   Text beside one or two photos, the two banners of Furnitor's Home 3
   (doc/07, ADR-040), measured on the demo at 1440 and 375 px:

   - Two photos ("Bobby Stool Chair", block-split--pair): half and half,
     no gutter; the large photo fills its half (669 × 756 at 1440, 8:9),
     the small one (320 × 400, 4:5) lies over its right edge a quarter of
     the way down; the text, 405 px at most, starts 170 px into its half
     (pl-lg-17) from 1200 px. pb-15: 120 px under it, none over.
   - One photo ("Room Inspiration"): the text in five columns of twelve,
     435 px at most from the container's edge, the photo in seven, 3:2
     (780 × 520 at 1440). pb-11 pb-lg-15.
   - Title fs-30 fs-lg-56 (lh-12 with two photos), 24 px under it (16 px
     with one); paragraphs in the theme's grey at 500; 40 px (30 px)
     before the button.
   Under 768 px (992 px with one photo) the text comes first and the
   photos follow, 30 px under it.
   ============================================================================== */

.page--over-photo > .block-split {
  padding-block-end: var(--py-11);
}

@media (min-width: 62em) {
  .page--over-photo > .block-split {
    padding-block-end: var(--py-15);
  }
}

.page--over-photo > .block-split--pair {
  padding-block-end: var(--py-15);
}

.block-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas:
    "text"
    "media";
  row-gap: 30px;
  align-items: center;
}

.block-split__text {
  grid-area: text;
  max-width: 435px;
}

.block-split--pair .block-split__text {
  max-width: 405px;
}

.block-split__title {
  margin: 0 0 16px;
  color: var(--text-primary);
  font-size: var(--fs-30);
  font-weight: 400;
  letter-spacing: -0.015em;
  line-height: 1.25;
}

.block-split--pair .block-split__title {
  margin-bottom: 24px;
  line-height: var(--lh-12);
}

.block-split__text p {
  margin: 0 0 1em;
  color: var(--text-muted);
  font-size: var(--fs-16);
  font-weight: 500;
  line-height: var(--lh-body);
}

.block-split__text p:last-of-type {
  margin-bottom: 30px;
}

.block-split--pair .block-split__text p:last-of-type {
  margin-bottom: 40px;
}

.block-split__media {
  grid-area: media;
  position: relative;
}

.block-split__layer img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
}

/* One photo: 3:2, as the demo's b-04. */
.block-split:not(.block-split--pair) .block-split__image {
  aspect-ratio: 3 / 2;
}

/* Two photos: the large one 8:9 (the demo's 690 × 780), the small one
   4:5 (320 × 400) over the right edge, a quarter of the way down. On a
   phone the small one keeps its 320 px, as in the demo, and the large one
   the full width. The parallax moves both through --parallax-x and
   --parallax-y (parallax.js), easing over 0.6 s. */
.block-split--pair .block-split__layer:first-child img {
  aspect-ratio: 8 / 9;
}

.block-split__layer {
  transform: translate3d(var(--parallax-x, 0), var(--parallax-y, 0), 0);
  transition: transform 0.6s ease-out;
}

.block-split__layer--over {
  position: absolute;
  top: 25%;
  right: 0;
  width: min(320px, 48%);
  /* The small photo moves the other way, twice as far, which is what
     makes the two read as layers at different depths. */
  transform: translate3d(calc(var(--parallax-x, 0px) * -2), calc(var(--parallax-y, 0px) * -2), 0);
}

.block-split__layer--over img {
  aspect-ratio: 4 / 5;
}

@media (min-width: 48em) {
  .block-split--pair {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-areas: "media text";
  }

  .block-split--pair.block-split--image-right {
    grid-template-areas: "text media";
  }

  /* pl-md-4 on the column and pl-md-2 inside it: 20 px and 10 px. As
     margins, so the 405 px of mxw-405px stay the text's own. */
  .block-split--pair .block-split__text {
    margin-inline-start: 20px;
    padding-inline-start: 10px;
  }
}

@media (min-width: 75em) {
  /* pl-lg-17: 170 px between the photos and the text. */
  .block-split--pair:not(.block-split--image-right) .block-split__text {
    margin-inline-start: 170px;
  }

  .block-split--pair.block-split--image-right .block-split__text {
    justify-self: end;
    margin-inline: 0 170px;
  }
}

@media (min-width: 62em) {
  .block-split:not(.block-split--pair) {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    grid-template-areas: "media text";
  }

  .block-split--image-right:not(.block-split--pair) {
    grid-template-areas: "text media";
  }

  /* mxw-435px against the start of its five columns, as measured on the
     demo (the text starts on the container's edge, the photo right after
     the five columns, with no gutter); mirrored when the photo is on the
     left. */
  .block-split:not(.block-split--pair):not(.block-split--image-right) .block-split__text {
    justify-self: end;
  }

  .block-split__title {
    font-size: var(--fs-56);
  }
}

/* The banners' titles take 56 px from 992 px with one photo; with two,
   from 992 px too (fs-lg-56), at the line height of 1.2. */
@media (min-width: 62em) {
  .block-split--pair .block-split__title {
    font-size: var(--fs-56);
  }
}

/* ==============================================================================
   OFF THE HOME PAGE (block-split--plain, doc/07, wave 2b)

   The two halves of Furnitor's about-us-01 on the CV: text and photo half
   and half in the theme's container, the photo cut to 4:5 (585 × 731 at
   1440 px), the text 100 px away from it, its title at 60 px from 768 px
   (30 px on a phone) on a line of 1.25. 110 px over the first one and
   120 over the next, 30 px between text and photo on a phone, where the
   text comes first.
   ============================================================================== */
.page > .block-split--plain {
  grid-column: full;
  justify-self: center;
  width: var(--plain-container);
  padding-top: var(--py-11);
}

@media (min-width: 62em) {
  .page > .block-split--plain {
    padding-top: 110px;
  }

  .page > .block-split--plain + .block-split--plain,
  .page > .block-text + .block-split--plain {
    padding-top: var(--py-15);
  }
}

/* The section after the last half keeps the theme's 170 px under it on
   a desktop, 100 on a phone, before the beige band. */
.page > .block-split--plain:has(+ .block-cards--values) {
  padding-bottom: 100px;
}

@media (min-width: 62em) {
  .page > .block-split--plain:has(+ .block-cards--values) {
    padding-bottom: 170px;
  }
}

.block-split--plain:not(.block-split--below) .block-split__text {
  max-width: none;
}

.block-split--plain:not(.block-split--below) .block-split__image {
  aspect-ratio: 4 / 5;
}

.block-split--plain .block-split__title {
  margin-bottom: 10px;
  line-height: 1.25;
}

.block-split--plain .block-split__text p:last-of-type {
  margin-bottom: 30px;
}

@media (min-width: 48em) {
  .block-split--plain:not(.block-split--below) {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-areas: "media text";
    column-gap: 0;
  }

  .block-split--plain.block-split--image-right:not(.block-split--below) {
    grid-template-areas: "text media";
  }

  /* Two more classes than the home page's rule that pushes a lone
     photo's text to the end of its five columns. */
  .block-split.block-split--plain:not(.block-split--pair):not(.block-split--below) .block-split__text {
    justify-self: stretch;
    padding-left: 30px;
  }

  .block-split--plain.block-split--image-right .block-split__text {
    padding: 0 30px 0 0;
  }

  .block-split--plain .block-split__title {
    font-size: 3.75rem;
  }
}

@media (min-width: 62em) {
  .block-split--plain:not(.block-split--below) .block-split__text {
    padding-left: 100px;
  }

  .block-split--plain.block-split--image-right .block-split__text {
    padding: 0 100px 0 0;
  }
}

/* --------------------------------------------------------------------------
   The photo below (block-split--below): the opening text of about-us-02
   on Arte. 120 px over it (80 on a phone); the title centred at 40 px on
   a line of 1.5 in 924 px, 40 px over the paragraphs; these in 830 px,
   the first one as the lead at 20 px in ink; 50 px under them, the photo
   at the container's width, at the demo's 1170 × 600.
   -------------------------------------------------------------------------- */
.page > .block-split--below {
  padding-top: var(--py-11);
}

@media (min-width: 62em) {
  .page > .block-split--below {
    padding-top: var(--py-15);
  }
}

/* One column whatever the width: the home page's five and seven columns
   for a lone photo do not apply to a panorama. */
.block-split--below,
.block-split--below:not(.block-split--pair) {
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas:
    "text"
    "media";
  row-gap: 50px;
}

/* As many classes as the home page's rule that pushes a lone photo's
   text to the end of its columns, and later in the file. */
.block-split.block-split--below:not(.block-split--pair):not(.block-split--image-right) .block-split__text,
.block-split--below .block-split__text {
  justify-self: center;
  width: 100%;
  max-width: 830px;
}

.block-split--below .block-split__title {
  max-width: 924px;
  margin: 0 auto 40px;
  font-size: var(--fs-30);
  letter-spacing: normal;
  line-height: var(--lh-15);
  text-align: center;
}

@media (min-width: 48em) {
  .block-split--below .block-split__title {
    font-size: var(--fs-40);
  }
}

/* The title's 924 px against the text's 830: 47 px past it on each side,
   once the container is wide enough to hold them (930 px from 992 px). */
@media (min-width: 62em) {
  .block-split--below .block-split__title {
    margin-inline: -47px;
  }
}

.block-split--below .block-split__text p {
  margin-bottom: 24px;
  font-weight: 400;
}

.block-split--below .block-split__text p:first-of-type {
  color: var(--text-primary);
  font-size: var(--fs-20);
  font-weight: 500;
}

.block-split--below .block-split__text p:last-of-type {
  margin-bottom: 0;
}

/* Over the home page's 3:2 for a lone photo, hence the extra class. */
.block-split.block-split--below .block-split__image {
  aspect-ratio: 1170 / 600;
}

@media (prefers-reduced-motion: reduce) {
  .block-split__layer,
  .block-split__layer--over {
    transform: none;
    transition: none;
  }
}