/*
  Layout primitives and accessibility utilities. Composition-neutral building blocks (l- = layout, u- = utility).
  Client designs are free to ignore these for bespoke layouts.
*/
body { font-family: var(--font-body); background: var(--color-bg); color: var(--color-text); }

/* Layout */
.l-container { width: min(100% - 2 * var(--gutter), var(--container-max)); margin-inline: auto; }
.l-stack { display: flex; flex-direction: column; gap: var(--stack-gap, var(--space-m)); }
.l-cluster { display: flex; flex-wrap: wrap; gap: var(--space-s); align-items: center; }
.l-grid { display: grid; gap: var(--space-m); grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--grid-min, 16rem)), 1fr)); }
.l-split { display: grid; gap: var(--space-l); align-items: center; }
@media (min-width: 60rem) { .l-split { grid-template-columns: 1fr 1fr; } .is-image-end .l-split > :first-child { order: 2; } }
.l-prose { max-width: 68ch; }
.l-prose > * + * { margin-top: 1em; }

/* Section spacing options chosen in the Studio */
.c-section { padding-block: var(--section-space); }
.c-section.is-spacing-compact { padding-block: calc(var(--section-space) * 0.5); }
.c-section.is-spacing-spacious { padding-block: calc(var(--section-space) * 1.6); }
.c-section.is-centered { text-align: center; }

/* Accessibility utilities */
.u-visually-hidden {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.u-skip-link { position: absolute; left: 0.5rem; top: -100%; z-index: 100; padding: 0.75rem 1rem; background: var(--color-bg); color: var(--color-text); }
.u-skip-link:focus { top: 0.5rem; }
:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 3px; }
main:focus { outline: none; }
.u-todo { background: #ffe58a; color: #000; }

/* Interactive minimums */
a, button, input, select, textarea { touch-action: manipulation; }
.c-button, .c-nav a, .c-mobile-actions a { min-height: var(--touch-target); display: inline-flex; align-items: center; }

/* Small-screen action bar: visible on phones only (client CSS decides the look) */
.c-mobile-actions { display: none; }
@media (max-width: 47.99rem) {
  .c-mobile-actions { display: flex; position: sticky; bottom: 0; gap: var(--space-s); justify-content: space-around; padding: 0.5rem; background: var(--color-bg); }
}

/* Form states (structure only) */
.c-field { display: grid; gap: 0.35rem; }
.c-field__error { font-weight: 600; }
[aria-invalid='true'] { outline: 2px solid; }