/* Blog page — extra styles not covered by __blog-page.scss */

.secondary-btn::after {
  background: center / contain no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='69' height='69' viewBox='0 0 69 69' fill='none'%3E%3Cpath d='M22.9414 47.8672L45.7213 23.2598' stroke='white' stroke-width='2.11958' stroke-linecap='round'/%3E%3Cpath d='M23.5312 24.2705L45.7115 23.2489L46.553 45.3213' stroke='white' stroke-width='2.11958' stroke-linecap='round'/%3E%3Crect x='1.05488' y='1.05488' width='66.7305' height='66.3074' rx='33.1537' stroke='white' stroke-width='2.10976'/%3E%3C/svg%3E") !important;
}

.hero-grid {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.featured-read-more span {
  color: #ffff !important;
}
.image-card h3,
.image-card .h3 {
  min-height: 4.88em !important;
}
.realm--light {
  .hero-grid {
    background-image: none;
  }
}

.realm--glitch {
  background: #040512;
  .blog-template-wrapper {
    background-color: #040512;
  }
  .hero-grid {
    background-image: url("../images/bg 3.png");
  }
  .hero-copy {
    border-radius: 3.125rem;
    border: 4px solid rgba(195, 172, 242, 0.44);
    background: rgba(115, 74, 187, 0.28);
    opacity: 1 !important;

    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
  }
  .hero-copy h1 {
    color: #ffffff;
  }
  .eyebrow {
    color: #ffffff;
  }
  .hero-text {
    color: #ffffff;
  }
  .category-title {
    color: #ffffff;
  }
  .chip {
    border-radius: 8.09388rem;
    border: 0.592px solid #fff;
    box-shadow: 0 -2.846px 11.385px 0 rgba(255, 255, 255, 0.16) inset;
    color: #ffffff;
    background: transparent;
  }
  .chip.active,
  .chip:hover {
    color: #fff;
    border-radius: 8.09388rem;
    background: linear-gradient(180deg, #7139d1 0%, #bb93ff 100%);
    box-shadow: 0 -2.846px 11.385px 0 rgba(255, 255, 255, 0.16) inset;
  }
  .featured-date {
    color: #ffffff;
  }
  .featured-copy-panel h2,
  .featured-copy-panel .h2 {
    color: #9e66ff;
  }
  .featured-summary {
    color: #ffffff;
  }
  .featured-author {
    color: #ffffff;
  }
  .featured-read-more {
    background-color: #9e66ff;
  }
  .image-card h3,
  .image-card .h3 {
    color: #9e66ff;
  }
  .card-copy {
    color: #ffffff;
  }
  .card-button {
    background-color: #9e66ff;
  }
  .card-date {
    color: #ffffff;
  }
  .image-card {
    border-radius: 0 0 3rem 3rem;
    background: linear-gradient(
      180deg,
      rgba(78, 13, 188, 0) 0%,
      rgba(59, 2, 157, 0.52) 100%
    );
    border: unset;
  }
}

.realm--arcade {
  background: #1b1c48;
  .blog-template-wrapper {
    background-color: #1b1c48;
  }
  .hero-grid {
    background-image: url("../images/bg-arcade-2.png");
    background-size: cover;
    background-position: 100% 7%;
    background-repeat: no-repeat;
  }
  .hero-copy {
    border-radius: 3.125rem;
    border: 4px solid rgba(195, 172, 242, 0.44);
    background: rgba(115, 74, 187, 0.28);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    box-shadow:
      0 0 30px rgba(195, 172, 242, 0.15),
      inset 0 0 20px rgba(255, 255, 255, 0.05);
    opacity: 1 !important;
  }
  .hero-copy h1 {
    color: #ffffff;
  }
  .eyebrow {
    color: #ffffff;
  }
  .hero-text {
    color: #ffffff;
  }
  .category-title {
    color: #ffffff;
  }
  .chip {
    border-radius: 8.09388rem;
    border: 0.592px solid #fff;
    box-shadow: 0 -2.846px 11.385px 0 rgba(255, 255, 255, 0.16) inset;
    color: #ffffff;
    background: transparent;
  }
  .chip.active,
  .chip:hover {
    color: #fff;
    border-radius: 8.09388rem;
    background: linear-gradient(180deg, #7139d1 0%, #bb93ff 100%);
    box-shadow: 0 -2.846px 11.385px 0 rgba(255, 255, 255, 0.16) inset;
  }
  .featured-date {
    color: #ffffff;
  }
  .featured-copy-panel h2,
  .featured-copy-panel .h2 {
    color: #9e66ff;
  }
  .featured-summary {
    color: #ffffff;
  }
  .featured-author {
    color: #ffffff;
  }
  .featured-read-more {
    background-color: #9e66ff;
  }
  .image-card h3,
  .image-card .h3 {
    color: #9e66ff;
  }
  .card-copy {
    color: #ffffff;
  }
  .card-button {
    background-color: #9e66ff;
  }
  .card-date {
    color: #ffffff;
  }
  .image-card {
    border-radius: 0 0 3rem 3rem;
    background: linear-gradient(
      180deg,
      rgba(78, 13, 188, 0) 0%,
      rgba(59, 2, 157, 0.55) 100%
    );
    border: unset;
  }
}