/* ══════════════════════════════════════════
   A template's parts (the templates round, M113): the pieces that fill from
   the item a template shows. The Legal template's layout is the main site's
   legal page: one centred column, a small heading over the title, Last
   updated, a lead line and a note, On this page, then the text with each
   heading numbered under a rule. Colours and type are the look's.
   ══════════════════════════════════════════ */

/* Parts sit together as one column: only the first and last keep the section's room. */
.cms-sec--part { padding-top: 64px; padding-bottom: 88px; }
.cms-sec--part + .cms-sec--part { padding-top: 10px; }
.cms-sec--part:has(+ .cms-sec--part) { padding-bottom: 10px; }
.tpl-in { max-width: 820px; margin-inline: auto; }

.tpl-title { font-family: var(--font-display); font-size: clamp(30px, 4vw, 42px); font-weight: 900; line-height: 1.15; color: var(--ink); margin: 6px 0 0; }
.tpl-updated { font-size: 13px; color: var(--muted); margin: 6px 0 0; }
.tpl-lede { font-size: 16.5px; line-height: 1.7; color: var(--muted); margin: 8px 0 0; }
.tpl-note { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-card, 12px); padding: 16px 18px; }
.tpl-note p { margin: 0; font-size: 15px; line-height: 1.7; color: var(--muted); }
.tpl-note strong { color: var(--ink); }

.tpl-toc { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-card, 14px); padding: 20px 22px; margin-top: 12px; }
.tpl-toc strong { display: block; font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--blue); margin-bottom: 10px; }
.tpl-toc ol { margin: 0; padding: 0; list-style: none; columns: 2; column-gap: 28px; }
.tpl-toc--one ol { columns: 1; }
/* Each heading's own number, "4." or "2.1", as the text numbers it. */
.tpl-toc li { display: grid; grid-template-columns: 1.7em minmax(0, 1fr); column-gap: .45em; font-size: 14.5px; line-height: 1.9; color: var(--muted); break-inside: avoid; }
.tpl-toc__n { text-align: right; font-variant-numeric: tabular-nums; }
.tpl-toc a, .tpl-text a { color: var(--blue); font-weight: 600; text-decoration: none; }
.tpl-toc a:hover, .tpl-text a:hover { text-decoration: underline; text-underline-offset: 2px; }

.tpl-text h2 { font-family: var(--font-display); font-size: 22px; font-weight: 800; line-height: 1.3; color: var(--ink); margin: 38px 0 10px; scroll-margin-top: var(--head-h, 96px); }
.tpl-text--numbered h2 { padding-top: 12px; border-top: 1px solid var(--border); }
.tpl-text > h2:first-child { margin-top: 12px; }
.tpl-text h3 { font-size: 17px; font-weight: 700; color: var(--ink); margin: 24px 0 8px; }
.tpl-text :is(p, li) { font-size: 15px; line-height: 1.75; color: var(--muted); }
.tpl-text :is(strong, b) { color: var(--ink); }
.tpl-text p { margin: 0 0 12px; }
.tpl-text :is(ul, ol) { padding-left: 22px; margin: 0 0 12px; display: grid; gap: 6px; }
/* The text editor writes a bulleted list as an <ol> whose items say so. */
.tpl-text ol:has(> li[data-list="bullet"]) { list-style: disc; }
.tpl-text .ql-ui { display: none; }

[data-theme="dark"] .tpl-toc strong { color: color-mix(in oklab, var(--blue) 55%, #fff); }
[data-theme="dark"] :is(.tpl-toc, .tpl-text) a { color: color-mix(in oklab, var(--blue) 55%, #fff); }

@media (max-width: 640px) {
  .tpl-toc ol { columns: 1; }
  .cms-sec--part { padding-top: 40px; padding-bottom: 64px; }
  .cms-sec--part + .cms-sec--part { padding-top: 10px; }
  .cms-sec--part:has(+ .cms-sec--part) { padding-bottom: 10px; }
}

/* In the builder each section sits in a frame of its own, so the parts keep a little room each. */
.bx-s > .cms-sec--part { padding-top: 14px; padding-bottom: 14px; }

/* The store's parts (M148 to M150): a product's, a bundle's and the catalogue's cards keep their page's own rhythm,
   16px apart, with the page's own room above the first and below the last. */
.cms-sec--part:has(> .pd, > .listing) { padding-top: 22px; padding-bottom: 44px; }
.cms-sec--part:has(> .pd, > .listing) + .cms-sec--part:has(> .pd, > .listing) { padding-top: 8px; }
.cms-sec--part:has(> .pd, > .listing):has(+ .cms-sec--part) { padding-bottom: 8px; }
.cms-sec--part .pd__wrap { padding: 0; }
.cms-sec--part .pd__hero, .cms-sec--part .listing__header { margin-top: 0; margin-bottom: 0; }

/* Offers' parts (M171), as /offers always drew them: the theme's band with its own margin, the cards close under it. */
.cms-sec--part:has(> .core-band) { padding: 0; }
.cms-sec--part:has(> .of-list) { padding: 4px 0 48px; }
.cms-sec--part:has(> .of-list) + .cms-sec--part:has(> .of-list) { padding-top: 0; }

/* Round 28's parts (M207) draw their own room, as the pages they came from did. */
.cms-sec.cms-sec--bare { padding: 0; }
.cms-sec--bare > .cms-in { max-width: none; padding: 0; }

/* A template with a sidebar (M208): the sidebar beside the main column, after it on a phone. */
.tpl-cols { display: grid; gap: 40px; max-width: 1180px; margin: 0 auto; padding: 0 20px; align-items: start; }
.tpl-cols--right { grid-template-columns: minmax(0, 1fr) 300px; }
.tpl-cols--left { grid-template-columns: 240px minmax(0, 1fr); }
.tpl-cols--left .tpl-side { grid-column: 1; grid-row: 1; }
.tpl-cols--left .tpl-main { grid-column: 2; grid-row: 1; }
.tpl-main { min-width: 0; }
.tpl-side { min-width: 0; display: flex; flex-direction: column; gap: 26px; padding: 36px 0 40px; }
.tpl-main .po-w, .tpl-main .kb-w { padding-left: 0; padding-right: 0; }
.tpl-side .cms-sec { padding: 0; }
.tpl-side .cms-in { max-width: none; padding: 0; }
@media (max-width: 960px) {
  .tpl-cols--right, .tpl-cols--left { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .tpl-cols--left .tpl-side, .tpl-cols--left .tpl-main { grid-column: auto; grid-row: auto; }
  .tpl-cols--left .tpl-side { order: 2; }
}
.tpl-side { align-self: stretch; }