/**
 * Webinars archive: hero + filter tabs, card grid, pagination. Same visual
 * language and color tokens as single-webinar.css so /webinar/ and a single
 * webinar post feel like one continuous section.
 */
#sgweb-archive-hero, .sgweb-archive-layout {
  --navy:#16294a; --navy-2:#1c3153; --navy-deep:#0c1830;
  --teal:#17a2ac; --teal-light:#2dc6cb; --teal-deep:#0f7c84;
  --ink:#182338; --grey:#616d80; --grey-soft:#8892a1;
  --line:#e1e7f0; --card:#ffffff; --card-grey:#eef1f6;
  --tealtint: color-mix(in srgb, var(--teal) 9%, transparent);
  font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  line-height:1.6;
}
#sgweb-archive-hero, #sgweb-archive-hero *, .sgweb-archive-layout, .sgweb-archive-layout * { box-sizing:border-box; }
#sgweb-archive-hero h1 { font-family:'Anek Latin','Inter',-apple-system,sans-serif; font-weight:700; margin:0; text-wrap:balance; }
#sgweb-archive-hero p { margin:0; }
#sgweb-archive-hero a, .sgweb-archive-layout a { color:inherit; text-decoration:none; }
#sgweb-archive-hero img, .sgweb-archive-layout img { max-width:100%; display:block; }
#sgweb-archive-hero .wrap, .sgweb-archive-layout.wrap { max-width:1180px; margin:0 auto; padding-left:28px; padding-right:28px; }
@media (max-width:640px){ #sgweb-archive-hero .wrap, .sgweb-archive-layout.wrap { padding-left:20px; padding-right:20px; } }

/* ============ hero (navy) ============ */
#sgweb-archive-hero{
  position:relative; overflow:hidden; color:#eef2f9;
  background:linear-gradient(172deg, var(--navy) 0%, var(--navy-2) 55%, var(--navy-deep) 100%);
  padding:96px 0 0;
}
#sgweb-archive-hero .sgweb-hero-glow{ position:absolute; border-radius:50%; pointer-events:none; z-index:0; }
#sgweb-archive-hero .sgweb-hero-glow.g1{ top:-160px; right:-90px; width:560px; height:440px; background:radial-gradient(closest-side, rgba(45,198,203,.22), transparent 72%); }
#sgweb-archive-hero .sgweb-hero-glow.g2{ bottom:-200px; left:-120px; width:480px; height:380px; background:radial-gradient(closest-side, rgba(255,255,255,.05), transparent 72%); }
#sgweb-archive-hero .sgweb-archive-hero-in{ position:relative; z-index:1; }
#sgweb-archive-hero .sgweb-archive-kick{
  display:inline-flex; align-items:center; gap:9px; font-size:12.5px; font-weight:700;
  letter-spacing:.16em; text-transform:uppercase; color:var(--teal-light); margin-bottom:20px;
}
#sgweb-archive-hero .sgweb-archive-kick::before{ content:""; width:22px; height:1.5px; background:var(--teal-light); }
#sgweb-archive-hero h1{ font-size:clamp(32px,4.2vw,48px); line-height:1.08; color:#fff; }
#sgweb-archive-hero p{ font-size:16px; color:#b7c4da; max-width:56ch; margin-top:16px; }

#sgweb-archive-hero .sgweb-archive-tabs{ display:flex; gap:4px; margin-top:40px; overflow-x:auto; scrollbar-width:none; }
#sgweb-archive-hero .sgweb-archive-tabs::-webkit-scrollbar{ display:none; }
#sgweb-archive-hero .sgweb-archive-tab{
  flex:none; display:inline-block; padding:14px 22px; font-size:14px; font-weight:600; color:#b7c4da;
  border-bottom:2px solid transparent; white-space:nowrap; transition:color .15s ease, border-color .15s ease;
}
#sgweb-archive-hero .sgweb-archive-tab:hover{ color:#fff; }
#sgweb-archive-hero .sgweb-archive-tab.is-active{ color:#fff; border-color:var(--teal-light); }

/* ============ card grid ============ */
.sgweb-archive-layout{ padding-top:64px; padding-bottom:0; }
.sgweb-archive-grid{ display:grid; grid-template-columns:1fr 1fr; gap:22px; margin-bottom:8px; }
@media (max-width:760px){ .sgweb-archive-grid{ grid-template-columns:1fr; } }

.sgweb-card{
  background:var(--card); border:1px solid var(--line); border-radius:16px; padding:24px 26px 22px;
  display:flex; flex-direction:column; gap:14px; transition:transform .2s cubic-bezier(.16,1,.3,1), box-shadow .2s ease;
}
.sgweb-card:hover{ transform:translateY(-3px); box-shadow:0 16px 30px -18px rgba(20,37,63,.28); }

.sgweb-card-top{ display:flex; align-items:flex-start; justify-content:space-between; gap:12px; }
.sgweb-card-date{ display:flex; align-items:center; gap:7px; font-size:12.5px; font-weight:600; color:var(--grey-soft); }
.sgweb-card-date svg{ width:14px; height:14px; stroke:var(--grey-soft); fill:none; stroke-width:2; flex:none; }
.sgweb-card-avatars{ display:flex; }
.sgweb-card-avatars img{ width:32px; height:32px; border-radius:50%; border:2px solid #fff; object-fit:cover; margin-left:-10px; }
.sgweb-card-avatars img:first-child{ margin-left:0; }
.sgweb-card-avatars .more{
  width:32px; height:32px; border-radius:50%; border:2px solid #fff; margin-left:-10px;
  background:var(--tealtint); color:var(--teal-deep); font-size:11px; font-weight:700;
  display:flex; align-items:center; justify-content:center;
}

.sgweb-card-badge-row{ display:flex; align-items:center; gap:10px; }
.sgweb-card-badge{ display:inline-block; font-size:11px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; padding:5px 12px; border-radius:99px; }
.sgweb-card-badge.is-upcoming{ background:var(--tealtint); color:var(--teal-deep); }
.sgweb-card-badge.is-replay{ background:var(--card-grey); color:var(--grey); }
.sgweb-card-recording{ display:inline-flex; align-items:center; gap:5px; font-size:12px; font-weight:600; color:var(--grey); }
.sgweb-card-recording svg{ width:14px; height:14px; fill:var(--teal-deep); flex:none; }

.sgweb-card h3{ font-family:'Anek Latin','Inter',-apple-system,sans-serif!important; font-weight:700!important; font-size:19px!important; line-height:1.32; margin:0; color:var(--ink); text-wrap:balance; }
.sgweb-card p{
  font-size:14px; color:var(--grey); line-height:1.6; margin:0;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}

.sgweb-card-link{ margin-top:auto; padding-top:6px; display:inline-flex; align-items:center; gap:6px; font-size:13.5px; font-weight:700; color:var(--teal-deep); align-self:flex-start; }
.sgweb-card-link svg{ width:14px; height:14px; stroke:currentColor; fill:none; stroke-width:2.2; transition:transform .18s ease; }
.sgweb-card:hover .sgweb-card-link svg{ transform:translateX(3px); }

.sgweb-archive-empty{ padding:60px 0; text-align:center; color:var(--grey); font-size:15px; }

/* ============ pagination ============ */
.sgweb-archive-pagination{ display:flex; align-items:center; justify-content:center; gap:8px; flex-wrap:wrap; padding:28px 0 8px; }
.sgweb-archive-pagination .page-numbers{
  display:flex; align-items:center; justify-content:center; min-width:38px; height:38px; padding:0 6px;
  border-radius:10px; font-size:13.5px; font-weight:600; color:var(--grey); background:none;
}
.sgweb-archive-pagination a.page-numbers:hover{ background:var(--tealtint); color:var(--teal-deep); }
.sgweb-archive-pagination .page-numbers.current{ background:var(--teal); color:#fff; }
.sgweb-archive-pagination .page-numbers.dots{ color:var(--grey-soft); }
.sgweb-archive-pagination .page-numbers.prev, .sgweb-archive-pagination .page-numbers.next{
  border:1px solid var(--line); background:var(--card); color:var(--ink); font-size:16px;
}