/* ==========================================================================
   Section furniture — headings and the closing CTA
   ========================================================================== */

.section-heading {
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
    margin-block-end: var(--space-10);
}

.section-heading__title {
    max-inline-size: 22ch;
    margin-block-start: var(--space-4);
    font-size: var(--font-size-3xl);
}

.section-heading__lead {
    max-inline-size: 52ch;
    margin-block-start: var(--space-4);
    color: var(--color-text-secondary);
    font-size: var(--font-size-lg);
    line-height: var(--line-height-relaxed);
}

/* The link sits beside the title on wide screens, below it on narrow ones. */
@media (min-width: 768px) {
    .section-heading {
        flex-direction: row;
        align-items: flex-end;
        justify-content: space-between;
        gap: var(--space-10);
    }

    .section-heading__link {
        flex-shrink: 0;
        padding-block-end: var(--space-2);
    }
}

/* --------------------------------------------------------------------------
   Closing CTA
   A solid warm band with editorial type — deliberately not a gradient banner
   (DESIGN.md 4).
   -------------------------------------------------------------------------- */

.cta-panel {
    background-color: var(--color-surface-sunken);
    border-block: var(--border-subtle);
}

.cta-panel__inner {
    text-align: center;
}

.cta-panel__title {
    max-inline-size: 20ch;
    margin: var(--space-5) auto 0;
    font-size: var(--font-size-4xl);
}

.cta-panel__lead {
    max-inline-size: 48ch;
    margin: var(--space-6) auto 0;
    color: var(--color-text-secondary);
    font-size: var(--font-size-lg);
    line-height: var(--line-height-relaxed);
}

.cta-panel__actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-4);
    margin-block-start: var(--space-10);
}

.cta-panel__direct {
    margin-block-start: var(--space-8);
    color: var(--color-text-secondary);
    font-size: var(--font-size-sm);
}

.cta-panel__direct a {
    color: var(--color-text-primary);
    text-decoration: none;
}

.cta-panel__direct a:hover {
    color: var(--color-accent-text);
    text-decoration: underline;
    text-underline-offset: 0.25em;
}

/* --------------------------------------------------------------------------
   Breadcrumbs
   -------------------------------------------------------------------------- */

.breadcrumbs {
    padding-block: var(--space-5);
}

.breadcrumbs__list {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
    list-style: none;
    margin: 0;
    padding: 0;
    color: var(--color-text-secondary);
    font-size: var(--font-size-xs);
    letter-spacing: var(--letter-spacing-wide);
}

.breadcrumbs__item {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.breadcrumbs__list a {
    /* Padded to clear the 24px minimum target size: the text is only 17px tall
       and a breadcrumb is a real navigation control, not incidental prose. */
    display: inline-flex;
    align-items: center;
    min-block-size: 1.5rem;
    color: var(--color-text-secondary);
    text-decoration: none;
}

.breadcrumbs__list a:hover {
    color: var(--color-accent-text);
    text-decoration: underline;
    text-underline-offset: 0.25em;
}

.breadcrumbs__separator {
    /* Quiet, but not below the contrast floor. --color-border-strong is rated
       for borders, not text, and measured 3.16:1 here. The separator is marked
       aria-hidden and would arguably qualify as decoration, but a character
       that is visibly rendered is cheaper to make legible than to argue about. */
    color: var(--color-text-secondary);
}

/* The current page is not a link; it should still read as the destination. */
.breadcrumbs__item [aria-current="page"] {
    color: var(--color-text-primary);
}