/* Layout for the editor's blocks inside generated blog posts (CraftPages).
   Typography and colours come from the site's own CSS; this only adds what
   the blocks need to lay out. Rewritten on every blog publish. */
.wp-block-image,
.wp-block-gallery,
.wp-block-embed,
.wp-block-table,
.wp-block-code,
.wp-block-buttons {
  margin: 1.5em 0;
}
.wp-block-image img,
.wp-block-gallery img {
  display: block;
  max-width: 100%;
  height: auto;
}
.wp-block-image figcaption,
.wp-block-gallery figcaption,
.wp-block-table figcaption,
.wp-block-embed figcaption {
  margin-top: 0.5em;
  font-size: 0.9em;
  opacity: 0.75;
  text-align: center;
}
.aligncenter {
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}
.aligncenter img {
  margin: 0 auto;
}
.alignleft {
  float: left;
  margin: 0.3em 1.5em 1em 0;
}
.alignright {
  float: right;
  margin: 0.3em 0 1em 1.5em;
}
.wp-block-gallery {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  padding: 0;
}
.wp-block-gallery > .wp-block-image {
  flex: 1 1 calc(33.333% - 12px);
  margin: 0;
}
.wp-block-gallery.columns-2 > .wp-block-image {
  flex-basis: calc(50% - 12px);
}
.wp-block-gallery .wp-block-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.wp-block-quote {
  margin: 1.5em 0;
  padding-left: 1em;
  border-left: 3px solid currentColor;
}
.wp-block-quote cite {
  display: block;
  margin-top: 0.5em;
  font-size: 0.9em;
  font-style: normal;
  opacity: 0.75;
}
.wp-block-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75em;
}
.wp-block-button__link {
  display: inline-block;
  padding: 0.7em 1.4em;
  border-radius: 6px;
  background: #1b1c1f;
  color: #fff;
  text-decoration: none;
}
.wp-block-table {
  overflow-x: auto;
}
.wp-block-table table {
  width: 100%;
  border-collapse: collapse;
}
.wp-block-table td,
.wp-block-table th {
  padding: 0.5em 0.75em;
  border: 1px solid rgba(127, 127, 127, 0.35);
  text-align: left;
}
.wp-block-separator {
  margin: 2em auto;
  border: 0;
  border-top: 1px solid currentColor;
  opacity: 0.3;
}
.wp-block-code {
  padding: 1em;
  border-radius: 6px;
  background: rgba(127, 127, 127, 0.12);
  overflow-x: auto;
}
.wp-block-embed__wrapper {
  position: relative;
}
.wp-embed-aspect-16-9 .wp-block-embed__wrapper::before {
  content: '';
  display: block;
  padding-top: 56.25%;
}
.wp-embed-aspect-16-9 .wp-block-embed__wrapper iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

/* Content width: wide and full blocks break out of the article's text column. */
.alignwide {
  position: relative;
  left: 50%;
  width: min(1200px, 100vw - 32px);
  max-width: none;
  transform: translateX(-50%);
}
.alignfull {
  position: relative;
  left: 50%;
  width: 100vw;
  max-width: none;
  transform: translateX(-50%);
}
.alignfull img,
.alignwide img {
  width: 100%;
}

/* Text columns: paragraphs flowed across columns (CSS multi-column). */
.cp-text-columns {
  column-gap: 2.5em;
  margin: 1.5em 0;
}
.cp-text-columns-2 {
  column-count: 2;
}
.cp-text-columns-3 {
  column-count: 3;
}
.cp-text-columns > :is(figure, h2, h3, h4, blockquote, ul, ol) {
  break-inside: avoid;
}
.cp-text-columns > :first-child {
  margin-top: 0;
}
@media (max-width: 700px) {
  .cp-text-columns-2,
  .cp-text-columns-3 {
    column-count: 1;
  }
}

/* Gallery column counts chosen in the editor. */
.wp-block-gallery.columns-1 > .wp-block-image {
  flex-basis: 100%;
}
.wp-block-gallery.columns-2 > .wp-block-image {
  flex-basis: calc(50% - 12px);
}
.wp-block-gallery.columns-3 > .wp-block-image {
  flex-basis: calc(33.333% - 12px);
}
.wp-block-gallery.columns-4 > .wp-block-image {
  flex-basis: calc(25% - 12px);
}
.wp-block-gallery.columns-5 > .wp-block-image {
  flex-basis: calc(20% - 12px);
}
.wp-block-gallery.columns-6 > .wp-block-image {
  flex-basis: calc(16.666% - 12px);
}
.wp-block-gallery.is-cropped .wp-block-image img {
  aspect-ratio: 1;
}
@media (max-width: 600px) {
  .wp-block-gallery > .wp-block-image {
    flex-basis: calc(50% - 12px) !important;
  }
}

/* Code block (CraftPages): colours come from the block's theme, set on the block as
   --cp-code-bg and --cp-code-fg; the tokens carry their own colours. The editor uses
   this same file, so a block looks the same there and on the site. Inner rules are
   scoped under .cp-code so a site's own pre/code/figcaption styles don't win. */
.cp-code {
  --cp-code-font: ui-monospace, SFMono-Regular, Menlo, Consolas, 'Liberation Mono', monospace;
  position: relative;
  margin: 1.5em 0;
  border-radius: 8px;
  background: var(--cp-code-bg, #24292e);
  color: var(--cp-code-fg, #e1e4e8);
  font: 0.875rem/1.6 var(--cp-code-font);
  overflow: hidden;
  /* A light theme on a light page still shows its edge. */
  box-shadow: inset 0 0 0 1px color-mix(in srgb, currentColor 14%, transparent);
}
.cp-code .cp-code__title {
  margin: 0;
  padding: 0.6em 1em;
  border: 0;
  border-bottom: 1px solid color-mix(in srgb, currentColor 15%, transparent);
  background: none;
  color: inherit;
  font: inherit;
  text-align: left;
  opacity: 0.8;
}
.cp-code .cp-code__title a {
  color: inherit;
  text-decoration: none;
}
.cp-code .cp-code__title a:hover {
  text-decoration: underline;
}
.cp-code .cp-code__pre {
  max-width: none;
  margin: 0;
  padding: 1em 0;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  overflow-x: auto;
  background: none;
  color: inherit;
  font: inherit;
  white-space: pre;
  tab-size: 2;
}
.cp-code .cp-code__pre code {
  display: block;
  width: max-content;
  min-width: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  color: inherit;
  font: inherit;
}
.cp-code .line {
  display: inline-block;
  box-sizing: border-box;
  min-width: 100%;
  padding: 0 1em;
}
.cp-code .hl {
  background: color-mix(in srgb, currentColor 12%, transparent);
  box-shadow: inset 3px 0 color-mix(in srgb, currentColor 45%, transparent);
}
.cp-code--numbers .cp-code__pre code {
  counter-reset: line;
}
.cp-code--numbers .line::before {
  counter-increment: line;
  content: counter(line);
  display: inline-block;
  width: calc(var(--cp-code-digits, 2) * 1ch);
  margin-right: 1em;
  text-align: right;
  opacity: 0.4;
  user-select: none;
}
.cp-code .cp-code__copy {
  position: absolute;
  top: 0.5em;
  right: 0.5em;
  padding: 0.3em 0.7em;
  border: 1px solid color-mix(in srgb, currentColor 25%, transparent);
  border-radius: 6px;
  background: var(--cp-code-bg, #24292e);
  color: inherit;
  font: 0.75rem/1.4 var(--cp-code-font);
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.15s;
}
.cp-code:hover .cp-code__copy,
.cp-code .cp-code__copy:focus-visible,
.cp-code .cp-code__copy[data-done] {
  opacity: 1;
}
@media (hover: none) {
  .cp-code .cp-code__copy {
    opacity: 1;
  }
}