/**
 * @file
 * Structural CSS for Gutenberg Base theme.
 *
 * Only layout and alignment rules that globalStyles YAML cannot express.
 * Colors, typography, spacing, borders, and block decoration should be
 * defined in gutenberg_base.gutenberg.yml under globalStyles.
 */

/* --- Content container --- */

/*
 * Drupal may wrap field output in a container (e.g. <div class="clearfix">)
 * between .entry-content and the actual Gutenberg blocks. We make those
 * wrappers transparent and constrain the blocks themselves.
 */
.wp-site-blocks > * {
  max-width: var(--wp--style--global--content-size, 720px);
  margin-left: auto;
  margin-right: auto;
}

.entry-content > .clearfix,
.entry-content > .field {
  max-width: none;
}

.entry-content > :where(:not(.alignleft):not(.alignright):not(.alignfull):not(.alignwide):not(.clearfix):not(.field)),
.entry-content > .clearfix > :where(:not(.alignleft):not(.alignright):not(.alignfull):not(.alignwide)),
.entry-content > .field .field__item > :where(:not(.alignleft):not(.alignright):not(.alignfull):not(.alignwide)) {
  max-width: var(--wp--style--global--content-size, 720px);
  margin-left: auto;
  margin-right: auto;
}

/* --- Alignment --- */

.alignwide,
.entry-content > .clearfix > .alignwide,
.entry-content > .field .field__item > .alignwide {
  max-width: var(--wp--style--global--wide-size, 1200px);
  margin-left: auto;
  margin-right: auto;
}

.alignfull,
.entry-content > .clearfix > .alignfull,
.entry-content > .field .field__item > .alignfull {
  max-width: none;
  margin-left: calc(-50vw + 50%);
  margin-right: calc(-50vw + 50%);
  width: 100vw;
}

.alignleft {
  float: left;
  margin-right: 1.5em;
  margin-bottom: 0.5em;
  max-width: 50%;
}

.alignright {
  float: right;
  margin-left: 1.5em;
  margin-bottom: 0.5em;
  max-width: 50%;
}

.aligncenter {
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

/* Clear floats. */
.entry-content::after {
  content: "";
  display: table;
  clear: both;
}

/* --- Responsive images --- */

img {
  max-width: 100%;
  height: auto;
}

/* --- Columns responsive stacking --- */
/* 781px matches Gutenberg core's column stacking breakpoint intentionally. */

@media (max-width: 781px) {
  .wp-block-columns {
    flex-wrap: wrap;
  }

  .wp-block-columns > .wp-block-column {
    flex-basis: 100% !important;
  }
}

/* --- Gallery grid --- */

.wp-block-gallery {
  display: flex;
  flex-wrap: wrap;
  gap: var(--wp--style--gallery-gap, 0.5em);
  list-style: none;
  padding: 0;
}

.wp-block-gallery .wp-block-image {
  flex-grow: 1;
}

.wp-block-gallery .wp-block-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* --- Responsive embeds --- */

.wp-block-embed .wp-block-embed__wrapper {
  position: relative;
  padding-bottom: 56.25%;
  height: 0;
  overflow: hidden;
}

.wp-block-embed .wp-block-embed__wrapper iframe,
.wp-block-embed .wp-block-embed__wrapper video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/* --- Lists --- */

.entry-content ul,
.entry-content ol {
  padding-left: 1.5em;
}

.entry-content ul ul,
.entry-content ol ol,
.entry-content ul ol,
.entry-content ol ul {
  margin-top: 0.25em;
  margin-bottom: 0.25em;
}

/* --- Block spacing --- */

.entry-content > * + *,
.entry-content > .clearfix > * + *,
.entry-content > .field .field__item > * + * {
  margin-top: var(--wp--style--block-gap, 1.5rem);
}

/* --- Cover block --- */

.wp-block-cover {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 430px;
}
