/* =========================================================
   Quarto / RevealJS presentation layouts
   Designed for a fixed 16:9 RevealJS canvas
   ========================================================= */

:root {
  --slide-grey: #f2f2f2;

  --slide-gap: 2.2rem;
  --slide-padding-x: 3.2rem;
  --slide-padding-y: 2.2rem;

  /* Image envelopes */
  --visual-max-height: 62vh;
  --split-visual-max-height: 60vh;
}


/* =========================================================
   GENERAL
   ========================================================= */

.reveal .slides section {
  box-sizing: border-box;
}

.reveal .slides section img {
  display: block;
  width: auto;
  height: auto;
  object-fit: contain;
}

.reveal .slides section > h2 {
  margin-top: 0;
}

/* =========================================================
   TEXT SIZE UTILITIES
   ========================================================= */

.reveal section.smaller82 {
  font-size: 0.82em;
}

.reveal section.smaller75 {
  font-size: 0.75em;
}


/* =========================================================
   1. POWERPOINT STYLE: 2/3 WHITE + 1/3 GREY
   ========================================================= */

.reveal section.visual-rightnote {
  box-sizing: border-box;

  display: grid !important;
  grid-template-columns: 66.667% 33.333%;
  grid-template-rows: auto 1fr;

  width: 100%;
  height: 100%;

  padding: 0 !important;
  margin: 0 !important;
}


/* ---------------------------------------------------------
   TITLE
   --------------------------------------------------------- */

.reveal section.visual-rightnote > h2 {
  grid-column: 1;
  grid-row: 1;

  margin: 0;
  padding: 3.2rem 3.5rem 0.8rem 3.5rem;

  font-size: 1.35em;
  line-height: 1.1;
  font-weight: 700;

  text-align: left;
}


/* ---------------------------------------------------------
   MAIN VISUAL
   --------------------------------------------------------- */

.reveal section.visual-rightnote > .visual {
  grid-column: 1;
  grid-row: 2;

  position: relative;

  min-width: 0;
  min-height: 0;

  box-sizing: border-box;
  margin: 0;

  overflow: hidden;
}

.reveal section.visual-rightnote > .visual > p {
  position: absolute;

  top: 0.5rem;
  right: 3.5rem;
  bottom: 3rem;
  left: 3.5rem;

  margin: 0;
  padding: 0;
}

.reveal section.visual-rightnote > .visual img {
  position: absolute;
  inset: 0;

  width: 100%;
  height: 100%;

  max-width: 100%;
  max-height: 100%;

  margin: 0;

  object-fit: contain;
  object-position: center center;
}

/* ---------------------------------------------------------
   RIGHT GREY PANEL
   --------------------------------------------------------- */

.reveal section.visual-rightnote > .rightnote {
  grid-column: 2;
  grid-row: 1 / 3;

  box-sizing: border-box;

  width: 100%;
  height: 100%;

  margin: 0;
  padding: 4rem 3rem;

  background: #eeeeee;

  display: flex;
  flex-direction: column;
  justify-content: center;

  text-align: left;
}

.reveal section.visual-rightnote > .rightnote h3 {
  margin: 0 0 0.8rem 0;

  font-size: 1em;
  font-weight: 700;
}

.reveal section.visual-rightnote > .rightnote p,
.reveal section.visual-rightnote > .rightnote li {
  font-size: 0.65em;
  line-height: 1.35;
}


/* =========================================================
   2. WIDE VISUAL + GREY COMMENTARY BELOW

   Implemented as a simple two-row table:
   row 1 = visual
   row 2 = grey commentary
   ========================================================= */

.reveal section.visual-caption {
  padding: 0 !important;
  margin: 0 !important;
}


/* ---------------------------------------------------------
   TITLE
   Same geometry as visual-rightnote
   --------------------------------------------------------- */

.reveal section.visual-caption > h2 {
  margin: 0;
  padding: 3.2rem 3.5rem 0.8rem 3.5rem;

  font-size: 1.35em;
  line-height: 1.1;
  font-weight: 700;

  text-align: left;
}


/* ---------------------------------------------------------
   TWO-ROW TABLE
   --------------------------------------------------------- */

.reveal section.visual-caption .visual-caption-table {
  box-sizing: border-box;

  width: calc(100% - 7rem);

  margin: 0 3.5rem;

  border: 0;
  border-collapse: collapse;
  border-spacing: 0;

  background: transparent;
}


/* Remove Reveal table decoration */

.reveal section.visual-caption .visual-caption-table tbody,
.reveal section.visual-caption .visual-caption-table tr,
.reveal section.visual-caption .visual-caption-table td {
  border: 0;
}


/* ---------------------------------------------------------
   ROW 1: VISUAL
   --------------------------------------------------------- */

.reveal section.visual-caption .visual-row td {
  box-sizing: border-box;

  height: 330px;

  padding: 0 0 1.2rem 0;

  border: 0;
  background: transparent;

  text-align: left;
  vertical-align: middle;
}

.reveal section.visual-caption .visual-row img {
  display: block;

  width: auto;
  height: auto;

  max-width: 100%;
  max-height: 300px;

  margin: 0;

  object-fit: contain;
}


/* ---------------------------------------------------------
   ROW 2: GREY COMMENTARY
   --------------------------------------------------------- */

.reveal section.visual-caption .caption-row td {
  box-sizing: border-box;

  padding: 1.3rem 2rem;

  border: 0;

  background: var(--slide-grey);

  text-align: left;
  vertical-align: top;
}

.reveal section.visual-caption .caption-row h3 {
  margin: 0 0 0.6rem 0;
}


/* =========================================================
   3. FULL-SLIDE VISUAL / SCREENSHOT
   ========================================================= */

.reveal section.full-visual {
  padding: 0 !important;
  margin: 0 !important;

  display: flex !important;
  align-items: center;
  justify-content: center;

  width: 100%;
  height: 100%;

  overflow: hidden;
}


/* Keep semantic heading, but hide it visually */

.reveal section.full-visual > h2 {
  position: absolute;

  width: 1px;
  height: 1px;

  padding: 0;
  margin: -1px;

  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;

  border: 0;
}


/* Quarto image paragraph fills the slide */

.reveal section.full-visual > p {
  position: absolute;

  inset: 1.5rem;

  margin: 0;
  padding: 0;
}


/* Image fills the available rectangle */

.reveal section.full-visual > p > img {
  width: 100%;
  height: 100%;

  max-width: none;
  max-height: none;

  margin: 0;

  object-fit: contain;
  object-position: center center;
}


/* =========================================================
   4. LEFT GREY NOTE + LARGE RIGHT VISUAL
      1/3 commentary + 2/3 visual
   ========================================================= */

.reveal section.note-left {
  padding-left: 0;
}

.reveal section.note-left .columns {
  height: calc(100% - 4.5rem);

  margin: 0;
  gap: 0;

  align-items: stretch;
}

.reveal section.note-left .column:first-child {
  width: 33.333% !important;

  box-sizing: border-box;

  background: var(--slide-grey);

  padding: 2rem 2.2rem;

  display: flex;
  flex-direction: column;
  justify-content: center;
}

.reveal section.note-left .column:last-child {
  width: 66.666% !important;

  box-sizing: border-box;

  padding:
    1rem
    0
    1rem
    var(--slide-gap);

  display: flex;
  align-items: center;
  justify-content: center;
}

.reveal section.note-left .column:last-child img {
  width: auto;
  height: auto;

  max-width: 100%;
  max-height: var(--visual-max-height);

  margin: 0 auto;
}


/* =========================================================
   5. TWO EQUAL VISUAL PANELS
   ========================================================= */

.reveal section.split-visual .columns {
  height: calc(100% - 4.5rem);

  margin: 0;

  gap: var(--slide-gap);

  align-items: stretch;
}

.reveal section.split-visual .column {
  width: 50% !important;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.reveal section.split-visual .column img {
  width: auto;
  height: auto;

  max-width: 100%;
  max-height: var(--split-visual-max-height);

  margin: 0 auto;
}

/* =========================================================
   6. HTML FRAME — FULL WIDTH
   Extension of the existing slide geometry.
   ========================================================= */

.reveal section.html-frame {
  box-sizing: border-box;

  display: grid !important;
  grid-template-rows: auto 1fr;

  width: 100%;
  height: 100%;

  padding: 0 !important;
  margin: 0 !important;

  overflow: hidden;
}

.reveal section.html-frame > h2 {
  grid-row: 1;

  margin: 0;
  padding: 3.2rem 3.5rem 0.8rem 3.5rem;

  font-size: 1.35em;
  line-height: 1.1;
  font-weight: 700;

  text-align: left;
}

.reveal section.html-frame > .html-embed {
  grid-row: 2;

  box-sizing: border-box;
  min-width: 0;
  min-height: 0;

  margin: 0;
  padding: 0 1.5rem 1.5rem 1.5rem;

  overflow: hidden;
}

.reveal section.html-frame > .html-embed iframe {
  display: block;

  width: 100%;
  height: 100%;

  margin: 0;
  padding: 0;

  border: 0;
}

/* =========================================================
   7. HTML FRAME + RIGHT GREY NOTE
   Same geometry as the historical visual-rightnote layout.
   ========================================================= */

.reveal section.html-frame-rightnote {
  box-sizing: border-box;

  display: grid !important;
  grid-template-columns: 66.667% 33.333%;
  grid-template-rows: auto 1fr;

  width: 100%;
  height: 100%;

  padding: 0 !important;
  margin: 0 !important;

  overflow: hidden;
}

.reveal section.html-frame-rightnote > h2 {
  grid-column: 1;
  grid-row: 1;

  margin: 0;
  padding: 3.2rem 3.5rem 0.8rem 3.5rem;

  font-size: 1.35em;
  line-height: 1.1;
  font-weight: 700;

  text-align: left;
}

.reveal section.html-frame-rightnote > .html-embed {
  grid-column: 1;
  grid-row: 2;

  box-sizing: border-box;
  min-width: 0;
  min-height: 0;

  margin: 0;
  padding: 0 1.5rem 1.5rem 1.5rem;

  overflow: hidden;
}

.reveal section.html-frame-rightnote > .html-embed iframe {
  display: block;

  width: 100%;
  height: 100%;

  margin: 0;
  padding: 0;

  border: 0;
}

.reveal section.html-frame-rightnote > .rightnote {
  grid-column: 2;
  grid-row: 1 / 3;

  box-sizing: border-box;

  width: 100%;
  height: 100%;

  margin: 0;
  padding: 4rem 3rem;

  background: #eeeeee;

  display: flex;
  flex-direction: column;
  justify-content: center;

  text-align: left;
}

.reveal section.html-frame-rightnote > .rightnote h3 {
  margin: 0 0 0.8rem 0;

  font-size: 1em;
  font-weight: 700;
}

.reveal section.html-frame-rightnote > .rightnote p,
.reveal section.html-frame-rightnote > .rightnote li {
  font-size: 0.65em;
  line-height: 1.35;
}