/* latin-ext */
@font-face {
  font-family: 'Lato';
  font-style: italic;
  font-weight: 400;
  src: local('Lato Italic'), local('Lato-Italic'), url(https://fonts.gstatic.com/s/lato/v15/S6u8w4BMUTPHjxsAUi-qNiXg7eU0.woff2) format('woff2');
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Lato';
  font-style: italic;
  font-weight: 400;
  src: local('Lato Italic'), local('Lato-Italic'), url(https://fonts.gstatic.com/s/lato/v15/S6u8w4BMUTPHjxsAXC-qNiXg7Q.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Lato';
  font-style: italic;
  font-weight: 700;
  src: local('Lato Bold Italic'), local('Lato-BoldItalic'), url(https://fonts.gstatic.com/s/lato/v15/S6u_w4BMUTPHjxsI5wq_FQftx9897sxZ.woff2) format('woff2');
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Lato';
  font-style: italic;
  font-weight: 700;
  src: local('Lato Bold Italic'), local('Lato-BoldItalic'), url(https://fonts.gstatic.com/s/lato/v15/S6u_w4BMUTPHjxsI5wq_Gwftx9897g.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 400;
  src: local('Lato Regular'), local('Lato-Regular'), url(https://fonts.gstatic.com/s/lato/v15/S6uyw4BMUTPHjxAwXiWtFCfQ7A.woff2) format('woff2');
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 400;
  src: local('Lato Regular'), local('Lato-Regular'), url(https://fonts.gstatic.com/s/lato/v15/S6uyw4BMUTPHjx4wXiWtFCc.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 700;
  src: local('Lato Bold'), local('Lato-Bold'), url(https://fonts.gstatic.com/s/lato/v15/S6u9w4BMUTPHh6UVSwaPGQ3q5d0N7w.woff2) format('woff2');
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 700;
  src: local('Lato Bold'), local('Lato-Bold'), url(https://fonts.gstatic.com/s/lato/v15/S6u9w4BMUTPHh6UVSwiPGQ3q5d0.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

.video-compare-container {
  width: 100%;
  margin: 0 auto;
  position: relative;
  display: block;
  line-height: 0;
}

.video {
  width: 100%;
  height: auto;
  position: relative;
  top: 0;
  left: 0;
}

.videoMerge {
  position: relative;
  top: 0;
  left: 0;
  z-index: 10;
  width: 100%;
  display: block;
  margin: 0 auto;
  background-size: cover;
}

/* .cropped-video{
    width: 100%;
    overflow:hidden;
    display:block;
} */

/* 1) Center the table by text-align on the parent */
#author-row {
  text-align: center !important;
}

/* 2) Make the table inline-table so it obeys text-align centering
     and still supports border-spacing */
#author-row .author-table {
  display: inline-table !important;
  border-collapse: separate !important;
  border-spacing: 3rem !important;   /* horizontal + vertical gap */
}

/* Whole row: [ left video ] [ arrow ] [ right widget ] */
.video-compare-row {
  display: flex;
  align-items: center;
  justify-content: center;   /* center whole group inside col-md-8 */
  column-gap: 8px;           /* space between items */
  max-width: 100%;
}

/* Left and right get equal flexible width */
.video-col {
  flex: 0 0 auto;
}

/* The actual media (both sides are 512x256 originally) */
.video-media {
  width: auto;    /* fill the column width */
  height: 320px;   /* keep aspect ratio (2:1) */
  display: block;
}

/* Comparison container just wraps video + canvas */
.video-compare-container {
  position: relative;
  width: 100%;
}

.video-rowrow {
  display: flex;
  justify-content: center;   /* 🔑 center the pair inside the col */
  align-items: flex-start;
  column-gap: 0.5rem;        /* horizontal spacing between the two videos */
  margin-bottom: 0.5rem;
}

.video-item {
  margin: 0;
  padding: 0;
  text-align: center;
}

/* Videos: fixed height, width auto (so wide ones are wider) */
.video-rowrow .video {
  height: 320px;
  width: auto;
  object-fit: contain;
  display: block;
}

/* Caption styling */
/* .video-item figcaption {
  margin-top: 0.3rem;
  font-size: 1.4rem;
  color: #666;
} */

/* Main widget wrapper */
#comparison-widget {
  max-width: 100%;
}

/* Only the active set is shown */
.comparison-set {
  display: none;
}
.comparison-set.is-active {
  display: flex;
}

/* Reuse your previous layout */
.video-compare-row {
  align-items: center;
  column-gap: 0.5rem;
  margin-bottom: 0.75rem;
}

.video-col {
  flex: 0 0 auto;
}

.video-media {
  height: clamp(220px, 20vh, 320px);     /* or whatever you used; same for left & right */
  width: auto;
  display: block;
}

/* Thumb strip at bottom */
.comparison-thumbs {
  justify-content: center;   /* center the whole strip */
  display: flex;
  gap: 0.25rem;
  margin-top: 0.5rem;
  padding: 0.25rem 0;
  overflow-x: auto;           /* scroll horizontally if too narrow */
}

.comparison-thumb {
  border: 1px solid #ddd;
  /* background: #f8f8f8; */
  background: transparent;
  border-radius: 4px;
  padding: 0.1rem 0.1rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  cursor: pointer;
  transition: border-color 0.15s, background-color 0.15s;
}

.comparison-thumb.is-active {
  border-color: #4da3ff;
  box-shadow: 0 0 0 2px rgba(77, 163, 255, 0.35);
  /* background: #eee; */
}

.thumb-video {
  height: 80px;     /* small preview */
  width: auto;
  display: block;
  object-fit: contain;
}

.thumb-image {
  height: 80px;     /* small preview */
  width: auto;
  display: block;
  object-fit: contain;
}

.comparison-thumb span {
  /* display: none; */
  margin-top: 0.2rem;
  margin-bottom: 0.2rem;
  margin-left: 0.5rem;
  margin-right: 0.5rem;
  font-size: 1.2rem;
  color: #555;
  font-size: clamp(10px, 1.2vw, 14px);
}

.comparison-thumb:focus,
.comparison-thumb:focus-visible,
.comparison-thumb:active {
  outline: none;
}

/* Split caption bar under the first video */
.split-caption {
  display: flex;
  margin-top: 2px;          /* same spacing you want under both captions */
  font-size: 0.65em;
  font-family: inherit;
  color: #333;
}

/* Left = 1/3, Right = 2/3 */
.split-caption-left {
  flex: 1;
  text-align: center;
}

.split-caption-right {
  flex: 2;
  text-align: center;
}

.split-caption-right1 {
  flex: 1;
  text-align: center;
}

.split-caption-center {
  flex: 1;
  text-align: center;
}

/* Single caption under second video: match style with split-caption */
.video-simple-caption {
  margin-top: 2px;
  font-size: inherit;
  font-family: inherit;
  color: #333;
  text-align: center;
}