/* Additions to the Webflow export for the course, voice and feature sections.
   Reuses the export's tokens; the Webflow stylesheet itself is left untouched. */

/* Screenshot / clip frame: the about-video look (corner brackets) at a fixed ratio */
.shot-frame {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 10;
  background-color: var(--black);
  overflow: hidden;
}

.shot-frame picture,
.shot-frame .shot-media {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  display: block;
}

.shot-frame .corner {
  z-index: 2;
}

/* Wide, short screenshots (the progress matrix) span the container */
.wide-shot {
  margin-top: 40px;
}

.shot-frame.shot-wide {
  aspect-ratio: 1600 / 428;
}

.shot-caption {
  margin-top: 12px;
}

.shot-block {
  display: flex;
  flex-flow: column;
  width: 100%;
}

/* Text beside a frame */
.split-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-column-gap: 20px;
  grid-row-gap: 40px;
  align-items: start;
}

.split-layout .info-blocks-wrapper {
  width: 100%;
}

.info-block-title {
  color: var(--accent);
}

.info-block-text {
  color: var(--white);
}

/* Instructor feature panels */
.feature-panels {
  display: flex;
  flex-flow: column;
  grid-row-gap: 20px;
}

.feature-row {
  z-index: 2;
  display: grid;
  grid-template-columns: 5fr 7fr;
  grid-column-gap: 40px;
  grid-row-gap: 40px;
  align-items: center;
  position: relative;
}

.feature-text {
  display: flex;
  flex-flow: column;
  grid-row-gap: 24px;
}

.feature-text .regular-l {
  color: var(--white);
}

.two-shots {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-column-gap: 20px;
  grid-row-gap: 20px;
  margin-top: 20px;
}

/* Stats band */
.stats-band {
  border-top: 1px solid var(--accent);
  padding-top: 28px;
}

.stats-grid {
  max-width: none;
  grid-template-columns: repeat(4, 1fr);
}

.stats-grid .regular-m {
  max-width: 280px;
}

/* Positions: shorter gap between heading and text than the capability cards */
.services-grid.positions-grid .service-block-content {
  grid-row-gap: 64px;
}

/* Student blocks: content decides the height */
.about-content.auto-height .about-block {
  height: auto;
  min-height: 260px;
}

/* Ticker: two identical lines with the spacing inside each, so the loop is seamless */
.ticker-wrapper {
  grid-column-gap: 0;
}

.ticker-line-left {
  padding-right: 20px;
}

.ticker-item {
  white-space: nowrap;
}

/* Footer anchor list */
.footer-menu-item-content .regular-m {
  white-space: nowrap;
}

@media screen and (max-width: 991px) {
  .split-layout,
  .feature-row,
  .two-shots {
    grid-template-columns: 1fr;
  }

  .stats-grid {
    grid-template-columns: 1fr 1fr;
  }
}

@media screen and (max-width: 479px) {
  .stats-grid {
    grid-template-columns: 1fr;
  }
}