/* Module chapters: composition only. No text, colour or type changes.
   Before this, the photo stood alone at the top of a sticky left column while
   every slide stacked in the right one, so each chapter was a 2,000px+ column
   of text next to empty space (sticky is off below 850px viewport height).
   Now each chapter is one grid in three bands:
     1. photo | situation, quote and example card   (balanced heights)
     2. "So läuft es" diagram | "Was ich übernehme" list
     3. examples, full width
   .chapter-slides becomes display:contents so its slides can take grid areas
   without touching the markup; the slide order is the same on every module. */

@media (min-width:761px){
  .taste .module-chapter{padding:112px 0;}
  .taste .module-chapter .chapter-grid{
    display:grid;
    grid-template-columns:minmax(0,1fr) minmax(0,1fr);
    grid-template-areas:"head open" "flow flow" "tasks tasks" "examples examples";
    column-gap:48px; row-gap:0; align-items:start;
  }
  .taste .module-chapter .chapter-head{grid-area:head; position:static; top:auto;}
  .taste .module-chapter .chapter-slides{display:contents;}
  .taste .module-chapter .mslide-open{grid-area:open;}
  .taste .module-chapter .mslide:nth-child(2){grid-area:flow;}
  .taste .module-chapter .mslide:nth-child(3){grid-area:tasks;}
  .taste .module-chapter .mslide:nth-child(4){grid-area:examples;}

  /* One divider per band, one rhythm. The open slide used to draw a border-bottom
     and the next slide a border-top, which read as a double line. */
  .taste .module-chapter .mslide-open{padding:0!important; border:0;}
  .taste .module-chapter .mslide:not(.mslide-open){
    margin-top:56px; padding-top:40px!important;
    border-top:1px solid rgba(255,255,255,.14);
  }

  /* The subtitle is the left column's eyebrow, level with "Die Ausgangslage";
     on one line so every photo starts at the same height. */
  .taste .module-chapter .chapter-sub{max-width:none; min-height:0; margin:0;}
  .taste .module-chapter .chapter-photo{max-width:none!important; width:100%; margin:20px 0 0;}
  .taste .module-chapter .module-return{margin-top:20px;}
  .taste .module-chapter .module-card{margin-top:32px;}

  /* Examples band: the document previews are shown directly (the toggle is
     hidden, see doc-viewer.css). Label and note on top, previews below at full
     width so the cards line up in one row. */
  .taste .module-chapter .mslide:nth-child(4) > .scorecard-wrap{margin:24px 0 0; max-width:400px;}
}

/* Desktop: diagram and task list share the second band, side by side. */
@media (min-width:1001px){
  .taste .module-chapter .chapter-grid{
    grid-template-areas:"head open" "flow tasks" "examples examples";
    column-gap:clamp(56px,6vw,96px);
  }
  /* Quality carries four documents, so they take the full band in one row and
     the example scorecard closes it underneath rather than competing for width
     beside them. */
  .taste .module-chapter .mslide:nth-child(4) > .scorecard-wrap{margin:28px 0 0; max-width:400px;}
  /* the list starts at the same line as the diagram title */
  .taste .module-chapter .mslide-list{padding-top:0;}
  .taste .module-chapter .mslide-list li:first-child{padding-top:4px;}
}

/* Tablet: the copy column is too narrow to also carry the example card next to
   a photo of similar height, so the card gets its own row under the pair. */
@media (min-width:761px) and (max-width:1000px){
  .taste .module-chapter{padding:88px 0;}
  .taste .module-chapter .chapter-grid{
    grid-template-areas:"head label" "head copy" "card card" "flow flow" "tasks tasks" "examples examples";
    grid-template-rows:auto 1fr;
  }
  .taste .module-chapter .mslide-open{display:contents;}
  .taste .module-chapter .mslide-open > .mslide-label{grid-area:label;}
  .taste .module-chapter .mslide-open > .chapter-open{grid-area:copy;}
  .taste .module-chapter .mslide-open > .module-card{grid-area:card; margin-top:48px;}
}

/* Phone: stays one column; only the doubled divider and the label spacing. */
@media (max-width:760px){
  .taste .module-chapter .mslide-open + .mslide{border-top:0;}
  .taste .module-chapter .mslide:not(.mslide-open){padding-top:28px!important;}
  .taste .module-chapter .mslide-open + .mslide{padding-top:0!important;}
}