/*
 * phaedo-cms -- just enough for the engine's own section partials, which draw
 * a kind of section the host has no partial for (see
 * PublicHelper#cms_render_section), to read as what they are: a gallery as a
 * grid rather than a bulleted column, an info panel set apart from the text
 * around it, and a bio's picture beside its words. Everything else is the
 * host's page as it already is.
 *
 * Linked by the first of those partials on a page, so a host with a partial
 * for every kind never loads it. In a layer, unlike the banners' sheet: these
 * stand in for the host's design, so any unlayered rule of the host's beats
 * them, whatever its specificity.
 */
@layer phaedo-cms-default-sections {
  .cms-section {
    margin-block: 1.5em;
  }

  .cms-section img {
    display: block;
    max-width: 100%;
    height: auto;
  }

  .cms-section--image {
    margin-inline: 0;
  }

  .cms-section--image figcaption {
    margin-block-start: 0.5em;
    font-size: 0.9em;
  }

  /* Transparent tints, so a panel reads on a light or a dark page alike. */
  .cms-section--callout {
    --cms-callout-color: #2563eb;

    padding: 0.75em 1em;
    border-inline-start: 4px solid var(--cms-callout-color);
    background: color-mix(in srgb, var(--cms-callout-color) 10%, transparent);
  }

  .cms-section--callout-warning {
    --cms-callout-color: #b45309;
  }

  .cms-section--callout-success {
    --cms-callout-color: #15803d;
  }

  .cms-section--callout > :first-child {
    margin-block-start: 0;
  }

  .cms-section--callout > :last-child {
    margin-block-end: 0;
  }

  /* The column count is the editor's, set on the section as a custom property. */
  .cms-section--gallery ul {
    display: grid;
    grid-template-columns: repeat(
      var(--cms-gallery-columns, 3),
      minmax(0, 1fr)
    );
    gap: 1em;
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .cms-section--gallery img {
    width: 100%;
    aspect-ratio: 1;
    object-fit: cover;
  }

  /* The picture beside the words, and above them where there is no room. */
  .cms-section--bio {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5em;
    align-items: flex-start;
  }

  /*
   * A flex item is no narrower than its content unless told otherwise, and an
   * image's content is its natural width: an upload wider than the text would
   * wrap the words under it.
   */
  .cms-section--bio > .cms-bio-open {
    flex: 0 1 12em;
    min-width: 0;
    padding: 0;
    border: 0;
    background: none;
    cursor: zoom-in;
  }

  /*
   * The picture opened larger: in the top layer, centred by the browser. The
   * popover is a div around the img so that a rule for img, ours above or a
   * host's, cannot show it closed.
   */
  .cms-bio-enlarged {
    /*
     * The browser centres a popover with margin: auto, which a host's reset of
     * * { margin: 0 } beats, as any author rule beats the browser's. Important
     * in this layer, which beats a host's normal rule outside it.
     */
    margin: auto !important;
    padding: 0;
    border: 0;
    background: none;
    overflow: visible;
  }

  /*
   * Important, in the layer: a host's rule for div, such as display: block,
   * beats the browser's display: none for a closed popover, and an important
   * declaration in a layer beats a normal one outside it. Only where popovers
   * work, since a browser without them would otherwise hide the picture for good.
   */
  @supports selector(:popover-open) {
    .cms-bio-enlarged:not(:popover-open) {
      display: none !important;
    }
  }

  /* Without popovers the button does nothing, so it should not look as if it does. */
  @supports not selector(:popover-open) {
    .cms-section--bio > .cms-bio-open {
      cursor: auto;
    }

    .cms-bio-enlarged {
      display: none;
    }
  }

  .cms-bio-enlarged button {
    display: block;
    padding: 0;
    border: 0;
    background: none;
    cursor: zoom-out;
  }

  /* Important, like the rule above: a host's unlayered max-width: 100% for img would otherwise leave it as wide as the upload. */
  .cms-bio-enlarged img {
    max-width: 96vw !important;
    max-height: 96dvh !important;
    object-fit: contain;
  }

  .cms-bio-enlarged::backdrop {
    background: rgb(0 0 0 / 0.85);
  }

  .cms-section--bio > div:not(.cms-bio-enlarged) {
    flex: 1 1 16em;
    min-width: 0;
  }

  .cms-section--bio h2 {
    margin-block-start: 0;
  }

  .cms-section--embed iframe {
    display: block;
    border: 0;
  }
}