/* Patch notes: the League of Legends patch notes layout (Patch 26.20), in the site's own fonts. */
body.pn-page { background: #0a1428; }
body.pn-page > main.pn-main { padding: 0; }
.pn-main { color: #fff; font-size: 18px; line-height: 28px; }

/* Hero: the image sharp in front, the same image blurred behind it, cut straight at 79% of the banner. */
.pn-hero { position: relative; overflow: hidden; padding-top: 96px; background: #0a1428; }
.pn-hero-bg { position: absolute; left: -5%; top: 0; width: 110%; height: calc(96px + (min(1123px, 100vw - 96px) * 0.5625 * 0.79)); object-fit: cover; filter: blur(16px); z-index: 0; }
.pn-hero-inner { position: relative; z-index: 1; padding: 0 48px; }
.pn-hero-banner { display: block; width: 100%; max-width: 1123px; aspect-ratio: 16 / 9; height: auto; margin: 0 auto; object-fit: cover; }
.pn-hero-text { max-width: 1072px; margin: 48px auto 0; text-align: center; }
.pn-hero-text h1 { margin: 0; color: #fff; font-size: 30.8px; font-style: italic; font-weight: 700; line-height: 37px; letter-spacing: normal; text-transform: uppercase; }
.pn-hero-sub { max-width: 860px; margin: 16px auto 0; color: #fff; font-size: 18px; line-height: 28px; white-space: normal; overflow-wrap: break-word; }
.pn-meta { max-width: 1123px; margin: 24px auto 0; padding: 24px 0 0; border-top: 1px solid rgba(255,255,255,.35); display: flex; justify-content: center; align-items: center; gap: 12px; font-size: 14px; }
.pn-cat { color: #c8aa6e; }
.pn-bar { width: 1px; height: 14px; background: rgba(255,255,255,.4); }

/* Body column: 864 px with 32 px padding, like theirs. */
.pn-body { background: #0a1428; padding: 64px 0 96px; }
.pn-col { width: min(864px, 100%); margin: 0 auto; padding: 32px; }
.pn-toc { margin: 0 0 64px; border-top: 1px solid #3b4353; border-bottom: 1px solid #3b4353; }
.pn-toc summary { display: flex; justify-content: space-between; align-items: center; padding: 24px 0; cursor: pointer; font-size: 22px; font-weight: 700; text-transform: uppercase; list-style: none; }
.pn-toc summary::-webkit-details-marker { display: none; }
.pn-toc summary::after { content: "+"; font-size: 28px; font-weight: 300; color: #c8aa6e; }
.pn-toc[open] summary::after { content: "\2212"; }
.pn-toc ul { margin: 0 0 24px; padding: 0 0 0 20px; }
.pn-toc li { margin: 6px 0; }
.pn-toc a { color: #fff; }
.pn-toc a:hover { color: #c8aa6e; }

.pn-main blockquote.context { margin: 32px 0; padding: 0; color: #fff; font-size: 18px; line-height: 26px; }
.pn-main blockquote.context p { margin: 0 0 16px; color: #fff; font-size: 18px; line-height: 26px; }
.pn-main blockquote.context p:last-child { margin-bottom: 0; }
.pn-main blockquote.context::before { content: open-quote; font-size: 28px; vertical-align: baseline; margin-right: 4px; }
.pn-main blockquote.context::after { content: close-quote; font-size: 28px; vertical-align: baseline; margin-left: 4px; }
.pn-main blockquote.context p { display: inline; }
.pn-main blockquote.context p + p::before { content: ""; display: block; height: 16px; }
.pn-intro { margin: 0 0 64px !important; }

.header-primary { scroll-margin-top: 96px; }
.header-primary h2 { margin: 0; padding: 0 0 32px; color: #fff; font-size: 32px; font-style: italic; font-weight: 700; line-height: 32px; text-transform: uppercase; letter-spacing: normal; }
.content-border { margin: 0 -32px 32px; padding: 32px; border: 1px solid #3b4353; }
.patch-change-block { position: relative; }
.reference-link { display: block; float: left; width: 128px; height: 128px; margin: 0 24px 32px 0; background: #111c33; border: 1px solid #3b4353; }
.reference-link img { display: block; width: 128px; height: 128px; object-fit: contain; }
.change-title { margin: 0 0 16px; color: #fff; font-size: 28px; font-weight: 600; line-height: 38px; letter-spacing: normal; }
.patch-change-block::after { content: ""; display: block; clear: both; }

.patch-change-block > blockquote.context, .patch-change-block > hr, .patch-change-block > h4, .patch-change-block > ul, .patch-change-block > .pn-table, .patch-change-block > .pn-note { clear: both; }
hr.divider { height: 0; margin: 32px 0; border: 0; border-top: 1px solid #3b4353; }
.change-detail-title { display: flex; align-items: center; margin: 32px 0; color: #fff; font-size: 22px; font-weight: 600; line-height: 32px; }
.change-detail-title img { width: 64px; height: 64px; margin-right: 24px; object-fit: contain; background: #111c33; border: 1px solid #3b4353; }
.patch-change-block ul { margin: 16px 0 0; padding: 0 0 0 32px; color: #fff; font-size: 18px; line-height: 28px; list-style: disc; }
.patch-change-block ul:empty { display: none; }
.patch-change-block li { margin: 8px 0; color: #fff; }
.patch-change-block strong { color: #fff; font-weight: 700; }
.patch-change-block a { color: #c8aa6e; text-decoration: underline; }
.pn-note { margin: 12px 0 0; color: #a09b8c; font-size: 15px; line-height: 22px; }

.pn-table { margin: 0; overflow-x: auto; border: 1px solid #3b4353; }
.pn-table table { width: 100%; border-collapse: collapse; font-size: 16px; line-height: 24px; }
.pn-table th { padding: 10px 14px; background: #111c33; color: #c8aa6e; font-weight: 700; text-align: left; white-space: nowrap; }
.pn-table td { padding: 8px 14px; border-top: 1px solid #3b4353; color: #fff; }

/* Patch highlights: the infographic panel. */
.pn-hl { display: grid; grid-template-columns: 1fr 1.5fr; gap: 24px; padding: 24px; background: linear-gradient(135deg, #0b1630, #071022); border: 1px solid #1e2d4a; }
.pn-hl-logo { display: flex; flex-direction: column; margin-bottom: 18px; }
.pn-hl-num { color: #f0e6d2; font-size: 44px; font-weight: 800; line-height: 1; }
.pn-hl-sub { color: #c8aa6e; font-size: 12px; font-weight: 700; letter-spacing: .2em; }
.pn-hl-label { margin: 0 0 8px; font-size: 15px; font-weight: 800; letter-spacing: .06em; }
.pn-up { color: #3fd16a; } .pn-sys { color: #9fd3ff; } .pn-new { color: #c8aa6e; }
.pn-hl-group { margin-bottom: 16px; }
.pn-hl-list { margin: 0; padding-left: 18px; font-size: 15px; line-height: 24px; }
.pn-hl-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.pn-hl-grid figure { margin: 0; padding: 6px; background: #0a1428; border: 1px solid #1e2d4a; text-align: center; }
.pn-hl-grid img { width: 100%; height: auto; display: block; }
.pn-hl-grid figcaption { margin-top: 4px; color: #a09b8c; font-size: 11px; line-height: 14px; text-transform: uppercase; }

.pn-shot { margin: 32px 0 0; }
.pn-shot img { display: block; width: 100%; height: auto; border: 1px solid #3b4353; }
.pn-shot a:hover img { border-color: #c8aa6e; }
.pn-shot figcaption { margin-top: 8px; color: #a09b8c; font-size: 15px; text-align: center; }
.pn-gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 16px; margin: 0 0 32px; }
.pn-gallery figure { margin: 0; text-align: center; }
.pn-gallery img { width: 100%; height: auto; background: #111c33; border: 1px solid #3b4353; }
.pn-gallery figcaption { margin-top: 8px; color: #fff; font-size: 15px; }
.pn-cta { margin-top: 48px; }

@media (max-width: 760px) {
  .pn-hero { padding-top: 72px; }
  .pn-hero-inner { padding: 0 16px; }
  .pn-hero-bg { height: calc(72px + ((100vw - 32px) * 0.5625 * 0.79)); }
  .pn-col { padding: 16px; }
  .content-border { margin: 0 -16px 24px; padding: 20px 16px; }
  .reference-link, .reference-link img { width: 80px; height: 80px; }
  .change-title { font-size: 24px; line-height: 32px; }
  .pn-hl { grid-template-columns: 1fr; }
  .pn-hl-grid { grid-template-columns: repeat(3, 1fr); }
}