/*
  Text section additions (richText, MB-13, #116): loaded only when a Text section has a Small label, "Two columns", a
  Button or a Section colour other than Page colour (MB-124 round 2). A Text section with none never loads this file
  and looks exactly as before.
  - .text-section--band: a coloured section (band classes from css/shared/themes.css) gets the section padding.
  - .text-section__action: the Button, under the text.
  - .text-section--labelled: the small label (<p class="eyebrow">) sits above the heading.
  - .text-section--two-columns: phones and tablets stay one column; from 1024 px the label is on the left and the
    heading and text on the right (two equal halves), the text running in two columns.
  Spacing and sizes from the design tokens only.
*/
.text-section--labelled .text-section__eyebrow { margin: 0 0 var(--space-3, 12px); }
.text-section--band { padding: var(--section-space) var(--page-gutter); }
.text-section--band > .text-section__heading:first-child, .text-section--band > .text-section__eyebrow:first-child { margin-top: 0; }
.text-section__action { margin-top: var(--space-8); }

@media (min-width: 1024px) {
  .text-section--two-columns {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    column-gap: var(--grid-gap, 32px);
    align-items: start;
    margin-top: var(--space-6, 24px); /* stands in for the heading's own top margin, so label and heading line up */
  }
  .text-section--two-columns > .text-section__heading { margin-top: 0; }
  .text-section--two-columns > * { grid-column: 2; }
  .text-section--two-columns > .text-section__eyebrow {
    grid-column: 1;
    grid-row: 1 / span 2;
    justify-self: start;
    margin: 0;
  }
  .text-section--two-columns > .text-section__text {
    column-count: 2;
    column-gap: var(--grid-gap, 32px);
  }
  .text-section--two-columns > .text-section__text > :first-child { margin-top: 0; }
  .text-section--two-columns > .text-section__text :is(h2, h3, h4) { break-after: avoid; }
  .text-section--two-columns > .text-section__text :is(li, blockquote, figure, table) { break-inside: avoid; }
}

/* MB-143: Photos (slider) under the text, the full width of the text column (in Two columns: the right column).
   Cropped 1440 x 750 around the focal point; two or more take turns (shared/photoSlider, css/blocks/photo-slider.css). */
.text-section__photos { margin-top: var(--space-12); }
.text-section__photo { display: block; width: 100%; height: auto; aspect-ratio: 1440 / 750; object-fit: cover; }