/* Component guide */
.p-component-guide-page {
  background: #f2f6f6;
}

.p-component-guide {
  padding-block: 4rem 8rem;
}

.p-component-guide__inner {
  width: min(120rem, calc(100% - 4rem));
  margin-inline: auto;
}

.p-component-guide__lead {
  max-width: 78rem;
  font-size: 1.6rem;
  line-height: 1.8;
}

.p-component-guide__eyebrow {
  margin-block-end: 0.8rem;
  color: #007f78;
  font-size: 1.2rem;
  font-weight: 700;
  text-transform: uppercase;
}

.p-component-guide__notice {
  margin-block-start: 1rem;
  padding-inline-start: 1.2rem;
  border-inline-start: 3px solid #009a91;
  color: #4d5a5a;
  font-size: 1.3rem;
}

.p-component-guide__layout {
  display: grid;
  grid-template-columns: 18rem minmax(0, 1fr);
  gap: 4rem;
  margin-block-start: 4rem;
}

.p-component-guide__nav {
  position: sticky;
  inset-block-start: 2rem;
  align-self: start;
  padding-inline-start: 1.6rem;
  border-inline-start: 1px solid #bdcaca;
}

.p-component-guide__nav-title {
  margin-block-end: 1rem;
  color: #007f78;
  font-size: 1.2rem;
  font-weight: 700;
}

.p-component-guide__nav ul {
  display: grid;
  gap: 0.2rem;
}

.p-component-guide__nav a {
  display: block;
  padding-block: 0.6rem;
  color: #253131;
  font-size: 1.3rem;
  line-height: 1.4;
  text-decoration: none;
}

.p-component-guide__nav a:hover,
.p-component-guide__nav a:focus-visible {
  color: #007f78;
  text-decoration: underline;
  text-underline-offset: 0.3rem;
}

.p-component-guide__content {
  min-width: 0;
}

.p-component-guide__group {
  scroll-margin-block-start: 12rem;
  margin-block-start: 0;
  padding: 3rem;
  background: #fff;
  border: 1px solid #d5dfdf;
  border-radius: 0.4rem;
}

.p-component-guide__group + .p-component-guide__group {
  margin-block-start: 2rem;
}

.p-component-guide__content > .p-component-guide__group:first-child {
  margin-block-start: 0;
}

.p-component-guide__group-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 2rem;
  padding-block-end: 1.8rem;
  border-block-end: 1px solid #dce4e4;
}

.p-component-guide__group-head h2 {
  margin: 0;
  font-size: 2.8rem;
  line-height: 1.3;
}

.p-component-guide__group-head > code,
.p-component-guide__group-head > span {
  flex: 0 0 auto;
  margin-block-start: 0.4rem;
  color: #536060;
  font-size: 1.2rem;
}

.p-component-guide__group-label {
  margin-block-end: 0.4rem;
  color: #008c84;
  font-size: 1.1rem;
  font-weight: 700;
  text-transform: uppercase;
}

.p-component-guide__entry {
  padding-block: 2.4rem;
}

.p-component-guide__entry + .p-component-guide__entry {
  border-block-start: 1px solid #e1e7e7;
}

.p-component-guide__entry:last-child {
  padding-block-end: 0;
}

.p-component-guide__entry-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 2rem;
}

.p-component-guide__entry-head h3,
.p-component-guide__usage h3,
.p-component-guide__usage h4 {
  margin: 0;
  color: #1d2727;
}

.p-component-guide__entry-head h3 {
  font-size: 2rem;
  line-height: 1.4;
}

.p-component-guide__entry-head code {
  display: inline-block;
  margin-block-start: 0.4rem;
  color: #536060;
  font-size: 1.2rem;
}

.p-component-guide__in-use {
  flex: 0 0 auto;
  padding: 0.3rem 0.7rem;
  color: #006c66;
  background: #e3f2f0;
  border: 1px solid #a9d5d1;
  border-radius: 0.3rem;
  font-size: 1.1rem;
  font-weight: 700;
}

.p-component-guide__description {
  margin-block-start: 1.4rem;
  color: #354242;
  font-size: 1.4rem;
  line-height: 1.8;
}

.p-component-guide__preview {
  margin-block-start: 2rem;
  padding: 2rem;
  background: #eef3f3;
  border-block: 1px solid #d6e0e0;
}

.p-component-guide__preview--flush {
  padding: 0;
  background: #fff;
}

.p-component-guide__preview--store {
  padding: 3rem;
}

.p-component-guide__preview .c-service-grid,
.p-component-guide__preview .c-category-list.m-col6,
.p-component-guide__preview .p-industry-list {
  width: 100%;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-inline: 0;
}

.p-component-guide__preview .p-filter-tags {
  padding: 0;
}

.p-component-guide__preview .p-filter-tags__group {
  display: flex;
  flex-wrap: wrap;
}

.p-component-guide__usage {
  margin-block-start: 1.8rem;
}

.p-component-guide__usage h3,
.p-component-guide__usage h4 {
  margin-block-end: 0.8rem;
  font-size: 1.4rem;
}

.p-component-guide__usage pre {
  max-width: 100%;
  padding: 1.5rem 1.8rem;
  overflow-x: auto;
  color: #f4f7f7;
  background: #252b2b;
  border-radius: 0.4rem;
  font-size: 1.2rem;
  line-height: 1.7;
  white-space: pre;
}

.p-component-guide__usage p {
  margin-block-start: 1rem;
  color: #4b5757;
  font-size: 1.25rem;
  line-height: 1.7;
}

.p-component-guide__usage p code {
  color: #006f69;
}

.p-component-guide__handoff-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 3rem;
  margin-block-start: 2.4rem;
}

.p-component-guide__handoff-grid > div {
  padding-block-start: 1.6rem;
  border-block-start: 3px solid #009a91;
}

.p-component-guide__handoff-grid h3,
.p-component-guide__integration h3,
.p-component-guide__integration h4 {
  margin: 0;
  color: #1d2727;
  font-size: 1.6rem;
  line-height: 1.5;
}

.p-component-guide__handoff-grid ul {
  display: grid;
  gap: 0.8rem;
  margin-block-start: 1.2rem;
  padding-inline-start: 1.8rem;
  color: #354242;
  font-size: 1.25rem;
  line-height: 1.7;
}

.p-component-guide__handoff-grid code,
.p-component-guide__integration code {
  color: #006f69;
}

.p-component-guide__integration {
  margin-block-start: 2.4rem;
  padding-block-start: 2.4rem;
  border-block-start: 1px solid #dce4e4;
}

.p-component-guide__integration > p,
.p-component-guide__integration-note {
  margin-block-start: 1rem;
  color: #4b5757;
  font-size: 1.25rem;
  line-height: 1.7;
}

.p-component-guide__meta {
  margin-block-start: 1.4rem;
  border-block: 1px solid #d6e0e0;
}

.p-component-guide__meta > div {
  display: grid;
  grid-template-columns: 13rem minmax(0, 1fr);
  gap: 1.5rem;
  padding-block: 1rem;
}

.p-component-guide__meta > div + div {
  border-block-start: 1px solid #e1e7e7;
}

.p-component-guide__meta dt,
.p-component-guide__meta dd {
  margin: 0;
  font-size: 1.2rem;
  line-height: 1.7;
}

.p-component-guide__meta dt {
  color: #273434;
  font-weight: 700;
}

.p-component-guide__meta dd {
  color: #4b5757;
}

.p-component-guide__table-wrap {
  max-width: 100%;
  margin-block-start: 1.4rem;
  overflow-x: auto;
}

.p-component-guide__table-wrap table {
  width: 100%;
  min-width: 64rem;
  border-collapse: collapse;
  font-size: 1.15rem;
  line-height: 1.6;
}

.p-component-guide__table-wrap th,
.p-component-guide__table-wrap td {
  padding: 1rem 1.2rem;
  border: 1px solid #d6e0e0;
  text-align: start;
  vertical-align: top;
}

.p-component-guide__table-wrap th {
  color: #233030;
  background: #e9f0f0;
  font-weight: 700;
}

.p-component-guide__callout {
  margin-block-start: 1.6rem;
  padding: 1.4rem 1.6rem;
  border-inline-start: 4px solid #008c84;
  background: #eef5f4;
}

.p-component-guide__callout strong {
  color: #1d3432;
  font-size: 1.25rem;
}

.p-component-guide__callout p {
  margin-block-start: 0.5rem;
  color: #3e4d4c;
  font-size: 1.2rem;
  line-height: 1.7;
}

.p-component-guide__code-details {
  margin-block-start: 1.6rem;
  border-block: 1px solid #cfdada;
}

.p-component-guide__code-details summary {
  padding: 1.1rem 0.2rem;
  color: #006f69;
  cursor: pointer;
  font-size: 1.25rem;
  font-weight: 700;
}

.p-component-guide__code-details summary:hover,
.p-component-guide__code-details summary:focus-visible {
  color: #004f4a;
}

.p-component-guide__code-details-body {
  padding-block-end: 1.4rem;
}

.p-component-guide__code-details-body > p {
  margin-block-end: 1rem;
  color: #4b5757;
  font-size: 1.1rem;
  line-height: 1.6;
}

.p-component-guide__code-details pre {
  max-height: 42rem;
  margin: 0;
  padding: 1.5rem 1.8rem;
  overflow: auto;
  color: #f4f7f7;
  background: #252b2b;
  font-size: 1.05rem;
  line-height: 1.7;
  white-space: pre;
}

@media (max-width: 787px) {
  .p-component-guide {
    padding-block: 2.5rem 5rem;
  }

  .p-component-guide__inner {
    width: min(100% - 3rem, 120rem);
  }

  .p-component-guide__lead {
    font-size: 1.3rem;
  }

  .p-component-guide__layout {
    display: flex;
    flex-direction: column;
    gap: 2rem;
    margin-block-start: 2.5rem;
  }

  .p-component-guide__nav {
    position: static;
    margin-block-end: 0;
    padding: 1.2rem 1.5rem;
    background: #fff;
    border: 1px solid #d5dfdf;
  }

  .p-component-guide__nav ul {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0;
  }

  .p-component-guide__nav a {
    padding-block: 0.5rem;
    font-size: 1.1rem;
  }

  .p-component-guide__group {
    scroll-margin-block-start: 8rem;
    padding: 2rem 1.5rem;
  }

  .p-component-guide__group-head {
    display: block;
  }

  .p-component-guide__group-head h2 {
    font-size: 2rem;
  }

  .p-component-guide__group-head > code,
  .p-component-guide__group-head > span {
    display: inline-block;
    margin-block-start: 0.8rem;
  }

  .p-component-guide__entry-head {
    display: block;
  }

  .p-component-guide__entry-head h3 {
    font-size: 1.6rem;
  }

  .p-component-guide__in-use {
    display: inline-block;
    margin-block-start: 0.8rem;
  }

  .p-component-guide__description {
    font-size: 1.2rem;
  }

  .p-component-guide__preview,
  .p-component-guide__preview--store {
    padding: 1.5rem;
  }

  .p-component-guide__preview--flush {
    padding: 0;
  }

  .p-component-guide__preview .c-service-grid,
  .p-component-guide__preview .c-category-list.m-col6,
  .p-component-guide__preview .p-industry-list {
    grid-template-columns: minmax(0, 1fr);
  }

  .p-component-guide__usage pre {
    padding: 1.2rem;
    font-size: 1rem;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
  }

  .p-component-guide__usage p {
    font-size: 1.1rem;
  }

  .p-component-guide__handoff-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 2rem;
  }

  .p-component-guide__handoff-grid ul {
    font-size: 1.1rem;
  }

  .p-component-guide__meta > div {
    grid-template-columns: minmax(0, 1fr);
    gap: 0.2rem;
  }

  .p-component-guide__integration > p,
  .p-component-guide__integration-note,
  .p-component-guide__meta dt,
  .p-component-guide__meta dd,
  .p-component-guide__callout p {
    font-size: 1.05rem;
  }

  .p-component-guide__code-details pre {
    padding: 1.2rem;
    font-size: 0.95rem;
  }
}