/*
 * Section patterns, shared by every template (master copy in shared/patterns/).
 * Everything comes from the template: its --art-* settings (or Edith's and
 * May's), and its character from characters.php as body classes
 * (pt-q-*, pt-c-*, pt-b-*, pt-l-*, pt-n-*) and --pt-* variables.
 * Most rules are wrapped in :where() so a template can restyle them simply; the
 * sizes that must beat a template's general heading, list and quote rules are not.
 */

:where(.pt) {
    --pt-text: var(--art-text, var(--edith-text, var(--may-text, #111)));
    --pt-bg: var(--art-bg, var(--edith-bg, var(--may-bg, #fff)));
    --pt-accent: var(--art-accent, var(--edith-accent, var(--may-accent, #111)));
    --pt-muted: var(--art-muted, color-mix(in srgb, var(--pt-text) 58%, transparent));
    --pt-surface: var(--art-surface, color-mix(in srgb, var(--pt-text) 7%, var(--pt-bg)));
    --pt-line: color-mix(in srgb, var(--pt-text) 22%, transparent);
    --pt-head-font: var(--art-heading-font, var(--edith-heading-font, var(--may-heading-font, inherit)));
    --pt-head-weight: var(--art-heading-weight, 400);
    --pt-meta-font: var(--art-meta-font, inherit);
    margin-top: clamp(56px, 8vw, 128px);
    margin-bottom: clamp(56px, 8vw, 128px);
}
:where(.pt) :where(h2, h3) { font-family: var(--pt-head-font); font-weight: var(--pt-head-weight); text-transform: var(--pt-case, none); }
:where(.pt) :where(.wp-block-image img) { width: 100%; height: auto; display: block; }
:where(.pt) :where(.wp-block-image) { margin: 0 0 1rem; }

/* Labels and small text */
:where(.pt-kicker, .pt-label) { margin: 0 0 1rem; font-size: 12px; color: var(--pt-muted); }
:where(.pt-l-caps) :where(.pt-kicker, .pt-label) { text-transform: uppercase; letter-spacing: .12em; }
:where(.pt-l-mono) :where(.pt-kicker, .pt-label) { font-family: var(--pt-meta-font, ui-monospace, monospace); text-transform: uppercase; letter-spacing: .08em; }
:where(.pt-l-italic) :where(.pt-kicker, .pt-label) { font-style: italic; font-size: 15px; }
:where(.pt-meta) { margin: .2rem 0 0; font-size: 13px; color: var(--pt-muted); }
:where(.pt-index) { font-family: var(--pt-meta-font, inherit); font-size: .55em; vertical-align: .35em; color: var(--pt-accent); margin-right: .2em; }

/* Statement */
.pt-statement h2 { font-size: clamp(36px, 7.5vw, var(--pt-display)); line-height: .98; letter-spacing: -.02em; margin: 0; max-width: 18ch; }
.pt-statement .pt-lede { max-width: 46ch; margin: 1.6rem 0 0; font-size: clamp(17px, 1.4vw, 21px); color: var(--pt-muted); }

/* Intro */
.pt-intro h2 { font-size: clamp(24px, 2.6vw, 38px); margin: 0; }
:where(.pt-intro) :where(p) { max-width: 60ch; }

/* Graphic type: oversized words, set one under the other */
.pt-graphic .pt-word { margin: 0; font-family: var(--pt-head-font); font-weight: var(--pt-head-weight); text-transform: var(--pt-case, none); font-size: clamp(56px, 13vw, calc(var(--pt-display) * 1.7)); line-height: .86; letter-spacing: -.035em; }
:where(.pt-graphic) :where(.pt-word:nth-child(2)) { padding-left: 12%; color: var(--pt-accent); }
:where(.pt-graphic) :where(.pt-word:nth-child(3)) { padding-left: 4%; }
.pt-graphic .pt-note { margin: 2.2rem 0 0; font-size: 13px; color: var(--pt-muted); max-width: 40ch; }

/* Quotes: the character decides */
.pt-quote blockquote { margin: 0; padding: 0; border: 0; max-width: 100%; }
.pt-quote blockquote p { font-family: var(--pt-head-font); font-size: clamp(26px, 3.4vw, 50px); line-height: 1.12; letter-spacing: -.015em; margin: 0; max-width: 26ch; overflow-wrap: normal; word-break: normal; hyphens: manual; } /* Width in the quote's own size. */
:where(.pt-quote, .pt-press) :where(cite) { display: block; margin-top: 1.2rem; font-size: 13px; font-style: normal; color: var(--pt-muted); }
:where(.pt-q-marks) :where(.pt-quote blockquote p)::before { content: "“"; display: block; font-size: 2.4em; line-height: .6; color: var(--pt-accent); }
body.pt-q-rule .pt-quote blockquote { border-left: max(2px, var(--pt-rule)) solid var(--pt-accent); padding-left: 1.4rem; }
body.pt-q-serif .pt-quote blockquote p { font-family: Georgia, "Times New Roman", serif; font-style: italic; font-weight: 400; text-transform: none; }
body.pt-q-boxed .pt-quote blockquote { border: max(2px, var(--pt-rule)) solid var(--pt-text); padding: clamp(20px, 3vw, 40px); width: fit-content; max-width: 100%; border-radius: var(--pt-radius); }
body.pt-q-mono .pt-quote blockquote p { font-family: var(--pt-meta-font, ui-monospace, monospace); font-size: clamp(20px, 2.2vw, 30px); text-transform: uppercase; letter-spacing: .04em; }
body.pt-q-huge .pt-quote blockquote p { max-width: 20ch; }
body.pt-q-huge .pt-quote blockquote p { font-size: clamp(36px, 6vw, calc(var(--pt-display) * .7)); line-height: .98; text-transform: var(--pt-case, none); }

/* Press quotes */
:where(.pt-press-line) { font-family: var(--pt-head-font); font-size: clamp(19px, 1.7vw, 25px); line-height: 1.25; margin: 0; }

/* Case study */
.pt-case h3 { font-size: clamp(26px, 3vw, 44px); margin: 0 0 1.2rem; }
.pt-facts { list-style: none; padding: 0; margin: 0 0 1.2rem; font-size: 14px; }
:where(.pt-facts li) { padding: .55rem 0; border-top: max(1px, var(--pt-rule)) solid var(--pt-line); }
:where(.pt-facts li:last-child) { border-bottom: max(1px, var(--pt-rule)) solid var(--pt-line); }
:where(.pt-link a) { text-decoration: none; border-bottom: 1px solid currentColor; }

/* Cards (projects, people): the character decides */
:where(.pt-card, .pt-person) { margin: 0; }
.pt-card h3 { font-size: clamp(18px, 1.6vw, 22px); margin: .9rem 0 .1rem; }
:where(.pt-c-framed) :where(.pt-card) { border: 1px solid var(--pt-line); padding: 12px; border-radius: var(--pt-radius); }
:where(.pt-c-raised) :where(.pt-card) { background: var(--pt-bg); box-shadow: 0 12px 34px rgba(0, 0, 0, .09); padding: 14px; border-radius: var(--pt-radius); }
:where(.pt-c-raised, .pt-c-glass, .pt-c-framed) :where(.pt-card .wp-block-image img) { border-radius: calc(var(--pt-radius) * .6); }
:where(.pt-c-glass) :where(.pt-card) { background: color-mix(in srgb, var(--pt-bg) 55%, transparent); backdrop-filter: blur(12px); border: 1px solid color-mix(in srgb, var(--pt-text) 14%, transparent); padding: 14px; border-radius: var(--pt-radius); }
:where(.pt-c-block) :where(.pt-card) { border: max(3px, var(--pt-rule)) solid var(--pt-text); padding: 0 0 14px; }
:where(.pt-c-block) :where(.pt-card .wp-block-image) { border-bottom: max(3px, var(--pt-rule)) solid var(--pt-text); }
:where(.pt-c-block) :where(.pt-card) :where(h3, .pt-meta) { padding: 0 14px; }
:where(.pt-c-taped) :where(.pt-card) { background: var(--pt-bg); padding: 12px 12px 16px; box-shadow: 0 6px 16px rgba(0, 0, 0, .12); position: relative; }
:where(.pt-c-taped) :where(.pt-card)::before { content: ""; position: absolute; top: -10px; left: 50%; width: 84px; height: 22px; margin-left: -42px; background: color-mix(in srgb, var(--pt-accent) 35%, transparent); transform: rotate(-3deg); }
:where(.pt-portrait img) { aspect-ratio: 4 / 5; object-fit: cover; }
:where(.pt-name) { margin: .7rem 0 0; }

/* Banner (a Cover block) and callout: the template's banner colour */
:where(.pt-banner) { padding: clamp(28px, 4vw, 64px) var(--art-gutter, 32px); }
:where(.pt-banner) :where(.wp-block-cover__inner-container) { width: 100%; max-width: none; color: #fff; }
.pt-banner h2 { font-size: clamp(36px, 6.4vw, var(--pt-display)); line-height: .98; margin: 0 0 1.4rem; max-width: 16ch; color: inherit; }
:where(.pt-banner) :where(.pt-kicker) { color: inherit; opacity: .8; }
:where(.pt-banner:not(:has(img))) :where(.wp-block-cover__background) { opacity: 1 !important; }
:where(.pt-b-ink) :where(.pt-banner .wp-block-cover__background) { background: var(--pt-text); }
:where(.pt-b-accent) :where(.pt-banner .wp-block-cover__background) { background: var(--pt-accent); }
:where(.pt-b-surface) :where(.pt-banner .wp-block-cover__background) { background: var(--pt-surface); }
:where(.pt-b-surface) :where(.pt-banner:not(:has(img)) .wp-block-cover__inner-container) { color: var(--pt-text); }
:where(.pt-b-gradient) :where(.pt-banner .wp-block-cover__background) { background: linear-gradient(120deg, var(--pt-accent), var(--art-accent-2, var(--pt-text))); }
:where(.pt-banner:has(img)) :where(.wp-block-cover__background) { background: #000; }

:where(.pt-callout) { padding: clamp(32px, 5vw, 80px) var(--art-gutter, 32px); background: var(--pt-text); color: var(--pt-bg); }
:where(.pt-b-accent) :where(.pt-callout) { background: var(--pt-accent); color: #fff; }
:where(.pt-b-surface) :where(.pt-callout) { background: var(--pt-surface); color: var(--pt-text); }
:where(.pt-b-gradient) :where(.pt-callout) { background: linear-gradient(120deg, var(--pt-accent), var(--art-accent-2, var(--pt-text))); color: #fff; }
.pt-callout h2 { font-size: clamp(26px, 3.6vw, calc(var(--pt-display) * .55)); line-height: 1.08; margin: 0; color: inherit; }
:where(.pt-callout) :where(.wp-block-columns) { align-items: center !important; margin: 0; }
:where(.pt-callout) :where(.wp-block-buttons) { justify-content: flex-end; }
:where(.pt-callout, .pt-banner) :where(.wp-block-button__link) { background: transparent; color: inherit; border: 1px solid currentColor; border-radius: var(--pt-radius); }
:where(.pt-callout, .pt-banner) :where(.wp-block-button__link:hover) { background: currentColor; }
:where(.pt-callout, .pt-banner) :where(.wp-block-button__link:hover) { color: var(--pt-text); }

/* Video */
:where(.pt-video) :where(.wp-block-columns) { align-items: flex-end; }
.pt-video h3 { font-size: clamp(22px, 2.2vw, 32px); margin: 0 0 .8rem; }
:where(.pt-video) :where(figcaption) { font-size: 12px; color: var(--pt-muted); }

/* Numbers */
.pt .pt-num { margin: 0; font-family: var(--pt-head-font); font-size: clamp(48px, 7vw, calc(var(--pt-display) * .85)); line-height: .9; letter-spacing: -.04em; font-variant-numeric: tabular-nums; }
body.pt-n-mono .pt-num { font-family: var(--pt-meta-font, ui-monospace, monospace); letter-spacing: 0; }
body.pt-n-serif .pt-num { font-family: Georgia, "Times New Roman", serif; font-style: italic; letter-spacing: -.02em; }
:where(.pt-numbers) :where(.wp-block-column) { border-top: max(1px, var(--pt-rule)) solid var(--pt-text); padding-top: .9rem; }

/* Dates: rows with a rule */
:where(.pt-row) { margin: 0 !important; padding: .9rem 0; border-top: max(1px, var(--pt-rule)) solid var(--pt-line); gap: 1rem; }
:where(.pt-row:last-child) { border-bottom: max(1px, var(--pt-rule)) solid var(--pt-line); }
:where(.pt-row) :where(p) { margin: 0; }
:where(.pt-when) { font-family: var(--pt-meta-font, inherit); font-size: 13px; text-transform: uppercase; letter-spacing: .06em; color: var(--pt-muted); }
:where(.pt-what) { font-size: clamp(17px, 1.5vw, 21px); }
:where(.pt-where) { color: var(--pt-muted); }

/* Enquiries */
:where(.pt-contact) :where(.wp-block-column) { border-top: max(1px, var(--pt-rule)) solid var(--pt-text); padding-top: .9rem; }
:where(.pt-contact-line) { font-size: clamp(17px, 1.5vw, 21px); margin: 0; }
:where(.pt-contact-line a) { text-decoration: none; }

@media (max-width: 781px) {
    :where(.pt-graphic) :where(.pt-word:nth-child(n)) { padding-left: 0; }
    :where(.pt-callout) :where(.wp-block-buttons) { justify-content: flex-start; }
}