/* Match the React page container while preserving editable Canvas headings. */
section:has(.urovo-stories-grid[data-ui]),
.urovo-stories-grid[data-ui] {
  --story-u: min(0.0520833333vw, 1px);
  font-family: var(--urovo-font-primary, "Poppins"), ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}
section:has(.urovo-stories-grid[data-ui]) {
  width: 100%;
  max-width: none;
  margin: 0;
}

section:has(.urovo-stories-grid[data-ui]) > .container > div {
  width: 100%;
  max-width: none;
}
section:has(.urovo-stories-grid[data-ui]) header:not(:has(> .flex)) {
  margin: 0;
}
section:has(.urovo-stories-grid[data-ui]) header:not(:has(> .flex)) :is(h1, h2, h3) {
  margin: 0;
  color: #11141a;
  font-family: inherit;
  font-size: calc(40 * var(--story-u));
  font-weight: 500;
  letter-spacing: normal;
  text-align: left;
}
section:has(.urovo-stories-grid[data-ui]) > .container > div > .grid {
  gap: 0;
}
section:has(.urovo-stories-grid[data-ui]).is-story-enhanced header {
  opacity: 0;
  translate: 0 48px;
  transition:
    opacity 0.85s cubic-bezier(0.22, 1, 0.36, 1),
    translate 0.85s cubic-bezier(0.22, 1, 0.36, 1);
}
section:has(.urovo-stories-grid[data-ui]).is-story-enhanced.is-story-revealed header {
  opacity: 1;
  translate: 0 0;
}
.urovo-stories-grid[data-ui] > .urovo-story-card {
  width: auto;
}
.urovo-stories-grid[data-ui] .urovo-story-card {
  line-height: 1.5;
}
.urovo-stories-grid[data-ui] .urovo-story-card__content {
  pointer-events: none;
}
.urovo-stories-grid[data-ui] .urovo-story-card__content a {
  pointer-events: auto;
}
.urovo-stories-grid[data-ui] .urovo-story-card__toggle {
  position: absolute;
  z-index: 1;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  border-radius: inherit;
  padding: 0;
  background: transparent;
  cursor: pointer;
}
.urovo-stories-grid[data-ui] .urovo-story-card__toggle:focus-visible {
  outline: 3px solid #87e49f;
  outline-offset: -5px;
}
/* Without JavaScript, descriptions and links stay available. */
.urovo-stories-grid[data-ui]:not(.is-enhanced) .urovo-story-card__description {
  max-height: none;
  margin-top: calc(24 * var(--story-u));
  opacity: 1;
  transform: none;
}
.urovo-stories-grid[data-ui]:not(.is-enhanced) .urovo-story-card__content a {
  margin-top: calc(29 * var(--story-u));
}
@media (max-width: 1023px) {
  section:has(.urovo-stories-grid[data-ui]),
  .urovo-stories-grid[data-ui] {
    --story-u: 0.75px;
  }

  section:has(.urovo-stories-grid[data-ui]) header:not(:has(> .flex)) :is(h1, h2, h3) {
    font-size: 25px;
  }
  .urovo-stories-grid[data-ui] {
    height: 520px;
    gap: 12px;
  }
  .urovo-stories-grid[data-ui] .urovo-story-card {
    height: auto;
  }
  .urovo-stories-grid[data-ui] .urovo-story-card__content {
    left: 22px;
    right: 20px;
    bottom: 36px;
  }
  .urovo-stories-grid[data-ui] .urovo-story-card__content h3 {
    font-size: 24px;
  }
  .urovo-stories-grid[data-ui] .urovo-story-card__description {
    font-size: 13px;
  }
  .urovo-stories-grid[data-ui] .urovo-story-card.is-active .urovo-story-card__description {
    margin-top: 24px;
  }
  .urovo-stories-grid[data-ui] .urovo-story-card__content a {
    margin-top: 40px;
  }
}
@media (max-width: 639px) {
  section:has(.urovo-stories-grid[data-ui]) header:not(:has(> .flex)) :is(h1, h2, h3) {
    font-size: 23px;
  }
  .urovo-stories-grid[data-ui] {
    flex-direction: column;
    height: auto;
    gap: 12px;
    margin-top: 28px;
  }
  .urovo-stories-grid[data-ui] .urovo-story-card {
    flex: none;
    height: 270px;
    transition: height 0.78s cubic-bezier(0.18, 0.84, 0.18, 1);
  }
  .urovo-stories-grid[data-ui] .urovo-story-card.is-active {
    height: 440px;
  }
  .urovo-stories-grid[data-ui] .urovo-story-card__content {
    bottom: 25px;
  }
  .urovo-stories-grid[data-ui] .urovo-story-card.is-active .urovo-story-card__description {
    margin-top: 20px;
  }
  .urovo-stories-grid[data-ui] .urovo-story-card__content a,
  .urovo-stories-grid[data-ui] .urovo-story-card.is-active .urovo-story-card__content a {
    margin-top: 22px;
  }
  .urovo-stories-grid[data-ui]:not(.is-enhanced) .urovo-story-card {
    height: 440px;
  }
}

/* The React home-page overrides keep body copy and actions at 14px at every size. */
.urovo-stories-grid[data-ui] .urovo-story-card__content h3 {
  font-family: inherit;
}
.urovo-stories-grid[data-ui] .urovo-story-card__description {
  font-size: 14px;
}