/*
 * Shared responsive spacing corrections.
 * Loaded after page styles so cards size themselves from their content at every
 * viewport instead of inheriting large presentation-only minimum heights.
 */

/* Keep the hero subjects visible when a wide viewport crops the image vertically. */
.cbh-hero-media {
  background-position: center top;
}

.cbh-home .cbh-hero h1 {
  font-size: clamp(44px, 4.7vw, 68px);
  line-height: 1.14;
}

/* Home product cards */
.cbh-product-grid {
  align-items: stretch;
}

.cbh-product-card {
  min-height: 0;
  padding: 26px;
}

.cbh-product-card h3 {
  margin: 8px 0 10px;
}

.cbh-product-card p {
  margin-bottom: 20px;
}

.cbh-product-card > a {
  margin-top: 0;
}

/* Feature library cards */
.cbf-feature-card {
  min-height: 0;
  padding: 25px 26px;
}

.cbf-feature-icon {
  margin-bottom: 22px;
}

.cbf-feature-card > p {
  margin-bottom: 18px;
}

.cbf-card-link,
.cbf-connected {
  min-height: 0;
  margin-top: 0;
}

/* Solution audience and role cards */
.cbc-segment-grid article {
  min-height: 0;
  padding: 26px;
}

.cbc-segment-grid h3 {
  margin: 18px 0 10px;
}

.cbc-segment-grid article > p {
  margin-bottom: 18px;
}

.cbc-product-tags {
  margin-top: 0;
}

.cbc-role-grid article {
  min-height: 0;
}

.cbc-role-grid h3 {
  margin-top: 18px;
}

.cbc-included-grid article {
  min-height: 0;
}

/* Product capability cards */
.cbp-capability-grid article {
  min-height: 0;
  padding: 28px 27px;
}

.cbp-capability-grid h3 {
  margin: 0 0 10px;
}

/* Keep workflow arrows centred between the step labels. */
.cbp-workflow li > .cbh-icon {
  top: 50%;
  transform: translateY(-50%);
}

/* Contact option cards */
.cbt-channel-grid article,
.cbt-prepare-grid article {
  min-height: 0;
}

.cbt-channel-grid h3 {
  margin: 22px 0 10px;
}

.cbt-channel-grid a {
  margin-top: 18px;
}

/* Older content pages use the same content-first sizing principle. */
.svh-problem-card,
.cb-visual-card,
.cb-usecase-card,
.cb-flow-card,
.svh-flow-card {
  min-height: 0;
}

@media (max-width: 900px) {
  .cbh-home .cbh-hero h1 {
    font-size: 48px;
  }

  .cbh-product-card,
  .cbf-feature-card,
  .cbc-segment-grid article,
  .cbp-capability-grid article,
  .cbt-channel-grid article,
  .cbt-prepare-grid article {
    min-height: 0;
    padding: 24px;
  }

  .cbf-feature-icon {
    margin-bottom: 20px;
  }
}

@media (max-width: 600px) {
  .cbh-home .cbh-hero h1 {
    font-size: 36px;
  }

  .cbh-product-filters {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 2px;
    padding: 3px;
    overflow: visible;
  }

  .cbh-product-filters button {
    min-width: 0;
    min-height: 34px;
    padding: 6px 4px;
    font-size: 10px;
    letter-spacing: -0.01em;
  }

  .cbh-product-card,
  .cbf-feature-card,
  .cbc-segment-grid article,
  .cbp-capability-grid article,
  .cbt-channel-grid article,
  .cbt-prepare-grid article {
    min-height: 0;
    padding: 21px 20px;
  }

  .cbh-product-card p,
  .cbf-feature-card > p,
  .cbc-segment-grid article > p {
    margin-bottom: 16px;
  }

  .cbf-feature-icon {
    margin-bottom: 16px;
  }

  .cbc-segment-grid h3,
  .cbc-role-grid h3,
  .cbt-channel-grid h3 {
    margin-top: 16px;
  }

  .cbt-channel-grid a {
    margin-top: 16px;
  }

  .cbp-workflow li > .cbh-icon {
    top: 50%;
    transform: translateY(-50%) rotate(90deg);
  }
}

@media (max-width: 380px) {
  .cbh-home .cbh-hero h1 {
    font-size: 32px;
  }
}