/* ==========================================================================
   Webinars  (/resources/webinars/)

   Two states, "split visually, one H1" (the doc): upcoming sessions with
   registration, then the recordings. Shared, from stylesheets already linked:
   the page banner, .pf-related (product-family.css). Page-local:
     .wbn-next     the banner's next live session
     .wbn-filter   the doc's filters (collection-filter.js)
     .wbn-card     an upcoming session
     .wbn-item     a recording, by year
     .wbn-tag      access, stated before the click

     §1 banner white · §2 upcoming neutral-2-100 · §3 on demand white ·
     §4 related neutral-2-100
   ========================================================================== */

#upcoming,#on-demand,.wbn-year{scroll-margin-top:24px}
.wbn-lists[hidden],.wbn-upcoming[hidden],.wbn-ondemand[hidden],.wbn-year[hidden],
.wbn-card[hidden],.wbn-item[hidden],.wbn-empty[hidden]{display:none}

/* --------------------------------------------------------------------------
   §1 Banner: the next session, the actions and the filters
   -------------------------------------------------------------------------- */
.wbn-banner .page-banner__body p{margin:0}
.wbn-next{display:flex;flex-direction:column;gap:4px;margin:22px 0 0;max-width:64ch}
.wbn-next__label{font:500 12px/16px var(--ps-font);letter-spacing:.06em;text-transform:uppercase;color:var(--ps-color-brand-600)}
.wbn-next__link{font:500 15px/22px var(--ps-font);letter-spacing:normal;color:var(--ps-color-neutral-3-500)}
.wbn-next__link time{color:var(--ps-color-brand-600);margin-right:6px}
.wbn-next__link:hover span{text-decoration:underline;text-underline-offset:2px}
.wbn-actions{display:flex;flex-wrap:wrap;align-items:center;gap:12px 20px;margin-top:20px}
.wbn-actions__link{
  font:500 14px/20px var(--ps-font);letter-spacing:normal;
  color:var(--ps-color-brand-600);text-decoration:underline;text-underline-offset:2px;
}
.wbn-actions__link:hover{color:var(--ps-color-brand-500)}

.wbn-filter{display:flex;flex-wrap:wrap;align-items:flex-end;gap:14px 16px;margin-top:32px}
.wbn-filter[hidden]{display:none}
.wbn-filter__search{display:flex;flex-direction:column;gap:6px;flex:1 1 100%;max-width:520px}
.wbn-filter__field{display:flex;flex-direction:column;gap:6px;min-width:0;flex:1 1 180px;max-width:240px}
.wbn-filter__label{font:500 13px/19px var(--ps-font);letter-spacing:normal;color:var(--ps-color-neutral-3-500)}
.wbn-filter__input,.wbn-filter__select{
  width:100%;
  background:var(--sv-white);
  border:1px solid var(--ps-color-neutral-2-300);border-radius:10px;
  padding:11px 14px;
  font:400 15px/22px var(--ps-font);letter-spacing:normal;color:var(--ps-color-neutral-3-500);
  transition:border-color .2s ease-out,box-shadow .2s ease-out;
}
.wbn-filter__select{
  appearance:none;-webkit-appearance:none;cursor:pointer;padding-right:40px;
  background:var(--sv-white) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23697077' stroke-width='1.6'/%3E%3C/svg%3E") no-repeat right 14px center;
}
.wbn-filter__input:hover,.wbn-filter__select:hover{border-color:var(--ps-color-neutral-2-500)}
.wbn-filter__input:focus-visible,.wbn-filter__select:focus-visible{outline:none;border-color:var(--ps-color-brand-500);box-shadow:0 0 0 3px rgba(198,12,48,.12)}
.wbn-filter__foot{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 16px;flex-basis:100%}
.wbn-filter__count{margin:0;font:500 13px/19px var(--ps-font);letter-spacing:normal;color:var(--ps-color-neutral-3-500)}
.wbn-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;
}
.wbn-filter__clear[hidden]{display:none}

/* --------------------------------------------------------------------------
   Bands
   -------------------------------------------------------------------------- */
.wbn-upcoming,.wbn-ondemand{padding-block:48px}
.wbn-band__head,.wbn-cards,.wbn-years,.wbn-empty__text{grid-column-end:span var(--ps-grid-columns)}
.wbn-band__head{margin-bottom:28px}
.wbn-band__title{color:var(--ps-color-neutral-3-500);margin:0 0 12px}
.wbn-band__lead{color:var(--ps-color-secondary-5-500);margin:0;max-width:72ch}
.wbn-upcoming,.wbn-related{background:var(--ps-color-neutral-2-100);border-block:1px solid var(--ps-color-neutral-2-300)}
.wbn-ondemand{background:var(--sv-white)}

/* shared item parts */
.wbn-item__label{margin-right:4px;font-weight:500;color:var(--ps-color-neutral-3-500)}
.wbn-item__area,.wbn-item__lang{
  display:inline-flex;align-items:center;padding:2px 9px;border-radius:999px;
  background:var(--ps-color-neutral-2-000);border:1px solid var(--ps-color-neutral-2-300);
  font:500 11px/16px var(--ps-font);letter-spacing:normal;color:var(--ps-color-neutral-3-500);
}
.wbn-item__lang{border-color:var(--ps-color-brand-500);color:var(--ps-color-brand-600)}
.wbn-item__speakers,.wbn-item__products{margin:0;font:400 13px/20px var(--ps-font);letter-spacing:normal;color:var(--ps-color-secondary-5-500)}
.wbn-item__products a{color:var(--ps-color-brand-600);text-decoration:underline;text-underline-offset:2px}
.wbn-item__products a:hover{color:var(--ps-color-brand-500)}
.wbn-tag{
  display:inline-flex;align-items:center;padding:3px 10px;border-radius:999px;
  background:var(--ps-color-neutral-2-100);border:1px solid var(--ps-color-neutral-2-300);
  font:500 12px/16px var(--ps-font);letter-spacing:normal;color:var(--ps-color-neutral-3-500);
}
.wbn-tag--open{background:#e8f3ea;border-color:#b6d8bc;color:#1f5e2b}

/* --------------------------------------------------------------------------
   §2 Upcoming
   -------------------------------------------------------------------------- */
.wbn-cards{display:grid;grid-template-columns:1fr;gap:16px}
.wbn-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:24px 22px;
}
.wbn-card__when{
  display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;margin:0;
  font:500 13px/18px var(--ps-font);letter-spacing:normal;color:var(--ps-color-brand-600);
}
.wbn-card__when span:not([class]){color:var(--ps-color-secondary-5-500)}
.wbn-card__title{margin:0;color:var(--ps-color-neutral-3-500)}
.wbn-card__abstract{margin:0;max-width:78ch;font:400 15px/23px var(--ps-font);letter-spacing:normal;color:var(--ps-color-secondary-5-500)}
.wbn-card__cta{display:flex;flex-wrap:wrap;align-items:center;gap:12px 16px;margin:6px 0 0}

/* --------------------------------------------------------------------------
   §3 On demand
   -------------------------------------------------------------------------- */
.wbn-years{display:flex;flex-direction:column;gap:32px}
.wbn-year__title{margin:0 0 6px;color:var(--ps-color-neutral-3-500)}
.wbn-year__list{list-style:none;margin:0;padding:0;border-top:1px solid var(--ps-color-neutral-2-300)}
.wbn-item{display:flex;flex-direction:column;gap:6px;padding:18px 0;border-bottom:1px solid var(--ps-color-neutral-2-300)}
.wbn-item__meta{
  display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;margin:0;
  font:500 12px/16px var(--ps-font);letter-spacing:normal;color:var(--ps-color-secondary-5-500);
}
.wbn-item__meta time{white-space:nowrap}
.wbn-item__title{font:500 16px/24px var(--ps-font);letter-spacing:normal;color:var(--ps-color-brand-600);max-width:80ch}
.wbn-item__title:hover{color:var(--ps-color-brand-500);text-decoration:underline;text-underline-offset:2px}
.wbn-item__abstract{
  margin:0;max-width:80ch;font:400 14px/21px var(--ps-font);letter-spacing:normal;color:var(--ps-color-secondary-5-500);
  /* verbatim in the markup; long abstracts are cut to three lines on screen */
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;line-clamp:3;overflow:hidden;
}
.wbn-item__access{margin:2px 0 0}

.wbn-empty{padding-block:40px 64px}
.wbn-empty__text{margin:0;color:var(--ps-color-secondary-5-500)}

/* --------------------------------------------------------------------------
   Breakpoints
   -------------------------------------------------------------------------- */
@media (min-width:640px){
  .wbn-upcoming,.wbn-ondemand{padding-block:64px}
  .wbn-card{padding:28px 30px}
}
@media (min-width:1024px){
  .wbn-upcoming,.wbn-ondemand{padding-block:80px}
}
@media (min-width:1350px){
  .wbn-band__head,.wbn-cards,.wbn-years,.wbn-empty__text,.wbn-related .pf-related__inner{grid-column-start:2;grid-column-end:span 10}
}

@media (prefers-reduced-motion:reduce){
  .wbn-filter__input,.wbn-filter__select{transition:none}
}