/* Feature media grid: 2/3/4 columns on desktop; mobile: vertical stack, 24px gap between cards */
feature-media-grid {
  display: block;
}

.feature-media-grid {
  --fmg-cols: 3;
  --fmg-gap-desktop: 40px;
  --fmg-gap-mobile: 24px;
  --fmg-media-radius: 12px;
  --fmg-min-inline: 30px;
  padding-block-start: var(--section-spacing-block-start, 48px);
  padding-block-end: var(--section-spacing-block-end, 48px);
  padding-inline-start: var(--section-spacing-inline-start, 0);
  padding-inline-end: var(--section-spacing-inline-end, 0);
  /* Theme --color-* vars are comma-separated RGB triplets; must use rgb() like theme-css-var.html */
  background-color: rgb(var(--color-background));
  color: rgb(var(--color-text));
}

.feature-media-grid[data-product-tab-section][hidden] {
  display: none !important;
}

.feature-media-grid__inner {
  min-width: 0;
  background-color: rgb(var(--color-background));
  display: flex;
  flex-direction: column;
  row-gap: 24px;
}

@media (max-width: 991px) {
  .feature-media-grid__inner {
    row-gap: 16px;
  }
}

/* Section heading (aligned with overview-media-section title / subtitle / desc) */
.feature-media-grid__section-title {
  margin: 0;
  font-size: 40px;
  font-weight: 700;
  line-height: 49px;
  color: rgba(var(--color-text));
  text-align: center;
}

@media (max-width: 991px) {
  .feature-media-grid__section-title {
    font-size: 24px;
    line-height: 34px;
  }
}

.feature-media-grid__section-subtitle {
  margin: 0;
  font-size: 18px;
  font-weight: 500;
  line-height: 26px;
  color: rgba(var(--color-text), 0.72);
  text-align: center;
}

@media (max-width: 991px) {
  .feature-media-grid__section-subtitle {
    font-size: 14px;
    line-height: 22px;
  }
}

.feature-media-grid__section-title.rte p,
.feature-media-grid__section-subtitle.rte p {
  margin: 0;
}

.feature-media-grid__section-title.rte p + p,
.feature-media-grid__section-subtitle.rte p + p {
  margin-top: 12px;
}

.feature-media-grid__section-desc {
  margin: 0 auto 16px;
  max-width: 920px;
  text-align: center;
  color: rgba(var(--color-text));
  font-size: 24px;
  font-weight: 400;
  line-height: 34px;
}

.feature-media-grid__section-desc :first-child {
  margin-top: 0;
}

.feature-media-grid__section-desc :last-child {
  margin-bottom: 0;
}

.feature-media-grid__section-desc p {
  margin: 0;
}

.feature-media-grid__section-desc p + p {
  margin-top: 12px;
}

@media (max-width: 991px) {
  .feature-media-grid__section-desc {
    font-size: 14px;
    line-height: 22px;
    max-width: 100%;
    margin-bottom: 4px;
  }
}

@media (min-width: 992px) {
  .feature-media-grid[data-heading-text-align="left"] .feature-media-grid__section-title,
  .feature-media-grid[data-heading-text-align="left"] .feature-media-grid__section-subtitle,
  .feature-media-grid[data-heading-text-align="left"] .feature-media-grid__section-desc {
    text-align: left;
  }

  .feature-media-grid[data-heading-text-align="right"] .feature-media-grid__section-title,
  .feature-media-grid[data-heading-text-align="right"] .feature-media-grid__section-subtitle,
  .feature-media-grid[data-heading-text-align="right"] .feature-media-grid__section-desc {
    text-align: right;
  }

  .feature-media-grid[data-heading-text-align="justify"] .feature-media-grid__section-title,
  .feature-media-grid[data-heading-text-align="justify"] .feature-media-grid__section-subtitle,
  .feature-media-grid[data-heading-text-align="justify"] .feature-media-grid__section-desc {
    text-align: justify;
  }
}

@media (max-width: 991px) {
  .feature-media-grid[data-heading-text-align-mobile="left"] .feature-media-grid__section-title,
  .feature-media-grid[data-heading-text-align-mobile="left"] .feature-media-grid__section-subtitle,
  .feature-media-grid[data-heading-text-align-mobile="left"] .feature-media-grid__section-desc {
    text-align: left;
  }

  .feature-media-grid[data-heading-text-align-mobile="right"] .feature-media-grid__section-title,
  .feature-media-grid[data-heading-text-align-mobile="right"] .feature-media-grid__section-subtitle,
  .feature-media-grid[data-heading-text-align-mobile="right"] .feature-media-grid__section-desc {
    text-align: right;
  }

  .feature-media-grid[data-heading-text-align-mobile="justify"] .feature-media-grid__section-title,
  .feature-media-grid[data-heading-text-align-mobile="justify"] .feature-media-grid__section-subtitle,
  .feature-media-grid[data-heading-text-align-mobile="justify"] .feature-media-grid__section-desc {
    text-align: justify;
  }
}

.feature-media-grid__viewport {
  min-width: 0;
}

.feature-media-grid__track {
  display: grid;
  grid-template-columns: repeat(var(--fmg-cols), minmax(0, 1fr));
  gap: var(--fmg-gap-desktop);
  align-items: stretch;
}

/* Desktop: subgrid syncs title / description row heights so media tops align across columns */
@media (min-width: 992px) {
  @supports (grid-template-rows: subgrid) {
    .feature-media-grid__track {
      grid-template-rows: auto auto auto;
    }

    .feature-media-grid__card {
      display: grid;
      grid-template-rows: subgrid;
      grid-row: span 3;
      gap: 0;
      min-width: 0;
      text-align: left;
    }

    .feature-media-grid[data-text-position="above"] .feature-media-grid__title-wrap {
      grid-row: 1;
    }
    .feature-media-grid[data-text-position="above"] .feature-media-grid__desc-wrap {
      grid-row: 2;
    }
    .feature-media-grid[data-text-position="above"] .feature-media-grid__media {
      grid-row: 3;
    }

    .feature-media-grid[data-text-position="below"] .feature-media-grid__media {
      grid-row: 1;
    }
    .feature-media-grid[data-text-position="below"] .feature-media-grid__title-wrap {
      grid-row: 2;
    }
    .feature-media-grid[data-text-position="below"] .feature-media-grid__desc-wrap {
      grid-row: 3;
    }
  }

  @supports not (grid-template-rows: subgrid) {
    .feature-media-grid__card {
      display: flex;
      flex-direction: column;
      gap: 0;
      min-width: 0;
      text-align: left;
    }

    .feature-media-grid[data-text-position="below"] .feature-media-grid__media {
      order: -1;
    }
  }
}

.feature-media-grid__card {
  min-width: 0;
  text-align: left;
}

@media (min-width: 992px) {
  .feature-media-grid__card[data-text-align="center"] {
    text-align: center;
  }

  .feature-media-grid__card[data-text-align="right"] {
    text-align: right;
  }

  .feature-media-grid__card[data-text-align="justify"] {
    text-align: justify;
  }
}

@media (max-width: 991px) {
  .feature-media-grid__card[data-text-align-mobile="center"] {
    text-align: center;
  }

  .feature-media-grid__card[data-text-align-mobile="right"] {
    text-align: right;
  }

  .feature-media-grid__card[data-text-align-mobile="justify"] {
    text-align: justify;
  }
}

.feature-media-grid__title-wrap,
.feature-media-grid__desc-wrap {
  min-width: 0;
}

/* Match original: 16px between text block and media; 8px title→desc via .feature-media-grid__desc */
.feature-media-grid[data-text-position="above"] .feature-media-grid__media {
  margin-top: 24px;
}

.feature-media-grid[data-text-position="below"] .feature-media-grid__title-wrap {
  margin-top: 24px;
}

.feature-media-grid__title {
  margin: 0 0 16px;
  font-size: 32px;
  font-weight: 700;
  line-height: 39px;
  color: inherit;
  word-break: break-word;
}

.feature-media-grid__title.rte :where(p, ul, ol) {
  margin: 0;
}

.feature-media-grid__title.rte :where(p + p) {
  margin-top: 8px;
}

/*
 * Rich text: line-clamp on the outer with inner block <p> causes WebKit/Blink to mis-measure
 * and show a false ellipsis. Clamp the sole direct child instead; use container clamp when 2+ blocks.
 */
.feature-media-grid__desc {
  margin: 0;
  font-size: 18px;
  font-weight: 400;
  line-height: 26px;
  color: rgb(var(--color-text));
  word-break: break-word;
}

.feature-media-grid__desc :where(p, ul, ol) {
  margin: 0;
}

.feature-media-grid__desc :where(p + p) {
  margin: 0;
}

.feature-media-grid__desc :where(ul, ol) {
  list-style: disc;
  padding-inline-start: 20px;
}

.feature-media-grid__desc :where(li + li) {
  margin: 0;
}

.feature-media-grid__media {
  min-width: 0;
}

.feature-media-grid__media-inner {
  border-radius: var(--fmg-media-radius);
  overflow: hidden;
  background: rgba(0, 0, 0, 0.06);
}

.feature-media-grid__media-inner--video {
  aspect-ratio: 16 / 9;
  position: relative;
}

.feature-media-grid__video,
.feature-media-grid__video .theme-video-media,
.feature-media-grid__video .theme-video-media__media,
.feature-media-grid__video .theme-video-media__poster {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.feature-media-grid__video .theme-video-media__poster img,
.feature-media-grid__video .theme-video-media__poster svg,
.feature-media-grid__video .theme-video-media__media video,
.feature-media-grid__video .theme-video-media__media iframe {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.feature-media-grid__video .theme-video-media__play-button {
  display: none;
}

/* Custom play/pause — aligned with media-text-row / overview-media-section */
.feature-media-grid__play-btn {
  position: absolute;
  right: 16px;
  bottom: 16px;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: none;
  background: rgba(0, 0, 0, 0.4);
  color: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  transition: background 0.2s;
  z-index: 2;
}

.feature-media-grid__play-btn:hover {
  background: rgba(0, 0, 0, 0.7);
}

.feature-media-grid__icon {
  display: flex;
  align-items: center;
  justify-content: center;
}

.feature-media-grid__icon svg {
  width: 24px;
  height: 24px;
}

.feature-media-grid__icon--play {
  display: none;
}

.feature-media-grid__icon--pause {
  display: flex;
}

.feature-media-grid__play-btn[data-state="paused"] {
  border: 2px solid #fff;
}

.feature-media-grid__play-btn[data-state="paused"] .feature-media-grid__icon--play {
  display: flex;
}

.feature-media-grid__play-btn[data-state="paused"] .feature-media-grid__icon--pause {
  display: none;
}

.feature-media-grid__media-inner--image {
  position: relative;
}

.feature-media-grid__image,
.feature-media-grid__media-inner--image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.feature-media-grid__media-inner--empty {
  aspect-ratio: 16 / 10;
  min-height: 120px;
}

@media (max-width: 991px) {
  .feature-media-grid__title {
    font-size: 24px;
    line-height: 34px;
    margin-bottom: 0px;
  }

  .feature-media-grid__desc {
    font-size: 14px;
    line-height: 20px;
  }

  .feature-media-grid__viewport {
    overflow: visible;
    padding-inline: 0;
  }

  .feature-media-grid__track {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    gap: var(--fmg-gap-mobile);
    width: 100%;
    min-width: 0;
  }

  .feature-media-grid__card {
    display: flex;
    flex-direction: column;
    gap: 0;
    flex: 0 0 auto;
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }

  .feature-media-grid[data-text-position="above"] .feature-media-grid__media {
    margin-top: 0;
  }

  /* Mobile stack order: media first vs title+description first (see data-mobile-media-order) */
  .feature-media-grid[data-mobile-media-order="media_first"] .feature-media-grid__media {
    order: -1;
  }

  .feature-media-grid[data-mobile-media-order="media_first"] .feature-media-grid__title-wrap {
    margin-top: 16px;
  }

  .feature-media-grid[data-mobile-media-order="text_first"] .feature-media-grid__title-wrap {
    margin-top: 0;
    margin-bottom: 8px;
  }

  .feature-media-grid[data-mobile-media-order="text_first"] .feature-media-grid__desc {
    margin-bottom: 16px;
  }
}