/* Shared visual refinements for the public website templates. */
#main h1 {
  letter-spacing: -0.035em;
  line-height: 1.12;
}

.home_intro-section .post-block h1 {
  font-size: clamp(2.25rem, 5vw, 4.5rem);
  text-wrap: balance;
}

.home_intro-section .logos-marquee {
  margin-block: 2rem 0;
}

.integrations_overview-section .filter-list .filter-chip {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
}

.integrations_overview-section .filter-list:not(:has(.filter-chip.active)) [data-filter="all_integrations"] {
  background: #000;
  border-color: #000;
  color: #fff;
}

.integrations_overview-section .browse-block .cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr));
  gap: 24px;
}

.integrations_overview-section .browse-block .cards .card {
  width: auto;
  min-width: 0;
}

.integrations_overview-section .browse-block .cards .img-holder {
  min-height: 0;
  aspect-ratio: 3 / 2;
}

.integrations_overview-section .browse-block .cards .post-block {
  justify-content: flex-start;
  gap: 8px;
}

.blog-overview-banner {
  background-color: #f8f8f7 !important;
}

.blog-post-section .content-block > h1 + img {
  display: block;
  width: 100%;
  border-radius: 8px;
}

.blog-post-section .content-block > h1 + img[data-src$="/Untitled-design-34-1024x536.png"] {
  background: #f5eb77;
  padding: clamp(12px, 3vw, 40px);
}

.betterdocs-faq-wrapper .betterdocs-faq-list > li .betterdocs-faq-group .betterdocs-faq-post {
  padding-block: 18px;
}

.betterdocs-wrapper .betterdocs-category-grid-three-wrapper .betterdocs-articles-list li {
  padding-block: 6px;
}

.betterdocs-wrapper .betterdocs-doc-meta {
  margin-block: 8px 16px;
}

@media (min-width: 1024px) {
  #header .container,
  #footer .container {
    padding-inline: max(40px, 50% - 680px) !important;
  }

  #header ul.menu-list .second-child {
    column-gap: 24px;
  }

  #footer .navigation-columns {
    column-gap: 40px;
  }

  #footer .nav-bar .nav-list li + li {
    margin-top: 4px;
  }

  .integrations_overview-section .browse-block .cards {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .contact-section .form-block,
  .contact-section .contacts-blocks > div {
    padding: 28px;
  }

  .about-section .right-column .img-holder {
    aspect-ratio: 1;
    overflow: hidden;
  }

  .about-section .right-column .img-holder img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
}

.integration-category + .integration-category { margin-top: 2rem; }
.integration-category h4 { margin-bottom: 1rem; }
.browse-block:has(.filter-chip.active) .integration-category:not(:has(.card.show)) { display: none; }