/* ==========================================================================
   Resources hub

   Only the patterns this page adds. The banner, the FAQ-free section headings
   and the closing CTA come from stylesheets already linked, so this page is the
   same object as the homepage, /products/ and /solutions/.

   Band rhythm is the homepage's: 48 / 64 / 80. Bands alternate white and
   --ps-color-neutral-2-100 so no two adjacent bands share a tint, with
   --ps-color-neutral-2-000 reserved for the closing CTA. No dark band.
   ========================================================================== */

/* --------------------------------------------------------------------------
   §1 Banner search

   The page opens on the library rather than on a marketing statement, so the
   search field is part of the banner rather than a section below it.
   -------------------------------------------------------------------------- */
.res-search{margin-top:28px;max-width:640px}
.res-search__field{
  position:relative;display:flex;align-items:center;gap:8px;
  background:var(--sv-white);
  border:1px solid var(--ps-color-neutral-2-300);border-radius:10px;
  padding:6px 6px 6px 40px;
  transition:border-color .2s ease-out,box-shadow .2s ease-out;
}
.res-search__field:focus-within{
  border-color:var(--ps-color-brand-500);
  box-shadow:0 0 0 3px rgba(198,12,48,.12);
}
.res-search__icon{position:absolute;left:14px;fill:var(--ps-color-neutral-2-900);pointer-events:none}
.res-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);
}
.res-search__input:focus{outline:none}
.res-search__submit{
  flex:none;cursor:pointer;
  border:0;border-radius:7px;
  background:var(--ps-color-brand-500);color:var(--sv-white);
  font:500 14px/20px var(--ps-font);letter-spacing:normal;
  padding:10px 18px;
  transition:background-color .2s ease-out;
}
.res-search__submit:hover{background:var(--ps-color-brand-600)}
.res-search__submit:focus-visible{outline:2px solid var(--ps-color-brand-500);outline-offset:2px}

/* --------------------------------------------------------------------------
   §2 The library index
   -------------------------------------------------------------------------- */
.res-index{
  background:var(--ps-color-neutral-2-100);
  border-block:1px solid var(--ps-color-neutral-2-300);
  padding-block:48px;
}
.res-index__head{grid-column-end:span var(--ps-grid-columns);margin-bottom:28px}
.res-index__title{color:var(--ps-color-neutral-3-500);margin:0 0 12px}
.res-index__lead{color:var(--ps-color-secondary-5-500);margin:0;max-width:68ch}
.res-index__wrap{grid-column-end:span var(--ps-grid-columns)}

.res-filter{
  display:flex;flex-direction:column;gap:16px;
  background:var(--sv-white);
  border:1px solid var(--ps-color-neutral-2-300);border-radius:16px;
  padding:20px;margin-bottom:20px;
}
.res-filter[hidden]{display:none}
.res-filter__selects{display:grid;grid-template-columns:1fr;gap:14px}
.res-filter__field{display:flex;flex-direction:column;gap:6px;min-width:0}
.res-filter__label{
  font:500 11px/16px var(--ps-font);letter-spacing:.12em;text-transform:uppercase;
  color:var(--ps-color-neutral-2-900);
}
.res-filter__select{
  width:100%;appearance:none;cursor:pointer;
  font:400 14px/20px var(--ps-font);letter-spacing:normal;
  color:var(--ps-color-neutral-3-500);
  background-color:var(--ps-color-neutral-2-000);
  border:1px solid var(--ps-color-neutral-2-300);border-radius:8px;
  padding:10px 34px 10px 12px;
  background-image:linear-gradient(45deg,transparent 50%,currentColor 50%),linear-gradient(135deg,currentColor 50%,transparent 50%);
  background-position:calc(100% - 18px) 50%,calc(100% - 13px) 50%;
  background-size:5px 5px,5px 5px;
  background-repeat:no-repeat;
  transition:border-color .2s ease-out;
}
.res-filter__select:hover{border-color:var(--ps-color-neutral-2-500)}
.res-filter__select:focus-visible{outline:2px solid var(--ps-color-brand-500);outline-offset:1px}
.res-filter__foot{
  display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;
  padding-top:14px;border-top:1px solid var(--ps-color-neutral-2-300);
}
.res-filter__count{margin:0;font:500 13px/19px var(--ps-font);letter-spacing:normal;color:var(--ps-color-neutral-3-500)}
.res-filter__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;
}
.res-filter__clear:hover{color:var(--ps-color-brand-500)}
.res-filter__clear[hidden]{display:none}

.res-index__grid{
  list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:1fr;gap:12px;
}
.res-index__grid[hidden]{display:none}
.res-card[hidden]{display:none}
.res-card__link{
  position:relative;
  display:grid;grid-template-columns:1fr auto;align-items:center;
  gap:4px 16px;
  background:var(--sv-white);
  border:1px solid var(--ps-color-neutral-2-300);border-radius:12px;
  padding:16px 18px;
  transition:border-color .25s ease-out;
}
.res-card__link:hover{border-color:var(--ps-color-neutral-2-500)}
.res-card__meta{grid-column:1;display:flex;align-items:center;gap:10px}
.res-card__type{
  font:500 11px/16px var(--ps-font);letter-spacing:.12em;text-transform:uppercase;
  color:var(--ps-color-brand-600);
}
.res-card__year{font:400 12px/16px var(--ps-font);letter-spacing:normal;color:var(--ps-color-neutral-2-900)}
.res-card__year::before{content:"\00B7";margin-right:10px}
.res-card__title{
  grid-column:1;
  font:400 15px/22px var(--ps-font);letter-spacing:normal;
  color:var(--ps-color-neutral-3-500);
}
.res-card__family{
  grid-column:1;
  font:400 12px/18px var(--ps-font);letter-spacing:normal;
  color:var(--ps-color-neutral-2-900);
}
.res-card__arrow{
  grid-column:2;grid-row:1 / span 3;
  display:flex;color:var(--ps-color-neutral-2-900);
  transition:transform .2s ease-out,color .2s ease-out;
}
.res-card__arrow svg{width:14px;height:12px;fill:currentColor}
.res-card__link:hover .res-card__arrow{transform:translateX(3px);color:var(--ps-color-brand-500)}

.res-empty{
  display:flex;flex-direction:column;align-items:flex-start;gap:18px;
  background:var(--sv-white);
  border:1px solid var(--ps-color-neutral-2-300);border-radius:16px;
  padding:24px 22px;
}
.res-empty[hidden]{display:none}
.res-empty__text{margin:0;color:var(--ps-color-secondary-5-500);font:400 15px/23px var(--ps-font);letter-spacing:normal;max-width:62ch}

@media (min-width:640px){
  .res-index{padding-block:64px}
  .res-filter{padding:22px 24px}
  .res-filter__selects{grid-template-columns:repeat(2,minmax(0,1fr))}
  .res-index__grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .res-empty{flex-direction:row;align-items:center;justify-content:space-between;gap:24px;padding:24px 26px}
}
@media (min-width:1024px){
  .res-index{padding-block:80px}
  .res-index__grid{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (min-width:1350px){
  .res-index__head,.res-index__wrap{grid-column-start:2;grid-column-end:span 10}
}

/* --------------------------------------------------------------------------
   §3 Topic tiles
   -------------------------------------------------------------------------- */
.topics{background:var(--sv-white);padding-block:48px}
.topics__head{grid-column-end:span var(--ps-grid-columns);margin-bottom:28px;text-align:center}
.topics__title{color:var(--ps-color-neutral-3-500);margin:0 0 12px}
.topics__lead{color:var(--ps-color-secondary-5-500);margin:0 auto;max-width:62ch}

.topics__grid{
  grid-column-end:span var(--ps-grid-columns);
  list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:1fr;gap:12px;
}
.topic-tile__link{
  position:relative;
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  border:1px solid var(--ps-color-neutral-2-300);border-radius:12px;
  padding:16px 16px 16px 18px;
  background:var(--sv-white);
  transition:border-color .25s ease-out,background-color .25s ease-out;
}
.topic-tile__link::before{
  content:"";position:absolute;left:-1px;top:50%;translate:0 -50%;
  width:2px;height:0;background:var(--ps-color-brand-500);border-radius:2px;
  transition:height .25s ease-out;
}
.topic-tile__link:hover{border-color:var(--ps-color-neutral-2-500);background:var(--ps-color-neutral-2-000)}
.topic-tile__link:hover::before,.topic-tile__link:focus-visible::before{height:52%}
.topic-tile__name{
  font:400 14px/20px var(--ps-font);letter-spacing:normal;
  color:var(--ps-color-neutral-3-500);
}
.topic-tile__arrow{display:flex;flex:none;color:var(--ps-color-neutral-2-900);transition:transform .2s ease-out,color .2s ease-out}
.topic-tile__arrow svg{width:13px;height:11px;fill:currentColor}
.topic-tile__link:hover .topic-tile__arrow{transform:translateX(3px);color:var(--ps-color-brand-500)}

@media (min-width:640px){
  .topics{padding-block:64px}
  .topics__grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (min-width:1024px){
  .topics{padding-block:80px}
  .topics__grid{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (min-width:1350px){
  .topics__head,.topics__grid{grid-column-start:2;grid-column-end:span 10}
  .topics__grid{grid-template-columns:repeat(4,minmax(0,1fr))}
}

/* --------------------------------------------------------------------------
   §4 Journal front door

   The one place on the page with a featured item, because the journal is the
   largest asset on the site and the structure doc wants it given a front door
   rather than a feed.
   -------------------------------------------------------------------------- */
.journal-front{
  background:var(--ps-color-neutral-2-100);
  border-top:1px solid var(--ps-color-neutral-2-300);
  padding-block:48px;
}
.journal-front__head{grid-column-end:span var(--ps-grid-columns);margin-bottom:28px}
.journal-front__title{color:var(--ps-color-neutral-3-500);margin:0 0 12px}
.journal-front__lead{color:var(--ps-color-secondary-5-500);margin:0;max-width:68ch}
.journal-front__body{
  grid-column-end:span var(--ps-grid-columns);
  display:grid;grid-template-columns:1fr;gap:20px;
}

.journal-lead{
  display:flex;flex-direction:column;align-items:flex-start;gap:14px;
  background:var(--sv-white);
  border:1px solid var(--ps-color-neutral-2-300);border-radius:16px;
  padding:26px 24px;
}
.journal-lead__eyebrow{
  font:500 11px/16px var(--ps-font);letter-spacing:.14em;text-transform:uppercase;
  color:var(--ps-color-brand-600);
}
.journal-lead__heading{color:var(--ps-color-neutral-3-500);margin:0}
.journal-lead__body{color:var(--ps-color-secondary-5-500);margin:0}
.journal-lead__meta{display:flex;align-items:center;gap:10px;font:400 12px/16px var(--ps-font);letter-spacing:normal;color:var(--ps-color-neutral-2-900)}
.journal-lead__format{
  font:500 11px/16px var(--ps-font);letter-spacing:.12em;text-transform:uppercase;
  color:var(--ps-color-neutral-3-500);
}

.journal-more{
  background:var(--sv-white);
  border:1px solid var(--ps-color-neutral-2-300);border-radius:16px;
  padding:26px 24px;
  display:flex;flex-direction:column;
}
.journal-more__label{
  margin:0 0 8px;
  font:500 11px/16px var(--ps-font);letter-spacing:.12em;text-transform:uppercase;
  color:var(--ps-color-neutral-2-900);
}
.journal-more__list{list-style:none;margin:0 0 18px;padding:0;flex:1 1 auto}
.journal-more__link{
  display:flex;align-items:flex-start;justify-content:space-between;gap:14px;
  padding:14px 0;
  border-bottom:1px solid var(--ps-color-neutral-2-300);
  color:var(--ps-color-neutral-3-500);
  transition:color .2s ease-out;
}
.journal-more__list li:last-child .journal-more__link{border-bottom:0}
.journal-more__link:hover{color:var(--ps-color-brand-600)}
.journal-more__text{font:400 14px/21px var(--ps-font);letter-spacing:normal}
.journal-more__arrow{display:flex;flex:none;margin-top:4px;color:var(--ps-color-neutral-2-900);transition:transform .2s ease-out,color .2s ease-out}
.journal-more__arrow svg{width:13px;height:11px;fill:currentColor}
.journal-more__link:hover .journal-more__arrow{transform:translateX(3px);color:var(--ps-color-brand-500)}
.journal-more__all{align-self:flex-start}

@media (min-width:640px){
  .journal-front{padding-block:64px}
  .journal-lead,.journal-more{padding:30px 28px}
}
@media (min-width:1024px){
  .journal-front{padding-block:80px}
  .journal-front__body{grid-template-columns:6.4fr 5.6fr;align-items:stretch}
}
@media (min-width:1350px){
  .journal-front__head,.journal-front__body{grid-column-start:2;grid-column-end:span 10}
}

/* --------------------------------------------------------------------------
   §5 · §6 · §7 Collections
   -------------------------------------------------------------------------- */
.collections{background:var(--sv-white);padding-block:48px}
.collections__head{grid-column-end:span var(--ps-grid-columns);margin-bottom:28px;text-align:center}
.collections__title{color:var(--ps-color-neutral-3-500);margin:0}
.collections__grid{
  grid-column-end:span var(--ps-grid-columns);
  display:grid;grid-template-columns:1fr;gap:20px;
}
.collection{
  display:flex;flex-direction:column;
  background:var(--sv-white);
  border:1px solid var(--ps-color-neutral-2-300);border-radius:16px;
  padding:24px 22px;
  transition:border-color .25s ease-out;
}
.collection:hover{border-color:var(--ps-color-neutral-2-500)}
.collection__heading{color:var(--ps-color-neutral-3-500);margin:0 0 10px}
.collection__body{color:var(--ps-color-secondary-5-500);margin:0 0 18px}
.collection__list{list-style:none;margin:0;padding:0}
.collection__group{
  font:500 11px/16px var(--ps-font);letter-spacing:.12em;text-transform:uppercase;
  color:var(--ps-color-neutral-2-900);
  margin-top:14px;padding-bottom:6px;
}
.collection__list > li:first-child.collection__group{margin-top:0}
.collection__link{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:11px 0;
  border-bottom:1px solid var(--ps-color-neutral-2-300);
  color:var(--ps-color-neutral-3-500);
  font:400 14px/20px var(--ps-font);letter-spacing:normal;
  transition:color .2s ease-out;
}
.collection__link:hover{color:var(--ps-color-brand-600)}
.collection__arrow{display:flex;flex:none;color:var(--ps-color-neutral-2-900);transition:transform .2s ease-out,color .2s ease-out}
.collection__arrow svg{width:13px;height:11px;fill:currentColor}
.collection__link:hover .collection__arrow{transform:translateX(3px);color:var(--ps-color-brand-500)}
.collection__note{
  padding:11px 0;
  font:400 13px/20px var(--ps-font);letter-spacing:normal;
  color:var(--ps-color-neutral-2-900);
}
.collection__note a{color:var(--ps-color-brand-600);text-decoration:underline;text-underline-offset:2px}

@media (min-width:640px){
  .collections{padding-block:64px}
  .collection{padding:28px 26px}
}
@media (min-width:1024px){
  .collections{padding-block:80px}
  .collections__grid{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (min-width:1350px){
  .collections__head,.collections__grid{grid-column-start:2;grid-column-end:span 10}
}

/* --------------------------------------------------------------------------
   §8 Examples
   -------------------------------------------------------------------------- */
.examples{
  background:var(--ps-color-neutral-2-100);
  border-top:1px solid var(--ps-color-neutral-2-300);
  padding-block:48px;
}
.examples__head{grid-column-end:span var(--ps-grid-columns);margin-bottom:28px}
.examples__title{color:var(--ps-color-neutral-3-500);margin:0 0 12px;max-width:22ch}
.examples__lead{color:var(--ps-color-secondary-5-500);margin:0;max-width:72ch}
.examples__grid{
  grid-column-end:span var(--ps-grid-columns);
  list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:1fr;gap:12px;
}
.example-card{display:flex;flex-direction:column}
.example-card__group{
  font:500 11px/16px var(--ps-font);letter-spacing:.12em;text-transform:uppercase;
  color:var(--ps-color-brand-600);
  margin-bottom:6px;
}
.example-card__link{
  flex:1 1 auto;
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  background:var(--sv-white);
  border:1px solid var(--ps-color-neutral-2-300);border-radius:12px;
  padding:16px 16px 16px 18px;
  transition:border-color .25s ease-out;
}
.example-card__link:hover{border-color:var(--ps-color-neutral-2-500)}
.example-card__name{font:400 14px/20px var(--ps-font);letter-spacing:normal;color:var(--ps-color-neutral-3-500)}
.example-card__arrow{display:flex;flex:none;color:var(--ps-color-neutral-2-900);transition:transform .2s ease-out,color .2s ease-out}
.example-card__arrow svg{width:13px;height:11px;fill:currentColor}
.example-card__link:hover .example-card__arrow{transform:translateX(3px);color:var(--ps-color-brand-500)}

@media (min-width:640px){
  .examples{padding-block:64px}
  .examples__grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (min-width:1024px){
  .examples{padding-block:80px}
  .examples__grid{grid-template-columns:repeat(4,minmax(0,1fr))}
}
@media (min-width:1350px){
  .examples__head,.examples__grid{grid-column-start:2;grid-column-end:span 10}
}

/* --------------------------------------------------------------------------
   §9 Blog and news
   -------------------------------------------------------------------------- */
.editorial{background:var(--sv-white);padding-block:48px}
.editorial__head{grid-column-end:span var(--ps-grid-columns);margin-bottom:28px;text-align:center}
.editorial__title{color:var(--ps-color-neutral-3-500);margin:0}
.editorial__grid{
  grid-column-end:span var(--ps-grid-columns);
  display:grid;grid-template-columns:1fr;gap:20px;
}
.editorial-card{
  display:flex;flex-direction:column;
  background:var(--sv-white);
  border:1px solid var(--ps-color-neutral-2-300);border-radius:16px;
  padding:24px 22px;
  transition:border-color .25s ease-out;
}
.editorial-card:hover{border-color:var(--ps-color-neutral-2-500)}
.editorial-card__heading{color:var(--ps-color-neutral-3-500);margin:0 0 10px}
.editorial-card__body{color:var(--ps-color-secondary-5-500);margin:0 0 20px;flex:1 1 auto}
.editorial-card__link{align-self:flex-start}

@media (min-width:640px){
  .editorial{padding-block:64px}
  .editorial-card{padding:28px 26px}
}
@media (min-width:1024px){
  .editorial{padding-block:80px}
  .editorial__grid{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (min-width:1350px){
  .editorial__head,.editorial__grid{grid-column-start:2;grid-column-end:span 10}
}

/* --------------------------------------------------------------------------
   Resources round (2026-09-24)
   -------------------------------------------------------------------------- */
/* inline links in leads and body copy */
.res-index__lead a,.topics__lead a,.examples__lead a,.collection__support a,
.section-headings__sub-heading a{
  color:var(--ps-color-brand-600);
  text-decoration:underline;text-underline-offset:2px;
}
.res-index__lead a:hover,.topics__lead a:hover,.examples__lead a:hover,
.collection__support a:hover,.section-headings__sub-heading a:hover{color:var(--ps-color-brand-500)}

/* §2 three filters: Topic takes its own row on tablets (RESOURCES-11) */
@media (min-width:640px) and (max-width:1023.98px){
  .res-filter__field--topic{grid-column:1 / -1}
}
@media (min-width:1024px){
  .res-filter__selects{grid-template-columns:repeat(3,minmax(0,1fr))}
}

/* §4 featured meta reads "Journal paper · September 2026", with the same dot
   the library cards put before a year (RESOURCES-32) */
.journal-lead__year::before{content:"\00B7";margin-right:10px}

/* §6 upcoming session (RESOURCES-45); the empty line shows only when no
   session sits above it (RESOURCES-46) */
.collection__event{
  display:flex;flex-direction:column;align-items:flex-start;gap:6px;
  padding:11px 0 14px;
  border-bottom:1px solid var(--ps-color-neutral-2-300);
}
.collection__event-title{font:400 14px/20px var(--ps-font);letter-spacing:normal;color:var(--ps-color-neutral-3-500)}
.collection__event-status{font:500 12px/16px var(--ps-font);letter-spacing:normal;color:var(--ps-color-brand-600)}
.collection__event-btn{margin-top:4px}
.collection__event ~ .collection__note--empty{display:none}

/* §7 descriptor under a link (RESOURCES-49) and the support line (RESOURCES-51) */
.collection__link-text{display:flex;flex-direction:column;gap:2px;min-width:0}
.collection__desc{font:400 12px/18px var(--ps-font);letter-spacing:normal;color:var(--ps-color-neutral-2-900)}
.collection__support{
  margin:16px 0 0;
  font:400 13px/20px var(--ps-font);letter-spacing:normal;
  color:var(--ps-color-secondary-5-500);
}

/* §8 two-paragraph lead (RESOURCES-53) */
.examples__lead p{margin:0}
.examples__lead p + p{margin-top:12px}

/* §9 one panel with the three newest posts (RESOURCES-61) */
.editorial__grid{max-width:760px;width:100%;margin-inline:auto}
.editorial-card__body{flex:none}
.editorial-posts{list-style:none;margin:0 0 20px;padding:0;border-top:1px solid var(--ps-color-neutral-2-300)}
.editorial-posts__link{
  display:flex;flex-direction:column;gap:2px;
  padding:12px 0;
  border-bottom:1px solid var(--ps-color-neutral-2-300);
  transition:color .2s ease-out;
}
.editorial-posts__title{font:400 14px/20px var(--ps-font);letter-spacing:normal;color:var(--ps-color-neutral-3-500);transition:color .2s ease-out}
.editorial-posts__link:hover .editorial-posts__title{color:var(--ps-color-brand-600)}
.editorial-posts__date{font:400 12px/16px var(--ps-font);letter-spacing:normal;color:var(--ps-color-neutral-2-900)}
@media (min-width:1024px){
  .editorial__grid{grid-template-columns:minmax(0,1fr)}
}

/* §10 two-paragraph sub-heading (RESOURCES-65) */
.section-headings__sub-heading p + p{margin-top:12px}

@media (prefers-reduced-motion:reduce){
  .editorial-posts__link,.editorial-posts__title{transition:none}
}

@media (prefers-reduced-motion:reduce){
  .res-search__field,.res-search__submit,.res-filter__select,.res-filter__clear,
  .res-card__link,.res-card__arrow,.topic-tile__link,.topic-tile__link::before,
  .topic-tile__arrow,.journal-more__link,.journal-more__arrow,.collection,
  .collection__link,.collection__arrow,.example-card__link,.example-card__arrow,
  .editorial-card{transition:none}
}