/* VodiKit page blocks. Colours come from the theme (--vk-* of the packaged themes) with neutral fallbacks, so a block
   layout looks at home in any theme; a theme can restyle every .cms-b-* class or override the block views. */
.cms-b-layout {
    --b-primary: var(--vk-primary, #1d4ed8);
    --b-primary-dark: var(--vk-primary-dark, #1e3a8a);
    --b-primary-soft: var(--vk-primary-soft, #eff6ff);
    --b-ink: var(--vk-ink, #0f172a);
    --b-muted: var(--vk-muted, #475569);
    --b-line: var(--vk-line, #e2e8f0);
    --b-surface: var(--vk-surface, #f8fafc);
    --b-radius: var(--vk-radius, 16px);
    --b-on-primary: var(--vk-on-primary, #fff);
    color: var(--b-ink);
}
.cms-b-layout > :first-child:not(.cms-b-section) { margin-top: clamp(24px, 4vw, 48px); }
.cms-b-layout > :not(.cms-b-section) { width: min(1180px, 100% - 40px); margin-inline: auto; }
.cms-b-layout > .cms-b-text, .cms-b-layout > .cms-b-heading .cms-b-lead { max-width: min(1180px, 100% - 40px); }
.cms-b-layout > .cms-b-text > * { max-width: 75ch; }
.cms-b-layout > * + * { margin-top: clamp(16px, 2.4vw, 28px); }
.cms-b-layout > .cms-b-section + .cms-b-section, .cms-b-layout > * + .cms-b-section, .cms-b-layout > .cms-b-section + * { margin-top: 0; }
.cms-b-layout > .cms-b-section + :not(.cms-b-section) { margin-top: clamp(24px, 4vw, 48px); }
.cms-b-layout > :last-child:not(.cms-b-section) { margin-bottom: clamp(32px, 5vw, 64px); }

.cms-b-section { position: relative; padding-block: clamp(40px, 6vw, 88px); background-position: center; background-size: cover; }
.cms-b-section--soft { background: var(--b-surface); }
.cms-b-section--primary { color: var(--b-on-primary); background: linear-gradient(135deg, var(--b-primary-dark), var(--b-primary)); }
.cms-b-section--dark { color: #e2e8f0; background: #0b1220; }
.cms-b-section--image { color: #fff; background-image: linear-gradient(rgba(2, 6, 23, .55), rgba(2, 6, 23, .55)), var(--cms-b-image); }
.cms-b-section--primary .cms-b-lead, .cms-b-section--dark .cms-b-lead, .cms-b-section--image .cms-b-lead,
.cms-b-section--primary .cms-b-eyebrow, .cms-b-section--dark .cms-b-eyebrow, .cms-b-section--image .cms-b-eyebrow { color: inherit; opacity: .85; }
.cms-b-pad--none { padding-block: 0; } .cms-b-pad--sm { padding-block: clamp(20px, 3vw, 36px); } .cms-b-pad--lg { padding-block: clamp(64px, 9vw, 128px); }
.cms-b-container { width: min(1180px, 100% - 40px); margin-inline: auto; display: grid; gap: clamp(16px, 2.4vw, 28px); }
.cms-b-container--narrow { width: min(760px, 100% - 40px); } .cms-b-container--wide { width: min(1400px, 100% - 40px); } .cms-b-container--full { width: 100%; }
.cms-b-align--center { text-align: center; } .cms-b-align--right { text-align: right; }
.cms-b-align--center .cms-b-buttons, .cms-b-buttons.cms-b-align--center { justify-content: center; }
.cms-b-buttons.cms-b-align--right { justify-content: flex-end; }

.cms-b-columns { display: grid; grid-template-columns: 1fr; gap: 24px; }
.cms-b-gap--sm { gap: 14px; } .cms-b-gap--lg { gap: clamp(28px, 4vw, 56px); }
.cms-b-valign--center { align-items: center; }
.cms-b-column { display: grid; gap: 16px; align-content: start; min-width: 0; }
@media (min-width: 860px) {
    .cms-b-columns--1-1 { grid-template-columns: 1fr 1fr; } .cms-b-columns--2-1 { grid-template-columns: 2fr 1fr; }
    .cms-b-columns--1-2 { grid-template-columns: 1fr 2fr; } .cms-b-columns--1-1-1 { grid-template-columns: repeat(3, 1fr); }
    .cms-b-columns--1-1-1-1 { grid-template-columns: repeat(4, 1fr); }
}
@media (min-width: 600px) and (max-width: 859px) { .cms-b-columns--1-1-1, .cms-b-columns--1-1-1-1 { grid-template-columns: 1fr 1fr; } }

.cms-b-heading { display: grid; gap: 10px; }
.cms-b-eyebrow { margin: 0; color: var(--b-primary); font-size: 13px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.cms-b-title { margin: 0; color: inherit; line-height: 1.15; letter-spacing: -.02em; }
.cms-b-title--1 { font-size: clamp(34px, 5vw, 56px); } .cms-b-title--2 { font-size: clamp(28px, 3.6vw, 40px); }
.cms-b-title--3 { font-size: clamp(21px, 2.4vw, 26px); } .cms-b-title--4 { font-size: 19px; }
.cms-b-lead { max-width: 70ch; margin: 0; color: var(--b-muted); font-size: clamp(17px, 1.6vw, 19px); line-height: 1.65; }
.cms-b-align--center .cms-b-lead { margin-inline: auto; }
.cms-b-text { max-width: 75ch; line-height: 1.75; } .cms-b-align--center .cms-b-text { margin-inline: auto; }
.cms-b-text > :first-child { margin-top: 0; } .cms-b-text > :last-child { margin-bottom: 0; }
.cms-b-text a { color: var(--b-primary); }
.cms-b-text img { max-width: 100%; height: auto; border-radius: 12px; }

.cms-b-image { margin: 0; }
.cms-b-image img { display: block; width: 100%; height: auto; }
.cms-b-image.is-rounded img { border-radius: var(--b-radius); }
.cms-b-ratio--16-9 img { aspect-ratio: 16 / 9; object-fit: cover; } .cms-b-ratio--4-3 img { aspect-ratio: 4 / 3; object-fit: cover; }
.cms-b-ratio--1-1 img { aspect-ratio: 1; object-fit: cover; } .cms-b-ratio--21-9 img { aspect-ratio: 21 / 9; object-fit: cover; }
.cms-b-image figcaption { margin-top: 8px; color: var(--b-muted); font-size: 14px; }

.cms-b-gallery { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
@media (min-width: 760px) { .cms-b-gallery { grid-template-columns: repeat(var(--cms-b-cols, 3), 1fr); } }
.cms-b-gallery__item img { display: block; width: 100%; aspect-ratio: 4 / 3; border-radius: 12px; object-fit: cover; transition: transform .2s ease; }
.cms-b-gallery__item:hover img { transform: scale(1.02); }

.cms-b-buttons { display: flex; flex-wrap: wrap; gap: 12px; }
.cms-b-button { display: inline-flex; min-height: 48px; align-items: center; padding: 0 22px; border-radius: 999px; font-weight: 700; text-decoration: none; transition: transform .15s ease, background .15s ease; }
.cms-b-button--primary { color: var(--b-on-primary); background: var(--b-primary); }
.cms-b-button--primary:hover { color: var(--b-on-primary); background: var(--b-primary-dark); }
.cms-b-button--secondary { color: var(--b-ink); background: #fff; box-shadow: inset 0 0 0 1px var(--b-line); }
.cms-b-button--link { min-height: 0; padding: 0; color: var(--b-primary); }
.cms-b-section--primary .cms-b-button--primary, .cms-b-section--dark .cms-b-button--primary, .cms-b-section--image .cms-b-button--primary { color: var(--b-ink); background: #fff; }

.cms-b-video { position: relative; overflow: hidden; border-radius: var(--b-radius); background: #000; aspect-ratio: 16 / 9; }
.cms-b-video iframe, .cms-b-video video { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

.cms-b-cards { display: grid; grid-template-columns: 1fr; gap: 20px; text-align: left; }
@media (min-width: 640px) { .cms-b-cards { grid-template-columns: repeat(min(2, var(--cms-b-cols, 3)), 1fr); } }
@media (min-width: 980px) { .cms-b-cards { grid-template-columns: repeat(var(--cms-b-cols, 3), 1fr); } }
.cms-b-card { display: flex; flex-direction: column; overflow: hidden; border-radius: var(--b-radius); color: var(--b-ink); background: #fff; }
.cms-b-cards--bordered .cms-b-card { box-shadow: inset 0 0 0 1px var(--b-line); }
.cms-b-cards--shadow .cms-b-card { box-shadow: 0 12px 32px rgba(15, 23, 42, .08); }
.cms-b-cards--plain .cms-b-card { background: transparent; }
.cms-b-card__image { display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
.cms-b-card__body { display: grid; gap: 8px; padding: 20px 22px 24px; }
.cms-b-card__meta { margin: 0; color: var(--b-muted); font-size: 13px; }
.cms-b-card__title { margin: 0; font-size: 19px; line-height: 1.3; }
.cms-b-card__title a { color: inherit; text-decoration: none; } .cms-b-card__title a:hover { color: var(--b-primary); }
.cms-b-card__text { margin: 0; color: var(--b-muted); line-height: 1.6; }

.cms-b-rows { display: grid; gap: 0; border-top: 1px solid var(--b-line); }
.cms-b-row { display: grid; grid-template-columns: auto 1fr; gap: 18px; align-items: center; padding: 18px 0; border-bottom: 1px solid var(--b-line); }
.cms-b-row .cms-b-card__image { width: 96px; aspect-ratio: 1; border-radius: 12px; }
.cms-b-row .cms-b-card__body { padding: 0; }
.cms-b-row:not(:has(img)) { grid-template-columns: 1fr; }

.cms-b-table-wrap { overflow-x: auto; border: 1px solid var(--b-line); border-radius: 12px; }
.cms-b-table { width: 100%; border-collapse: collapse; font-size: 15px; }
.cms-b-table th, .cms-b-table td { padding: 12px 16px; border-bottom: 1px solid var(--b-line); text-align: left; }
.cms-b-table th { color: var(--b-muted); background: var(--b-surface); font-size: 13px; font-weight: 700; }
.cms-b-table tr:last-child td { border-bottom: 0; }

.cms-b-list__empty { color: var(--b-muted); }
.cms-b-pager { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 24px; }
.cms-b-pager__item { display: inline-grid; min-width: 40px; height: 40px; place-items: center; padding: 0 10px; border-radius: 10px; color: var(--b-ink); box-shadow: inset 0 0 0 1px var(--b-line); text-decoration: none; }
.cms-b-pager__item.is-current { color: var(--b-on-primary); background: var(--b-primary); box-shadow: none; }

.cms-b-spacer--sm { height: 16px; } .cms-b-spacer--md { height: 40px; } .cms-b-spacer--lg { height: 72px; } .cms-b-spacer--xl { height: 120px; }
.cms-b-divider { height: 1px; margin: 8px 0; border: 0; background: var(--b-line); }
.cms-b-error { padding: 12px; border-radius: 10px; color: #991b1b; background: #fef2f2; font: 13px/1.5 ui-monospace, Menlo, monospace; white-space: pre-wrap; }
.cms-b-preview { position: sticky; top: 0; z-index: 50; padding: 8px 16px; color: #78350f; background: #fef3c7; font: 600 13px/1.4 system-ui, sans-serif; text-align: center; }