/* ============================================================
   Pakistan & Counting — Industry Reports (inner page)
   Page-specific styles ONLY. Global header/footer + tokens
   live in style.css. Images: assets/images/industry-reports/
   Type: Mona Sans (headings) + Inter (body/sub/ticker)
   ============================================================ */

/* ---------- Boxed headline device (12px offset, per Figma) ---------- */
.ir-boxed{display:inline-block;position:relative;border:3px solid var(--dark);
  background:#fff;padding:.02em .3em;line-height:1.05}
.ir-boxed--orange{box-shadow:6px 6px 0 0 var(--orange)}
.ir-boxed--green{box-shadow:6px 6px 0 0 #23b785}

/* ---------- Rainbow bar (4×25% under hero) ---------- */
.ir-rainbow{width:100%;height:10px;background:linear-gradient(90deg,#26b685 0 25%,#ffcb00 25% 50%,#ff6b22 50% 75%,#ef2167 75% 100%)}

/* ============================================================
   HERO / MAIN BANNER
   ============================================================ */
.ir-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}
.ir-hero__inner{position:relative;z-index:1;max-width:1160px;margin:0 auto;padding:0 32px}
.ir-hero__kicker{display:inline-block;font-family:var(--ff);font-weight:700;
  font-size:clamp(16px,2.1vw,28px);letter-spacing:.18em;text-transform:uppercase;color:#000;margin-bottom:14px}
.ir-hero__title{font-family:var(--ff);font-weight:900;text-transform:uppercase;line-height:1;color:var(--dark)}
.ir-hero__title .ir-boxed{font-size:clamp(26px,6vw,60px);color:var(--dark);white-space:nowrap}
.ir-hero__sub{margin-top:40px;font-family:var(--ff);font-weight:700;text-transform:uppercase;
  color:#1e1e1e;font-size:clamp(18px,2.6vw,25px);line-height:1.3}
.ir-hero__body{margin:16px auto 0;max-width:900px;font-family:var(--ff);font-weight:500;
  color:#4e4e4e;font-size:clamp(14px,1.7vw,18px);line-height:1.5}

/* ============================================================
   CATEGORY BANDS  (white section + colored side panel)
   ============================================================ */
.ir-band{position:relative;background:#fff;overflow:hidden;padding:96px 0}
.ir-band::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)}
/* coloured background glow removed (client request) — plain white + grid like the hero */
.ir-band::after{content:none;display:none}
.ir-band__inner{position:relative;z-index:2;max-width:var(--wrap);margin:0 auto;padding:0 32px;
  display:grid;grid-template-columns:1fr 1fr;gap:72px;align-items:center}
/* Colour panel — anchored to the CARD (not the viewport), so the card straddles it
   identically at every zoom/width. Inner edge sits ~29.5% across the card (Figma):
   the card's remaining ~70% and the centred "Powered By" logo fall on white.
   The panel bleeds off-screen on its outer side and is clipped exactly to the screen
   edge by .ir-band{overflow:hidden} → never separates from the card, never leaves a
   side gap, no matter how large the screen. (Desktop/large only; ≤960 uses the span.) */
.ir-media::before{content:"";position:absolute;top:-9999px;bottom:-9999px;z-index:-1;pointer-events:none}
.ir-band--power .ir-media::before{left:-100vw;right:70.5%;background:#26b685}
.ir-band--agri  .ir-media::before{left:-100vw;right:70.5%;background:#ff6b22}
.ir-band--mobil .ir-media::before{right:-100vw;left:70.5%;background:#ffcb00}
.ir-band--pay   .ir-media::before{right:-100vw;left:70.5%;background:#ef2167}
.ir-band__panel{display:none}   /* replaced by .ir-media::before on desktop; restored ≤960 */
/* reversed layout: card + panel on the right, copy on the left (right-aligned toward centre) */
.ir-band--rev .ir-media{order:2}
.ir-band--rev .ir-copy{order:1;text-align:right}
.ir-band--rev .ir-copy__rule{margin-left:auto}
.ir-band--rev .ir-copy__tag{margin-left:auto;margin-right:0}
/* Only a BARE cta (direct child of .ir-copy) right-aligns via auto-margin. Inside an
   .ir-ctas row that margin lands on the first button and shoves it right, inflating the
   gap to 49px — the row uses justify-content instead. */
.ir-band--rev .ir-copy > .ir-cta{margin-left:auto}

/* ---- report card ---- */
.ir-media{position:relative;z-index:1}
.ir-card{position:relative;margin:0;line-height:0;box-shadow:0 22px 44px rgba(0,0,0,.18)}
.ir-card img{width:100%;display:block}
/* colour fade behind the Watch Now / Releases label — transparent to solid brand colour, full bleed (Figma) */
.ir-card__fade{position:absolute;inset:0;z-index:1;pointer-events:none}
.ir-band--power .ir-card__fade,.ir-band--agri .ir-card__fade{background:linear-gradient(90deg,rgba(255,255,255,0) 0%,var(--band-c) 100%)}
.ir-band--mobil .ir-card__fade,.ir-band--pay .ir-card__fade{background:linear-gradient(270deg,rgba(255,255,255,0) 0%,var(--band-c) 100%)}
/* "Releasing soon" cards (Agriculture, Payments): dark scrim over the top ~79% of the card,
   label centred within the scrim; the bottom strip stays on the colour fade (Figma) */
.ir-card__scrim{position:absolute;top:0;left:0;right:0;height:79%;z-index:2;
  background:rgba(0,0,0,.85);display:flex;align-items:center;justify-content:center;pointer-events:none}
.ir-card__soon{font-family:var(--ff);font-weight:900;font-size:clamp(16px,2vw,27px);letter-spacing:.02em;
  text-transform:uppercase;color:#fff;text-align:center;padding:0 20px}
.ir-card__watch{position:absolute;right:3%;bottom:10%;display:inline-flex;align-items:center;gap:9px;
  font-family:var(--ff);font-weight:900;font-size:clamp(14px,1.4vw,20px);text-transform:uppercase;color:#fff;z-index:3}
.ir-band--rev .ir-card__watch{right:auto;left:3%}
/* right-pointing play triangle (pure CSS — no mask dependency) */
.ir-play{width:0;height:0;flex:0 0 auto;display:inline-block;
  border-style:solid;border-width:6px 0 6px 11px;
  border-color:transparent transparent transparent #fff}

/* "Watch Now" video link below the report card (Agrinaama band) */
.ir-watch-link{margin-top:18px;display:flex;align-items:center;justify-content:center;gap:10px;
  font-family:var(--ff);font-weight:900;font-size:clamp(14px,1.4vw,18px);text-transform:uppercase;
  letter-spacing:.02em;color:#ff6b22;text-decoration:none;transition:color .18s ease}
.ir-watch-link .ir-play{border-color:transparent transparent transparent #ff6b22}
.ir-watch-link:hover{color:#e05416}

/* "Powered By: <logo>" is centred directly under the report card (Figma: the logo
   group's centre sits on the card's centre in every band — measured to within ~5px).
   The media column is exactly the card's width, so centring here == centred under card.
   Same rule for both class names and both band directions — nothing to flip. */
.ir-powered,.ir-powered-sec{margin-top:24px;display:flex;align-items:center;gap:12px;justify-content:center}
.ir-powered span,.ir-powered-sec span{font-family:var(--ff);font-weight:600;font-size:15px;letter-spacing:.06em;
  text-transform:uppercase;color:#8c8c8c}
.ir-powered img,.ir-powered-sec img{height:26px;width:auto;display:block}

/* ---- copy column ---- */
.ir-copy{position:relative;z-index:1}
.ir-copy__cat{font-family:var(--ff);font-weight:900;text-transform:uppercase;color:var(--dark);
  line-height:1;font-size:clamp(30px,4vw,50px);display:inline-block}
/* heading underline removed (client request) */
.ir-copy__rule{display:none}
.ir-band--power .ir-copy__rule{background:#26b685}
.ir-band--mobil .ir-copy__rule{background:#ffcb00}
.ir-band--agri  .ir-copy__rule{background:#ff6b22}
.ir-band--pay   .ir-copy__rule{background:#ef2167}
.ir-copy__tag{margin-top:26px;font-family:var(--ff);font-weight:500;text-transform:none;
  color:#000;max-width:480px;font-size:clamp(20px,2.2vw,30px);line-height:1.4}
/* Mobility / Agriculture / Payments carry TWO CTAs (Deck Download + Explore More);
   Power carries only Explore More. Buttons hug their own label — Figma has them at
   different widths — and the row aligns with the band's copy. */
.ir-ctas{display:flex;align-items:center;gap:26px;flex-wrap:wrap;margin-top:34px}
.ir-band--rev .ir-ctas{justify-content:flex-end}
/* padding trimmed 17px 40px → 15px 32px: rendered 262.8×67 against Figma's 246.5×62.6
   (measured off node 2259:26499) */
.ir-cta{margin-top:34px;font-family:var(--ff);font-weight:900;font-size:clamp(16px,1.7vw,22px);
  text-transform:uppercase;color:#fff;padding:15px 32px;border-radius:0;box-shadow:5px 7px 0 0 var(--dark)}
.ir-ctas .ir-cta{margin-top:0}          /* the row owns the spacing now */
.ir-cta.btn--yellow{color:var(--ink)}
.ir-cta:hover{box-shadow:5px 7px 0 0 var(--dark);transform:translateY(-1px)}

/* ============================================================
   SPONSOR AN INDUSTRY REPORT
   ============================================================ */
.ir-sponsor{position:relative;overflow:hidden;padding:100px 0 108px;text-align:center;background:#fff}
.ir-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)}
/* green background glow removed (client request) */
.ir-sponsor::after{content:none;display:none}
.ir-sponsor .container{position:relative;z-index:1}
.ir-sponsor__title{font-family:var(--ff);font-weight:900;text-transform:uppercase;color:var(--dark);
  line-height:1.04;font-size:clamp(30px,4vw,50px);display:flex;flex-direction:column;gap:.32em;align-items:center}
.ir-sponsor__sub{margin:34px auto 0;max-width:770px;font-family:var(--ff);font-weight:500;
  text-transform:none;color:#787878;font-size:clamp(17px,1.9vw,18px);line-height:1.4}
/* Partner logos — single-line auto-scroll marquee. script.js wraps the logos in a
   .ir-sponsor__track and clones the set once for a seamless loop; with JS off it
   degrades to a centred, swipe-scrollable single row. */
.ir-sponsor__logos{margin:56px auto 0;max-width:940px;display:flex;gap:40px;
  justify-content:center;overflow-x:auto;scrollbar-width:none}
.ir-sponsor__logos::-webkit-scrollbar{display:none}
.ir-sponsor__logos.is-marquee{overflow:hidden;justify-content:flex-start;gap:0;padding:4px 0 16px;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 6%,#000 94%,transparent 100%);
          mask-image:linear-gradient(90deg,transparent 0,#000 6%,#000 94%,transparent 100%)}
.ir-sponsor__track{display:flex;width:max-content;animation:ir-spon-marquee 38s linear infinite;will-change:transform}
.ir-sponsor__track .ir-sponsor__logo{margin-right:40px}
.ir-sponsor__logos.is-marquee:hover .ir-sponsor__track{animation-play-state:paused}
@keyframes ir-spon-marquee{from{transform:translate3d(0,0,0)}to{transform:translate3d(-50%,0,0)}}
.ir-sponsor__logo{flex:0 0 190px;min-width:0;display:grid;place-items:center;aspect-ratio:276/152;background:#fff;
  border:1px solid #c9c8c8;box-shadow:10px 10px 0 0 #ebebeb}
.ir-sponsor__logo img{display:block;object-fit:contain}
/* each logo sized to its own true proportions relative to the 276×152 card (Figma).
   Selectors repeat every 6 (6n+N) so the JS-cloned copies match — there are 6 partners. */
.ir-sponsor__logo:nth-child(6n+1) img{width:76.4%;height:21.1%}   /* MCB Funds */
.ir-sponsor__logo:nth-child(6n+2) img{width:40.2%;height:23.7%}   /* Visa */
.ir-sponsor__logo:nth-child(6n+3) img{width:41.3%;height:25%}     /* Yango */
.ir-sponsor__logo:nth-child(6n+4) img{width:43.5%;height:52.6%}   /* Engro */
.ir-sponsor__logo:nth-child(6n+5) img{width:62.7%;height:37.5%}   /* Syngenta */
.ir-sponsor__logo:nth-child(6n) img{width:42.4%;height:32.2%}     /* Reon Energy */
/* vertical divider between the logo grid and the CTA (Figma) */
.ir-sponsor__divider{display:block;width:2px;height:65px;background:var(--line);margin:37px auto 0}
.ir-sponsor__cta{margin-top:21px;font-family:var(--ff);font-weight:900;font-size:clamp(16px,1.6vw,23px);
  text-transform:uppercase;padding:19px 40px;border-radius:0}

/* ============================================================
   TICKER (news marquee)
   ============================================================ */
.ir-ticker{background:#EFFFFA;overflow:hidden;padding:16px 0}
/* The track holds the headline list TWICE and slides exactly -50% for a seamless loop.
   Spacing MUST come from margins, not `gap`: a flex gap is not repeated after the last
   child, so -50% lands half a gap (13px) short and the strip jumps every cycle. */
.ir-ticker__track{display:flex;align-items:center;white-space:nowrap;width:max-content;
  animation:ir-ticker 34s linear infinite;will-change:transform}
.ir-ticker__track > *{margin-right:26px}
.ir-ticker__item{font-family:var(--ff);font-weight:600;font-size:12px;letter-spacing:.02em;
  text-transform:uppercase;color:#3f3f3f}
.ir-ticker__dot{width:5px;height:5px;background:#26b685;transform:rotate(45deg);flex:0 0 auto}
@keyframes ir-ticker{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:960px){
  .ir-band{padding:60px 0}
  .ir-band__inner{grid-template-columns:1fr;gap:30px;text-align:center;justify-items:center}
  .ir-band--rev .ir-media{order:1}
  .ir-band--rev .ir-copy{order:2;text-align:center}
  /* undo the desktop right-alignment when bands stack */
  .ir-band--rev .ir-copy__tag{margin-left:auto;margin-right:auto}
  .ir-band--rev .ir-copy > .ir-cta{margin-left:auto;margin-right:auto}
  /* stacked bands are centred, so centre the button row too */
  .ir-ctas,.ir-band--rev .ir-ctas{justify-content:center;gap:16px}
  /* ≤960: card-anchored pseudo-panel off, faint full-width span panel back on (unchanged) */
  .ir-media::before{display:none}
  .ir-band__panel{display:block;top:0;height:56%;bottom:auto;width:100%;left:0;right:0;opacity:.14}
  .ir-copy__rule,.ir-band--rev .ir-copy__rule{margin-left:auto;margin-right:auto}
  /* all "Powered By" rows centre when the band stacks */
  .ir-powered,.ir-powered-sec,
  .ir-band--rev .ir-powered,.ir-band--rev .ir-powered-sec{justify-content:center}
  /* sponsor-logo marquee: smaller cards on mobile/tablet */
  .ir-sponsor__logos{max-width:none;margin:48px auto 0}
  .ir-sponsor__logo{flex-basis:150px}
  .ir-sponsor__track .ir-sponsor__logo{margin-right:24px}
}
@media (max-width:600px){
  .ir-hero{margin-top:-70px;padding:120px 0 56px}
  .ir-hero__title .ir-boxed{font-size:clamp(20px,8vw,25px)}
  .ir-band{padding:46px 0}
  .ir-sponsor{padding:64px 0 70px}
  .ir-sponsor__logo{flex-basis:132px}
}