/* ============================================================
   PMCK — article layout
   Built from Blog_Details.pdf. Shared by posts, news, events,
   CSR and Ask Our Experts.
   ============================================================ */

/* The page turns sage partway down the cover image, so the article sits on a
   tint while the title area stays white. One gradient, no extra markup. */
.pmck-article{
  --pmck-tint-from:62%;
  background:var(--brand-soft);
}
.pmck-article__head{
  padding:34px 0 0;text-align:center;
  background:linear-gradient(#fff 0, #fff var(--pmck-tint-from), transparent var(--pmck-tint-from));
}
@media (max-width:767px){
  .pmck-article{--pmck-tint-from:78%;}
}
.pmck-article__crumb{
  display:flex;gap:9px;align-items:center;flex-wrap:wrap;justify-content:flex-start;
  font-size:15px;color:var(--muted);margin-bottom:26px;
}
.pmck-article__crumb a{text-decoration:none;}
.pmck-article__crumb a:hover{color:var(--brand);}

.pmck-article__date{
  display:inline-block;background:var(--brand-soft);color:var(--brand-ink);
  border-radius:6px;padding:5px 14px;font-size:15px;font-weight:600;margin-bottom:14px;
}
.pmck-article__title{
  font-size:clamp(26px,3.4vw,36px);font-weight:700;line-height:1.22;
  margin:0 auto 18px;max-width:24ch;
}
/* Ask Our Experts: the role sits above the name, quieter than it. */
.pmck-article__byline{margin:-6px 0 16px;line-height:1.4;}
.pmck-article__role{display:block;font-size:16px;color:var(--muted);}
.pmck-article__expert{display:block;font-size:19px;color:var(--brand-ink);font-weight:700;}

.pmck-article__cover{margin-top:26px;border-radius:12px;overflow:hidden;}
.pmck-article__cover img{width:100%;height:auto;display:block;}

/* ---------- share ---------- */

.pmck-share{display:flex;gap:14px;align-items:center;}
.pmck-share--top{justify-content:center;}
.pmck-share__link{
  display:grid;place-items:center;width:34px;height:34px;padding:0;
  border:0;background:none;cursor:pointer;color:var(--brand);border-radius:50%;
  transition:background .16s,color .16s;
}
.pmck-share__link:hover{background:var(--brand-soft);}
.pmck-share__link .pmck-i{width:20px;height:20px;}
.pmck-share__link{position:relative;}
.pmck-share__link.is-copied{background:var(--accent);color:#fff;}

/* Confirmation for the copy button, so a click has a visible result. */
.pmck-share__link::after{
  content:attr(data-pmck-copied);
  position:absolute;bottom:calc(100% + 8px);left:50%;transform:translateX(-50%);
  background:var(--brand-ink);color:#fff;border-radius:6px;
  padding:5px 10px;font-size:13px;font-weight:600;white-space:nowrap;
  opacity:0;pointer-events:none;transition:opacity .16s;
}
.pmck-share__link.is-copied::after{opacity:1;}

/* ---------- body ---------- */

.pmck-article__body{padding:40px 0 60px;}
.pmck-article__cols{display:grid;grid-template-columns:280px 1fr;gap:48px;align-items:start;}
.pmck-article__side{
  position:sticky;top:24px;
  background:var(--brand-dark);border-radius:14px;
  border-top:8px solid var(--accent);
  padding:14px;display:grid;gap:14px;
}

.pmck-toc,
.pmck-sharebox{background:#fff;border-radius:10px;padding:22px 24px;}

.pmck-toc__h{font-size:21px;font-weight:700;margin:0 0 6px;}

/* Numbered, with a rule between entries — the number is part of the design, so
   it comes from the list rather than from anything the editor has to type. */
.pmck-toc__list{margin:0;padding:0;list-style:none;counter-reset:toc;font-size:17px;line-height:1.45;}
.pmck-toc__list li{
  counter-increment:toc;display:flex;gap:12px;align-items:baseline;
  padding:16px 0;border-bottom:1px solid var(--line);
}
.pmck-toc__list li:last-child{border-bottom:0;padding-bottom:0;}
.pmck-toc__list li::before{content:counter(toc) ".";flex:0 0 24px;color:var(--brand-ink);}
.pmck-toc__list a{text-decoration:none;color:var(--brand-ink);}
.pmck-toc__list a:hover,
.pmck-toc__list a.is-current{color:var(--brand);font-weight:600;}
.pmck-toc__list li.is-sub{padding-left:14px;}

.pmck-sharebox .pmck-toc__h{margin-bottom:14px;}
.pmck-sharebox .pmck-share{gap:18px;}
.pmck-sharebox .pmck-share__link{width:30px;height:30px;color:var(--accent);}
.pmck-sharebox .pmck-share__link .pmck-i{width:26px;height:26px;}
.pmck-sharebox .pmck-share__link:hover{background:none;color:var(--brand);}
.pmck-sharebox .pmck-share__link.is-copied{color:var(--brand);}

.pmck-article__main .pmck-prose h2{font-size:26px;margin-top:1.5em;}
.pmck-article__main .pmck-prose h3{font-size:20px;color:var(--accent);margin-top:1.3em;}
.pmck-article__main .pmck-prose ul{list-style:none;padding:0;margin:0 0 1.2em;}
.pmck-article__main .pmck-prose ul li{
  position:relative;padding-left:30px;margin-bottom:10px;
}
.pmck-article__main .pmck-prose ul li::before{
  content:"";position:absolute;left:0;top:.35em;width:18px;height:18px;
  background-color:var(--accent);
  -webkit-mask:var(--pmck-tick) no-repeat center/18px 18px;
  mask:var(--pmck-tick) no-repeat center/18px 18px;
}
:root{
  --pmck-tick:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M12 1.6A10.4 10.4 0 1 0 22.4 12 10.41 10.41 0 0 0 12 1.6Zm5.19 7.79-6.13 6.13a1.4 1.4 0 0 1-1.98 0l-3.27-3.27a1.4 1.4 0 0 1 1.98-1.98l2.28 2.28 5.14-5.14a1.4 1.4 0 0 1 1.98 1.98Z'/%3E%3C/svg%3E");
}

.pmck-disclaimer{
  margin:36px 0 0;padding:18px 0 0;border-top:1px solid var(--line);
  text-align:center;font-size:15px;color:var(--muted);
}
.pmck-disclaimer strong{display:block;color:var(--brand-ink);margin-bottom:6px;}
.pmck-disclaimer p{margin:0;}

.pmck-article__social{
  margin-top:28px;text-align:center;font-size:16px;color:var(--brand-ink);font-weight:600;
}
.pmck-article__social .pmck-social{justify-content:center;margin-top:12px;}
.pmck-article__social .pmck-social__link{color:var(--brand);}

/* ---------- about card ---------- */

.pmck-about{
  margin-top:34px;background:var(--brand-dark);color:#fff;
  border-radius:12px;border-top:8px solid var(--accent);
  padding:26px 26px 28px;
}
.pmck-about__top{display:flex;gap:18px;align-items:flex-start;margin-bottom:18px;}
.pmck-about__mark{width:64px;height:64px;object-fit:contain;flex-shrink:0;}
.pmck-about__h{color:#fff;font-size:clamp(22px,2.4vw,30px);margin:0 0 8px;}
.pmck-about__blurb{margin:0;color:rgba(255,255,255,.9);font-size:16px;line-height:1.6;}

.pmck-about__box{background:#fff;border-radius:10px;padding:16px 20px 18px;}
.pmck-about__box--wide{margin-bottom:12px;}

/* The label owns the rule under it, so a box with one line and a box with
   three still read the same. */
.pmck-about__label{
  display:block;font-size:18px;font-weight:700;color:var(--brand-ink);
  padding-bottom:12px;margin-bottom:14px;border-bottom:1px solid var(--line);
}
.pmck-about__label--red{color:var(--red);text-align:center;}

.pmck-about__nums{
  display:grid;grid-template-columns:repeat(3,1fr);gap:12px 20px;
}
.pmck-about__box a{
  display:inline-flex;align-items:center;gap:10px;
  color:var(--brand-ink);text-decoration:none;font-size:16px;
}
.pmck-about__box a:hover{color:var(--brand);}
.pmck-about__ic{
  display:grid;place-items:center;width:26px;height:26px;flex-shrink:0;
  border-radius:50%;background:var(--accent);color:#fff;
}
.pmck-about__ic .pmck-i{width:14px;height:14px;}
.pmck-about__cols{display:grid;grid-template-columns:1fr 1fr;gap:12px;}

@media (max-width:767px){
  .pmck-about__nums{grid-template-columns:1fr;}
}

/* ---------- continue reading ---------- */

.pmck-more{background:var(--brand-soft);padding:52px 0 60px;}
@media (min-width:1100px){
  /* Three reads comfortably; four is cramped. */
  .pmck-more__rail{grid-auto-columns:minmax(0,calc((100% - 44px) / 3));}
}
.pmck-more__head{
  display:flex;align-items:flex-end;justify-content:space-between;gap:24px;
  flex-wrap:wrap;margin-bottom:28px;
}
.pmck-more__title{font-size:30px;margin:0 0 6px;}
.pmck-more__lede{margin:0;max-width:60ch;}

.pmck-more__rail{
  display:grid;grid-auto-flow:column;grid-auto-columns:minmax(320px,1fr);
  gap:22px;overflow-x:auto;scroll-snap-type:x mandatory;
  padding-bottom:8px;scrollbar-width:thin;
}
.pmck-more__rail .pmck-card2{scroll-snap-align:start;}

.pmck-more__nav{display:flex;justify-content:center;gap:10px;margin-top:22px;}
.pmck-more__arrow{
  width:38px;height:38px;border:1px solid var(--line);background:#fff;
  border-radius:8px;cursor:pointer;color:var(--brand-ink);font-size:17px;line-height:1;
}
.pmck-more__arrow:hover{background:#fff;border-color:var(--brand);color:var(--brand);}

@media (max-width:980px){
  .pmck-article__cols{grid-template-columns:1fr;gap:28px;}
  .pmck-article__side{position:static;}
  .pmck-about__cols{grid-template-columns:1fr;}
}


/* The HR block reuses the careers styling, so it needs the guide scope's
   container when it appears on a job page. */
.pmck-jobcard__hr{margin-top:22px;}
.pmck-jobcard__hr .contact{margin-top:0;}