/* ============================================================
   Pakistan & Counting — Unlocking Growth (inner page)
   Shared header/footer/tokens in style.css; boxed headline,
   rainbow, ticker from industry-reports.css.
   Figma colours: pink #EF2167 · orange #FF6B22 · green #26B685
   · yellow #FFCB00 · dark #3A3A3A · body #4E4E4E
   ============================================================ */

:root{ --ug-green:#26B685; --ug-orange:#FF6B22; --ug-yellow:#FFCB00; --ug-pink:#EF2167;
  --ug-dark:#3A3A3A; --ug-body:#4E4E4E; }

/* boxed hero/section title with a GREEN offset shadow (bottom-right, Figma) */
.ug-boxed--green{box-shadow:6px 6px 0 0 var(--ug-green)}

/* faint grid shared by the content sections */
.ug-decks,.ug-webinars,.ug-sponsor{position:relative;overflow:hidden;background:#fff}
.ug-decks::before,.ug-webinars::before,.ug-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)}
.ug-decks > .container,.ug-webinars > .container,.ug-sponsor > .container{position:relative;z-index:1}

/* ============================================================
   HERO  (UNLOCKING GROWTH — title + subtitle only)
   ============================================================ */
.ug-hero{position:relative;margin-top:-84px;padding:170px 0 92px;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}
.ug-hero__inner{position:relative;z-index:1;max-width:1200px;margin:0 auto;padding:0 clamp(24px,2.4vw,60px)}
.ug-hero__title{font-family:var(--ff);font-weight:900;text-transform:uppercase;line-height:1;color:var(--ug-dark)}
.ug-hero__title .ir-boxed{font-size:clamp(22px,5.2vw,60px);color:var(--ug-dark);border-color:var(--ug-dark);white-space:nowrap}
.ug-hero__sub{margin:30px auto 0;max-width:600px;font-family:var(--ff);font-weight:600;
  color:var(--ug-body);font-size:clamp(15px,1.5vw,22px);line-height:1.4}

/* ============================================================
   EPISODES BODY — green watermark panel (bleeds left) + rainbow
   at the top of the content column, then About the Series,
   featured episode, Episodes-by-Season and the episode grid.
   ============================================================ */
.ug-body{position:relative;overflow:hidden;background:#fff}
.ug-body::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)}
.ug-body__inner{position:relative;z-index:1;max-width:var(--wrap);margin:0 auto;padding:0 32px;
  display:grid;grid-template-columns:23% 1fr;align-items:start;
  grid-template-areas:"panel rainbow" "panel top" "grid grid" "more more"}
/* green "PAKISTAN & COUNTING" panel as a BACKGROUND IMAGE (no <img> tag); the
   solid green block bleeds off the left screen edge via ::before */
.ug-panel{grid-area:panel;position:relative;align-self:start;overflow:visible;
  aspect-ratio:400 / 1024;}
.ug-panel::before{content:"";position:absolute;top:0;right:0;width:100vw;
  height:calc(100% * 784 / 974);background:var(--ug-green);z-index:0}
.ug-rainbow{grid-area:rainbow;height:10px;align-self:start;
  margin-right:calc(-1 * (max(0px, (100vw - var(--wrap)) / 2) + 32px));
  background:linear-gradient(90deg,var(--ug-yellow) 0 33.333%,var(--ug-pink) 33.333% 66.666%,var(--ug-orange) 66.666% 100%)}
/* top block (About + featured + Episodes-by-Season) sits right of the green panel */
.ug-top{grid-area:top;position:relative;z-index:1;padding:52px 0 6px;padding-left:56px}
/* episode grid + Load More span the FULL container width (both columns) */
.ug-grid{grid-area:grid;position:relative;z-index:1}
.ug-more{grid-area:more}

/* About the Series */
.ug-ath{font-family:var(--ff);font-weight:900;text-transform:uppercase;color:var(--ug-dark);
  font-size:clamp(20px,2.4vw,30px);line-height:1}
.ug-wedge{display:none}
.ug-ath__text{margin:16px 0 0;max-width:760px;font-family:var(--ff);font-weight:500;
  color:var(--ug-body);font-size:15px;line-height:1.65}

/* featured episode + Episodes-by-Season row */
.ug-feat-row{margin-top:20px;display:grid;grid-template-columns:1fr 1fr;gap:30px;align-items:center;margin-left: -137px;}
.ug-feature{position:relative;display:block;text-decoration:none;padding-bottom:54px}
.ug-feature__img{position:relative;z-index:1;display:block;width:100%;height:auto}
.ug-feature__watch{position:absolute;z-index:2;left:20px;bottom:75px;display:flex;align-items:center;gap:10px;
  font-family:var(--ff);font-weight:900;font-size:clamp(14px,1.4vw,19px);letter-spacing:.02em;
  text-transform:uppercase;color:var(--ug-dark)}
.ug-eps__head{align-self:center}
.ug-eps__title{font-family:var(--ff);font-weight:900;text-transform:uppercase;color:var(--ug-dark);
  font-size:clamp(24px,3vw,40px);line-height:1;display:inline-block}
.ug-eps__title .ug-wedge{width:min(240px,80%);margin-top:6px}
.ug-season{position:relative;display:inline-flex;align-items:center;margin-top:22px}
.ug-season__select{appearance:none;-webkit-appearance:none;font-family:var(--ff);font-weight:800;color:var(--ug-dark);
  background:#fff;border:1.5px solid var(--ug-green);border-radius:4px;padding:14px 54px 14px 20px;min-width:230px;
  font-size:15px;text-transform:uppercase;cursor:pointer;box-shadow:5px 6px 0 0 var(--ug-green)}
.ug-season__chev{position:absolute;right:16px;color:var(--ug-green);pointer-events:none}

/* play triangle */
.ug-play{width:0;height:0;flex:0 0 auto;display:inline-block;border-style:solid;border-width:7px 0 7px 12px;
  border-color:transparent transparent transparent currentColor}

/* episode cards — mint fill + green offset shadow */
.ug-grid{margin:auto;display:grid;grid-template-columns:repeat(3,1fr);gap:28px;max-width:1024px;}
/* capped at 1024px at every screen size / zoom level (client request) — no wide-screen stretch */
.ug-ep{background:#EAF9F3;border:1px solid rgba(38,182,133,.5);padding:11px 11px 16px;
  box-shadow:8px 10px 0 0 rgba(38,182,133,.4);display:flex;flex-direction:column}
.ug-ep__thumb{display:block;line-height:0;overflow:hidden;aspect-ratio:16/9;background:#d7efe6}
.ug-ep__thumb img{display:block;width:100%;height:100%;object-fit:cover}
.ug-ep__title{margin:14px 4px 0;font-family:var(--ff);font-weight:700;color:#000;font-size:15px;line-height:1.3;flex:1 0 auto}
.ug-ep__watch{display:inline-flex;align-items:center;gap:9px;margin:14px 4px 0;
  font-family:var(--ff);font-weight:900;font-size:14px;letter-spacing:.02em;text-transform:uppercase;color:var(--ug-green)}
.ug-ep__spon{display:flex;align-items:center;gap:12px;margin:14px 4px 0;padding-top:13px;border-top:1px solid rgba(38,182,133,.25)}
.ug-ep__spon img{height:30px;width:auto;flex:0 0 auto}
.ug-ep__spon span{font-family:var(--ff);font-weight:600;font-size:12px;color:#3a3a3a;line-height:1.25}
/* Episode box hover — lift + deeper green offset shadow + subtle thumbnail zoom,
   matching the deck/webinar card hover language (these boxes had no hover). */
.ug-ep{transition:transform .16s ease,box-shadow .16s ease,border-color .16s ease}
.ug-ep__thumb img{transition:transform .4s ease}
.ug-ep:hover{transform:translateY(-4px);border-color:var(--ug-green);box-shadow:11px 14px 0 0 var(--ug-green)}
.ug-ep:hover .ug-ep__thumb img{transform:scale(1.06)}
.ug-ep:hover .ug-ep__title a{color:var(--ug-green)}

/* ============================================================
   shared centred section title + subtitle + "View all" button
   ============================================================ */
.ug-sec-title{position:relative;z-index:1;text-align:center;font-family:var(--ff);font-weight:900;text-transform:uppercase;line-height:1}
.ug-sec-title .ir-boxed{font-size:clamp(22px,3.2vw,38px);color:var(--ug-dark)}
.ug-sec-sub{position:relative;z-index:1;margin:22px auto 0;max-width:760px;text-align:center;font-family:var(--ff);
  font-weight:500;color:var(--ug-body);font-size:clamp(13px,1vw,15px);line-height:1.6}
.ug-more{position:relative;z-index:1;display:flex;justify-content:center;margin-top:50px; margin-bottom:20px}
.ug-more__btn{font-weight:900;text-transform:uppercase;letter-spacing:.03em;padding:15px 44px;color:#fff}
.ug-more__btn--yellow{background:var(--ug-yellow);color:var(--ug-dark);box-shadow:5px 6px 0 0 #1d1d1d}
.ug-more__btn--green{background:var(--ug-green);box-shadow:5px 6px 0 0 var(--ug-yellow)}
.ug-more__btn--orange{background:var(--ug-orange);box-shadow:5px 6px 0 0 var(--ug-yellow)}

/* ============================================================
   PURCHASE CARD (shared by Industry Decks + Webinars)
   price badge overlaps the thumbnail; Add-to-cart + Buy-now +
   View details. Colour set via modifier classes.
   ============================================================ */
.ug-cardgrid{position:relative;z-index:1;margin:46px auto 0;max-width:1024px;display:grid;grid-template-columns:repeat(3,1fr);gap:28px}
.ug-card{position:relative;display:flex;flex-direction:column;padding:12px 12px 16px}
.ug-card__media{position:relative;line-height:0}
.ug-card__media img{display:block;width:100%;aspect-ratio:16/9;object-fit:cover}
/* price badge — protrudes to the card's left edge, overlaps the thumbnail bottom,
   carries a yellow slanted wedge under the price */
/* pink ribbon label with a small triangular tab that peaks UP at the top-left */
.ug-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;
  clip-path:polygon(0 20px,8% 0,12% 20px,100% 20px,100% 100%,0 100%)}
.ug-card__price::after{content:none;display:none}
.ug-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}
.ug-card__actions{display:flex;gap:16px;margin:20px 6px 0}
.ug-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}
.ug-card__buy{background:var(--ug-yellow);color:var(--ug-dark)}
.ug-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}
.ug-card__details svg{width:10px;height:12px;color:var(--ug-green)}

/* Industry Decks variant — peach card, pink badge, orange cart, yellow buy */
.ug-card--deck{background:#FDEDE2;box-shadow:9px 11px 0 0 rgba(255,107,34,.42)}
.ug-card--deck .ug-card__price{background:var(--ug-pink)}
.ug-card--deck .ug-card__cart{background:var(--ug-orange);box-shadow:4px 4px 0 0 var(--ug-yellow)}
.ug-card--deck .ug-card__buy{box-shadow:4px 4px 0 0 var(--ug-orange)}
.ug-card--deck .ug-card__details{color:var(--ug-orange)}

/* Webinar variant — pink card, orange badge, pink cart, yellow buy */
.ug-card--web{background:#FCE3EC;box-shadow:9px 11px 0 0 rgba(239,33,103,.4)}
.ug-card--web .ug-card__price{background:var(--ug-orange)}
.ug-card--web .ug-card__cart{background:var(--ug-pink);box-shadow:4px 4px 0 0 var(--ug-yellow)}
.ug-card--web .ug-card__buy{box-shadow:4px 4px 0 0 var(--ug-pink)}
.ug-card--web .ug-card__details{color:var(--ug-pink)}

/* Upcoming (coming-soon) webinar — muted, non-interactive "Coming Soon" pill */
.ug-card--soon{box-shadow:9px 11px 0 0 rgba(58,58,58,.18)}
.ug-card--soon .ug-card__price{background:var(--ug-dark)}
.ug-card__soon{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;
  background:var(--ug-dark);cursor:default}

/* ============================================================
   HOVER — the whole box fills, buttons change with it.
   DECK boxes → ORANGE · PRODUCT (webinar) boxes → PINK.
   The at-rest "cart" button already carries the fill colour, so it must change or it
   would disappear into the card. It takes the COMPLEMENTARY colour — orange card →
   pink button, pink card → orange button. "Buy" keeps its yellow + a white shadow.
   ============================================================ */
.ug-card{transition:background .18s ease,box-shadow .18s ease}
.ug-card__btn{transition:transform .12s ease,box-shadow .12s ease,background .18s ease,color .18s ease}
.ug-card:hover .ug-card__title{color:#fff}
.ug-card:hover .ug-card__details{color:#fff;border-top-color:rgba(255,255,255,.5)}
.ug-card:hover .ug-card__details svg{color:#fff}
.ug-card:hover .ug-card__buy{background:var(--ug-yellow);color:var(--ug-dark);box-shadow:4px 4px 0 0 #fff}

/* DECK → orange card, PINK cart button */
.ug-card--deck:hover{background:var(--ug-orange);box-shadow:9px 11px 0 0 var(--ug-dark)}
.ug-card--deck:hover .ug-card__cart{background:var(--ug-pink);color:#fff;box-shadow:4px 4px 0 0 var(--ug-dark)}
/* PRODUCT → pink card, ORANGE cart button */
.ug-card--web:hover{background:var(--ug-pink);box-shadow:9px 11px 0 0 var(--ug-dark)}
.ug-card--web:hover .ug-card__cart{background:var(--ug-orange);color:#fff;box-shadow:4px 4px 0 0 var(--ug-dark)}

/* touch devices have no hover — don't strand a tapped card in the filled state */
@media (hover:none){
  .ug-card--deck:hover{background:#FDEDE2;box-shadow:9px 11px 0 0 rgba(255,107,34,.42)}
  .ug-card--web:hover{background:#FCE3EC;box-shadow:9px 11px 0 0 rgba(239,33,103,.4)}
  .ug-card:hover .ug-card__title{color:#161616}
  .ug-card:hover .ug-card__details{border-top-color:rgba(0,0,0,.14)}
  .ug-card--deck:hover .ug-card__details{color:var(--ug-orange)}
  .ug-card--web:hover .ug-card__details{color:var(--ug-pink)}
  .ug-card--deck:hover .ug-card__cart{background:var(--ug-orange);color:#fff;box-shadow:4px 4px 0 0 var(--ug-yellow)}
  .ug-card--web:hover .ug-card__cart{background:var(--ug-pink);color:#fff;box-shadow:4px 4px 0 0 var(--ug-yellow)}
  .ug-card--deck:hover .ug-card__buy{box-shadow:4px 4px 0 0 var(--ug-orange)}
  .ug-card--web:hover .ug-card__buy{box-shadow:4px 4px 0 0 var(--ug-pink)}
}

/* ============================================================
   INDUSTRY DECKS  /  WEBINARS  /  SPONSOR sections
   ============================================================ */
.ug-decks{padding:60px 0 66px;max-width:1024px;margin:auto;}
.ug-webinars{padding:56px 0 70px}
/* content panels — Upcoming / Recorded switch (same card design) */
.ug-wpanel{display:none}
.ug-wpanel.is-active{display:block;margin: auto;max-width: 1024px;}
.ug-wempty{position:relative;z-index:1;text-align:center;max-width:620px;margin:46px auto 0;padding:48px 24px;
  background:#FCE3EC;border:1px dashed rgba(239,33,103,.5)}
.ug-wempty h3{font-family:var(--ff);font-weight:900;text-transform:uppercase;color:var(--ug-dark);font-size:clamp(18px,2vw,24px)}
.ug-wempty p{margin:12px auto 22px;max-width:460px;font-family:var(--ff);font-weight:500;color:var(--ug-body);font-size:15px;line-height:1.6}

.ug-webinars .wtabs{position:relative;z-index:1;justify-content:center;margin-top:24px}
.ug-webinars .wtab{box-shadow:4px 5px 0 0 var(--ug-green)}
.ug-webinars .wtab.is-active{background:var(--ug-green);color:#fff;box-shadow:4px 5px 0 0 var(--ug-yellow)}

.ug-sponsor{padding:56px 0 88px;text-align:center}
.ug-sponsor__lead{position:relative;z-index:1;margin:20px auto 0;font-family:var(--ff);font-weight:800;
  color:var(--ug-dark);font-size:clamp(15px,1.35vw,19px)}
.ug-sponsor .ug-sec-sub{margin-top:12px}
.ug-sponsor__logos{position:relative;z-index:1;margin:40px auto 0;display:flex;justify-content:center;align-items:center;
  flex-wrap:wrap;gap:30px}
/* logos swap with the season dropdown — only the active season's set shows */
.ug-sponsor__logos--season{display:none}
.ug-sponsor__logos--season.is-active{display:flex}
.ug-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}
.ug-sponsor__logo img{max-width:100%;max-height:50px;width:auto;height:auto;object-fit:contain}
.ug-sponsor__past{position:relative;z-index:1;margin:26px auto 0;font-family:var(--ff);font-weight:800;
  text-transform:uppercase;letter-spacing:.06em;color:var(--ug-dark);font-size:14px}
.ug-sponsor__cta{position:relative;z-index:1;margin-top:26px;font-weight:900;text-transform:uppercase;
  letter-spacing:.04em;padding:15px 40px;box-shadow:5px 6px 0 0 var(--ug-yellow)}

/* ============================================================
   EPISODES BY SEASON — one season visible at a time, laid out in the page's
   1024px episode grid. Cards use the original .ug-ep box design above.
   The first 3 boxes show; "Load More" reveals the rest (.is-hidden → shown).
   ============================================================ */
.ug-grid--seasons{display:block;max-width:1024px;margin:14px auto 0}
.ug-epseason{display:none}
.ug-epseason.is-active{display:grid;grid-template-columns:repeat(3,1fr);gap:28px}
/* grouped season (e.g. Season 1: Interviews then Explainers) — each group
   carries its own grid + heading, so the panel itself is a plain block */
.ug-epseason--grouped.is-active{display:block}
.ug-epgroup+.ug-epgroup{margin-top:40px}
.ug-epgroup__title{font-family:var(--ff);font-weight:900;text-transform:uppercase;color:var(--ug-dark);
  font-size:clamp(19px,2vw,25px);letter-spacing:.02em;margin:0 0 20px}
.ug-epgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:28px}
/* each group carries its own "Load More" (like the flat seasons) */
.ug-more--group{grid-area:auto;margin:26px 0 0}
.ug-ep.is-hidden{display:none}
/* Watch Now is a <button> (opens the popup player) — strip the native button chrome */
.ug-ep__watch{background:none;border:0;padding:0;cursor:pointer;font-family:inherit}
.ug-ep__title a{color:inherit;text-decoration:none}

/* ============================================================
   RESPONSIVE
   ============================================================ */
/* tablet + mobile: episode / deck / webinar card rows become horizontal sliders
   so the page doesn't get extremely long when the cards stack */
@media (max-width:1024px){
  .ug-grid,.ug-cardgrid{display:flex;grid-template-columns:none;
    overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;
    scrollbar-width:none;gap:22px;padding:4px 4px 24px;margin: 46px 0 0;}
  .ug-grid::-webkit-scrollbar,.ug-cardgrid::-webkit-scrollbar{display:none}
  .ug-grid>*,.ug-cardgrid>*{flex:0 0 46%;min-width:0;scroll-snap-align:start}
  /* seasons: keep the wrapper a block; the ACTIVE panel becomes the slider.
     For grouped seasons the panel stays a block and each .ug-epgrid slides. */
  .ug-grid--seasons{display:block;overflow:visible;padding:0;margin:14px auto 0}
  .ug-epseason.is-active,.ug-epgrid{display:flex;grid-template-columns:none;overflow-x:auto;
    scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none;
    gap:22px;padding:4px 4px 24px}
  .ug-epseason--grouped.is-active{display:block;overflow:visible;padding:0}
  .ug-epseason.is-active::-webkit-scrollbar,.ug-epgrid::-webkit-scrollbar{display:none}
  .ug-epseason.is-active>*,.ug-epgrid>*{flex:0 0 46%;min-width:0;scroll-snap-align:start}
  .ug-epgroup+.ug-epgroup{margin-top:26px}
}
@media (max-width:900px){
  .ug-body__inner{grid-template-columns:1fr;
    grid-template-areas:"rainbow" "panel" "top" "grid" "more"}
  .ug-panel{align-self:stretch;aspect-ratio:auto;background:var(--ug-green);min-height:120px}
  .ug-panel::before{display:none}
  .ug-top{padding:40px 32px 6px}
  .ug-feature{margin-left:0}
  .ug-feat-row{grid-template-columns:1fr;gap:26px;    margin-left: 0px;}
}
@media (max-width:767px){
  .ug-hero{margin-top:-70px;padding:120px 0 56px}
  .ug-top{padding:0px}
  /* one card + a peek of the next */
  .ug-grid>*,.ug-cardgrid>*{flex:0 0 80%}
  .ug-epseason.is-active>*,.ug-epgrid>*{flex:0 0 80%}
  .ug-sponsor__logos{flex-wrap:nowrap;justify-content:flex-start;overflow-x:auto;scroll-snap-type:x mandatory;
    gap:16px;padding:4px 20px 12px;-webkit-overflow-scrolling:touch;scrollbar-width:none}
  .ug-sponsor__logos::-webkit-scrollbar{display:none}
  .ug-sponsor__logo{flex:0 0 78%;max-width:none;scroll-snap-align:center;height:104px}
.ug-body__inner{margin: 0 -32px;padding:0 32px;}
    .ug-top {padding: 30px 20px 0px;}
}