/* [L5] New SDC: no existing component is a contained, narrow, brand-colored panel
   or an overlap (L1-L4 ruled out; see docs/css-change-log.md, entry "panel"). The dark colors
   themselves come from the L3 .bad-background--dark zone. */
.bad-panel-block {
  margin-inline: auto;
  max-width: 48rem;
}

/* Fills the section instead of the narrow default, for a panel that holds a grid of cards. */
.bad-panel-block--full {
  max-width: none;
}

/* Pulls the panel up by the padding of the Medium section it sits in (5xl)
   plus 6xl into the section above, roughly a third of a short panel, so that
   section needs at least 6xl of bottom padding (Large gives 7xl). Painted
   above that section. The negative bottom margin trims 3xl from the gap
   below it. */
.bad-panel-block--overlap {
  margin-block-end: calc(-1 * var(--dimension-3xl));
  margin-block-start: calc(-1 * (var(--dimension-5xl) + var(--dimension-4xl)));
  position: relative;
  z-index: 1;
}

/* Any panel with a background. The dark one gets its colors from the L3
   .bad-background--dark zone, which also switches the text to white. */
.bad-panel--filled {
  border-radius: var(--border-radius-container);
  box-shadow: var(--elevation-overlay);
  padding: var(--dimension-xl);

  @media (min-width: 761px) {
    padding: var(--dimension-3xl);
  }
}

.bad-panel--white {
  background-color: var(--color-neutral-000);
}

.bad-panel--light-blue {
  background-color: var(--color-primary-100);
}

.bad-panel--light-orange {
  background-color: var(--color-secondary-150);
  border: 2px solid var(--color-secondary-300);
}

/* The panel can take focus programmatically (the donation page's hero button moves focus here), so
   draw a ring inside its edge: the white focus-on-band color on the dark band. */
.bad-panel--dark:focus-visible:not(:has([data-zeffy-embed])) {
  outline: 3px solid var(--color-interactive-focus-on-band);
  outline-offset: -8px;
}

/* Headings inside a panel are one step down from a section heading: smaller
   and lighter, as in the donor bundle story. The three classes beat the
   element rule (h2.bad-heading). */
.bad-panel-block .bad-heading.bad-heading-block {
  font-size: calc(var(--text-size-2xl) * var(--heading-scale));
}

/* The lighter weight is only the default: a heading with its Font weight set to
   Semi-bold or Bold keeps that weight (see heading.css). */
.bad-panel-block .bad-heading.bad-heading-block:not([class*='--weight-']) {
  font-weight: var(--text-weight-medium);
}

/* The Zeffy form is centred in the panel with a little blue at each side, so
   a narrower panel keeps that side gap close to the panel's own padding. */
.bad-panel-block:has([data-zeffy-embed]) {
  max-width: 42rem;
}

/* The placeholder holds an   that Zeffy leaves in the card. Its line
   pushes the iframe down and leaves a white band at the top, so collapse it. */
.bad-panel [data-zeffy-embed] {
  font-size: 0;
  line-height: 0;
}

.bad-panel [data-zeffy-embed] iframe {
  display: block;
}