@layer infine.components {
/* ===========================================================
   Title bar — the header a module's page opens on (infine.title-bar),
   drawn by every Connect page and by CO₂.
   Variants differ only in icon glyph, eyebrow, primary/secondary text,
   and the optional notice, backlink and trailing control.
   =========================================================== */

.infine-title-bar {
    width: 100%;
    display: flex;
    /* Anchor the icon-circle next to the eyebrow + heading so that adding a
       backlink row inside the titles column doesn't drag the icon downward. */
    align-items: flex-start;
    gap: var(--mantine-spacing-xl);
    padding: 56px var(--mantine-spacing-xl) 24px var(--mantine-spacing-xl);
    color: var(--infine-blue);
    font-family: var(--mantine-font-family-headings);
    box-sizing: border-box;
}

/* A heading with neither an eyebrow nor a backlink is one line, which sits level with the disc's middle
   rather than its top edge. */
.infine-title-bar--single-line {
    align-items: center;
}

.infine-title-bar__icon-circle {
    height: 70px;
    width: 70px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 35px;
    background-color: var(--infine-blue-light-fade);
    margin-left: var(--mantine-spacing-sm);
    flex-shrink: 0;
}

.infine-title-bar__titles {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.infine-title-bar__eyebrow {
    text-transform: uppercase;
    font-weight: 400;
    font-size: var(--mantine-font-size-xs);
    line-height: 14px;
}

.infine-title-bar__eyebrow-tail {
    text-transform: none;
    font-style: italic;
}

.infine-title-bar__heading {
    display: flex;
    align-items: baseline;
    gap: var(--mantine-spacing-md);
    font-weight: 300;
    font-size: 40px;
    line-height: 48px;
    min-width: 0;
}

.infine-title-bar__primary {
    font-weight: 600;
    white-space: nowrap;
}

.infine-title-bar__divider {
    color: var(--mantine-color-gray-3);
    flex-shrink: 0;
}

.infine-title-bar__secondary {
    color: var(--infine-blue);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}

.infine-title-bar__trailing {
    margin-left: auto;
    flex-shrink: 0;
    align-self: center;
}

/* A line every view of the page carries, such as what its results may be used for, set as the note beside the hero
   of Connect's Get insights page sets its own text (.ci-hero__note in connect-insights.css), without its rule. */
.infine-title-bar__notice {
    margin-top: 12px;
    max-width: 700px;
    font-family: var(--mantine-font-family);
    font-size: 15px;
    line-height: 1.6;
    color: var(--infine-gray-active);
}

.infine-title-bar__backlink {
    /* One-step-up backlink rendered as a tight sub-row directly under the
       heading. Negative left margin cancels Mantine's button padding so the
       chevron aligns with the eyebrow's left edge; near-zero top margin
       keeps the link visually anchored to the heading. */
    margin-top: 2px;
    margin-left: calc(-1 * var(--mantine-spacing-sm));
}
}