/* Shared, theme-independent styles for the DARS 2026 deck. */

/* A slide marked has-footnote fills the slide so the footnote can sit at its
   bottom edge; reveal writes display:block inline on visible slides, so the
   flex layout (to keep the body vertically centred) only targets those. */
.reveal .slides section.has-footnote {
  height: 100%;
  box-sizing: border-box;
  padding-bottom: 3.2em;
}
.reveal .slides section.has-footnote[style*="display: block"] {
  display: flex !important;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.reveal .slides section .footnote {
  position: absolute;
  left: 0;
  right: 4em;
  bottom: 0;
  padding-top: 0.4em;
  border-top: 1px solid currentColor;
  font-size: 0.42em;
  line-height: 1.3;
  text-align: left;
  opacity: 0.75;
}

/* Pairs with has-footnote, which makes the section fill the slide. */
.reveal .slides section .bottom-logo {
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  margin: 0;
}

/* Text on the left, stacked media on the right. Children use width rather than
   the HTML width attribute so the image and video match exactly. */
.reveal .slides section .two-col {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.5em;
}
.reveal .slides section .two-col .text-col {
  flex: 1;
  text-align: left;
}
.reveal .slides section .two-col .media-col {
  display: flex;
  flex-direction: column;
  gap: 0.4em;
}
.reveal .slides section .two-col .media-col > * {
  width: 380px;
  margin: 0;
}

.reveal .slides section .two-col .media-col.wide > * {
  width: 600px;
}

.reveal .slides section .two-col .media-col.small > * {
  width: 300px;
}

/* Side-by-side lists aligned at the top, since the columns differ in length. */
.reveal .slides section .conditions {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: 3em;
  text-align: left;
}

/* reveal's r-stretch only sizes direct children of the section, and markdown wraps
   a bare <img> in <p>, so the stretch goes on a wrapper div and the image fits it. */
.reveal .slides section .fit-image > img {
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  object-fit: contain;
  margin: 0;
}

/* Vertical stack sharing the stretched height; min-height:0 lets flex items
   shrink below the images' natural size. */
.reveal .slides section .fit-stack {
  display: flex;
  flex-direction: column;
  gap: 0.2em;
}
.reveal .slides section .fit-stack > img {
  flex: 1 1 0;
  min-height: 0;
  width: 100%;
  max-width: none;
  max-height: none;
  object-fit: contain;
  margin: 0;
}

/* Flex removes the inline line-box gap under images; the theme's block margin is
   dropped so the gap property alone sets the spacing. */
.reveal .slides section .tight-stack {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.2em;
}
.reveal .slides section .tight-stack .r-hstack {
  gap: 0.5em;
}
.reveal .slides section .tight-stack img {
  margin: 0;
}
.reveal .slides section .tight-stack.flush,
.reveal .slides section .tight-stack.flush .r-hstack {
  gap: 0;
}

/* Draft slides proposed from the paper review; delete the class to remove the badge. */
.reveal .slides section.suggested::before {
  content: "SUGGESTED";
  position: absolute;
  top: 0;
  right: 0;
  padding: 0.15em 0.5em;
  font-size: 0.4em;
  letter-spacing: 0.08em;
  color: #fff;
  background: #d9730d;
  border-radius: 0.3em;
}