/* mp-band — what sits on a band (07 §1 rule 2): tables, the week table and the FAQ are
   cards on the contrasting surface (white on tint, tint on white, raised on ink); cards
   without a scheme of their own do the same; the facts and the closing CTA are bands the
   theme wraps. The band itself (lanes, padding, the full-bleed fill) is entry.css.
   Contract: COMPONENTS.md §7.46. */
@layer components {
  .mp-band > :is(.mp-schedule, .mp-faq, .mp-table),
  .mp-band > .wp-block-table, /* vendor-alias: core table */
  .mp-prose--guide > :is(.mp-faq, .mp-table),
  .mp-prose--guide > .wp-block-table { /* vendor-alias: a guide's tables and FAQs are tint cards on its white body */
    padding: var(--mp-space-3xs) var(--mp-space-card);
    border-radius: var(--mp-radius-lg);
    background-color: var(--mp-color-surface-2);
    box-shadow: none;
  }
  .mp-band :is(.mp-schedule__row, .mp-faq__item):last-child { box-shadow: none; }
  :is(.mp-band, .mp-prose--guide) > .wp-block-table tr:last-child > :is(th, td) { border-block-end: 0; } /* vendor-alias */
  .mp-prose--guide :is(.mp-faq__item):last-child { box-shadow: none; }
  /* The guide's head: the page head on a tint band, its words on the reading column's edge;
     the lead photo starts a step below the band, not on its edge. */
  .mp-band--head { padding-block-end: var(--mp-space-s); }
  .mp-band--reading > .mp-section-head--page { padding-inline: max(var(--mp-gutter), (100% - var(--mp-w-prose)) / 2); }
  .mp-band--head + .mp-prose { padding-block-start: var(--mp-space-l); }
  .mp-band .mp-card:not([class*="mp-scheme-"]) { background-color: var(--mp-color-surface-2); }
  /* Facts on a band are cells on the contrasting surface (white on the tint facts band, tint on white). */
  .mp-band .mp-facts__item { padding: var(--mp-space-s); border-radius: var(--mp-radius-md); background-color: var(--mp-color-surface-2); }

  /* The closing CTA as a band: the band carries its scheme, the card frame goes. */
  .mp-band--cta > .mp-cta { padding: 0; border-radius: 0; background-color: transparent; }
  .mp-band--photo { position: relative; isolation: isolate; overflow: clip; }

  /* Ask, finder: the band is the surface, the card frame goes; the finder's photo stays rounded. */
  :is(.mp-band--ask > .mp-ask, .mp-band--finder > .mp-finder) { padding: 0; border-radius: 0; background-color: transparent; }
  .mp-band--finder .mp-finder__body { padding: 0 0 var(--mp-space-m); }
  .mp-band--finder .mp-finder__img { border-radius: var(--mp-radius-lg); }
  @media (width >= 64rem) {
    .mp-band--finder > .mp-finder { column-gap: var(--mp-space-xl); }
    .mp-band--finder .mp-finder__body { padding: 0; }
  }
  /* Proof: the photo edge to edge, the stats in line with the page's content. */
  .mp-band--proof { padding-block: 0; }
  .mp-band--proof > .mp-proof { grid-column: full; border-radius: 0; }
  .mp-band--proof .mp-proof__stats { padding-inline: max(var(--mp-gutter), calc((100% - var(--mp-w-max)) / 2)); }
  @media (width >= 48rem) {
    /* The layer holds the tile and the stats on the page's content edges. */
    .mp-band--proof .mp-proof__layer { padding-inline: max(var(--mp-gutter), calc((100% - var(--mp-w-max)) / 2)); }
    .mp-band--proof .mp-proof__stats { padding-inline: 0; }
  }
  .mp-band--photo > .mp-cta--photo { position: static; isolation: auto; overflow: visible; }
  /* The film band (the MP Camp redesign: a featured video, a gallery, a parent quote): from lg
     three columns, the film across two, the gallery's first two photos beside it and under it,
     the quote across the rest; the gallery's rail opens into the band's grid. */
  @media (width >= 64rem) {
    .mp-band:has(> .mp-video-grid--card):has(> .mp-gallery) {
      grid-template-columns: [full-start] minmax(calc(var(--mp-gutter) - var(--mp-space-xs)), 1fr) [wide-start prose-start] repeat(3, minmax(0, calc((var(--mp-w-max) - var(--mp-space-xs) * 2) / 3))) [prose-end wide-end] minmax(calc(var(--mp-gutter) - var(--mp-space-xs)), 1fr) [full-end]; /* the gutters less the column gap: the same edges as every band */
      column-gap: var(--mp-space-xs);
      row-gap: var(--mp-space-xs);
    }
    .mp-band:has(> .mp-video-grid--card):has(> .mp-gallery) > * { margin-block-start: 0; }
    .mp-band:has(> .mp-video-grid--card):has(> .mp-gallery) > :is(h2, h3) { margin-block-end: var(--mp-space-l); }
    .mp-band:has(> .mp-video-grid--card) > .mp-video-grid--card { grid-row: 2; grid-column: wide-start / span 2; }
    .mp-band:has(> .mp-video-grid--card) > .mp-video-grid--card { display: grid; }
    .mp-band:has(> .mp-video-grid--card) > .mp-video-grid--card { align-self: start; }
    .mp-band:has(> .mp-video-grid--card) > .mp-gallery,
    .mp-band:has(> .mp-video-grid--card) > .mp-gallery > .mp-gallery__list { display: contents; }
    .mp-band:has(> .mp-video-grid--card) .mp-gallery__item { display: grid; }
    .mp-band:has(> .mp-video-grid--card) .mp-gallery__item:nth-child(1) { grid-row: 2; grid-column: span 1 / wide-end; }
    .mp-band:has(> .mp-video-grid--card) .mp-gallery__item:nth-child(2) { grid-row: 3; grid-column: wide-start / span 1; }
    .mp-band:has(> .mp-video-grid--card) .mp-gallery__item:nth-child(n + 3),
    .mp-band:has(> .mp-video-grid--card) .mp-gallery__caption { display: none; }
    .mp-band:has(> .mp-video-grid--card) .mp-gallery__img { contain: size; block-size: 100%; aspect-ratio: auto; } /* the film sets the rows' height, the photos fill them */
    .mp-band:has(> .mp-video-grid--card) > .mp-quote { grid-row: 3; grid-column: span 2 / wide-end; }
    /* No quote (it renders nothing while the page has none): the film across two rows, the two
       photos stacked beside it. */
    .mp-band:has(> .mp-video-grid--card):not(:has(> .mp-quote)) > .mp-video-grid--card { grid-row: 2 / span 2; }
    .mp-band:has(> .mp-video-grid--card):not(:has(> .mp-quote)) .mp-gallery__item:nth-child(2) { grid-row: 3; grid-column: span 1 / wide-end; }
    /* The testimonials (in place of the one quote): a row of their own under the film. */
    .mp-band:has(> .mp-video-grid--card) > .mp-quotes { grid-row: 4; grid-column: wide; margin-block-start: var(--mp-space-xs); }
  }
}