/* Shared block knob mechanics — written to static/cms/block-knobs.css on every
   build and linked by the CMS default home, the generic-theme overlay, and each
   bespoke theme's baseof. Maps data-attributes on a block's root element to CSS
   custom properties. Themes DEFINE the palette/scale tokens (--tone-*, --measure-*,
   --space-*) and CONSUME --block-* in their block CSS. Ships fallbacks so blocks
   render reasonably with no theme tokens at all. tone=auto sets no color override,
   preserving the theme's inherent per-block look. */

[data-cms-block] {
  --block-measure: var(--measure-default, 72rem);
  --block-space: var(--space-normal, clamp(2.5rem, 6vw, 5rem));
  --block-align: left;
}

/* Width */
[data-cms-block][data-width="wide"]   { --block-measure: var(--measure-wide, 90rem); }
[data-cms-block][data-width="narrow"] { --block-measure: var(--measure-narrow, 46rem); }
[data-cms-block][data-width="full"]   { --block-measure: none; }

/* Spacing */
[data-cms-block][data-space="compact"] { --block-space: var(--space-compact, 1.75rem); }
[data-cms-block][data-space="roomy"]   { --block-space: var(--space-roomy, 8rem); }

/* Alignment */
[data-cms-block][data-align="center"] { --block-align: center; }

/* Image framing — which part of a photo stays visible inside a cropped image
   area, how tall that area is (hero), and the frame's shape / fill mode
   (cards). _knobs.html omits the attribute entirely for the neutral values
   (position "center", height/ratio/fit "auto"), so an unset block defines no
   token and every consumer falls back to its own default. Applied in
   block-variants.css.

   The position mapping is deliberately ELEMENT-AGNOSTIC — no [data-cms-block]
   prefix — so the very same table serves two levels: a block root (a hero
   section, where the choice covers the whole block) and an individual <img>
   (a single card, emitted by cms/image.html). Because custom properties
   inherit, a per-image attribute simply redefines the token nearer the
   element, which is what makes a per-card crop win over a block-wide one
   with no specificity juggling. */
[data-image-position="top"]          { --block-image-position:  50%   0%; }
[data-image-position="bottom"]       { --block-image-position:  50% 100%; }
[data-image-position="left"]         { --block-image-position:   0%  50%; }
[data-image-position="right"]        { --block-image-position: 100%  50%; }
[data-image-position="top-left"]     { --block-image-position:   0%   0%; }
[data-image-position="top-right"]    { --block-image-position: 100%   0%; }
[data-image-position="bottom-left"]  { --block-image-position:   0% 100%; }
[data-image-position="bottom-right"] { --block-image-position: 100% 100%; }

/* Cards: frame shape + fill mode. Block-level, because one shape per block is
   exactly what keeps every column the same size. */
[data-cms-block][data-image-ratio="3:4"]  { --block-image-ratio: 3 / 4; }
[data-cms-block][data-image-ratio="1:1"]  { --block-image-ratio: 1 / 1; }
[data-cms-block][data-image-ratio="4:3"]  { --block-image-ratio: 4 / 3; }
[data-cms-block][data-image-ratio="16:9"] { --block-image-ratio: 16 / 9; }
[data-cms-block][data-image-fit="cover"]   { --block-image-fit: cover; }
[data-cms-block][data-image-fit="contain"] { --block-image-fit: contain; }

/* Height presets scale with the viewport (clamp) so a choice made on desktop
   stays sane on mobile; "full" fills the small-viewport height, which avoids
   the mobile-browser-chrome jump a bare 100vh causes. */
[data-cms-block][data-image-height="compact"] { --block-image-height: clamp(12rem, 22vh, 18rem); }
[data-cms-block][data-image-height="medium"]  { --block-image-height: clamp(16rem, 42vh, 32rem); }
[data-cms-block][data-image-height="tall"]    { --block-image-height: clamp(22rem, 62vh, 44rem); }
[data-cms-block][data-image-height="full"]    { --block-image-height: 100svh; }

/* Tone — only light/dark/accent set an override; auto (or absent) leaves the
   theme default. Themes define the tone-* tokens; fallbacks are neutral. */
[data-cms-block][data-tone="light"]  { --block-bg: var(--tone-light-bg,  #ffffff); --block-fg: var(--tone-light-fg,  #16181d); --block-accent: var(--tone-light-accent,  #9a6a1f); }
[data-cms-block][data-tone="dark"]   { --block-bg: var(--tone-dark-bg,   #0e1b2a); --block-fg: var(--tone-dark-fg,   #f3efe6); --block-accent: var(--tone-dark-accent,   #c9a86a); }
[data-cms-block][data-tone="accent"] { --block-bg: var(--tone-accent-bg, #9a6a1f); --block-fg: var(--tone-accent-fg, #ffffff); --block-accent: var(--tone-accent-accent, #ffffff); }