/* Scripps Tweaks: section-background (STW_SectionBegin). A coloured section on a story page: one <section> that holds the
   blocks between "Section: Begin" and "Section: End". The wrapper the theme prints around the section is a grid item of the
   page's 24-column body grid; the section re-hosts that grid (a subgrid) so the blocks inside keep their columns, their
   widths and the theme's own spacing rules between them. */

/* The theme sets a block's gap above it with long :has() chains that also look for a titled block anywhere inside a wrapper,
   so the section's wrapper starts from no margin of its own; the editor's choices follow below. */
.robustStory__module:has(> flynt-component[name='STW_SectionBegin']) {
  margin-block: 0 !important;
}

/* The section's colour is a layer of its own behind the blocks (the first thing in the section, out of the layout), so that
   nothing that sticks out of the section (a dropdown, a fixed bar) is ever clipped by it. */
.stwSection__section {
  color: var(--stw-fg);
  isolation: isolate;
  padding-block: var(--stw-pt) var(--stw-pb);
  position: relative;
}

.stwSection__bg {
  background-color: var(--stw-bg);
  inset: 0;
  position: absolute;
  z-index: -1;
}

/* Full-width band: the wrapper, the block and the section are nested subgrids. The colour layer paints past the section's sides
   with a shadow and is clipped top and bottom (the clip is on that layer only), so it needs no 100vw width and cannot make
   the page scroll sideways. */
.robustStory__module:has(> flynt-component.stwSection--band) {
  display: grid;
  grid-template-columns: subgrid;
}

flynt-component.stwSection--band {
  display: grid;
  grid-column: 1 / -1;
  grid-template-columns: subgrid;
}

.stwSection--band > .stwSection__section {
  display: grid;
  grid-column: 1 / -1;
  grid-template-columns: subgrid;
  row-gap: var(--module-gap);
}

.stwSection--band .stwSection__bg {
  box-shadow: 0 0 0 100vmax var(--stw-bg);
  clip-path: inset(0 -100vmax);
}

/* Contained box: a rounded box in the text column, the blocks stacked inside it with the same gap. The editor's left and right
   padding (32px by default) is the colour between the box's edges and the blocks; a band has none (its blocks sit in the page's
   own columns, which the padding would move). */
.stwSection--box > .stwSection__section {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: var(--module-gap);
  padding-inline: var(--stw-pl, 32px) var(--stw-pr, 32px);
}

.stwSection--box .stwSection__bg {
  border-radius: 10px;
}

.stwSection--box > .stwSection__section > .robustStory__module {
  inline-size: auto;
  max-inline-size: none;
  min-inline-size: 0;
}

/* In a box the blocks are not on the page's 24 column grid, so two page layout effects of the theme are switched off, as the Layout
   Grid does inside its boxes: a Text Block lays itself out on that grid (squeezing its text), and the Image block grows leftwards
   by two columns when it scrolls into view (spilling out of the box). The selectors outrank the theme's own. */
.stwSection--box flynt-component[name='SR_TextBlock'] .textBlock__inner {
  display: block;
  padding-inline: 0;
}

.stwSection--box flynt-component[name='SR_Image'] {
  --sr-image-grow: 0px;
}

.stwSection--box flynt-component[name='SR_Image'] .figure,
.stwSection--box flynt-component[name='SR_Image'].is-grown .figure {
  margin-inline-start: 0;
  transition: none;
}

@media (max-width: 767px) {
  .stwSection--box > .stwSection__section {
    padding-inline: min(var(--stw-pl, 32px), 20px) min(var(--stw-pr, 32px), 20px);
  }
}

/* The first block's own top gap and the last block's bottom gap would add to the section's padding: the padding is the only
   space inside the colour above the first block and below the last. (The colour layer is the first child, so the first block
   is the first div.) */
.stwSection > .stwSection__section > .robustStory__module:first-of-type {
  margin-block-start: 0 !important;
}

.stwSection__section > .robustStory__module:last-child {
  margin-block-end: 0 !important;
}

/* Text colour. The section sets the theme's text colour variables, and the rules below override the colours the theme
   writes in directly (headings, prose, captions and links). Blocks that sit on a background of their own (cards, link
   cards, the quote carousel, a dark Text Block, anything with a theme colour band) are left out, so their text
   stays readable on their own colour; of the media cards only the parts with a surface of their own are left out (the event
   card, the tag, the dark row, the hover panel), the title and subtitle under a picture follow the section. Buttons keep their
   own colours too. */
.stwSection__section {
  --color-text: var(--stw-fg);
  --color-text-muted: var(--stw-fg);
}

.stwSection__section :is(h1, h2, h3, h4, h5, h6, p, li, dt, dd, figcaption, blockquote, .prose, .caption):not(:is(flynt-component[name='SR_FeatureCardRow'], flynt-component[name='SR_FeatureBlockCard'], flynt-component[name='SR_FeatureBlockCard1'], flynt-component[name='SR_LinkCardGrid'], flynt-component[name='SR_QuoteCarousel'], .mediaCardRow--dark, .mediaCard--event, .mediaCard__hoverContent, .mediaTag, .textBlock--dark, .stwSection__section [data-theme]) *) {
  color: var(--stw-fg) !important;
}

.stwSection__section a:not([class*='button' i], [class*='Button']):not(:is(flynt-component[name='SR_FeatureCardRow'], flynt-component[name='SR_FeatureBlockCard'], flynt-component[name='SR_FeatureBlockCard1'], flynt-component[name='SR_LinkCardGrid'], flynt-component[name='SR_QuoteCarousel'], .mediaCardRow--dark, .mediaCard--event, .mediaCard__hoverContent, .mediaTag, .textBlock--dark, .stwSection__section [data-theme]) *) {
  color: var(--stw-fg) !important;
}

/* Labels that the theme paints in its dark navy on a transparent background (so on a dark section they would vanish): the
   secondary button, the accordion and divider labels, the file button, and the quote's name and title. They follow the
   section's text colour. (Found by checking the contrast of every kind of block on a dark section.) */
.stwSection__section :is(.buttonSecondary, .buttonSecondary__content, .buttonSecondary__label, .agendaAccordion__label, .blockquote__name, .blockquote__title, .sidebarAccordion__label, .dividerLabeled__label, .fileButton__label):not(:is(flynt-component[name='SR_FeatureCardRow'], flynt-component[name='SR_FeatureBlockCard'], flynt-component[name='SR_FeatureBlockCard1'], flynt-component[name='SR_LinkCardGrid'], flynt-component[name='SR_QuoteCarousel'], .mediaCardRow--dark, .mediaCard--event, .mediaCard__hoverContent, .mediaTag, .textBlock--dark, .stwSection__section [data-theme]) *) {
  color: var(--stw-fg) !important;
}

.stwSection__section .buttonSecondary:not(:is(flynt-component[name='SR_FeatureCardRow'], flynt-component[name='SR_FeatureBlockCard'], flynt-component[name='SR_FeatureBlockCard1'], flynt-component[name='SR_LinkCardGrid'], flynt-component[name='SR_QuoteCarousel'], .mediaCardRow--dark, .mediaCard--event, .mediaCard__hoverContent, .mediaTag, .textBlock--dark, .stwSection__section [data-theme]) *) {
  border-color: color-mix(in srgb, var(--stw-fg) 45%, transparent) !important;
}

/* A media card's title and subtitle sit on nothing at rest (so they follow the section), but when the card is pointed at the theme
   paints a white panel behind them and slides the hover text up: they go back to the theme's own dark colours for as long as the
   panel is there. On the way out the colour waits for the panel (0.45s, the theme's own delay) so white text never flashes on white. */
.stwSection__section flynt-component[name='SR_MediaCard'] .mediaCard__content :is(.mediaCard__title, .mediaCard__subtitle) {
  transition: color 0s linear 0.45s;
}

@media (hover: hover) {
  .stwSection__section flynt-component[name='SR_MediaCard']:has(.mediaCard__link):hover .mediaCard__content .mediaCard__title {
    color: var(--color-black) !important;
    transition-delay: 0s;
  }

  .stwSection__section flynt-component[name='SR_MediaCard']:has(.mediaCard__link):hover .mediaCard__content .mediaCard__subtitle {
    color: var(--color-gray-550) !important;
    transition-delay: 0s;
  }
}

/* Print: backgrounds usually do not print, and a white text on a dark section would then be white on white. */
@media print {
  .stwSection__section {
    --stw-fg: #000 !important;
  }

  .stwSection__bg {
    display: none;
  }
}

/* The editor's space above and below the section (outside the colour): the exact gap to the neighbouring block, the same
   convention as the Wysiwyg spacing choices: the row gap is the base, so a gap of N is N minus the row gap. Space above does
   nothing for the first block (nothing above it to measure from: the theme's own space under the hero stays). When the next
   block has a Space above of its own (a section's or a Wysiwyg block's), that one is used and this Space below is not. */

.robustStory__module:not(:first-child):has(> flynt-component[data-stw-sec-above='0']) {
  margin-block-start: calc(0px - var(--module-gap)) !important;
}

.robustStory__module:not(:first-child):has(> flynt-component[data-stw-sec-above='16']) {
  margin-block-start: calc(16px - var(--module-gap)) !important;
}

.robustStory__module:not(:first-child):has(> flynt-component[data-stw-sec-above='24']) {
  margin-block-start: calc(24px - var(--module-gap)) !important;
}

.robustStory__module:not(:first-child):has(> flynt-component[data-stw-sec-above='32']) {
  margin-block-start: calc(32px - var(--module-gap)) !important;
}

.robustStory__module:not(:first-child):has(> flynt-component[data-stw-sec-above='48']) {
  margin-block-start: calc(48px - var(--module-gap)) !important;
}

.robustStory__module:not(:first-child):has(> flynt-component[data-stw-sec-above='64']) {
  margin-block-start: calc(64px - var(--module-gap)) !important;
}

.robustStory__module:not(:first-child):has(> flynt-component[data-stw-sec-above='96']) {
  margin-block-start: calc(96px - var(--module-gap)) !important;
}

.robustStory__module:has(> flynt-component[data-stw-sec-below='0']) + .robustStory__module:not(:has(> flynt-component[data-stw-sec-above])):not(:has(> flynt-component[data-stw-above])) {
  margin-block-start: calc(0px - var(--module-gap)) !important;
}

.robustStory__module:has(> flynt-component[data-stw-sec-below='16']) + .robustStory__module:not(:has(> flynt-component[data-stw-sec-above])):not(:has(> flynt-component[data-stw-above])) {
  margin-block-start: calc(16px - var(--module-gap)) !important;
}

.robustStory__module:has(> flynt-component[data-stw-sec-below='24']) + .robustStory__module:not(:has(> flynt-component[data-stw-sec-above])):not(:has(> flynt-component[data-stw-above])) {
  margin-block-start: calc(24px - var(--module-gap)) !important;
}

.robustStory__module:has(> flynt-component[data-stw-sec-below='32']) + .robustStory__module:not(:has(> flynt-component[data-stw-sec-above])):not(:has(> flynt-component[data-stw-above])) {
  margin-block-start: calc(32px - var(--module-gap)) !important;
}

.robustStory__module:has(> flynt-component[data-stw-sec-below='48']) + .robustStory__module:not(:has(> flynt-component[data-stw-sec-above])):not(:has(> flynt-component[data-stw-above])) {
  margin-block-start: calc(48px - var(--module-gap)) !important;
}

.robustStory__module:has(> flynt-component[data-stw-sec-below='64']) + .robustStory__module:not(:has(> flynt-component[data-stw-sec-above])):not(:has(> flynt-component[data-stw-above])) {
  margin-block-start: calc(64px - var(--module-gap)) !important;
}

.robustStory__module:has(> flynt-component[data-stw-sec-below='96']) + .robustStory__module:not(:has(> flynt-component[data-stw-sec-above])):not(:has(> flynt-component[data-stw-above])) {
  margin-block-start: calc(96px - var(--module-gap)) !important;
}