@page {
  size: A5;
  margin: 13mm 10mm;
}

.pagedjs_area:has(.img--fullpage) {
    height: 200%;
}
body {
  font-size: var(--font-size-base);
}

.meta [data-generated-date] {
  position: running(generatedDate);
}

.meta [data-publication-title] {
  position: running(publicationTitle);
}

.meta [data-chapter-title] {
  position: running(chapterTitle);
}

.page--cover {
  page: cover;
}

.page--image {
  page: image;
  break-before: left;
}

.spread--image {
  page: imagespread;
  break-before: left;
}

[template-type="front"] {
  page: front;
  counter-reset: page;
}

[template-type="back"] {
  page: front;
  counter-reset: page;
}


[template-type="circuit"] {
  page: circuit;
  break-before: page;
}

@page:right {
    margin-left: 16mm;
}


@page:left {
    margin-right: 16mm;

  @bottom-left {
    content: counter(page);
  }

  @top-left {
    content: element(publicationTitle);
    font-size: var(--font-size-base);
    font-style: italic;
  }

  @top-right {
    content: element(generatedDate);
    font-size: var(--font-size-base);
    font-style: italic;
  }
}

@page:blank {
  background: yellow;

  @top-left {
    content: none;
  }

  @top-right {
    content: none;
  }

  @bottom-right {
    content: none;
  }
}

@page:right {
  @top-right {
    content: element(chapterTitle);
    font-size: var(--font-size-base);
    font-style: italic;
  }

  @bottom-right {
    content: counter(page);
  }
}

@page cover {
  background: var(--accent);
  margin-top: auto;
  position: relative;

  header {
    position: absolute;
    margin: 0 0;
    top: 50%;
    transform: translate3d(0, -50%, 0px);
    width: 100%;
  }
}

.image-list {
  page: imagelist;
}

@page imagelist:left {
  figure figcaption {
    ordeR: -1;
  }
}

@page image {
  margin-top: auto;
  position: relative;
  margin: 13mm 13mm;

  header {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr;
    grid-template-areas: "zero";
    grid-gap: 4mm;
    overflow: hidden;
  }

  header[data-length="2"] {
    grid-template-columns: 1fr;
    grid-template-rows: 1fr 1fr;
    grid-template-areas: "zero" "one";
  }

  header[data-length="3"] {
    grid-template-columns: 2fr 1fr;
    grid-template-rows: 1fr 1fr;
    grid-template-areas: "zero one" "zero two";
  }

  header[data-length="4"] {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    grid-template-areas: "zero one" "two three";
  }

  img {
    width: 100%;
    height: 100%;
  }

  figure {
    grid-column: 1 / span 2;
    grid-row: 1 / span 3;
    margin: 0 0;
    position: relative;
  }

  figure[index="0"] {
    grid-area: zero;
  }

  figure[index="1"] {
    grid-area: one;
  }

  figure[index="2"] {
    grid-area: two;
  }

  figure[index="3"] {
    grid-area: three;
  }

  figure img {
    object-fit: cover;
    width: 100%;
    height: 100%;
    display: block;
  }

  figcaption {
    position: absolute;
    z-index: 2;
    left: 2mm;
    bottom: 2mm;
    padding: 1mm 2mm;
    background: white;
    font-size: 8px;
    max-width: calc(100% - 4mm);
  }
}

@page imagespread {
  background: orange;
}

@page front {
  background: lightgrey;
  position: relative;

  @top-right {
    content: none;
  }

  @top-left {
    content: none;
  }

  @bottom-right {
    content: none;
  }

  header, footer {
    position: absolute;
    margin: 0 0;
    top: 50%;
    transform: translate3d(0, -50%, 0px);
    width: 100%;
    max-width: 80%;
  }

  footer {
    top: auto;
    bottom: 0;
    transform: none;
  }
}

@page back {
    background: pink;
    position: relative;

    @top-right {
      content: none;
    }

    @top-left {
      content: none;
    }

    @bottom-right {
      content: none;
    }

}

article:has([data-chapter-title]), article:has([data-subchapter-title]) {
  break-before: page;
}

article>*:first-of-type:is(table) {
  margin-top: 0;
}

.header-section-number {
  display: none;
}

.fix-break-left {
  break-before: left;
}

.fix-break {
  break-before: page;
}

h2:has( + p ), h3:has( + p ), h4:has( + p ), h5:has( + p ), h6:has( + p ) {
  break-after: avoid;
}