/* ============================================================
   Pakistan & Counting — Recorded Webinars (listing page)
   Self-contained: hero + rainbow + webinar card grid + sponsor + ticker.
   Base tokens / header / footer / buttons come from style.css.
   Figma webinar card: pink fill · orange price badge · pink cart · yellow buy
   ============================================================ */
:root{ --rw-green:#26B685; --rw-orange:#FF6B22; --rw-yellow:#FFCB00; --rw-pink:#EF2167;
  --rw-dark:#3A3A3A; --rw-body:#4E4E4E; }

/* ---------- HERO ---------- */
.rw-hero{position:relative;margin-top:-84px;padding:170px 0 88px;text-align:center;overflow:hidden;
  background-color:#fff;
  background-image:
    repeating-linear-gradient(0deg,rgba(0,0,0,.06) 0 1px,transparent 1px 46px),
    repeating-linear-gradient(90deg,rgba(0,0,0,.06) 0 1px,transparent 1px 46px);
  background-size:46px 46px}
.rw-hero__inner{position:relative;z-index:1;max-width:1200px;margin:0 auto;padding:0 clamp(24px,2.4vw,60px)}
/* plain (unboxed) hero title — "WEBINARS" (Figma) */
.rw-hero__title{font-family:var(--ff);font-weight:900;text-transform:uppercase;line-height:1;color:var(--rw-dark);
  font-size:clamp(30px,5vw,58px)}
.rw-boxed{display:inline-block;border:3px solid var(--rw-dark);background:#fff;padding:.05em .35em;
  box-shadow:6px 6px 0 0 var(--rw-green);font-size:clamp(22px,3.2vw,34px);white-space:nowrap}
.rw-hero .wtabs{margin:26px 0 0}
.rw-hero__sub{margin:26px auto 0;max-width:640px;font-family:var(--ff);font-weight:600;
  color:var(--rw-body);font-size:clamp(15px,1.5vw,20px);line-height:1.45}
.wtab {box-shadow: 6px 6px 0 0 var(--pink);}
.wtab.is-active {background: var(--pink);}
/* content panels — Upcoming / Recorded switch (same card design) */
.rw-wpanel{display:none}
.rw-wpanel.is-active{display:block}
.rw-wempty{text-align:center;max-width:620px;margin:10px auto 30px;padding:48px 24px;
  background:#FCE3EC;border:1px dashed rgba(239,33,103,.5)}
.rw-wempty h3{font-family:var(--ff);font-weight:900;text-transform:uppercase;color:var(--rw-dark);font-size:clamp(18px,2vw,24px)}
.rw-wempty p{margin:12px auto 0;max-width:460px;font-family:var(--ff);font-weight:500;color:var(--rw-body);font-size:15px;line-height:1.6}

.rw-rainbow{height:9px;background:linear-gradient(90deg,var(--rw-green) 0 25%,var(--rw-yellow) 25% 50%,
  var(--rw-orange) 50% 75%,var(--rw-pink) 75% 100%)}

.rw-sec,.rw-sponsor{position:relative;overflow:hidden;background:#fff}
.rw-sec::before,.rw-sponsor::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background-image:repeating-linear-gradient(0deg,rgba(0,0,0,.06) 0 1px,transparent 1px 46px),
    repeating-linear-gradient(90deg,rgba(0,0,0,.06) 0 1px,transparent 1px 46px)}
.rw-sec>.container,.rw-sponsor>.container{position:relative;z-index:1}

/* ---------- SEARCH + SORT FILTER (Figma "Sorting Filter") ---------- */
.rw-filter{position:relative;z-index:2;max-width:1200px;margin:0 auto 36px;
  display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap}
.rw-filter__search{position:relative;flex:0 1 300px;max-width:300px;min-width:200px}
.rw-filter__input{font-weight: 500; width:100%;height:46px;border:1px solid #c4c4c4;background:#fff;
  padding:0 44px 0 18px;font-family:var(--ff);font-size:15px;line-height:46px;color:var(--rw-dark);
  outline:none;transition:border-color .15s ease}
.rw-filter__input::placeholder{color:#7f7f7f;opacity:1}
.rw-filter__input:focus{border-color:var(--rw-green)}
.rw-filter__search-icon{position:absolute;right:16px;top:50%;transform:translateY(-50%);
  width:18px;height:18px;color:var(--rw-green);pointer-events:none}
.rw-filter__search-icon svg{width:100%;height:100%;display:block}
.rw-sort{position:relative;flex:0 0 188px;max-width:188px;width:188px}
.rw-sort__toggle{width:100%;height:46px;display:flex;align-items:center;justify-content:space-between;
  gap:10px;background:#fff;border:1px solid #c4c4c4;padding:0 16px 0 18px;cursor:pointer;
  font-family:var(--ff);font-size:15px;color:#7f7f7f;text-align:left;font-weight: 500;}
.rw-sort__chev{width:12px;height:8px;color:var(--rw-green);flex:0 0 auto;transition:transform .18s ease}
.rw-sort.is-open .rw-sort__chev{transform:rotate(180deg)}
.rw-sort__menu{position:absolute;top:calc(100% - 1px);left:0;right:0;z-index:5;margin:0;padding:5px 0;
  list-style:none;background:#fff;border:1px solid #c4c4c4;box-shadow:0 14px 30px rgba(0,0,0,.12);
  display:none}
.rw-sort.is-open .rw-sort__menu{display:block}
.rw-sort__opt{padding:9px 18px;font-family:var(--ff);font-size:15px;color:#7f7f7f;cursor:pointer;
  transition:background .12s ease,color .12s ease}
.rw-sort__opt:hover{background:#eefff9;color:var(--rw-dark)}
.rw-sort__opt.is-active{color:var(--rw-green);font-weight:500}
.rw-filter__empty{position:relative;z-index:1;max-width:900px;margin:0 auto 10px;text-align:center;
  font-family:var(--ff);font-weight:700;color:var(--rw-body);font-size:18px}
.rw-card.is-hidden{display:none}
.rw-card.is-paged{display:none}   /* hidden by pagination (not on the current page) */

/* ---------- PAGINATION ---------- */
.rw-pager{display:flex;justify-content:center;align-items:center;gap:9px;flex-wrap:wrap;margin:40px auto 0;padding:0 20px}
.rw-page{min-width:44px;height:44px;padding:0 14px;font-family:var(--ff);font-size:15px;font-weight:800;
  color:#1d1d1d;background:#fff;border:2px solid #1d1d1d;border-radius:3px;cursor:pointer;
  box-shadow:3px 3px 0 0 #1d1d1d;transition:transform .12s ease,box-shadow .12s ease,background .12s ease,color .12s ease}
.rw-page:hover:not(:disabled):not(.is-active){transform:translate(-1px,-1px);box-shadow:5px 5px 0 0 #1d1d1d}
.rw-page.is-active{background:#26B685;border-color:#1d1d1d;color:#fff;cursor:default}
.rw-page:disabled{opacity:.4;cursor:default;box-shadow:2px 2px 0 0 #1d1d1d}
.rw-page--gap{border:0;background:none;box-shadow:none;cursor:default;min-width:18px;padding:0}
@media (max-width:520px){ .rw-page{min-width:40px;height:40px;font-size:14px} }

/* ---------- WEBINAR CARD GRID ---------- */
.rw-sec{padding:64px 0 70px}
.rw-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:44px 34px;max-width:1200px;margin:auto;}
@media (min-width:1500px){.rw-grid{max-width:none;grid-template-columns:repeat(4,1fr)}}
/* Coming-Soon webinar: in the grid but non-clickable, with a badge */
.rw-card--soon{cursor:default}
.rw-card--soon .rw-card__media img{filter:grayscale(.35) opacity(.92)}
.rw-card__soon{position:absolute;top:14px;left:14px;background:var(--gold,#F9C300);color:#3A3A3A;
  font-family:var(--ff);font-weight:800;text-transform:uppercase;letter-spacing:.03em;font-size:12px;
  padding:6px 12px;border:1.5px solid #3A3A3A;box-shadow:3px 3px 0 0 rgba(58,58,58,.25)}
.rw-card__soonlabel{display:inline-block;font-family:var(--ff);font-weight:800;text-transform:uppercase;
  letter-spacing:.03em;font-size:13px;color:#8a8a8a;padding:11px 0}
.rw-card{position:relative;display:flex;flex-direction:column;padding:12px 12px 16px;
  background:#FCE3EC;box-shadow:9px 11px 0 0 rgba(239,33,103,.4);
  transition:background .18s ease,box-shadow .18s ease}
.rw-card__media{position:relative;line-height:0}
.rw-card__media img{display:block;width:100%;aspect-ratio:16/9;object-fit:cover}
.rw-card__price{position:absolute;left:-10px;bottom:-20px;z-index:3;font-family:var(--ff);font-weight:900;
  color:#fff;font-size:16px;line-height:1;padding:31px 18px 15px 17px;background:var(--rw-orange);
  clip-path:polygon(0 20px,8% 0,12% 20px,100% 20px,100% 100%,0 100%)}
.rw-card__price::after{content:none;display:none}
.rw-card__title{margin:34px 6px 0;font-family:var(--ff);font-weight:800;text-transform:uppercase;
  color:#161616;font-size:16px;line-height:1.28;flex:1 0 auto}
.rw-card__actions{display:flex;gap:16px;margin:20px 6px 0}
.rw-card__btn{flex:1 1 0;text-align:center;font-family:var(--ff);font-weight:900;text-transform:uppercase;
  font-size:12.5px;letter-spacing:.02em;color:#fff;padding:13px 6px;white-space:nowrap;cursor:pointer;
  transition:transform .12s ease,box-shadow .12s ease,background .18s ease,color .18s ease}
.rw-card__cart{background:var(--rw-pink);box-shadow:4px 4px 0 0 var(--rw-yellow)}
.rw-card__buy{background:var(--rw-yellow);color:var(--rw-dark);box-shadow:4px 4px 0 0 var(--rw-pink)}
.rw-card__btn:hover{transform:translate(1px,1px)}
.rw-card__cart:hover{box-shadow:2px 2px 0 0 var(--rw-yellow)}
.rw-card__buy:hover{box-shadow:2px 2px 0 0 var(--rw-pink)}

/* ---- HOVER: PRODUCT box fills PINK, and the buttons change with it ----
   Product boxes = pink, deck boxes = orange (see industry-decks.css). Add To Cart is
   pink at rest, so it must change or it would vanish into the fill — it takes the
   COMPLEMENTARY colour: pink card → ORANGE button (a deck card does the reverse). */
.rw-card:hover{background:var(--rw-pink);box-shadow:9px 11px 0 0 var(--rw-dark)}
.rw-card:hover .rw-card__title{color:#fff}
.rw-card:hover .rw-card__details{color:#fff;border-top-color:rgba(255,255,255,.5)}
.rw-card:hover .rw-card__details svg{color:#fff}
.rw-card:hover .rw-card__cart{background:var(--rw-orange);color:#fff;box-shadow:4px 4px 0 0 var(--rw-dark)}
.rw-card:hover .rw-card__buy{background:var(--rw-yellow);color:var(--rw-dark);box-shadow:4px 4px 0 0 #fff}
.rw-card:hover .rw-card__cart:hover{box-shadow:2px 2px 0 0 var(--rw-dark)}
.rw-card:hover .rw-card__buy:hover{box-shadow:2px 2px 0 0 #fff}
/* touch devices have no hover — don't strand a tapped card in the filled state */
@media (hover:none){
  .rw-card:hover{background:#FCE3EC;box-shadow:9px 11px 0 0 rgba(239,33,103,.4)}
  .rw-card:hover .rw-card__title{color:#161616}
  .rw-card:hover .rw-card__details{color:var(--rw-pink);border-top-color:rgba(0,0,0,.14)}
  .rw-card:hover .rw-card__cart{background:var(--rw-pink);color:#fff;box-shadow:4px 4px 0 0 var(--rw-yellow)}
  .rw-card:hover .rw-card__buy{box-shadow:4px 4px 0 0 var(--rw-pink)}
}
.rw-card__details{margin:18px 6px 0;padding-top:14px;border-top:1px solid rgba(0,0,0,.14);
  display:inline-flex;align-items:center;gap:7px;font-family:var(--ff);font-weight:800;text-transform:uppercase;
  font-size:12.5px;letter-spacing:.02em;color:var(--rw-pink)}
.rw-card__details svg{width:10px;height:12px;color:var(--rw-green)}

/* ---------- SPONSOR ---------- */
.rw-sponsor{padding:56px 0 88px;text-align:center}
.rw-sponsor__title{font-family:var(--ff);font-weight:900;text-transform:uppercase;line-height:1}
.rw-sponsor__title .rw-boxed{font-size:clamp(22px,3.2vw,34px);box-shadow:6px 6px 0 0 var(--rw-green)}
.rw-sponsor__lead{margin:22px auto 0;font-family:var(--ff);font-weight:800;color:var(--rw-dark);
  font-size:clamp(15px,1.35vw,19px)}
.rw-sponsor__sub{margin:12px auto 0;max-width:760px;font-family:var(--ff);font-weight:500;
  color:var(--rw-body);font-size:clamp(13px,1vw,15px);line-height:1.6}
.rw-sponsor__logos{margin:40px auto 0;display:flex;justify-content:center;align-items:center;flex-wrap:wrap;gap:30px}
.rw-sponsor__logo{width:230px;height:110px;display:flex;align-items:center;justify-content:center;background:#fff;
  border:1px solid #ededed;border-radius:8px;box-shadow:0 10px 26px rgba(0,0,0,.06);padding:22px 30px}
.rw-sponsor__logo img{max-width:100%;max-height:50px;width:auto;height:auto;object-fit:contain}
.rw-sponsor__past{margin:26px auto 0;font-family:var(--ff);font-weight:800;text-transform:uppercase;
  letter-spacing:.06em;color:var(--rw-dark);font-size:14px}
.rw-sponsor__cta{margin-top:26px;font-weight:900;text-transform:uppercase;letter-spacing:.04em;
  padding:15px 40px;box-shadow:5px 6px 0 0 var(--rw-yellow)}

/* ---------- TICKER ---------- */
.rw-ticker{background:#EFFFFA;overflow:hidden;padding:16px 0}
/* margins, not `gap` — a flex gap isn't repeated after the last child, so the -50%
   loop lands half a gap short and the strip jumps every cycle */
.rw-ticker__track{display:flex;align-items:center;white-space:nowrap;width:max-content;
  animation:rw-ticker 34s linear infinite;will-change:transform}
.rw-ticker__track > *{margin-right:26px}
.rw-ticker__item{font-family:var(--ff);font-weight:600;font-size:14px;letter-spacing:.02em;color:var(--rw-dark)}
.rw-ticker__dot{width:10px;height:10px;background:var(--rw-green);transform:rotate(45deg);flex:0 0 auto}
@keyframes rw-ticker{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ---------- RESPONSIVE ---------- */
@media (max-width:1024px){ .rw-grid{grid-template-columns:repeat(2,1fr)} }
@media (max-width:767px){
  .rw-hero{margin-top:-70px;padding:120px 0 56px}
  .rw-filter{gap:12px}
  .rw-filter__search{flex:1 1 100%;max-width:none}
  .rw-sort{flex:1 1 100%;max-width:none;width:100%}
  .rw-filter__input,.rw-sort__toggle{height:46px;font-size:15px}
  .rw-sort__opt{font-size:15px}
  .rw-grid{grid-template-columns:1fr;gap:26px}
  .rw-sponsor__logos{flex-wrap:nowrap;justify-content:flex-start;overflow-x:auto;gap:16px;
    scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none;padding:4px 4px 12px}
  .rw-sponsor__logos::-webkit-scrollbar{display:none}
  .rw-sponsor__logo{flex:0 0 78%;scroll-snap-align:center}
}
/* NOTE: this file used to end with
     @media (prefers-reduced-motion:reduce){.rw-ticker__track{animation:none}}
   which killed the ticker outright on any machine with "reduce" set. It loaded AFTER
   style.css, so it also beat the exemption there. style.css now re-asserts every
   ticker track inside its own reduced-motion block — don't re-add this. */