/* ==========================================================================
   SURGE  (/company/surge/)

   The eighth Company child, built like Events. Shared, from
   product-family.css: the .pf-cap blocks, the filter bar (.pf-filter,
   .pf-empty) that js/collection-filter.js drives, and .pf-related.
   Page-local:
     .sge-cycle / .sge-card    the current cycle: one card per region
     .sge-proc / .sge-item     the Proceedings: 2026 talks and past editions

   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  proceedings  neutral-2-100
     §2  what SURGE is   neutral-2-100  §5  FAQ          white
     §3  SURGE 2026      white          §6  related      neutral-2-100
   ========================================================================== */

#what-surge-is,#surge-2026,#proceedings,.sge-card,.sge-item{scroll-margin-top:96px}

/* --------------------------------------------------------------------------
   Band heads (§3, §4)
   -------------------------------------------------------------------------- */
.sge-cycle,.sge-proc{padding-block:48px}
.sge-cycle__head,.sge-cycle__grid,.sge-proc__head,.sge-proc__wrap{grid-column-end:span var(--ps-grid-columns)}
.sge-cycle__head,.sge-proc__head{margin-bottom:28px}
.sge-cycle__title,.sge-proc__title{color:var(--ps-color-neutral-3-500);margin:0 0 12px}
.sge-cycle__lead,.sge-proc__lead{color:var(--ps-color-secondary-5-500);margin:0;max-width:70ch}
@media (min-width:640px){.sge-cycle,.sge-proc{padding-block:64px}}
@media (min-width:1024px){.sge-cycle,.sge-proc{padding-block:80px}}
@media (min-width:1350px){
  .sge-cycle__head,.sge-cycle__grid,.sge-proc__head,.sge-proc__wrap{grid-column-start:2;grid-column-end:span 10}
}

/* --------------------------------------------------------------------------
   §2 What SURGE is: 2 x 2 from 640 (the shared default is three at 1024)
   -------------------------------------------------------------------------- */
@media (min-width:640px){.sge-about .pf-cap__grid{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* --------------------------------------------------------------------------
   §3 The 2026 cards: two across from 480, four from 1024
   -------------------------------------------------------------------------- */
.sge-cycle__grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr;gap:16px}
@media (min-width:480px){.sge-cycle__grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1024px){.sge-cycle__grid{grid-template-columns:repeat(4,minmax(0,1fr))}}
.sge-card{
  display:flex;flex-direction:column;
  background:var(--ps-color-neutral-2-000);
  border:1px solid var(--ps-color-neutral-2-300);border-radius:16px;padding:22px 20px;
}
.sge-card__meta{display:flex;flex-wrap:wrap;gap:4px 10px;margin:0 0 8px}
.sge-card__meta time{font:500 13px/19px var(--ps-font);letter-spacing:normal;color:var(--ps-color-neutral-3-500)}
.sge-card__format{font:500 11px/19px var(--ps-font);letter-spacing:.04em;text-transform:uppercase;color:var(--ps-color-brand-600)}
.sge-card__region{margin:0 0 14px;font:500 22px/28px var(--ps-font);letter-spacing:normal;color:var(--ps-color-neutral-3-500)}
.sge-card__link{margin-top:auto;align-self:flex-start}

/* --------------------------------------------------------------------------
   §4 Proceedings: one list, rows ruled like the News list
   -------------------------------------------------------------------------- */
/* two selects: hold them two across, never the shared bar's five */
@media (min-width:1024px){.sge-filter__selects{grid-template-columns:repeat(2,minmax(0,1fr));max-width:66%}}
.sge-proc__list{
  list-style:none;margin:0;padding:0;
  background:var(--ps-color-neutral-2-000);
  border:1px solid var(--ps-color-neutral-2-300);border-radius:16px;overflow:hidden;
}
.sge-proc__list[hidden]{display:none}
/* bottom rules pulled 1px under the list's border, so filtering never doubles one */
.sge-item{padding:16px 20px;border-bottom:1px solid var(--ps-color-neutral-2-300);margin-bottom:-1px}
.sge-item[hidden]{display:none}
.sge-item__meta{display:flex;flex-wrap:wrap;gap:4px 12px;margin:0 0 6px;font:400 12px/18px var(--ps-font);letter-spacing:.02em;color:var(--ps-color-secondary-5-500)}
.sge-item__kind{font-weight:500;text-transform:uppercase;letter-spacing:.04em;color:var(--ps-color-brand-600)}
.sge-item__title{margin:0 0 4px;font:500 16px/24px var(--ps-font);letter-spacing:normal;color:var(--ps-color-neutral-3-500)}
.sge-item__who{margin:0 0 8px;font:400 14px/22px var(--ps-font);letter-spacing:normal;color:var(--ps-color-secondary-5-500)}
.sge-item:target{background:var(--sv-white);box-shadow:inset 3px 0 0 var(--ps-color-brand-500)}

/* --------------------------------------------------------------------------
   §6 Related: three tiles, three across from 640; four with Publications
   -------------------------------------------------------------------------- */
@media (min-width:640px){.pf-related__list{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (min-width:1024px){.pf-related__list:has(> li:nth-child(4)){grid-template-columns:repeat(4,minmax(0,1fr))}}
@media (min-width:1350px){
  .sge-about .pf-cap__head,.sge-about .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}
}

/* --------------------------------------------------------------------------
   Band run for this page
   -------------------------------------------------------------------------- */
.sge-about,.sge-proc,.pf-related{
  background:var(--ps-color-neutral-2-100);
  border-block:1px solid var(--ps-color-neutral-2-300);
}
.sge-cycle,.faq{background:var(--sv-white)}
.sge-proc__list{background:var(--sv-white)}

/* --------------------------------------------------------------------------
   The SURGE round (2026-09-29)
   -------------------------------------------------------------------------- */
/* two text links in the SURGE and Events block (SURGE-16) */
.sge-about__links{display:flex;flex-wrap:wrap;gap:8px 20px}
/* FIVE Related tiles (SURGE-50, -52): three across from 1024 rather than four,
   so the list closes 3 + 2, as on the other Company pages */
@media (min-width:1024px){
  .pf-related__list:has(> li:nth-child(5)){grid-template-columns:repeat(3,minmax(0,1fr))}
}