/* Related-video layout for the approved reading-glasses pages. */

.ms-page-videos .ms-article-video { margin: 40px 0; min-width: 0; }
.ms-page-videos .ms-article-video__heading { font-family: inherit; font-size: 22px; font-weight: 700; line-height: 1.5; }
.ms-page-videos .ms-article-video__card { min-width: 0; margin: 0; padding: 0; }
.ms-page-videos .ms-article-video--inline .ms-article-video__card { max-width: 720px; margin: 0 auto; padding: 16px; border-radius: 12px; background: #f5f5f5; }
.ms-page-videos .ms-article-video__media { position: relative; aspect-ratio: 16 / 9; overflow: hidden; border: 1px solid #ccc; border-radius: 12px; background: #111; }
.ms-page-videos .ms-article-video__play { position: absolute; inset: 0; display: block; color: #fff; }
.ms-page-videos .ms-article-video__media img { display: block; width: 100%; height: 100%; margin: 0; object-fit: cover; }
.ms-page-videos .ms-article-video__play::after { content: ''; position: absolute; width: 64px; height: 44px; left: 50%; top: 50%; transform: translate(-50%, -50%); border-radius: 12px; background: #f00; box-shadow: 0 2px 8px #0004; }
.ms-page-videos .ms-article-video__play::before { content: ''; position: absolute; z-index: 1; left: calc(50% - 6px); top: calc(50% - 10px); border-top: 10px solid transparent; border-bottom: 10px solid transparent; border-left: 17px solid #fff; }
.ms-page-videos .ms-article-video__play:hover::after { background: #c00; }
.ms-page-videos .ms-article-video__play:focus-visible { outline: 3px solid #006eb2; outline-offset: -4px; }
.ms-page-videos .ms-article-video__media iframe { display: block; width: 100%; height: 100%; border: 0; }
.ms-page-videos .ms-article-video__caption { margin: 12px 4px 0; font-size: 16px; line-height: 1.5; letter-spacing: 0; text-align: left; }
.ms-page-videos .ms-article-video--inline .ms-article-video__caption { font-weight: 700; }
.ms-page-videos .ms-article-video__caption a { color: #333; text-decoration: none; }
.ms-page-videos .ms-article-video__caption a:hover { color: #006eb2; text-decoration: underline; }
.ms-page-videos .ms-article-video--related { margin-top: 48px; padding-top: 24px; border-top: 1px solid #ccc; }
.ms-page-videos .ms-article-video--related .ms-article-video__heading { display: flex; justify-content: center; align-items: center; gap: 12px; border: 0; padding: 0; margin: 0 0 24px; font-size: 24px; }
/* WordPress TOC adds a wrapper span inside headings. */
.ms-page-videos .ms-article-video--related .ms-article-video__heading > span { display: flex; align-items: center; gap: 12px; }
.ms-page-videos .ms-article-video__youtube-mark { position: relative; display: inline-block; flex-shrink: 0; width: 34px; height: 24px; border-radius: 7px; background: #f00; }
.ms-page-videos .ms-article-video__youtube-mark::after { content: ''; position: absolute; top: 6px; left: 14px; border-top: 6px solid transparent; border-bottom: 6px solid transparent; border-left: 9px solid white; }
.ms-page-videos .ms-article-video__carousel { position: relative; padding: 0 36px; }
.ms-page-videos .ms-article-video__track { display: flex; gap: 24px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding-bottom: 0; overscroll-behavior-x: contain; }
.ms-page-videos .ms-article-video__track > .ms-article-video__card { flex: 0 0 calc((100% - 48px) / 2.2); scroll-snap-align: start; }
.ms-page-videos .ms-article-video__arrow { position: absolute; z-index: 2; top: var(--ms-video-arrow-center, 0px); transform: translateY(-50%); display: none; width: 36px; height: 44px; padding: 0; background: transparent; color: #006eb2; border: 0; cursor: pointer; }
.ms-page-videos .ms-article-video.is-enhanced .ms-article-video__arrow { display: grid; place-items: center; }
.ms-page-videos .ms-article-video__arrow span { display: grid; place-items: center; width: 30px; height: 30px; border: 1px solid #006eb2; border-radius: 50%; background: white; font-size: 22px; line-height: 1; }
.ms-page-videos .ms-article-video__arrow--prev { left: 0; }
.ms-page-videos .ms-article-video__arrow--next { right: 0; }
.ms-page-videos .ms-article-video__arrow:disabled { opacity: .3; cursor: default; }
.ms-page-videos .ms-article-video__arrow:focus-visible { outline: 2px solid #006eb2; outline-offset: 2px; }
.ms-page-videos .ms-article-video__channel { display: flex; width: fit-content; max-width: 100%; align-items: center; justify-content: center; gap: 10px; margin: 20px auto 0; padding: 8px 12px; border-radius: 5px; background: #f6fbff; color: #006eb2; font-weight: 700; font-size: 16px; text-decoration: none; }
.ms-page-videos .ms-article-video__channel img { width: 40px; height: 40px; margin: 0; object-fit: contain; flex-shrink: 0; }
.ms-page-videos .ms-article-video__channel:hover { background: #e9f5ff; }
.ms-page-videos .ms-article-video__close { display: block; margin: 8px 0 0 auto; border: 1px solid #006eb2; border-radius: 4px; padding: 5px 10px; color: #006eb2; background: white; cursor: pointer; font: inherit; font-size: 13px; }
@media (max-width: 833px) {
  .ms-page-videos .ms-article-video { margin: 32px 0; }
  .ms-page-videos .ms-article-video__heading { font-size: 20px; }
  .ms-page-videos .ms-article-video--inline .ms-article-video__card { padding: 0 0 12px; }
  .ms-page-videos .ms-article-video--inline .ms-article-video__caption { margin: 12px 12px 0; }
  .ms-page-videos .ms-article-video__caption { font-size: 14px; line-height: 1.6; }
  .ms-page-videos .ms-article-video--related .ms-article-video__heading { font-size: 20px; }
  .ms-page-videos .ms-article-video__carousel { padding: 0 24px; }
  .ms-page-videos .ms-article-video__track { gap: 16px; }
  .ms-page-videos .ms-article-video__track > .ms-article-video__card { flex-basis: 90%; }
  .ms-page-videos .ms-article-video__arrow { width: 32px; }
  .ms-page-videos .ms-article-video__channel { font-size: 14px; gap: 8px; }
}

/* Loop enhancement; native horizontal scrolling remains available without JS. */
.ms-page-videos .ms-article-video__track::-webkit-scrollbar { display: none; }
.ms-page-videos .ms-article-video.is-looping .ms-article-video__track { display: block; overflow: hidden; scroll-snap-type: none; touch-action: pan-y pinch-zoom; }
.ms-page-videos .ms-article-video__rail { display: flex; gap: 24px; }
.ms-page-videos .ms-article-video__rail > .ms-article-video__card { flex: 0 0 calc((100% - 48px) / 2.2); }
@media (max-width: 833px) {
  .ms-page-videos .ms-article-video__rail { gap: 16px; }
  .ms-page-videos .ms-article-video__rail > .ms-article-video__card { flex-basis: 90%; }
}

/* Page-level variants, isolated from the existing knowledge article layout. */
.ms-page-videos {max-width:1240px; width:calc(100% - 32px); margin:72px auto; min-width:0; box-sizing:border-box;}
.ms-page-videos * {box-sizing:border-box;}
.ms-page-videos .ms-article-video--related {margin:0;padding:0;border:0;}
.ms-page-videos .ms-article-video--related .ms-article-video__heading {font-family:"Shippori Mincho",serif;font-size:28px;font-weight:600;line-height:1.45;color:#4e341b;margin:0 0 12px;}
.ms-page-videos .ms-page-videos__lead {text-align:center;font-size:20px;font-weight:700;line-height:1.5;color:#856220;margin:0 0 36px;}
.ms-page-videos .ms-article-video__track,.ms-page-videos .ms-article-video__rail {gap:32px;}
.ms-page-videos .ms-article-video__track > .ms-article-video__card,.ms-page-videos .ms-article-video__rail > .ms-article-video__card {flex-basis:calc((100% - 64px)/3);}
.ms-page-videos .ms-article-video__channel {margin-top:36px;}
@media(max-width:833px) {
.ms-page-videos {width:100%; margin:32px auto;padding:0 12px;}
.ms-page-videos .ms-article-video--related .ms-article-video__heading {font-size:21px;line-height:32px;gap:12px;}
.ms-page-videos .ms-page-videos__lead {font-size:14px;line-height:20px;margin-bottom:28px;}
.ms-page-videos .ms-article-video__track,.ms-page-videos .ms-article-video__rail {gap:20px;}
.ms-page-videos .ms-article-video__track > .ms-article-video__card,.ms-page-videos .ms-article-video__rail > .ms-article-video__card {flex-basis:90%;}
.ms-page-videos .ms-article-video__channel {margin-top:28px;}
}

/* 2026-11-09: when every card fits (the script disables both arrows), hide the arrows and center the cards. */
.ms-page-videos .ms-article-video.is-enhanced .ms-article-video__arrow:disabled { visibility: hidden; }
.ms-page-videos .ms-article-video__carousel:has(.ms-article-video__arrow:disabled) .ms-article-video__rail { justify-content: center; }

/* 2026-11-10: inside article templates (#column), the article's h2 and link styles override the block. Re-apply the block's own styles. */
#column #main .ms-page-videos .ms-article-video--related .ms-article-video__heading,
#flex-content #column #main .ms-page-videos .ms-article-video--related .ms-article-video__heading {font-size:28px;color:#4e341b;margin:0 0 12px;padding:0;border:0;clear:none;}
#flex-content #column #main .ms-page-videos .ms-article-video--related .ms-article-video__heading::before {content:none;}
#column .ms-page-videos .ms-article-video__caption a {color:#333;text-decoration:none;}
#column .ms-page-videos .ms-article-video__caption a:hover {color:#006eb2;text-decoration:underline;}
#column .ms-page-videos .ms-article-video__channel {color:#006eb2;text-decoration:none;}
@media(max-width:833px) {
#column #main .ms-page-videos .ms-article-video--related .ms-article-video__heading,
#flex-content #column #main .ms-page-videos .ms-article-video--related .ms-article-video__heading {font-size:21px;}
}

/* 2026-11-10: /lens/ places the related videos right under the channel section, which already ends with a divider. Align the width and drop the second divider. */
.lens-top-v2 .ms-page-videos--lens { max-width: 1028px; }
.lens-top-v2 .ms-page-videos--lens .ms-article-video--related { margin: 0; padding-top: 40px; border-top: 0; }
@media (max-width: 833px) {
  .lens-top-v2 .ms-page-videos--lens .ms-article-video--related { padding-top: 24px; }
}

/* 2026-11-10: related videos with only 1-2 cards. One card: a wide card (thumbnail left, title right) on desktop and full width on phones. Two cards: larger cards side by side on desktop. 3+ cards are unchanged. */
@media (min-width: 834px) {
  .ms-page-videos .ms-article-video--related .ms-article-video__rail > .ms-article-video__card:only-child { flex: 0 1 760px; display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 24px; align-items: center; padding: 16px; border-radius: 12px; background: #f5f5f5; }
  .ms-page-videos .ms-article-video--related .ms-article-video__rail > .ms-article-video__card:only-child .ms-article-video__caption { margin: 0; font-size: 18px; font-weight: 700; line-height: 1.6; }
  .ms-page-videos .ms-article-video--related .ms-article-video__rail:has(> .ms-article-video__card:nth-child(2):last-child) > .ms-article-video__card { flex: 0 1 calc((100% - 32px) / 2); max-width: 440px; }
}
@media (max-width: 833px) {
  .ms-page-videos .ms-article-video--related .ms-article-video__rail > .ms-article-video__card:only-child { flex-basis: 100%; }
}