/* v1.7.1: route-scoped stylesheet, loaded only by the three visual-polish pages. */
.content-seo-hub__card:has(> .v171-card-visual) {
  display: grid;
  grid-template-columns: minmax(0, 1fr) clamp(6.75rem, 11vw, 8.25rem);
  grid-template-areas:
    "tag visual"
    "title visual"
    "copy copy"
    "cta cta";
  grid-template-rows: auto auto 1fr auto;
  column-gap: 1rem;
  min-height: 13rem;
  overflow: hidden;
  background: linear-gradient(145deg, #fff 0 72%, #f2faf7 100%);
}

.content-seo-hub__card:has(> .v171-card-visual) > small {
  grid-area: tag;
  align-self: start;
}

.content-seo-hub__card:has(> .v171-card-visual) > strong {
  grid-area: title;
}

.content-seo-hub__card:has(> .v171-card-visual) > span:not(.v171-card-visual) {
  grid-area: copy;
}

.content-seo-hub__card:has(> .v171-card-visual) > b {
  grid-area: cta;
  margin-top: 0;
}

.v171-card-visual {
  grid-area: visual;
  align-self: start;
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border: 1px solid #c9ddd7;
  border-radius: 0.72rem;
  background: #edf8f5;
}

.v171-card-visual img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.content-seo-hub__card:has(> .v171-card-visual):focus-visible {
  border-color: var(--color-brand-700);
  outline: 3px solid var(--color-focus);
  outline-offset: 3px;
  box-shadow: var(--shadow-card);
}

#different-causes .table-scroll {
  border: 1px solid #aebfba;
  border-radius: var(--radius-md);
  background: #fff;
  box-shadow: 0 0.35rem 1.1rem rgb(11 79 73 / 7%);
}

#different-causes .table-scroll table {
  min-width: 48rem;
}

#different-causes .table-scroll thead th {
  border-bottom: 3px solid var(--color-brand-700);
  background: #dcefe9;
}

#different-causes .table-scroll tbody tr:nth-child(odd) > * {
  background: #fff;
}

#different-causes .table-scroll tbody tr:nth-child(even) > * {
  background: #eef6f3;
}

#different-causes .table-scroll tbody tr + tr > * {
  border-top-width: 2px;
  border-top-color: #b7c9c3;
}

#different-causes .table-scroll tbody th[scope="row"] {
  min-width: 11rem;
  color: var(--color-brand-900);
  font-weight: 850;
  box-shadow: inset 0.32rem 0 0 var(--color-brand-700);
}

.v171-material-row {
  display: grid;
  gap: 0.38rem;
  align-content: start;
}

.v171-material-row__visual {
  display: flex;
  width: 4.8rem;
  height: 1.8rem;
  overflow: hidden;
  border: 1px solid #c9d8d3;
  border-radius: 0.38rem;
  background: #edf8f5;
}

.v171-material-row__visual img {
  display: block;
  min-width: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.v171-material-row__visual img + img {
  border-left: 1px solid #fff;
}

@media (width <= 38rem) {
  .content-seo-hub__card:has(> .v171-card-visual) {
    grid-template-columns: 1fr;
    grid-template-areas:
      "visual"
      "tag"
      "title"
      "copy"
      "cta";
    min-height: 0;
  }

  .v171-card-visual {
    justify-self: end;
    width: min(100%, 11rem);
    margin-bottom: 0.65rem;
  }

  #different-causes .table-scroll thead th:first-child,
  #different-causes .table-scroll tbody th[scope="row"] {
    position: sticky;
    left: 0;
    z-index: 1;
  }

  #different-causes .table-scroll thead th:first-child {
    z-index: 2;
  }
}

@media print {
  .content-seo-hub__card:has(> .v171-card-visual) {
    min-height: 0;
    break-inside: avoid;
  }

  .v171-card-visual {
    width: 28mm;
    filter: grayscale(1);
  }

  #different-causes .table-scroll {
    overflow: visible;
    border-color: #777;
    box-shadow: none;
  }

  #different-causes .table-scroll table {
    min-width: 0;
    font-size: 8.5pt;
  }

  #different-causes .table-scroll thead th,
  #different-causes .table-scroll tbody tr > * {
    position: static;
    border-color: #777;
    background: #fff;
    box-shadow: none;
  }

  #different-causes .table-scroll tbody tr {
    break-inside: avoid;
  }

  .v171-material-row__visual {
    filter: grayscale(1);
  }
}