@import url(/css/components/header.css);
@import url(/css/pages/deliverables/publications/subscribe-aside.css);
@import url(/css/pages/deliverables/publications/products-aside.css);
@import url(/css/pages/deliverables/publications/subscribe-modal.css);
@import url(/css/pages/deliverables/publications/subscribe-footer.css);
@import url(/css/components/footer.css);

/*******************************
 ETF Map Header
 ******************************/

.etf-map-header .inner-wrapper {
  border-block-start-width: var(--border-width);
  border-color: rgb(var(--light-border-bold));
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 2rem;
  padding: 2rem;
}

.etf-map-header-left p {
  margin-block: 1rem;
}

.etf-map-header-title {
  white-space: nowrap;
}

.etf-map-header-breadcrumbs {
  color: rgb(var(--light-text-secondary));
  margin-block: 1rem;
}

.etf-map-header-right {
  position: relative;
  flex-shrink: 0;
}

.etf-map-header-right button {
  position: absolute;
  top: 2rem;
  right: 1rem;
}

@media (max-width: 55rem) {
  .etf-map-header .inner-wrapper {
    flex-direction: column;
  }
}

@media (max-width: 48rem) {
  .etf-map-header-title {
    font-size: 1.5rem;
  }
}

/*******************************
 Featured Banner
 ******************************/

.featured-banner {
  background-color: rgb(var(--light-common-citrine));
  border-block-end-width: var(--border-width);
  border-color: rgb(var(--light-border-bold));

  height: calc(3.5rem + var(--border-width));

  overflow: hidden;
}

.featured-banner .inner-wrapper {
  background-color: rgb(var(--light-common-citrine));
  border: none;
  white-space: nowrap;

  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;

  position: absolute;
  top: 50%;
  left: 50%;
  margin-right: -100%;
  transform: translate(-50%, -50%);
}

.featured-banner--logo {
  mix-blend-mode: luminosity;
}

/*******************************
 Our Funds
 ******************************/

.our-funds .inner-wrapper {
  padding: 0;
}

.our-funds-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);

  /* Grid pseudo-borders */
  gap: var(--border-width);
  background-color: rgb(var(--light-border-bold));
}

.our-funds-card {
  background-color: rgb(var(--light-container-primary));
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 2rem;
  min-width: 0;
}

.our-funds-card > button {
  align-self: flex-start;
}

.our-funds-card .TitleMedium{
  color: rgb(var(--brand-azure));
}
.our-funds-card > .svg {
  filter: brightness(0) saturate(100%) invert(15%) sepia(100%) saturate(4093%) hue-rotate(232deg) brightness(107%) contrast(92%);
  height: 5rem;
  align-self: self-start;
}

.our-funds-card > p {
    height: 9rem;
}

.our-funds-card:last-of-type {
  background-color: rgb(var(--light-common-citrine));
  color: rgb(var(--light-text-link-default));
}

.our-funds-card--cta {
  background-color: rgb(var(--brand-citrine));
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.our-funds-cta-card-bottom {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  color: rgb(var(--brand-azure));
}

.our-funds-cta-card-bottom:hover {
  cursor: pointer;
}

.our-funds-cta-card-bottom .svg {
  width: 2rem;
  height: 2rem;
}

.our-fund {
  display: flex;
  align-items: center;
  gap: 1rem;
  background-color: rgb(var(--brand-azure));
  color: rgb(var(--light-text-inverse));
  border-radius: var(--border-radius);
  padding: 0.75rem;
}

.our-fund div:first-of-type {
  background-color: rgb(var(--neutral-100) / 0.05);
  border-radius: var(--border-radius);
  padding: 0.5rem;
}

.our-fund div:last-of-type {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.our-fund--light {
  background-color: rgb(var(--brand-amethyst-light));
  color: rgb(var(--light-text-link-default));
}

.our-fund--light div:first-of-type {
  background-color: rgb(var(--neutral-0) / 0.05);
}

@media (max-width: 55rem) {
  .our-funds-grid {
    grid-template-columns: repeat(1, 1fr);
  }
}

@media (max-width: 36rem) {
  .our-funds-card > p {
        height: auto;
    }
}