/* ==========================================================================
   Application Examples  (/resources/examples/)

   By product, following the live list (the doc). Shared, from stylesheets
   already linked: the page banner, the accordion (.pf-group) and
   .pf-related (product-family.css), the FAQ (faq.css). Page-local:
     .apx-chips    the banner's product chips
     .apx-search   the title search (collection-filter.js)
     .apx-about    the three cards: what they are, the version note, teaching
     .apx-product  one product: heading, links, its sections
     .apx-ex       one example title

     §1 banner white · §2 about neutral-2-100 · §3 examples white ·
     §4 FAQ neutral-2-100 · §5 related white
   ========================================================================== */

.apx-product{scroll-margin-top:24px}
.apx-product[hidden],.apx-ex[hidden],.apx-empty[hidden],
.apx-list [data-apx-group][hidden],.apx-group__title[hidden],.apx-sub[hidden]{display:none}

/* --------------------------------------------------------------------------
   §1 Banner
   -------------------------------------------------------------------------- */
.apx-banner .page-banner__body p{margin:0}
.apx-chips{margin-top:24px}
.apx-chips__list{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.apx-chip{
  display:inline-flex;align-items:center;gap:8px;
  padding:7px 14px;border-radius:999px;
  background:var(--sv-white);border:1px solid var(--ps-color-neutral-2-300);
  font:500 13px/19px var(--ps-font);letter-spacing:normal;color:var(--ps-color-neutral-3-500);
  transition:border-color .2s ease-out,color .2s ease-out;
}
.apx-chip:hover{border-color:var(--ps-color-brand-500);color:var(--ps-color-brand-600)}
.apx-chip__count{font:400 12px/16px var(--ps-font);color:var(--ps-color-secondary-5-500);font-variant-numeric:tabular-nums}

.apx-search{margin-top:24px;max-width:560px}
.apx-search[hidden]{display:none}
.apx-search__label{display:block;margin-bottom:6px;font:500 13px/19px var(--ps-font);letter-spacing:normal;color:var(--ps-color-neutral-3-500)}
.apx-search__field{
  position:relative;display:flex;align-items:center;
  background:var(--sv-white);
  border:1px solid var(--ps-color-neutral-2-300);border-radius:10px;
  padding:6px 14px 6px 40px;
  transition:border-color .2s ease-out,box-shadow .2s ease-out;
}
.apx-search__field:focus-within{border-color:var(--ps-color-brand-500);box-shadow:0 0 0 3px rgba(198,12,48,.12)}
.apx-search__icon{position:absolute;left:14px;fill:var(--ps-color-neutral-2-900);pointer-events:none}
.apx-search__input{
  flex:1 1 auto;min-width:0;border:0;background:none;padding:10px 0;
  font:400 15px/22px var(--ps-font);letter-spacing:normal;color:var(--ps-color-neutral-3-500);
}
.apx-search__input:focus{outline:none}
.apx-search__foot{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 16px;margin-top:10px}
.apx-search__count{margin:0;font:500 13px/19px var(--ps-font);letter-spacing:normal;color:var(--ps-color-neutral-3-500)}
.apx-search__clear{
  background:none;border:0;padding:0;cursor:pointer;
  font:500 13px/19px var(--ps-font);letter-spacing:normal;
  color:var(--ps-color-brand-600);text-decoration:underline;text-underline-offset:2px;
}
.apx-search__clear[hidden]{display:none}

/* --------------------------------------------------------------------------
   §2 About
   -------------------------------------------------------------------------- */
.apx-about{padding-block:40px;background:var(--ps-color-neutral-2-100);border-block:1px solid var(--ps-color-neutral-2-300)}
.apx-about__grid{grid-column-end:span var(--ps-grid-columns);list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr;gap:16px}
.apx-about__card{
  display:flex;flex-direction:column;gap:10px;
  background:var(--sv-white);border:1px solid var(--ps-color-neutral-2-300);border-radius:16px;
  padding:22px 22px 20px;
}
.apx-about__name{margin:0;color:var(--ps-color-neutral-3-500)}
.apx-about__body{margin:0;flex:1 1 auto;font:400 15px/23px var(--ps-font);letter-spacing:normal;color:var(--ps-color-secondary-5-500)}

/* --------------------------------------------------------------------------
   §3 The examples
   -------------------------------------------------------------------------- */
.apx-list{padding-block:48px;background:var(--sv-white)}
.apx-products,.apx-empty{grid-column-end:span var(--ps-grid-columns)}
.apx-products{display:flex;flex-direction:column;gap:56px}
.apx-product__head{margin-bottom:20px;padding-bottom:16px;border-bottom:2px solid var(--ps-color-brand-500)}
.apx-product__group{margin:0 0 6px;font:500 12px/16px var(--ps-font);letter-spacing:.06em;text-transform:uppercase;color:var(--ps-color-brand-600)}
.apx-product__title{margin:0;color:var(--ps-color-neutral-3-500)}
.apx-product__count{margin-left:8px;font:400 15px/22px var(--ps-font);letter-spacing:normal;color:var(--ps-color-secondary-5-500);white-space:nowrap}
.apx-product__note{margin:10px 0 0;max-width:72ch;font:400 14px/21px var(--ps-font);letter-spacing:normal;color:var(--ps-color-secondary-5-500)}
.apx-product__links{display:flex;flex-wrap:wrap;align-items:center;gap:8px 20px;margin:12px 0 0}
.apx-product__links a{
  display:inline-flex;align-items:center;gap:8px;
  font:500 14px/20px var(--ps-font);letter-spacing:normal;
  color:var(--ps-color-brand-600);text-decoration:underline;text-underline-offset:2px;
}
.apx-product__links a:hover{color:var(--ps-color-brand-500)}
.apx-tag{
  display:inline-flex;padding:2px 9px;border-radius:999px;text-decoration:none;
  background:var(--ps-color-neutral-2-100);border:1px solid var(--ps-color-neutral-2-300);
  font:500 11px/16px var(--ps-font);color:var(--ps-color-neutral-3-500);
}
.apx-group__title{margin:28px 0 12px;color:var(--ps-color-neutral-3-500)}
.apx-group__title:first-of-type{margin-top:8px}
.apx-group__count,.apx-sub__count,.apx-sec__count{
  font:400 13px/19px var(--ps-font);letter-spacing:normal;color:var(--ps-color-secondary-5-500);font-variant-numeric:tabular-nums;
}
.apx-sections .pf-group__question{gap:12px;flex-wrap:nowrap}
.apx-sections .pf-group__question-text{flex:1 1 auto;min-width:0}
.apx-sec__desc{display:block;margin-top:2px;font:400 13px/19px var(--ps-font);letter-spacing:normal;color:var(--ps-color-secondary-5-500)}
.apx-sec__count{flex:none;white-space:nowrap}
.apx-sub{margin:16px 20px 4px;font:500 14px/20px var(--ps-font);letter-spacing:normal;color:var(--ps-color-neutral-3-500)}
.apx-ex__list{list-style:none;margin:0;padding:0 20px 12px}
.apx-ex a{
  display:block;padding:9px 0;border-top:1px solid var(--ps-color-neutral-2-300);
  font:400 14px/21px var(--ps-font);letter-spacing:normal;color:var(--ps-color-brand-600);
  overflow-wrap:anywhere;
}
.apx-ex a:hover{color:var(--ps-color-brand-500);text-decoration:underline;text-underline-offset:2px}
/* while searching, every section stays open so its matches show */
.apx-searching .pf-groups__list.is-enhanced .pf-group__item:not(.is-open) .pf-group__answer{grid-template-rows:1fr}
.apx-empty{margin:0;color:var(--ps-color-secondary-5-500)}

.apx-faq{background:var(--ps-color-neutral-2-100);border-block:1px solid var(--ps-color-neutral-2-300)}
.apx-related{background:var(--sv-white)}

/* --------------------------------------------------------------------------
   Breakpoints
   -------------------------------------------------------------------------- */
@media (min-width:640px){
  .apx-about{padding-block:56px}
  .apx-list{padding-block:64px}
  .apx-about__grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
}
@media (min-width:1024px){
  .apx-list{padding-block:80px}
}
@media (min-width:1350px){
  .apx-about__grid,.apx-products,.apx-empty,.apx-related .pf-related__inner{grid-column-start:2;grid-column-end:span 10}
}

@media (prefers-reduced-motion:reduce){
  .apx-chip,.apx-search__field{transition:none}
}