/* ==========================================================================
   Videos  (/resources/videos/)

   "The single video index for the site" (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:
     .vds-filter      the doc's filters (collection-filter.js)
     .vds-card        an open video: thumbnail, length, type, date, title
     .vds-row         a registration-only recording
     .vds-overlap     how this page relates to Webinars, SURGE, Testimonials

     §1 banner white · §2 watch neutral-2-100 · §3 recordings white ·
     §4 overlap neutral-2-100 · §5 FAQ white · §6 related neutral-2-100
   ========================================================================== */

#watch,#recordings{scroll-margin-top:24px}
.vds-lists [hidden],.vds-card[hidden],.vds-row[hidden]{display:none}

/* --------------------------------------------------------------------------
   §1 Banner: the filters
   -------------------------------------------------------------------------- */
.vds-banner .page-banner__body p{margin:0}
.vds-filter{display:flex;flex-wrap:wrap;align-items:flex-end;gap:14px 16px;margin-top:28px}
.vds-filter[hidden]{display:none}
.vds-filter__search{display:flex;flex-direction:column;gap:6px;flex:1 1 100%;max-width:520px}
.vds-filter__field{display:flex;flex-direction:column;gap:6px;min-width:0;flex:1 1 180px;max-width:240px}
.vds-filter__label{font:500 13px/19px var(--ps-font);letter-spacing:normal;color:var(--ps-color-neutral-3-500)}
.vds-filter__input,.vds-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;
}
.vds-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;
}
.vds-filter__input:hover,.vds-filter__select:hover{border-color:var(--ps-color-neutral-2-500)}
.vds-filter__input:focus-visible,.vds-filter__select:focus-visible{outline:none;border-color:var(--ps-color-brand-500);box-shadow:0 0 0 3px rgba(198,12,48,.12)}
.vds-filter__foot{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 16px;flex-basis:100%}
.vds-filter__count{margin:0;font:500 13px/19px var(--ps-font);letter-spacing:normal;color:var(--ps-color-neutral-3-500)}
.vds-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;
}
.vds-filter__clear[hidden]{display:none}

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

.vds-tag{
  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);
}
.vds-tag--soft{color:var(--ps-color-secondary-5-500)}
.vds-item__label{margin-right:4px;font-weight:500;color:var(--ps-color-neutral-3-500)}
.vds-item__products{margin:0;font:400 13px/20px var(--ps-font);letter-spacing:normal;color:var(--ps-color-secondary-5-500)}
.vds-item__products a{color:var(--ps-color-brand-600);text-decoration:underline;text-underline-offset:2px}

/* --------------------------------------------------------------------------
   §2 Watch now
   -------------------------------------------------------------------------- */
.vds-grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr;gap:16px}
.vds-card{
  display:flex;flex-direction:column;gap:8px;
  background:var(--sv-white);border:1px solid var(--ps-color-neutral-2-300);border-radius:16px;
  padding:0 0 16px;overflow:hidden;
}
.vds-card > :not(.vds-card__media){margin-inline:18px}
.vds-card__media{position:relative;display:block;aspect-ratio:16/9;background:var(--ps-color-neutral-3-500);overflow:hidden}
.vds-card__img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .3s ease-out}
.vds-card__media:hover .vds-card__img{transform:scale(1.03)}
.vds-card__noimg{display:flex;align-items:center;justify-content:center;width:100%;height:100%;color:var(--sv-white)}
.vds-card__noimg svg{width:40px;height:40px;fill:currentColor}
.vds-card__dur{
  position:absolute;right:8px;bottom:8px;padding:2px 7px;border-radius:6px;
  background:rgba(0,0,0,.78);color:var(--sv-white);
  font:500 12px/16px var(--ps-font);letter-spacing:normal;font-variant-numeric:tabular-nums;
}
.vds-card__meta{
  display:flex;flex-wrap:wrap;align-items:center;gap:4px 10px;margin:8px 0 0;
  font:500 12px/16px var(--ps-font);letter-spacing:normal;color:var(--ps-color-secondary-5-500);
}
.vds-card__type{color:var(--ps-color-brand-600);letter-spacing:.04em;text-transform:uppercase}
.vds-card__title{font:500 15px/22px var(--ps-font);letter-spacing:normal;color:var(--ps-color-neutral-3-500)}
.vds-card__title:hover{color:var(--ps-color-brand-600);text-decoration:underline;text-underline-offset:2px}
.vds-card__foot{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;margin-top:auto;padding-top:4px}
.vds-card__full{
  font:500 13px/19px var(--ps-font);letter-spacing:normal;
  color:var(--ps-color-brand-600);text-decoration:underline;text-underline-offset:2px;
}

/* --------------------------------------------------------------------------
   §3 Full recordings
   -------------------------------------------------------------------------- */
.vds-recs__title{margin:28px 0 12px;color:var(--ps-color-neutral-3-500)}
.vds-recs__title:first-child{margin-top:0}
.vds-group__count{margin-left:auto;margin-right:12px;font:400 13px/19px var(--ps-font);letter-spacing:normal;color:var(--ps-color-secondary-5-500);white-space:nowrap}
.vds-recs__title .vds-group__count{margin-left:8px}
.vds-groups .pf-group__question{flex-wrap:nowrap;gap:12px}
.vds-groups .pf-group__question-text{flex:1 1 auto;min-width:0}
.vds-group__date{display:block;margin-top:2px;font:400 13px/19px var(--ps-font);letter-spacing:normal;color:var(--ps-color-secondary-5-500)}
.vds-rows{list-style:none;margin:0;padding:0 20px 12px}
.vds-row{display:flex;flex-direction:column;gap:4px;padding:11px 0;border-top:1px solid var(--ps-color-neutral-2-300)}
.vds-row__title{font:500 14px/21px var(--ps-font);letter-spacing:normal;color:var(--ps-color-brand-600)}
.vds-row__title:hover{color:var(--ps-color-brand-500);text-decoration:underline;text-underline-offset:2px}
/* a talk listed before its destination is ruled (VIDEOS-08, -14, -15): text, not a link */
.vds-row__title--text,.vds-row__title--text:hover{color:var(--ps-color-neutral-3-500);text-decoration:none}
.vds-row__meta{display:flex;flex-wrap:wrap;gap:4px 12px;font:400 13px/19px var(--ps-font);letter-spacing:normal;color:var(--ps-color-secondary-5-500)}
/* while filtering, every group stays open so its matches show */
.vds-filtering .pf-groups__list.is-enhanced .pf-group__item:not(.is-open) .pf-group__answer{grid-template-rows:1fr}

/* --------------------------------------------------------------------------
   §4 Overlap
   -------------------------------------------------------------------------- */
.vds-overlap__grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr;gap:16px}
.vds-overlap__card{background:var(--sv-white);border:1px solid var(--ps-color-neutral-2-300);border-radius:16px;padding:22px}
.vds-overlap__name{margin:0 0 8px}
.vds-overlap__name a{color:var(--ps-color-brand-600)}
.vds-overlap__name a:hover{text-decoration:underline;text-underline-offset:2px}
.vds-overlap__body{margin:0;font:400 15px/23px var(--ps-font);letter-spacing:normal;color:var(--ps-color-secondary-5-500)}

.vds-empty{padding-block:24px 48px}
.vds-empty__text{margin:0;color:var(--ps-color-secondary-5-500)}

/* --------------------------------------------------------------------------
   Breakpoints
   -------------------------------------------------------------------------- */
@media (min-width:640px){
  .vds-watch,.vds-recordings,.vds-overlap{padding-block:64px}
  .vds-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
  .vds-overlap__grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
}
@media (min-width:1024px){
  .vds-watch,.vds-recordings,.vds-overlap{padding-block:80px}
  .vds-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (min-width:1350px){
  .vds-band__head,.vds-grid,.vds-recs,.vds-overlap__grid,.vds-empty__text,.vds-related .pf-related__inner{grid-column-start:2;grid-column-end:span 10}
  .vds-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
}

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