/* MYCPE ONE Newsroom - Start - 15102026 */
/* Layout: hero -> sticky year tabs + search -> category chips -> 3-col story grid -> pager.
   Everything is scoped under .nr-page so it never leaks into the site header/footer (Bootstrap 5 + style.css). */
.nr-page{
  --nr-bg:#FFFFFF; --nr-band:#EBEEFD; --nr-subtle:#F9FAFB;
  --nr-ink:#101828; --nr-body:#475467; --nr-muted:#667085;
  --nr-line:#EAECF0; --nr-line-strong:#D0D5DD;
  --nr-brand:#3A58EF; --nr-brand-hover:#314BD0; --nr-brand-press:#283FB1;
  --nr-navy:#182878;
  --nr-glow:rgba(58,88,239,.10);
  --nr-font:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  --nr-top:0px;
  display:block;background:var(--nr-bg);color:var(--nr-ink);font-family:var(--nr-font);font-size:16px;line-height:1.5;-webkit-font-smoothing:antialiased
}
.nr-page *,.nr-page *::before,.nr-page *::after{box-sizing:border-box}
.nr-page a{color:inherit;text-decoration:none}
.nr-page a:hover{color:inherit}
.nr-page p{margin:0}
.nr-page button{font-family:inherit}
.nr-page :focus-visible{outline:2px solid var(--nr-brand);outline-offset:2px;border-radius:4px}
.nr-page .wrap{max-width:1360px;margin-inline:auto;padding-inline:clamp(16px,4vw,40px)}

/* hero */
.nr-page .hero{position:relative;overflow:hidden;padding-block:72px 56px;text-align:center;color:#FFFFFF;background:
  radial-gradient(900px 420px at 85% -10%,rgba(58,88,239,.22),transparent 60%),
  radial-gradient(700px 380px at 5% 110%,rgba(111,140,255,.12),transparent 60%),
  #182878}
.nr-page .hero::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.55;
  background-image:radial-gradient(rgba(255,255,255,.35) 1px,transparent 1.4px);background-size:26px 26px;
  -webkit-mask-image:radial-gradient(ellipse 60% 90% at 50% 0%,#000,transparent 75%);mask-image:radial-gradient(ellipse 60% 90% at 50% 0%,#000,transparent 75%)}
.nr-page .hero::after{content:"";position:absolute;left:50%;top:-340px;width:900px;height:900px;margin-left:-450px;border-radius:50%;pointer-events:none;
  border:1px solid rgba(255,255,255,.14);box-shadow:0 0 0 70px rgba(255,255,255,.025),0 0 0 140px rgba(255,255,255,.02),0 0 0 210px rgba(255,255,255,.015)}
.nr-page .hero .wrap{position:relative;z-index:1}
.nr-page .hero h1{margin:0;font-family:var(--nr-font);font-size:48px;line-height:1.1;font-weight:700;letter-spacing:-.02em;color:#FFFFFF;text-wrap:balance}
.nr-page .hero .nr-sub{margin:16px auto 0;max-width:620px;font-family:var(--nr-font);font-size:20px;line-height:1.5;font-weight:400;letter-spacing:0;color:#FFFFFF;text-wrap:balance}
.nr-page .crumbs{display:flex;justify-content:center;align-items:center;flex-wrap:wrap;gap:10px;margin:0 0 16px;font-size:14px;line-height:1.4;color:#FFFFFF}
.nr-page .crumbs a{color:#FFFFFF;text-decoration:underline;text-underline-offset:3px;transition:opacity .15s}
.nr-page .crumbs a:hover{color:#FFFFFF;opacity:.8}
.nr-page .crumbs span{color:#FFFFFF}
.nr-page .crumbs .sep{opacity:.65;flex:none}

/* sticky year tabs + search (sits right under the site's sticky header; --nr-top is set from JS) */
.nr-page .sticky{position:sticky;top:var(--nr-top);z-index:20;background:rgba(255,255,255,.97);backdrop-filter:blur(10px);border-bottom:1px solid var(--nr-line);box-shadow:0 8px 24px -16px rgba(16,24,40,.25)}
.nr-page .sticky .wrap{display:flex;align-items:center;gap:24px;padding-block:14px;flex-wrap:nowrap}
.nr-page .tabs-scroll{overflow-x:auto;flex:0 1 auto;min-width:0;scrollbar-width:none}
.nr-page .tabs-scroll::-webkit-scrollbar{display:none}
.nr-page .tabs{position:relative;display:flex;gap:4px;padding:4px;background:#EEF1FE;border-radius:12px;min-width:max-content}
.nr-page .ind{position:absolute;top:4px;bottom:4px;left:0;width:0;background:#182878;border-radius:8px;box-shadow:0 2px 6px rgba(24,40,120,.28);transition:transform .32s cubic-bezier(.3,.8,.3,1),width .32s cubic-bezier(.3,.8,.3,1);pointer-events:none}
.nr-page .tab{position:relative;z-index:1;flex:0 0 auto;min-width:0;justify-content:center;border:0;background:transparent;cursor:pointer;display:flex;align-items:center;gap:8px;height:46px;padding:0 20px;border-radius:8px;font-size:16px;line-height:1;font-weight:500;color:#475467;transition:color .2s}
.nr-page .tab:hover{color:#182878}
.nr-page .tab[aria-selected="true"],.nr-page .tab[aria-selected="true"]:hover{color:#FFFFFF}
.nr-page .search{display:flex;align-items:center;gap:12px;background:#FFFFFF;border:1px solid #EAECF0;border-radius:6px;padding:0 16px;height:46px;flex:0 0 320px;margin:0 0 0 auto;cursor:text;transition:border-color .15s,box-shadow .15s}
.nr-page .search:focus-within{border-color:#3A58EF;box-shadow:0 0 0 3px rgba(58,88,239,.12)}
.nr-page .search svg{flex:none;color:#475467}
.nr-page .search input{flex:1;min-width:0;height:100%;border:0;padding:0;background:transparent;outline:none;box-shadow:none;font:500 16px var(--nr-font);color:var(--nr-ink);-webkit-appearance:none;appearance:none}
.nr-page .search input::-webkit-search-cancel-button{-webkit-appearance:none;display:none}
.nr-page .search input::placeholder{color:#475467;opacity:1}
.nr-page .search .x{border:0;background:transparent;color:var(--nr-muted);cursor:pointer;font-size:18px;line-height:1;padding:0}
.nr-page .search .x[hidden]{display:none}

/* category chips */
.nr-page .bar{display:flex;align-items:flex-end;justify-content:space-between;gap:20px 32px;flex-wrap:wrap;padding-block:32px 0}
.nr-page .ctl{display:flex;align-items:center;gap:12px;flex-wrap:wrap;width:100%}
.nr-page .cats{display:flex;gap:8px;flex-wrap:wrap}
.nr-page .cp{border:1px solid var(--nr-line-strong);background:#fff;color:var(--nr-body);border-radius:64px;padding:8px 16px;font:500 14px var(--nr-font);line-height:1.43;cursor:pointer;display:inline-flex;gap:8px;align-items:center;transition:border-color .15s,color .15s,background .15s,transform .15s}
.nr-page .cp small{display:none}
.nr-page .cp:hover{border-color:var(--nr-brand);color:var(--nr-brand)}
.nr-page .cp:active{transform:translateY(1px)}
.nr-page .cp[aria-pressed="true"]{background:#182878;border-color:#182878;color:#fff}

/* story grid + card */
.nr-page .grid2{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;padding-block:24px 8px;grid-auto-rows:1fr}
.nr-page .c2{position:relative;display:flex;flex-direction:column;gap:16px;background:#fff;border:1px solid #EAECF0;border-radius:12px;padding:12px 12px 22px;min-width:0;
  transition:transform .25s cubic-bezier(.4,0,.2,1),border-color .25s,box-shadow .25s,background-color .25s,opacity .6s}
.nr-page .c2:hover,.nr-page .c2:focus-within{background:#EBEEFD;border-color:#5D667B;box-shadow:4px 4px 0 0 #000;transform:translate(-2px,-2px)}
.nr-page .rv{opacity:0;transform:translateY(18px)}
.nr-page .rv.in{opacity:1;transform:none;transition:opacity .6s cubic-bezier(.2,.7,.2,1) calc(var(--i,0)*70ms),transform .6s cubic-bezier(.2,.7,.2,1) calc(var(--i,0)*70ms),border-color .25s,box-shadow .25s,background-color .25s}
.nr-page .rv.in:hover,.nr-page .rv.in:focus-within{transform:translate(-2px,-2px);transition-delay:0s}
.nr-page .im{position:relative;display:block;aspect-ratio:16/10;border-radius:8px;overflow:hidden;background:#0a1646;isolation:isolate}
.nr-page .im img{position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:cover;transition:transform .7s cubic-bezier(.2,.7,.2,1)}
.nr-page .c2:hover .im img{transform:scale(1.06)}
.nr-page .im::after{content:"";position:absolute;inset:0;border-radius:inherit;box-shadow:inset 0 0 0 1px rgba(16,24,40,.08);pointer-events:none}
.nr-page .pill{position:absolute;left:12px;top:12px;z-index:2;background:rgba(255,255,255,.94);color:#182878;font-size:12px;line-height:1.5;font-weight:700;letter-spacing:.02em;padding:5px 11px;border-radius:64px;box-shadow:0 2px 8px rgba(16,24,40,.18);backdrop-filter:blur(4px)}
.nr-page .bd{display:flex;flex-direction:column;gap:12px;padding-inline:8px;flex:1}
.nr-page .mt{display:flex;justify-content:space-between;align-items:center;gap:12px;font-size:14px;color:var(--nr-muted);flex-wrap:wrap}
.nr-page .mt time{display:inline-flex;align-items:center;gap:8px;font-variant-numeric:tabular-nums;transition:color .25s}
.nr-page .c2:hover .mt time,.nr-page .c2:focus-within .mt time{color:#000}
.nr-page .by{display:inline-flex;align-items:center;gap:8px;font-weight:600;color:var(--nr-brand);min-width:0}
.nr-page .by i{width:8px;height:8px;border-radius:50%;background:var(--nr-brand);box-shadow:0 0 0 3px var(--nr-glow);flex:none}
.nr-page .c2 h3{margin:0;font-family:var(--nr-font);font-size:20px;line-height:1.3;font-weight:600;letter-spacing:0;color:var(--nr-ink);text-wrap:balance}
.nr-page .c2 h3 a{color:var(--nr-ink)}
.nr-page .c2 h3 a::after{content:"";position:absolute;inset:-1px;border-radius:inherit}
.nr-page .c2 .more{margin-top:auto;display:inline-flex;align-items:center;gap:6px;font-size:16px;font-weight:600;color:var(--nr-brand);text-decoration:underline;text-underline-offset:3px;width:max-content}
.nr-page .c2 .more svg{transition:transform .2s}
.nr-page .c2:hover .more svg{transform:translate(2px,-2px)}
.nr-page mark{background:var(--nr-glow);color:inherit;padding:0;border-radius:2px;box-shadow:0 0 0 2px var(--nr-glow)}

/* button (empty state) */
.nr-page .nr-btn{align-self:flex-start;display:inline-flex;align-items:center;gap:8px;margin-top:8px;background:var(--nr-brand);color:#fff;border:0;padding:12px 20px;border-radius:4px;font:600 16px var(--nr-font);cursor:pointer;transition:background .15s}
.nr-page .nr-btn:hover{background:var(--nr-brand-hover);color:#fff}

/* pager */
.nr-page #nrOut{scroll-margin-top:calc(var(--nr-top) + 96px)}
.nr-page .pager{display:flex;justify-content:center;align-items:center;flex-wrap:wrap;gap:14px;padding-block:40px 8px}
.nr-page .pg{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-width:54px;height:54px;padding:0 12px;background:#EBEEFD;border:0;border-radius:12px;font:500 16px var(--nr-font);color:#344054;cursor:pointer;transition:background .15s,color .15s,transform .15s}
.nr-page .pg:hover:not(:disabled):not([aria-current]):not(.pg-dots){background:#D9DFFB;color:#182878}
.nr-page .pg:active:not(:disabled){transform:translateY(1px)}
.nr-page .pg[aria-current]{background:#3A58EF;color:#fff;font-weight:700;cursor:default}
.nr-page .pg-nav{padding:0}
.nr-page .pg-nav svg{margin:0}
.nr-page .pg:disabled{opacity:.5;color:#98A2B3;cursor:not-allowed}
.nr-page .pg-dots{background:none;min-width:auto;padding:0 2px;color:#667085;cursor:default;letter-spacing:0}

/* empty state */
.nr-page .empty{display:grid;justify-items:center;gap:12px;text-align:center;padding-block:56px 40px;margin-top:24px;border:1px dashed var(--nr-line-strong);border-radius:12px;background:var(--nr-subtle)}
.nr-page .empty svg{color:var(--nr-brand)}
.nr-page .empty h3{margin:4px 0 0;font-family:var(--nr-font);font-size:24px;font-weight:600;color:var(--nr-ink)}
.nr-page .empty p{max-width:440px;color:var(--nr-body);padding-inline:16px}
.nr-page .empty .nr-btn{justify-self:center;align-self:auto}

.nr-page .pad-b{padding-bottom:88px}

/* responsive */
@media (max-width:1100px){.nr-page .grid2{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:1000px){
  .nr-page .sticky .wrap{flex-wrap:wrap}
  .nr-page .tabs-scroll{flex:1 1 100%}
  .nr-page .search{flex:1 1 100%;margin-left:0}
}
@media (max-width:700px){
  .nr-page .hero{padding-block:48px 40px}
  .nr-page .hero h1{font-size:36px}
  .nr-page .hero .nr-sub{font-size:18px}
  .nr-page .sticky .wrap{gap:12px}
  .nr-page .tab{padding:0 18px}
  .nr-page .grid2{grid-template-columns:minmax(0,1fr)}
  .nr-page .bar{align-items:flex-start}
  .nr-page .pg{min-width:42px;height:42px;padding:0 6px;border-radius:10px}
  .nr-page .pg-nav{min-width:42px}
  .nr-page .pager{gap:8px}
}
@media (prefers-reduced-motion:reduce){
  .nr-page *,.nr-page *::before,.nr-page *::after{animation:none!important;transition:none!important}
  .nr-page .rv{opacity:1;transform:none}
}
/* MYCPE ONE Newsroom - End */
