/* JO Form heading field (3.1.14). jof-prefixed; display-only title + optional accent.
   Before/After match JO Layout Builder: accent lives inside the heading tag as a flex row.
   Fluid + inline: the row must span the full column so flex:1 on the accent can grow. */
.jof-form-group:has(.jof-heading) > .jof-label {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.jof-heading {
    display: grid;
    gap: 0.5rem;
    justify-items: start;
}

.jof-heading__title {
    margin: 0;
    font-weight: 600;
    line-height: 1.25;
}

.jof-heading__accent {
    display: block;
    flex-shrink: 0;
    max-width: 100%;
    box-sizing: border-box;
}

/* JOLB inline pattern: the heading tag is the flex row. */
.jof-heading--inline .jof-heading__row {
    display: flex;
    align-items: center;
    max-width: 100%;
    box-sizing: border-box;
}

.jof-heading--inline .jof-heading__text {
    display: inline-block;
    flex: 0 1 auto;
    min-width: 0;
}

.jof-heading--inline .jof-heading__accent {
    align-self: center;
}

/* Above/Below fluid: accent fills the column. */
.jof-heading--fluid:not(.jof-heading--inline) .jof-heading__accent {
    width: 100% !important;
}

/* Before/After fluid (JOLB Image Card / Heading): stretch the row so the
   accent's flex:1 1 auto (set inline) can fill leftover space. */
.jof-heading--fluid.jof-heading--inline {
    justify-items: stretch;
}

.jof-heading--fluid.jof-heading--inline .jof-heading__row {
    width: 100%;
}