/* PepsiCo round 1 (PE 1): the live Uline page's look (uline.css + colour-clear + colour-type +
   round3), with only what PepsiCo needs on top. */

/* "On this page" is switched off for now (class "toc-off" on .cs-layout in pepsico.html).
   The reading column is centred under the cover instead of sitting beside an empty sidebar.
   In December, delete "toc-off" from the HTML and the sidebar comes back as on Uline;
   nothing here needs to change. */
.page-case .cs-layout.toc-off .cs-bar { display: none; }
@media (min-width: 1100px) {
  .page-case .cs-layout.toc-off { grid-template-columns: minmax(0, 800px); justify-content: center; }
}

/* "Currently Ongoing": centred and larger, in a dark peach, on a soft peach panel with a small
   pulsing "In progress" tag above it, so it stands out as the page's last word for now */
.page-case .cs-column > #ongoing { text-align: center; }
.page-case #ongoing .pe-ongoing {
  margin: 8px auto 0; padding: clamp(36px, 5vw, 56px) clamp(20px, 4vw, 48px);
  border-radius: 20px; background: linear-gradient(160deg, #FDF0EA, #FBE4DE); box-shadow: inset 0 0 0 1.5px #F1CFC4;
}
.page-case #ongoing .pe-tag {
  display: inline-flex; align-items: center; gap: 8px; margin: 0 0 18px; padding: 6px 14px; border-radius: 999px;
  font-size: 12px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: #A8475A; background: #fff;
  box-shadow: inset 0 0 0 1px #F1CFC4;
}
.page-case #ongoing .pe-tag i { width: 8px; height: 8px; border-radius: 50%; background: #C4566C; animation: pe-pulse 1.8s ease-in-out infinite; }
@keyframes pe-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(196, 86, 108, 0.45); } 50% { box-shadow: 0 0 0 6px rgba(196, 86, 108, 0); } }
@media (prefers-reduced-motion: reduce) { .page-case #ongoing .pe-tag i { animation: none; } }
.page-case .cs-column > #ongoing > .pe-ongoing > .cs-h { margin: 0; font-size: clamp(44px, 5.6vw, 68px); line-height: 1.05; color: #B5573F; }
.page-case #ongoing .pe-ongoing > p:last-child { margin: 16px 0 0; font-size: clamp(17px, 1.6vw, 20px); color: #A8475A; }

/* The cover crop sits a little higher on the picture (26% → 12%), so more of the top shows */
.page-case .cs-cover img { object-position: 50% 12%; }