/* =========================
   Base / resets
========================= */
body {
  margin: 0;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  background: #fff;
  color: #111;
}

img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }

/* =========================
   Container (page alignment)
   Desktop default: max 1265px, gutter 80px
========================= */
.mtg-container,
.sg-container {
  max-width: 1265px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 80px;
  padding-right: 80px;
}

/* =========================
   Brightcove Default Overrides
========================= */
.PageHeader__container { display: none; }
.VerticalThumbnail--medium .VerticalThumbnail__title { display: none; }
.CollectionPage__title { display: none; }

.VerticalVideoCarousel {
    padding: 70px 0 40px;
}

#InfographicsPage .PlayButton,
#InfographicsPage .Thumbnail__duration {
  display: none;
}

/* =========================================================
   BANNER FOR KNOWLEDGE CENTER
   ========================================================= */

/* Hidden by default; JS toggles .is-visible */
.sg-advisor-banner { display: none; }
.sg-advisor-banner.is-visible { display: block; }

.sg-advisor-banner__inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 12px 24px;
}

.sg-advisor-banner__link {
  display: flex;
  justify-content: center;
  text-decoration: none;
}

/* Image scales down nicely */
.sg-advisor-banner__img {
  display: block;
  width: 100%;
  height: auto;
  max-width: 350px;
}

@media (min-width: 768px) {
  .sg-advisor-banner__img { max-width: 728px; }
}

@media (min-width: 1024px) {
  /* If your site uses larger desktop gutters */
  .sg-advisor-banner__inner { padding-left: 80px; padding-right: 80px; }
}

/* SR-only text for accessibility + BC lint ("anchor must have text") */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

/* =========================================================
   HERO IFRAME CARD — baseline 270x480 (9:16)
   ========================================================= */

/* Baseline card size (matches 270x480), but responsive */
.sg-video.sg-video--iframe {
  position: relative;
  width: min(270px, 100%);
  aspect-ratio: 9 / 16;
}

/* Frame */
.sg-video--iframe .sg-video__main {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 18px;
  overflow: hidden;                 /* clips the scaled iframe */
  background: #0f0f0f;
  box-shadow: 0 18px 40px rgba(0,0,0,.12);
  border: 1px solid rgba(0,0,0,.08);
}

/* Make the iframe behave like object-fit: cover (Brightcove player is often landscape) */
.sg-video--iframe .sg-video__iframe{
  position: absolute;
  top: 50%;
  left: 50%;

  /* Cover-scale (tune these numbers if you want more/less crop) */
  width: 190%;
  height: 190%;

  transform: translate(-50%, -50%);
  border: 0;
  display: block;
  background: #000;
}

/* Overlay play button */
.sg-video--iframe .sg-video__btn{
  position: absolute;
  inset: 0;
  margin: auto;
  width: 84px;
  height: 84px;
  border-radius: 999px;
  border: none;
  cursor: pointer;
  background: rgba(0,0,0,.45);
  display: grid;
  place-items: center;
  z-index: 2;
  transition: opacity 200ms ease;
}

.sg-video--iframe .sg-video__btn:hover{
  background: rgba(0,0,0,.55);
}

.sg-video--iframe .sg-video__btn-icon{
  width: 0;
  height: 0;
  border-top: 14px solid transparent;
  border-bottom: 14px solid transparent;
  border-left: 22px solid #ffffff;
  margin-left: 4px;
}

/* Ensure tech video sits below controls but above background */
.sg-video__main .vjs-tech{
  position: absolute !important;
  inset: 0 !important;
  z-index: 1 !important;
}

/* Poster above initially, then fades out via rules above */
.sg-video__main .vjs-poster{
  position: absolute !important;
  inset: 0 !important;
  z-index: 2 !important;
}

/* Controls always above */
.sg-video__main .vjs-control-bar{
  z-index: 3 !important;
}

/* =========================================================
   HERO VIDEO POSTER
   ========================================================= */

/* Always show a poster background behind the BC player until it paints */
.sg-video--poster-reflect .sg-video__main {
  background-image: var(--poster);
  background-size: cover;
  background-position: center 20%;
  background-repeat: no-repeat;
}

/* --- Always have a poster fallback behind the player --- */
.sg-video--poster-reflect .sg-video__main{
  position: relative;
  background-image: var(--poster);
  background-size: cover;
  background-position: center 20%;
  background-repeat: no-repeat;
}

/* --- Force all video.js layers to fill the hero card --- */
.sg-video__main .video-js,
.sg-video__main .vjs-tech,
.sg-video__main video,
.sg-video__main .vjs-poster{
  width: 100% !important;
  height: 100% !important;
}

/* --- Ensure poster is actually on top (until playback paints) --- */
.sg-video__main .vjs-poster{
  display: block !important;
  opacity: 1 !important;
  visibility: visible !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 2 !important;
  background-size: cover !important;
  background-position: center 20% !important;
}

/* tech video underneath the poster */
.sg-video__main .vjs-tech{
  position: absolute !important;
  inset: 0 !important;
  z-index: 1 !important;
}

/* controls above everything */
.sg-video__main .vjs-control-bar{
  z-index: 3 !important;
}

/* Make sure poster never blocks clicks */
.sg-video__main .vjs-poster{
  pointer-events: none !important;
  opacity: 1;
  transition: opacity 220ms ease;
}

/* When video has started or is playing, fade poster out */
.sg-video__main .video-js.vjs-has-started .vjs-poster,
.sg-video__main .video-js.vjs-playing .vjs-poster{
  opacity: 0 !important;
}

/* Optional: once faded, fully hide it (prevents flicker) */
.sg-video__main .video-js.vjs-has-started .vjs-poster{
  visibility: hidden !important;
}


/* Optional: on bigger screens you can allow it to grow (still 9:16) */
@media (min-width: 1200px){
  .sg-video.sg-video--iframe{
    width: min(300px, 100%); /* slightly larger than 270 on large desktops */
  }
}

/* =========================================================
   BC PORTAL – COLLECTION GRID THUMBNAILS
   Force 9:16 + remove gray scrim/overlay
   ========================================================= */

/* 1) Force the thumbnail box to 9:16 */
.VideoGrid__thumbnail .Thumbnail__imageWrapper{
    aspect-ratio: 9 / 16 !important;
    width: 100% !important;
    height: auto !important;
    overflow: hidden !important;
    border-radius: 18px !important; /* optional */
    position: relative !important;
  }

  /* 2) Make the image fill the 9:16 box (crop, don’t stretch) */
  .VideoGrid__thumbnail .Thumbnail__image{
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center !important;

    /* IMPORTANT: remove any inherited blur/gray effects */
    filter: none !important;
    opacity: 1 !important;
    mix-blend-mode: normal !important;
  }

  /* 3) Remove the gray overlay/scrim layers (these are usually ::before/::after) */
  .VideoGrid__thumbnail .Thumbnail__imageWrapper::before,
  .VideoGrid__thumbnail .Thumbnail__imageWrapper::after,
  .VideoGrid__thumbnail .Thumbnail__link::before,
  .VideoGrid__thumbnail .Thumbnail__link::after{
    content: none !important;
    background: transparent !important;
    opacity: 0 !important;
  }

  /* 4) If there is a real overlay element (sometimes present), neutralize it */
  .VideoGrid__thumbnail [class*="Overlay"],
  .VideoGrid__thumbnail [class*="overlay"],
  .VideoGrid__thumbnail [class*="Scrim"],
  .VideoGrid__thumbnail [class*="scrim"]{
    background: transparent !important;
    opacity: 0 !important;
  }

  /* 5) Keep the duration badge readable (optional).
     Your screenshot shows blur/backdrop styles on Thumbnail__duration. [1](https://mydrive.td.com/personal/charlotte_lopez_td_com/Documents/Microsoft%20Copilot%20Chat%20Files/styles.css) */
  .VideoGrid__thumbnail .Thumbnail__duration{
    filter: none !important;
    backdrop-filter: none !important;
    background: rgba(0,0,0,0.65) !important;
    color: #fff !important;
    border-radius: 10px !important;
    padding: 4px 8px !important;
  }

/* =========================
   Infographics
========================= */

/* Infographics Page – fixed card size */
#InfographicsPage .VideoGrid__thumbnail .Thumbnail__imageWrapper,
#InfographicsPage .VideoGrid__thumbnail .Thumbnail__image {
  width: 260px;
  height: 330px;
  aspect-ratio: auto !important;
}

/* Make items layout like a proper centered grid */
#InfographicsPage .VideoGrid__items,
#InfographicsPage .VideoGrid__list,
#InfographicsPage [class*="VideoGrid__items"],
#InfographicsPage [class*="VideoGrid__list"]{
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(220px, 240px)) !important;
  gap: 24px !important;                 /* <-- tighten this */
  justify-content: center !important;   /* centers columns */
  align-items: start !important;
}

/* Prevent cards from stretching wider than intended */
#InfographicsPage .VideoGrid__item,
#InfographicsPage [class*="VideoGrid__item"]{
  width: auto !important;
  max-width: 240px !important;
}

/* Optional: on very wide desktops, allow one more column but keep tight spacing */
@media (min-width: 1400px){
  #InfographicsPage .VideoGrid__items,
  #InfographicsPage .VideoGrid__list,
  #InfographicsPage [class*="VideoGrid__items"],
  #InfographicsPage [class*="VideoGrid__list"]{
    gap: 28px !important;
    grid-template-columns: repeat(auto-fit, minmax(230px, 260px)) !important;
  }
}

/* =========================
   Copy Caption & Footnote
========================= */

.sg-copy-caption-btn{
  background: #f4f6f1;
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 15px;
  font-weight: 700;
  padding: 10px 14px;
  margin: 12px 0 0;
  cursor: pointer;
  transition: opacity .18s ease, transform .18s ease;
}

.sg-copy-caption-btn:hover{
  opacity: .92;
  transform: translateY(-1px);
}

.sg-copy-caption-btn:disabled{
  opacity: .65;
  cursor: not-allowed;
  transform: none;
}

.sg-copy-caption-btn__icon{
  font-size: 16px;
  line-height: 1;
}

/* =========================
   Header
========================= */
.mtg-header {
  background: linear-gradient(0deg, #262626, #2f2f2f);
  color: #ffffff;
}

.mtg-header__inner {
  min-height: 72px;
  display: flex;
  align-items: center;
  gap: 20px;
}

.mtg-brand {
  display: flex;
  align-items: center;
  gap: 16px;
  min-width: 260px;
}

.mtg-brand__link {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  color: #ffffff;
}

.mtg-brand__wordmark img {
  height: 34px;
  width: auto;
  display: block;
}

.mtg-sponsor {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding-left: 14px;
  border-left: 1px solid rgba(255,255,255,.14);
}

.mtg-sponsor__logo {
  height: 28px;
  width: auto;
  display: block;
}

/* =========================
   Footer
========================= */
.mtg-footer {
  background: linear-gradient(0deg, #171717, #1f1f1f);
  color: #ffffff;
}

.mtg-footer__inner {
  padding-top: 40px;
  padding-bottom: 22px;
}

/* Top row: brand + follow */
.mtg-footer__top {
  display: grid;
  grid-template-columns: minmax(260px, 380px) 1fr;
  gap: 34px;
  padding-bottom: 26px;
  border-bottom: 1px solid rgba(255,255,255,.14);
  align-items: start;
}

.mtg-footer__logo {
  text-decoration: none;
  color: #ffffff;
  display: inline-flex;
  align-items: center;
}

.mtg-footer__wordmark img {
  height: 28px;
  width: auto;
  display: block;
}

.mtg-footer__blurb {
  margin: 12px 0 14px;
  color: rgba(255,255,255,.72);
  line-height: 1.5;
  font-size: 14px;
}

.mtg-footer__sponsor {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding-top: 10px;
  border-top: 1px solid rgba(255,255,255,.14);
}

.mtg-footer__sponsor-logo {
  height: 26px;
  width: auto;
  display: block;
}

/* Follow column wrapper (single column, aligned right on desktop) */
.mtg-footer__cols {
  display: grid;
  justify-content: end;
  grid-template-columns: minmax(240px, 360px);
}

.mtg-footer__heading {
  margin: 0 0 10px;
  font-size: 13px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: #ffffff;
}

/* Social list (native UL/LI) */
.mtg-footer__social {
  list-style: none;
  padding: 0;
  margin: 6px 0 14px;

  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.mtg-footer__social-item {
  margin: 0;
  padding: 0;
}

.mtg-footer__social-link {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;

  background: transparent;
  border: 1px solid rgba(255,255,255,.14);
  color: #ffffff;
  text-decoration: none;
}

.mtg-footer__social-link:hover,
.mtg-footer__social-link:focus-visible {
  background: rgba(255,255,255,.10);
  outline: none;
}

.mtg-footer__social-link svg {
  width: 18px;
  height: 18px;
  fill: currentColor;
  opacity: .95;
}

.mtg-footer__lang {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  height: 40px;
  padding: 0 12px;
  border-radius: 10px;

  border: 1px solid rgba(255,255,255,.14);
  color: #ffffff;
  font-weight: 800;
  letter-spacing: .06em;
  width: fit-content;
  text-decoration: none;
}

.mtg-footer__lang:hover,
.mtg-footer__lang:focus-visible {
  background: rgba(255,255,255,.10);
  outline: none;
}

/* Bottom row */
.mtg-footer__bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding-top: 18px;
}

.mtg-footer__copy {
  color: rgba(255,255,255,.72);
  font-size: 12px;
}

.mtg-footer__bottom-nav {
  display: inline-flex;
  gap: 14px;
}

.mtg-footer__bottom-nav a {
  color: rgba(255,255,255,.72);
  text-decoration: none;
  font-size: 12px;
}

.mtg-footer__bottom-nav a:hover,
.mtg-footer__bottom-nav a:focus-visible {
  color: #ffffff;
  outline: none;
}

/* =========================
   Breakpoints
========================= */

/* Desktop: 1200px+ */
@media (min-width: 1200px){
  .mtg-header__inner { min-height: 78px; }
  .mtg-brand__wordmark img { height: 36px; }

  .VerticalVideoCarousel {
    padding: 50px 0 40px;
}
}

/* Tablet Landscape: 1024–1199px */
@media (min-width: 1024px) and (max-width: 1199px){
  .mtg-container, .sg-container {
    padding-left: 80px;
    padding-right: 80px;
  }
}

/* Tablet Portrait: 768–1023px */
@media (min-width: 768px) and (max-width: 1023px){
  .mtg-container, .sg-container {
    padding-left: 40px;
    padding-right: 40px;
  }

  .mtg-footer__top {
    grid-template-columns: 1fr;
    gap: 22px;
  }

  .mtg-footer__cols {
    justify-content: start;
    grid-template-columns: 1fr;
  }
}


/* Mobile: <= 767px */
@media (max-width: 767px){
  .mtg-container, .sg-container {
    padding-left: 24px;
    padding-right: 24px;
  }

  .mtg-header__inner{
    min-height: auto;
    flex-wrap: wrap;
    padding-top: 10px;
    padding-bottom: 10px;
    row-gap: 10px;
  }

  .mtg-brand{
    min-width: 0;
    flex: 1 1 auto;
  }

  .mtg-brand__wordmark img { height: 30px; }

  .mtg-footer__inner { padding-top: 30px; }

  .mtg-footer__top {
    grid-template-columns: 1fr;
    gap: 18px;
  }

  .mtg-footer__cols {
    justify-content: start;
    grid-template-columns: 1fr;
  }

  .mtg-footer__bottom {
    flex-direction: column;
    align-items: flex-start;
  }

  .mtg-footer__bottom-nav {
    flex-wrap: wrap;
    gap: 10px 14px;
  }

  .VerticalVideoCarousel {
        padding: 30px 0 40px;
    }
}

@media (max-width: 455px) {
    .VerticalVideoCarousel {
        padding: 50px 0 40px;
    }
}