/* =============================================================================
   Module Content Components
   -----------------------------------------------------------------------------
   .learning-obj-card         — blue learning objectives box
     .learning-obj-card__title  — 32px H1 section heading
     .learning-obj-card__body   — body text + ordered list (supports nested)

   .figure-caption            — italic "Figure #" label below any media

   .media-card                — title + frame unit (image or video)
     .media-card__title       — 18px semi-bold image/video name
     .media-card__frame       — rounded frame with shadow (holds <img>)
     .media-card--video       — adds play-icon overlay variant
     .media-card__play        — centered play icon
     .media-card__3d-hint     — bottom-left overlay label for 3D viewer

   .img-layout                — full block: image row + figure caption
     .img-layout__images      — flex row of media-cards
     .img-layout--1up         — single centered image
     .img-layout--2up         — two equal-width images
     .img-layout--3up         — three equal-width images
     .img-layout--video       — video layout (same structure, centered)

   .callout                   — bordered callout box
     .callout__title          — 24px H2 in primary blue
     .callout__body           — 16px body text + lists

   .interactive-visual        — animation/illustration/3D interactive block
     .interactive-visual__images  — 2-up media-card row
     .interactive-visual__divider — <hr> separator (3D variant)
     .visual-settings         — controls bar (checkboxes + flip toggle)
     .labelled-slider         — scrub slider with side labels

   .data-table-wrapper        — rounded clipped table container
   .data-table                — comparison table (fixed layout, 3 columns)
   ============================================================================= */

/* --- Learning objectives card ---------------------------------------------- */
.learning-obj-card {
  background-color: var(--surface-learning-objectives);
  border-radius: var(--corner-m-radius);
  padding: var(--spacing-xl);
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xl);
}

.learning-obj-card__title {
  font-family: var(--font-family);
  font-size: var(--type-h1-size);
  font-weight: var(--type-h1-weight);
  line-height: var(--type-h1-line-height);
  letter-spacing: var(--type-h1-tracking);
  color: var(--text-default);
  margin: 0;
  text-box-trim: trim-both;
  text-box-edge: cap alphabetic;
  text-box: trim-both cap alphabetic;
}

.learning-obj-card__body {
  font-family: var(--font-family);
  font-size: var(--type-body-size);
  font-weight: var(--type-body-weight);
  line-height: var(--type-body-line-height);
  letter-spacing: var(--type-body-tracking);
  color: var(--text-default);
  margin: 0;
}

.learning-obj-card__body p {
  margin: 0 0 var(--spacing-s) 0;
}

/* Outer list */
.learning-obj-card__body > ol {
  margin: 0;
  padding-left: 0;
  list-style: none;
  counter-reset: lo-counter;
}

.learning-obj-card__body > ol > li {
  counter-increment: lo-counter;
  padding-left: 24px;
  position: relative;
  margin-bottom: 0;
  line-height: var(--type-body-line-height);
}

.learning-obj-card__body > ol > li::before {
  content: counter(lo-counter) ".";
  position: absolute;
  left: 0;
  color: var(--text-default);
}

/* Nested list */
.learning-obj-card__body ol ol {
  list-style: none;
  counter-reset: lo-sub-counter;
  margin-top: var(--spacing-xxs);
  padding-left: 20px;
}

.learning-obj-card__body ol ol li {
  counter-increment: lo-sub-counter;
  padding-left: 24px;
  position: relative;
}

.learning-obj-card__body ol ol li::before {
  content: counter(lo-sub-counter, lower-alpha) ".";
  position: absolute;
  left: 0;
  color: var(--text-default);
}

/* Image inside list item — for 3.5 US section */
.body-content li .img-layout {
  margin-top: var(--spacing-xxs);
  margin-bottom: var(--spacing-l);
}

/* --- Figure caption --------------------------------------------------------- */
.figure-caption {
  font-family: var(--font-family);
  font-size: var(--type-figure-caption-size);
  font-weight: var(--type-figure-caption-weight);
  line-height: var(--type-figure-caption-line-height);
  font-style: var(--type-figure-caption-style);
  color: var(--text-labels-default);
  margin: 0;
  width: 100%;
text-align: left;
  text-box-trim: trim-both;
  text-box-edge: cap alphabetic;
  text-box: trim-both cap alphabetic;
}

/* --- Media card (image or video) ------------------------------------------- */
.media-card {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0;
  gap: var(--spacing-m);
}

.media-card__title {
  font-family: var(--font-family);
  font-size: var(--type-body-size);
  font-weight: var(--type-body-weight);
  line-height: 0;
  color: var(--text-default);
  margin-top: var(--spacing-xxs);
  margin-bottom: 0;
  padding: 0;
  text-box-trim: trim-both;
  text-box-edge: cap alphabetic;
  text-box: trim-both cap alphabetic;
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-xs);
}

.inline-icon {
  height: 1.4em;
  width: auto;
  padding: 0;
  margin: 0;
}

.media-card__frame {
  aspect-ratio: 346 / 231;
  border-radius: var(--corner-s-radius);
  box-shadow: 0 var(--weight-xxs) var(--weight-xs) 0 rgba(18, 18, 18, 0.3);
  overflow: hidden;
  position: relative;
  width: 100%;
  flex-shrink: 0;
  background-color: white;
}

.media-card__frame img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.media-card__frame video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  background-color: black;
}

/* Video play icon — centered overlay
.media-card__play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 64px;
  height: 64px;
  pointer-events: none;
  color: var(--colour-primary-30);
}

.media-card__play svg {
  width: 100%;
  height: 100%;
} */

/* --- Image / video layout blocks ------------------------------------------- */
.img-layout {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-m);      /* 16px between image row and caption */
  width: 100%;
}

/* Row of image cards */
.img-layout__images {
  display: flex;
  gap: var(--spacing-m);      /* 16px between images */
  width: 100%;
}

/* 1-up: single centered image, constrained width */
.img-layout--1up .img-layout__images {
  justify-content: center;
  padding: 0 var(--spacing-page-margins);   /* 120px — matches Figma centering */
}

.img-layout--1up .media-card {
  flex: 0 1 100%;
}

.img-layout--1up p.figure-caption {
  padding: 0 var(--spacing-page-margins);
}

/* 2-up: two equal columns */
.img-layout--2up .img-layout__images {
  padding: 0 var(--spacing-xl);             /* 32px side padding */
}

.img-layout--2up p.figure-caption {
  padding: 0 var(--spacing-xl);
}

/* 3-up: three equal columns, no extra padding */
.img-layout--3up .img-layout__images {
  padding: 0;
}

.img-layout--3up p.figure-caption {
  padding: 0;
}

/* Video: same as 1-up centering */
.img-layout--video .img-layout__images {
  justify-content: center;
  padding: 0 var(--spacing-page-margins);
}

.img-layout--video p.figure-caption {
  padding: 0 var(--spacing-page-margins);
}

/* --- Callout box ------------------------------------------------------------ */
.callout {
  background-color: var(--surface-callout);
  border: var(--weight-xxs) solid var(--surface-callout-border);
  border-radius: var(--corner-l-radius);
  padding: var(--spacing-xl);
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xl);
}

.callout__title {
  font-family: var(--font-family);
  font-size: var(--type-h2-size);
  font-weight: var(--type-h2-weight);
  line-height: var(--type-h2-line-height);
  letter-spacing: var(--type-h2-tracking);
  color: var(--text-primary);
  margin: 0;
  text-box-trim: trim-both;
  text-box-edge: cap alphabetic;
  text-box: trim-both cap alphabetic;
}

.callout__body {
  font-family: var(--font-family);
  font-size: var(--type-body-size);
  font-weight: var(--type-body-weight);
  line-height: var(--type-body-line-height);
  letter-spacing: var(--type-body-tracking);
  color: var(--text-default);
  margin: 0;
}

/* --- Module content section spacing ---------------------------------------- */
/* page-main has 64px gap (set in sidebar.css); each section uses 32px internally */
.module-section {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xl);     /* 32px between items within a section */
}

/* Page-level display heading (48px) */
.mod-page-title {
  font-family: var(--font-family);
  font-size: var(--type-display-size);
  font-weight: var(--type-display-weight);
  line-height: var(--type-display-line-height);
  letter-spacing: var(--type-display-tracking);
  color: var(--text-default);
  margin: 0;
  text-box-trim: trim-both;
  text-box-edge: cap alphabetic;
  text-box: trim-both cap alphabetic;
}

/* Section-level H1 heading (32px) */
.section-heading {
  font-family: var(--font-family);
  font-size: var(--type-h1-size);
  font-weight: var(--type-h1-weight);
  line-height: var(--type-h1-line-height);
  letter-spacing: var(--type-h1-tracking);
  color: var(--text-default);
  margin: 0;
  text-box-trim: trim-both;
  text-box-edge: cap alphabetic;
  text-box: trim-both cap alphabetic;
}

/* Rich-text body block — paragraphs and lists with 12px internal spacing */
.body-content {
  font-family: var(--font-family);
  font-size: var(--type-body-size);
  font-weight: var(--type-body-weight);
  line-height: var(--type-body-line-height);
  letter-spacing: var(--type-body-tracking);
  color: var(--text-default);
}

.body-content p {
  margin: 0 0 var(--spacing-s) 0;   /* 12px below each block */
}

.body-content ol,
.body-content ul {
  margin: 0 0 var(--spacing-s) 0;
  padding-left: 24px;
}

.body-content p:last-child,
.body-content ol:last-child,
.body-content ul:last-child {
  margin-bottom: 0;
}

.body-content ol { list-style: decimal; }
.body-content ul { list-style: disc; }

.body-content li {
  line-height: var(--type-body-line-height);
}

/* Stand-alone body paragraph (not inside a body-content block) */
.module-section > p {
  font-family: var(--font-family);
  font-size: var(--type-body-size);
  font-weight: var(--type-body-weight);
  line-height: var(--type-body-line-height);
  letter-spacing: var(--type-body-tracking);
  color: var(--text-default);
  margin: 0;
}

/* --- Module bottom navigation ---------------------------------------------- */
.mod-nav {
  display: flex;
  justify-content: flex-end;
  padding: var(--spacing-xxxl) 0;
}

.mod-nav__next {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  height: 56px;
  padding: var(--spacing-m) var(--spacing-l);
  border: var(--weight-xxs) solid var(--button-primary-enabled);
  border-radius: var(--corner-round);
  color: var(--button-primary-enabled);
  background: none;
  font-family: var(--font-family);
  font-size: 20px;
  font-weight: 600;
  line-height: 24px;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.mod-nav__next:hover {
  background-color: var(--button-primary-enabled);
  color: var(--button-primary-on-primary);
}

.mod-nav__next svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

/* --- Responsive ------------------------------------------------------------- */
@media (max-width: 768px) {
  .img-layout--1up .img-layout__images,
  .img-layout--video .img-layout__images {
    padding: 0;
  }

  .img-layout--2up .img-layout__images,
  .img-layout--3up .img-layout__images {
    flex-direction: column;
    padding: 0;
  }

  .img-layout--2up .media-card,
  .img-layout--3up .media-card {
    flex: 1 1 auto;
  }
}

/* =============================================================================
   Interactive Visual Components
   -----------------------------------------------------------------------------
   Three layout variants — all share .interactive-visual as the flex-column shell
   with 16px gaps between every direct child.

   VARIANT 1 — Interactive Illustration (no slider)
   ─────────────────────────────────────────────────
   .interactive-visual
     .interactive-visual__images         — 2-up: "Illustration" + "Ultrasound scan"
     .visual-settings                    — labels □  |  ↕ flip ultrasound
     .figure-caption

   VARIANT 2 — Interactive Animation (with slider)
   ─────────────────────────────────────────────────
   .interactive-visual
     .interactive-visual__images         — 2-up: "Animation" + "Ultrasound footage"
     .visual-settings                    — labels □  |  ↕ flip ultrasound
     .labelled-slider                    — sibling of visual-settings (NOT nested)
     .figure-caption

   VARIANT 3 — Interactive 3D (slider + extra checkbox + dividers)
   ─────────────────────────────────────────────────────────────────
   .interactive-visual
     .interactive-visual__divider        — <hr> top
     .interactive-visual__images         — 2-up: "3D viewer" + "Ultrasound footage"
       (3D viewer frame contains .media-card__3d-hint overlay)
     .visual-settings                    — labels □  |  needle guide □  |  ↕ flip ultrasound
     .labelled-slider                    — sibling of visual-settings (NOT nested)
     .interactive-visual__divider        — <hr> bottom
     .figure-caption

   SHARED CHILDREN
   ────────────────
   .visual-settings                    — centered flex-row, border, 32px gap
     .check-item (<label>)             — checkbox □ + .check-item__label
       .checkbox                       — <input type="checkbox">
     .check-item (<div>)               — us-flip-toggle group + .check-item__label
       .us-flip-toggle                 — SVG-icon + toggle-pill + SVG-icon
         .us-flip-toggle__icon         — 36×20px SVG (grey = inactive); first icon
                                         gets .us-flip-toggle__icon--active (blue+filled)
         .toggle (<button>)            — pill; .toggle--on shifts thumb right (JS-toggled)
           .toggle__thumb              — sliding circle
   .labelled-slider                    — centered flex-column, 16px side-padding
     .labelled-slider__title           — centred 18px semi-bold label
     .slider-row                       — side-labels + range input
       .slider-side-label              — 80px fixed-width end label
       .slider-bar                     — <input type="range"> (flex: 1)
   ============================================================================= */

/* --- Outer container ------------------------------------------------------- */
.interactive-visual {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-m);            /* 16px between every child */
  width: 100%;
}

/* Divider used in the 3D variant (top + bottom) */
.interactive-visual__divider {
  border: none;
  border-top: 1px solid var(--surface-neutral-border);
  margin: 0;
  width: 100%;
  flex-shrink: 0;
}

/* Images row — always 2-up, no extra horizontal padding */
.interactive-visual__images {
  display: flex;
  gap: var(--spacing-m);
  width: 100%;
  position: relative;               /* anchor for the 3D hint overlay */
}

.interactive-visual__images .media-card {
  flex: 1;
  min-width: 0;
}

/* --- Visual settings bar --------------------------------------------------- */
.visual-settings {
  background-color: var(--background-default);
  border: var(--weight-xxs) solid var(--surface-neutral-border);
  border-radius: var(--corner-s-radius);
  padding: var(--spacing-s) 0;      /* 12px top/bottom, centered content */
  display: flex;
  gap: var(--spacing-xl);           /* 32px between controls */
  align-items: center;
  justify-content: center;
  width: 100%;
  flex-shrink: 0;
}

/* One control + label */
.check-item {
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);           /* 8px */
  flex-shrink: 0;
}

.check-item__label {
  font-family: var(--font-family);
  font-size: var(--type-interactive-size);       /* 16px — matches Figma interactive style */
  font-weight: var(--type-interactive-weight);   /* 400 */
  line-height: var(--type-interactive-line-height); /* 24px, not body 28px */
  color: var(--text-default);
  white-space: nowrap;
}

/* Checkbox */
.checkbox {
  width: 24px;
  height: 24px;
  border: var(--weight-xxs) solid var(--surface-interactive-border);
  border-radius: var(--corner-xs-radius);
  background-color: var(--background-primary);
  flex-shrink: 0;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  position: relative;
  margin: 0;
}

/* Checked: blue fill + white checkmark SVG (exact Figma spec) */
.checkbox:checked {
  background-color: var(--button-primary-hover);   /* #3d6fe6 — fills box blue */
}

.checkbox:checked::after {
  content: '';
  position: absolute;
  left: 6px;
  top: 7px;
  width: 12px;
  height: 9.29px;
  background-image: url('../img/m00/checkbox-check.svg');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

/* US flip toggle (icon — toggle — icon) */
.us-flip-toggle {
  display: flex;
  align-items: center;
  gap: var(--spacing-xxs);          /* 4px */
  flex-shrink: 0;
}

/* Left-side icon wrapper — Figma applies rotate(180deg) to flip orientation */
.us-flip-toggle__icon-wrap {
  transform: rotate(180deg);
  flex-shrink: 0;
  display: flex;
  align-items: center;
}

/* Icon image — 36×20px, matches SVG viewBox */
.us-flip-toggle__icon {
  width: 36px;
  height: 20px;
  flex-shrink: 0;
  display: block;
}

/* Toggle pill */
.toggle {
  display: flex;
  align-items: center;
  width: 38px;
  height: 24px;
  padding: 3px 4px;
  background-color: var(--background-primary);
  border: var(--weight-xxs) solid var(--surface-interactive-border);
  border-radius: var(--corner-round);
  cursor: pointer;
  flex-shrink: 0;
  transition: background-color 0.15s ease;
}

.toggle__thumb {
  width: 16px;
  height: 16px;
  border-radius: var(--corner-round);
  background-color: var(--button-primary-enabled);
  flex-shrink: 0;
  transition: transform 0.15s ease;
  pointer-events: none;
}

/* Toggled-on state: shift thumb to the right */
.toggle--on .toggle__thumb {
  /* border-box: 38px total − 2px×2 border − 4px×2 padding = 26px content; 26 − 16px thumb = 10px */
  transform: translateX(10px);
}

/* --- Labelled slider ------------------------------------------------------- */
.labelled-slider {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-s);            /* 12px */
  align-items: center;
  width: 100%;
  padding: 0 var(--spacing-m);
  flex-shrink: 0;
}

.labelled-slider__title {
  font-family: var(--font-family);
  font-size: var(--type-button-m-size);
  font-weight: var(--type-button-m-weight);
  line-height: var(--type-button-m-line-height);
  letter-spacing: var(--type-button-m-tracking);
  color: var(--text-default);
  text-align: center;
  width: 100%;
  text-box-trim: trim-both;
  text-box-edge: cap alphabetic;
  text-box: trim-both cap alphabetic;
}

.slider-row {
  display: flex;
  align-items: center;
  gap: var(--spacing-m);
  justify-content: center;
  width: 100%;
}

.slider-side-label {
  font-family: var(--font-family);
  font-size: var(--type-body-size);
  font-weight: var(--type-body-weight);
  line-height: var(--type-body-line-height);
  color: var(--text-default);
  text-align: center;
  width: 80px;
  flex-shrink: 0;
}

/* Range input */
.slider-bar {
  flex: 1;
  height: 32px;
  appearance: none;
  -webkit-appearance: none;
  background: transparent;
  cursor: pointer;
  margin: 0;
}

.slider-bar::-webkit-slider-runnable-track {
  height: 12px;
  background-color: var(--background-primary);
  border: var(--weight-xxs) solid var(--surface-interactive-border);
  border-radius: var(--corner-round);
}

.slider-bar::-moz-range-track {
  height: 12px;
  background-color: var(--background-primary);
  border: var(--weight-xxs) solid var(--surface-interactive-border);
  border-radius: var(--corner-round);
}

.slider-bar::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 32px;
  height: 32px;
  border-radius: var(--corner-round);
  background-color: var(--button-primary-enabled);
  margin-top: -12px;   /* center thumb on track (half of thumb height minus half of track height) */
  cursor: pointer;
  transition: background-color 0.15s ease;
}

.slider-bar::-moz-range-thumb {
  width: 32px;
  height: 32px;
  border-radius: var(--corner-round);
  background-color: var(--button-primary-enabled);
  border: none;
  cursor: pointer;
  transition: background-color 0.15s ease;
}

.slider-bar:hover::-webkit-slider-thumb { background-color: var(--button-primary-hover); }
.slider-bar:hover::-moz-range-thumb     { background-color: var(--button-primary-hover); }
/* Pressed: keep primary colour + add semi-transparent ring (Figma: rgba(61,111,230,0.3) = primary-60 at 30%) */
.slider-bar:active::-webkit-slider-thumb {
  background-color: var(--button-primary-enabled);
  box-shadow: 0 0 0 8px rgba(61, 111, 230, 0.3);
}
.slider-bar:active::-moz-range-thumb {
  background-color: var(--button-primary-enabled);
  box-shadow: 0 0 0 8px rgba(61, 111, 230, 0.3);
}

/* Spacing between consecutive interactive-visual blocks */
.interactive-visual + .interactive-visual {
  margin-top: var(--spacing-l);
}

/* --- 3D hint overlay ------------------------------------------------------- */
.media-card__3d-hint {
  position: absolute;
  left: var(--spacing-m);
  bottom: var(--spacing-m);
  background-color: var(--colour-white-60);
  border-radius: var(--corner-s-radius);
  padding: var(--spacing-m);
  font-family: var(--font-family);
  font-size: var(--type-button-m-size);
  font-weight: var(--type-button-m-weight);
  line-height: var(--type-button-m-line-height);
  color: var(--text-default);
  text-align: center;
  pointer-events: none;
  z-index: 1;
}

.media-card__3d-hint p { margin: 0; }

/* --- Responsive ------------------------------------------------------------- */
@media (max-width: 768px) {
  .learning-obj-card__title {
    font-size: var(--type-h1-m-size);
    line-height: var(--type-h1-m-line-height);
    letter-spacing: var(--type-h1-m-tracking);
  }

  .media-card__title {
    font-size: var(--type-body-m-size);
  }

  .callout__title {
    font-size: var(--type-h2-m-size);
    line-height: var(--type-h2-m-line-height);
    letter-spacing: var(--type-h2-m-tracking);
  }

  /* 1-up and video: remove the extra side padding so the image matches
     the text column width, it's already narrowed by .page-main's padding */
  .img-layout--1up .img-layout__images,
  .img-layout--1up p.figure-caption,
  .img-layout--video .img-layout__images,
  .img-layout--video p.figure-caption {
    padding: 0;
  }

  /* 2-up and 3-up: a bit more side padding so images don't run edge to edge */
  .img-layout--2up .img-layout__images,
  .img-layout--2up p.figure-caption {
    padding: 0 var(--spacing-m);
  }

  .img-layout--3up .img-layout__images,
  .img-layout--3up p.figure-caption {
    padding: 0 var(--spacing-s);
  }

  .mod-page-title {
    font-size: var(--type-display-m-size);
    line-height: var(--type-display-m-line-height);
  }

  .section-heading {
    font-size: var(--type-h1-m-size);
    line-height: var(--type-h1-m-line-height);

  }

  .module-section {
  gap: var(--spacing-s);    
  }
}


/* --- Data table -------------------------------------------------------------
   .data-table              — outer wrapper (rounded, clipped, shadowed)
     thead                  — blue header bar
     tbody tr                — grey row dividers
       th[scope="row"]      — bolded first column
   ============================================================================= */

.data-table-wrapper {
  width: 100%;
  border: var(--weight-xxs) solid var(--surface-neutral-border);
  border-radius: var(--corner-m-radius);
  box-shadow: 0 var(--weight-xxs) var(--weight-xs) 0 rgba(18, 18, 18, 0.15);
  overflow-x: auto;              /* changed from overflow: hidden, lets the table scroll instead of squeeze */
  -webkit-overflow-scrolling: touch;
}

.data-table {
  width: 100%;
  min-width: 690px;
  max-width: 100%;
  border-collapse: collapse;
  font-family: var(--font-family);
  table-layout: fixed;
}

.data-table thead {
  background-color: var(--surface-learning-objectives);
}

.data-table thead th {
  color: var(--text-default);
  font-size: 15px;
  font-weight: 600;
  line-height: 24px;
  text-align: left;
  padding: var(--spacing-s) var(--spacing-m);
    overflow-wrap: break-word;
}

.data-table tbody tr {
  border-top: var(--weight-xxs) solid var(--surface-neutral-border);
}

.data-table tbody th,
.data-table tbody td {
  padding: var(--spacing-m);
  font-size: 15px;
  line-height: 22px;
  color: var(--text-default);
  text-align: left;
  vertical-align: top;
    overflow-wrap: break-word;
}

.data-table tbody th[scope="row"] {
  font-weight: 600;
  background-color: var(--background-default);
}

.data-table tbody td ul {
  margin: 0;
  padding-left: 20px;
  list-style: disc;
}

.data-table tbody td ul li {
  margin-bottom: var(--spacing-xxs);
}

.data-table tbody td ul li:last-child {
  margin-bottom: 0;
}

.data-table tbody td p {
  margin: 0 0 var(--spacing-xs) 0;
}

.data-table tbody td p:last-child {
  margin-bottom: 0;
}

/* Column widths */
.data-table col:first-child   { width: 16%; }
.data-table col:nth-child(2)  { width: 42%; }
.data-table col:nth-child(3)  { width: 42%; }

/* Images inside table cells */
.data-table td img {
  display: block;
  width: 100%;
  max-width: 250px;
  height: auto;
  border-radius: var(--corner-s-radius);
  box-shadow: 0 var(--weight-xxs) var(--weight-xs) 0 rgba(18, 18, 18, 0.3);
  cursor: zoom-in;
}

/* --- Callout box body lists ----------------------------------------------- */
.callout__body ol,
.callout__body ul {
  padding-left: 24px;
  margin: var(--spacing-xs) 0 0 0;
}

.callout__body ol { list-style: decimal; }
.callout__body ul { list-style: disc; }

.callout__body li {
  line-height: var(--type-body-line-height);
  margin-bottom: var(--spacing-xxs);
}

.callout__body li:last-child {
  margin-bottom: 0;
}

/* --- Modal overlay --------------------------------------------------------- */
.modal-overlay {
  position: fixed;
  inset: 0;
  background-color: rgba(18, 18, 18, 0.75);
  z-index: 100;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
}

.modal-overlay.is-visible {
  opacity: 1;
  pointer-events: auto;
}

/* --- Base modal ------------------------------------------------------------ */
.modal {
  position: fixed;
  z-index: 101;
  display: flex;            /* always in layout, visibility controlled by opacity */
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.modal.is-visible {
  opacity: 1;
  pointer-events: all;
}

.modal--zoom__inner {
  position: relative;
  display: inline-flex;
  max-width: 85vw;
  max-height: 60vh;
}

.modal--zoom__img {
  max-width: 85vw;
  max-height: 60vh;
  width: auto;
  height: auto;
  border-radius: var(--corner-s-radius);
  box-shadow: 0 8px 32px rgba(18, 18, 18, 0.5);
  object-fit: contain;
  display: block;
}

/* --- Image zoom modal ------------------------------------------------------ */
.modal--zoom {
  inset: 0;
  align-items: center;
  justify-content: center;
  padding: var(--spacing-xl);
  transform: translateY(12px);   /* starting offset for slide-up entry */
}

.modal--zoom.is-visible {
  transform: translateY(0);
}

/* Zoom cursor on all media card frames, except thos wtih no-zoom */
.media-card__frame img {
  cursor: zoom-in;
}

.media-card__frame.no-zoom img {
  cursor: default;
}

/* References */
/* --- Citations & references -------------------------------------------------- */
.citation {
  font-size: 0.7em;
  line-height: 0;
  vertical-align: super;
}

.citation a {
  color: var(--text-primary);
  text-decoration: none;
}

.citation a:hover {
  text-decoration: underline;
}

.references-list {
  list-style: none;
  counter-reset: ref-counter;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-s);
}

.references-list li {
  counter-increment: ref-counter;
  position: relative;
  padding-left: 24px;
  font-family: var(--font-family);
  font-size: var(--type-figure-caption-size);
  font-style: italic;
  line-height: var(--type-figure-caption-line-height);
  color: var(--text-labels-default);
}

.references-list li::before {
  content: counter(ref-counter) ".";
  position: absolute;
  left: 0;
  color: var(--text-default);
}

#references {
  scroll-margin-top: calc(var(--header-h) + var(--spacing-l));
}

.references-list li a {
  text-decoration: underline;
  text-decoration-color: var(--clr-primary-10);
  text-underline-offset: 2px;
  /* Long URLs have no natural break points — allow them to wrap so they
     don't force horizontal page overflow on narrow screens */
  overflow-wrap: anywhere;
}

/* wide video */
.media-card__frame--wide {
  aspect-ratio: 1280 / 426;
}

.img-layout--video-wide .img-layout__images {
  justify-content: center;
  padding: 0 var(--spacing-xl);
}

.img-layout--video-wide p.figure-caption {
  padding: 0 var(--spacing-xl);
}