/* A single painting-led opening on phones. The existing text nodes are laid
   over one artwork; tablet and desktop retain their original composition. */
@media (max-width: 767px) {
  section.block.intro { padding-bottom: 36px; }
  section.block.art-coaching { padding-top: 0; }

  .art-coaching-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto auto minmax(80px, 1fr) auto auto auto auto;
    gap: 0;
    isolation: isolate;
  }
  .art-coaching-heading, .art-coaching-copy { display: contents; }

  /* The first four rows form the cover. The empty grid item reserves its
     minimum height while allowing the text to expand it. The artwork fills
     those rows with a definite containing height for the rotated image. */
  .art-coaching-layout::after {
    content: "";
    grid-column: 1;
    grid-row: 1 / 5;
    min-height: 72svh;
    pointer-events: none;
  }
  .art-coaching-art {
    grid-column: 1;
    grid-row: 1 / 5;
    position: absolute;
    inset: 0;
    align-self: stretch;
    width: 100vw;
    max-width: none;
    height: auto;
    min-height: 0;
    aspect-ratio: auto;
    margin: 0 calc(50% - 50vw);
    border: 0;
    border-radius: 0;
    box-shadow: none;
  }
  .art-coaching-art img {
    top: 50%;
    left: 50%;
    width: 100cqh;
    height: 100cqw;
    object-fit: cover;
    object-position: 46% center;
    transform: translate(-50%, -50%) rotate(90deg);
    border-radius: 0;
  }

  /* This wash follows only the heading and introductory text, feathering
     into the unfiltered painting through the open middle of the cover. */
  .art-coaching-layout::before {
    content: "";
    grid-column: 1;
    grid-row: 1 / 3;
    align-self: stretch;
    z-index: 1;
    width: 100vw;
    margin: 0 calc(50% - 50vw) -72px;
    background: linear-gradient(to bottom,
      rgba(244,239,230,.97) 0%,
      rgba(244,239,230,.91) 58%,
      rgba(244,239,230,.78) 76%,
      rgba(244,239,230,0) 100%);
    pointer-events: none;
  }
  .art-coaching-heading .title {
    grid-column: 1;
    grid-row: 1;
    z-index: 2;
    margin: 0;
    padding: 56px 4px 0;
  }
  .art-coaching-heading .art-coaching-intro:first-of-type {
    grid-column: 1;
    grid-row: 2;
    z-index: 2;
    max-width: 36ch;
    margin: 20px 0 0;
    padding-inline: 4px;
  }
  html[lang="de"] .art-coaching-heading .art-coaching-intro:first-of-type { max-width: 40ch; }
  .art-coaching-quote {
    grid-column: 1;
    grid-row: 4;
    position: relative;
    align-self: end;
    justify-self: stretch;
    isolation: isolate;
    z-index: 2;
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 24px 4px 40px;
    border: 0;
    border-radius: 0;
    background: none;
    box-shadow: none;
  }
  .art-coaching-quote::before {
    content: "";
    position: absolute;
    z-index: -1;
    inset: -32px calc((100% - 100vw) / 2) 0;
    background: linear-gradient(to bottom,
      rgba(244,239,230,0),
      rgba(244,239,230,.86) 36%,
      rgba(244,239,230,.94));
    pointer-events: none;
  }
  .art-coaching-quote blockquote { font-size: clamp(22px, 5.5vw, 25px); line-height: 1.4; }
  .art-coaching-quote figcaption { margin-top: 12px; }

  .art-coaching-heading .art-coaching-intro:last-of-type {
    grid-column: 1;
    grid-row: 5;
    margin: 56px 0 0;
  }
  .art-coaching-examples { grid-row: 6; margin-top: 28px; }
  .art-coaching-examples li { padding-block: 18px; }
  .art-coaching-examples li::before { top: 21px; }
  .art-coaching-examples li:last-child { padding-bottom: 0; }
  .art-coaching-closing { grid-row: 7; margin-top: 28px; }
}