/* Kindly Edit tones, the hero block's layouts, photo styles and the empty-photo panel.

   Tokens (theme contract v1): a theme sets these on :root, in its CSS or in cantata-edit.json "tokens".
   Everything below uses :where(:root) for its fallbacks, so any theme value wins whatever the load order.
   The first set (accent, heading, ink, muted, line, tint, bg, display, radius) is in blocks.css. */
:where(:root) {
	--cb-surface: var(--cb-bg, #fff);
	--cb-dark: var(--cb-heading, #16181d); /* most themes' heading colour is their dark brand colour */
	--cb-on-dark: #fff;
	--cb-on-dark-muted: rgba(255, 255, 255, .78);
	--cb-accent-on-dark: var(--cb-on-dark);
	--cb-accent-2: var(--cb-accent);
	--cb-accent-bg: var(--cb-accent);
	--cb-on-accent: #fff;
	--cb-body: inherit;
}

/* ---------- tones: one class on a section, and everything inside follows ---------- */
.cb-tone-light, .cb-tone-tint, .cb-tone-dark, .cb-tone-accent { background: var(--cb-sec-bg); color: var(--cb-ink); }
/* a block added into a section that's dark by its own design (not a tone class): the tone's words, not its background */
.cb-on-dark, .cb-on-accent { color: var(--cb-ink); }
.cb-tone-light { --cb-sec-bg: var(--cb-bg); }
.cb-tone-tint { --cb-sec-bg: var(--cb-tint); --cb-surface: var(--cb-bg); }
.cb-tone-dark, .cb-on-dark, :is(.layout-cover, .cb-hero-cover) {
	--cb-sec-bg: var(--cb-dark);
	--cb-heading: var(--cb-on-dark); --cb-ink: var(--cb-on-dark-muted); --cb-muted: var(--cb-on-dark-muted);
	--cb-accent: var(--cb-accent-on-dark); --cb-accent-2: var(--cb-accent-on-dark); --cb-line: rgba(255, 255, 255, .18);
	--cb-surface: rgba(255, 255, 255, .06); --cb-tint: rgba(255, 255, 255, .08);
}
.cb-tone-accent, .cb-on-accent {
	--cb-sec-bg: var(--cb-accent-bg);
	--cb-heading: var(--cb-on-accent); --cb-ink: var(--cb-on-accent); --cb-muted: var(--cb-on-accent);
	--cb-accent: var(--cb-on-accent); --cb-accent-2: var(--cb-on-accent); --cb-line: rgba(255, 255, 255, .28);
	--cb-surface: rgba(255, 255, 255, .1); --cb-tint: rgba(255, 255, 255, .12);
}
/* "cover" (words over the photo) is always dark, whatever the section's tone: it shares the dark tone's remap above. */
/* The theme's own heading and link colours give way inside a tone. Buttons stay the theme's: see README. */
:is(.cb-tone-light, .cb-tone-tint, .cb-tone-dark, .cb-tone-accent, .cb-on-dark, .cb-on-accent, :is(.layout-cover, .cb-hero-cover)) :is(h1, h2, h3, h4, h5, h6), :is(.cb-on-dark, .cb-on-accent):is(h1, h2, h3, h4, h5, h6) { color: var(--cb-heading); }
:is(.cb-tone-dark, .cb-tone-accent, .cb-on-dark, .cb-on-accent, :is(.layout-cover, .cb-hero-cover)) a:not([class]) { color: var(--cb-heading); }
:is(.cb-tone-dark, .cb-tone-accent, .cb-on-dark, .cb-on-accent) :is(.cb-card, .cb-cols.cb-boxed .cb-col) { background: var(--cb-surface); border-color: var(--cb-line); }
:is(.cb-tone-dark, .cb-tone-accent, .cb-on-dark, .cb-on-accent) :is(.cb-cta, .cb-callout, .cb-doc-type), :is(.cb-cta, .cb-callout):is(.cb-on-dark, .cb-on-accent) { background: var(--cb-tint); }
.cb-tone-tint :is(.cb-card, .cb-cols.cb-boxed .cb-col, .cb-callout, .cb-cta) { background: var(--cb-surface); } /* tint on tint would vanish */

/* ---------- hero ---------- */
.cb-hero { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 72px); align-items: center; }
.cb-hero-body > * + * { margin-top: 18px; }
.cb-eyebrow { font: 700 .8em/1.3 var(--cb-display); letter-spacing: .12em; text-transform: uppercase; color: var(--cb-accent); }
.cb-hero :is(h1, h2) { font-size: clamp(36px, 5vw, 64px); line-height: 1.04; color: var(--cb-heading); }
.cb-hero-sub { font-size: 1.15em; color: var(--cb-muted); max-width: 48ch; }
.cb-hero-body > .cb-actions { margin-top: 30px; }
.cb-hero-photo { margin: 0; }
.cb-hero-photo img { display: block; width: 100%; aspect-ratio: 5 / 4; object-fit: cover; border-radius: var(--cb-radius); }

/* layouts: a class on the section; the markup never changes, so switching keeps every word.
   cb-hero-flip/center/cover are the deprecated names from before contract v1, kept because saved pages use them. */
:is(.layout-flip, .cb-hero-flip) .cb-hero-photo { order: -1; }

:is(.layout-center, .cb-hero-center) .cb-hero { grid-template-columns: minmax(0, 1fr); justify-items: center; text-align: center; }
:is(.layout-center, .cb-hero-center) .cb-hero-body { max-width: 62ch; }
:is(.layout-center, .cb-hero-center) .cb-hero-sub { margin-inline: auto; }
:is(.layout-center, .cb-hero-center) .cb-hero .cb-actions { justify-content: center; }
:is(.layout-center, .cb-hero-center) .cb-hero-photo { width: 100%; }
:is(.layout-center, .cb-hero-center) .cb-hero-photo img { aspect-ratio: 21 / 9; }

section:is(.layout-cover, .cb-hero-cover):has(.cb-hero) { position: relative; isolation: isolate; overflow: hidden; display: grid; align-items: center; min-height: min(78vh, 720px); background: var(--cb-dark); color: var(--cb-ink); }
:is(.layout-cover, .cb-hero-cover) .cb-hero { grid-template-columns: minmax(0, 1fr); }
:is(.layout-cover, .cb-hero-cover) .cb-hero-body { max-width: 640px; }
:is(.layout-cover, .cb-hero-cover) .cb-hero-photo { position: absolute; inset: 0; z-index: -1; }
:is(.layout-cover, .cb-hero-cover) .cb-hero-photo img { height: 100%; aspect-ratio: auto; border-radius: 0; box-shadow: none; padding: 0; }
:is(.layout-cover, .cb-hero-cover) .cb-hero-photo::after { content: ""; position: absolute; inset: 0;
	background: linear-gradient(90deg, color-mix(in srgb, var(--cb-dark) 90%, transparent) 0%, color-mix(in srgb, var(--cb-dark) 70%, transparent) 45%, color-mix(in srgb, var(--cb-dark) 25%, transparent) 100%); }

/* ---------- a picture's size (the Picture block): Medium is what a new one starts at ---------- */
.cb-picture.cb-size-m { max-width: min(720px, 100%); }
.cb-picture.cb-size-s { max-width: min(420px, 50%); } /* half the column at most: in a narrow column Small differs from Medium */

/* ---------- photo styles: a class on the img ---------- */
.cb-img-round { border-radius: 24px !important; }
.cb-img-arch { border-radius: 999px 999px var(--cb-radius) var(--cb-radius) !important; }
.cb-img-frame { padding: 10px; background: var(--cb-surface); box-shadow: 0 1px 2px rgba(0, 0, 0, .08), 0 20px 40px -16px rgba(0, 0, 0, .3); }
.cb-img-offset { box-shadow: 18px 18px 0 0 color-mix(in srgb, var(--cb-accent) 35%, transparent); margin-bottom: 18px; }

@media (max-width: 860px) {
	.cb-hero { grid-template-columns: minmax(0, 1fr); }
	:is(.layout-flip, .cb-hero-flip) .cb-hero-photo { order: 0; }
	section:is(.layout-cover, .cb-hero-cover):has(.cb-hero) { min-height: 0; padding-block: 72px; }
	:is(.layout-cover, .cb-hero-cover) .cb-hero-photo::after { background: color-mix(in srgb, var(--cb-dark) 78%, transparent); }
	.cb-img-offset { box-shadow: 10px 10px 0 0 color-mix(in srgb, var(--cb-accent) 35%, transparent); }
}

/* ---------- an empty photo (the plugin's placeholder): a quiet panel in the site's own tint ----------
   The SVG is transparent with a faint icon and no words, so a page published with an empty photo shows
   a calm tinted panel, not an instruction. Only the editor marks it as something to click. */
img[src$="placeholder.svg"] { background: var(--cb-tint); object-fit: contain !important; }
.cb-tone-tint img[src$="placeholder.svg"] { background: var(--cb-surface); } /* tint on tint would vanish */
.cantata-editing img[src$="placeholder.svg"] { outline: 2px dashed color-mix(in srgb, var(--cb-muted) 45%, transparent); outline-offset: -8px; }
/* "Words over the photo" with no photo yet: drop the scrim and the panel so the words sit on the tone's own
   dark background. The icon stays faintly visible (off to the side) only while editing. */
:is(.layout-cover, .cb-hero-cover):has(img[src$="placeholder.svg"]) figure::after { display: none; }
:is(.layout-cover, .cb-hero-cover) img[src$="placeholder.svg"] { background: transparent; object-position: 88% center; opacity: 0; }
.cantata-editing :is(.layout-cover, .cb-hero-cover) img[src$="placeholder.svg"] { opacity: 1; outline: 0; }