/* Shared public-side defaults for content fields. Loaded on every page so
 * themes don't have to re-implement the four image-field knobs (width,
 * align, radius, fit). Themes can override any of these.
 *
 * Selectors are scoped tightly to figure.field-image / .field-gallery so
 * they don't collide with theme styles.
 */

/* ───── Image field: width presets ───── */
figure.field-image[data-width="small"]  { max-width: 280px; }
figure.field-image[data-width="medium"] { max-width: 600px; }
figure.field-image[data-width="large"]  { max-width: 880px; }
figure.field-image[data-width="full"]   { max-width: 100%; }

/* ───── Image field: alignment ─────
 * Horizontal placement within its container. Themes wanting side-by-side
 * image+text wrap the page region in a CSS grid or flexbox themselves.
 */
figure.field-image                      { display: block; }
figure.field-image[data-align="left"]   { margin-left: 0;    margin-right: auto; }
figure.field-image[data-align="center"] { margin-left: auto; margin-right: auto; }
figure.field-image[data-align="right"]  { margin-left: auto; margin-right: 0; }

/* ───── Gallery field: width + columns ───── */
.field-gallery[data-width="medium"] { max-width: 600px; margin-left: auto; margin-right: auto; }
.field-gallery[data-width="large"]  { max-width: 880px; margin-left: auto; margin-right: auto; }
.field-gallery[data-width="full"]   { max-width: 100%; }

.field-gallery {
    display: grid;
    gap: 14px;
}
.field-gallery[data-columns="auto"] { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.field-gallery[data-columns="2"]    { grid-template-columns: repeat(2, 1fr); }
.field-gallery[data-columns="3"]    { grid-template-columns: repeat(3, 1fr); }
.field-gallery[data-columns="4"]    { grid-template-columns: repeat(4, 1fr); }

/* ───── Image field: corner radius ───── */
figure.field-image img                       { width: 100%; height: auto; display: block; }
figure.field-image[data-radius="none"]   img { border-radius: 0; }
figure.field-image[data-radius="small"]  img { border-radius: 4px; }
figure.field-image[data-radius="large"]  img { border-radius: 16px; }
figure.field-image[data-radius="circle"] img { border-radius: 50%; aspect-ratio: 1 / 1; object-fit: cover; }

/* ───── Image field: fit ───── */
figure.field-image[data-fit="auto"]  img { aspect-ratio: auto; object-fit: initial; }
figure.field-image[data-fit="cover"] img { aspect-ratio: 4 / 3; object-fit: cover; }

/* When circle radius is set, force fit to cover so the image stays round. */
figure.field-image[data-radius="circle"] img { object-fit: cover; }