/* Footer. Site-wide CSS tab. A top-level blue callout IS the band, so ordinary
   callouts get another colour; js/footer-inject.js clones it onto every page.
   Layering and !important ranks: docs/super.md, "Site-Wide Footer".

   Notion, on /footer:  Callout (Blue background, no icon)
                          ├─ Image       the background photo
                          └─ 2 columns   Contact & Info + copyright (60) | greeting (40) */

.notion-root {
  padding-bottom: 0 !important;
}

.notion-root > .notion-callout.bg-blue-light {
  position: relative;
  width: 100vw;
  margin: 100px 0 0;
  margin-inline: calc(50% - 50vw);
  padding: clamp(20px, 3vh, 36px) 0 clamp(12px, 2vh, 20px);
  border: 0 !important;
  border-radius: 0;
  overflow: hidden;
  background: #14161a;

  > .notion-callout__content {
    margin: 0;
  }

  .notion-image {
    position: absolute;
    inset: 0;
    margin: 0;
  }

  .notion-image img {
    width: 100%;
    height: 100% !important;
    object-fit: cover;
  }

  .notion-image::after {
    content: "";
    position: absolute;
    inset: 0;
    background: rgb(0 0 0 / 0.62);
  }

  > .notion-callout__content > *:not(.notion-image) {
    position: relative;
    padding-inline: clamp(24px, 6vw, 96px);
  }

  .notion-heading,
  .notion-text,
  .notion-link {
    color: #ffffff !important;
  }

  .notion-column:last-child {
    text-align: right;
  }

  .notion-column:first-child .notion-text:last-child {
    font-size: 0.8125rem;
    opacity: 0.72;
    margin-top: 12px;
  }
}