/* ==========================================================================
   Events  (/company/events/)

   The sixth Company child, built like News. Shared, from product-family.css:
   the filter bar (.pf-filter, .pf-empty) that js/collection-filter.js
   drives, the .pf-cap blocks (the Events / SURGE / Webinars rule) and
   .pf-related. Page-local:
     .evt-up / .evt-card    the upcoming band and its cards
     .evt-past / .evt-row   the past twelve months, one compact row each

   Band rhythm is the homepage's: 48 / 64 / 80. Bands alternate white and
   --ps-color-neutral-2-100. No two adjacent bands share a tint:

     §1  banner    white          §4  past      neutral-2-100
     §2  upcoming  neutral-2-100  §5  FAQ       white
     §3  the rule  white          §6  related   neutral-2-100
   ========================================================================== */

#upcoming,#events-and-surge,#past-events{scroll-margin-top:96px}

/* --------------------------------------------------------------------------
   Band heads (§2, §4)
   -------------------------------------------------------------------------- */
.evt-up,.evt-past{padding-block:48px}
.evt-up__head,.evt-up__wrap,.evt-past__head,.evt-past__list{grid-column-end:span var(--ps-grid-columns)}
.evt-up__head,.evt-past__head{margin-bottom:28px}
.evt-up__title,.evt-past__title{color:var(--ps-color-neutral-3-500);margin:0 0 12px}
.evt-up__lead,.evt-past__lead{color:var(--ps-color-secondary-5-500);margin:0;max-width:70ch}
@media (min-width:640px){.evt-up,.evt-past{padding-block:64px}}
@media (min-width:1024px){.evt-up,.evt-past{padding-block:80px}}
@media (min-width:1350px){
  .evt-up__head,.evt-up__wrap,.evt-past__head,.evt-past__list{grid-column-start:2;grid-column-end:span 10}
}
/* three selects: the shared bar goes five across from 1024; hold three */
@media (min-width:1024px){
  .evt-filter__selects{grid-template-columns:repeat(3,minmax(0,1fr))}
}

/* --------------------------------------------------------------------------
   §2 Upcoming cards: one column, two from 640
   -------------------------------------------------------------------------- */
.evt-up__grid{
  list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:1fr;gap:16px;
}
.evt-up__grid[hidden]{display:none}
@media (min-width:640px){.evt-up__grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
.evt-card{
  display:flex;flex-direction:column;
  background:var(--sv-white);
  border:1px solid var(--ps-color-neutral-2-300);border-radius:16px;
  padding:22px 20px;
  transition:border-color .25s ease-out;
}
.evt-card[hidden]{display:none}
.evt-card:hover{border-color:var(--ps-color-neutral-2-500)}
.evt-card__meta{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px;margin:0 0 10px}
.evt-card__meta time{font:500 13px/19px var(--ps-font);letter-spacing:normal;color:var(--ps-color-neutral-3-500)}
.evt-card__type{font:500 11px/17px var(--ps-font);letter-spacing:.04em;text-transform:uppercase;color:var(--ps-color-brand-600)}
.evt-card__region{
  font:400 11px/17px var(--ps-font);letter-spacing:.02em;color:var(--ps-color-secondary-5-500);
  border:1px solid var(--ps-color-neutral-2-300);border-radius:999px;padding:0 8px;
}
.evt-card__title{margin:0 0 8px;font:500 17px/24px var(--ps-font);letter-spacing:normal;color:var(--ps-color-neutral-3-500)}
.evt-card__booth{margin:0 0 8px;font:400 14px/22px var(--ps-font);letter-spacing:normal;color:var(--ps-color-secondary-5-500)}
.evt-card__link{margin-top:auto;padding-top:10px;align-self:flex-start}

/* --------------------------------------------------------------------------
   §3 The rule: three blocks, three across from 1024
   -------------------------------------------------------------------------- */
@media (min-width:1024px){
  .evt-rule .pf-cap__grid{grid-template-columns:repeat(3,minmax(0,1fr))}
}

/* --------------------------------------------------------------------------
   §4 Past events: compact rows in one card
   -------------------------------------------------------------------------- */
.evt-past__list{
  list-style:none;margin:0;padding:0;
  background:var(--sv-white);
  border:1px solid var(--ps-color-neutral-2-300);border-radius:16px;overflow:hidden;
}
.evt-row{
  display:grid;grid-template-columns:1fr;gap:2px;
  padding:14px 20px;border-top:1px solid var(--ps-color-neutral-2-300);
}
.evt-row:first-child{border-top:0}
.evt-row__date{font:500 12px/18px var(--ps-font);letter-spacing:.02em;color:var(--ps-color-neutral-3-500)}
.evt-row__title{font:500 15px/22px var(--ps-font);letter-spacing:normal;color:var(--ps-color-brand-600);text-decoration:underline;text-underline-offset:2px}
.evt-row__title:hover{color:var(--ps-color-brand-500)}
.evt-row__meta{font:400 12px/18px var(--ps-font);letter-spacing:normal;color:var(--ps-color-secondary-5-500)}
@media (min-width:1024px){
  .evt-row{grid-template-columns:220px minmax(0,1fr) 220px;align-items:baseline;gap:24px;padding:14px 24px}
  .evt-row__meta{text-align:right}
}

/* --------------------------------------------------------------------------
   §6 Related: three tiles, three across from 640. Stated here because the
   shared sheet goes five across at 1024, which left three tiles and two gaps
   -------------------------------------------------------------------------- */
@media (min-width:640px){.pf-related__list{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (min-width:1350px){
  .evt-rule .pf-cap__head,.evt-rule .pf-cap__grid,
  .pf-related__inner{grid-column-start:2;grid-column-end:span 10}
}

/* phones: the large button can be wider than a 320px column; let it wrap */
@media (max-width:639.98px){
  .page-banner__ctas .ps-btn--large{max-width:100%}
  .page-banner__ctas .ps-btn--large .ps-btn__text{white-space:normal;min-width:0}
}
@media (prefers-reduced-motion:reduce){.evt-card{transition:none}}

/* --------------------------------------------------------------------------
   Band run for this page
   -------------------------------------------------------------------------- */
.evt-up,.evt-past,.pf-related{
  background:var(--ps-color-neutral-2-100);
  border-block:1px solid var(--ps-color-neutral-2-300);
}
.pf-cap,.faq{background:var(--sv-white)}

/* --------------------------------------------------------------------------
   The Events round (2026-09-28)
   -------------------------------------------------------------------------- */
/* a card's description under its title (EVENTS-08, -10), set as the IEDM
   card's line */
.evt-card__what{margin:0 0 8px;font:400 14px/22px var(--ps-font);letter-spacing:normal;color:var(--ps-color-secondary-5-500)}

/* FOUR Related tiles once the Company hub moves into the list (EVENTS-47):
   two across from 640 and four from 1024, so the list closes 2 + 2 and 4.
   Keyed on the count, so switching the up-link back on (and dropping the
   tile) restores the three across. */
@media (min-width:640px){
  .pf-related__list:has(> li:nth-child(4)){grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (min-width:1024px){
  .pf-related__list:has(> li:nth-child(4)){grid-template-columns:repeat(4,minmax(0,1fr))}
}