/*
 * layout.css
 * Page level spacing rhythm: the blocks a page is assembled from.
 */

/*
 * Panel heading: the block that wraps a panel's heading.
 *
 * Put the actual heading element inside it and keep the page's own structure:
 *
 *     <div class="ajus-panel-heading">
 *         <h1 class="ajus-h1">Panel title</h1>
 *     </div>
 *
 * The block carries the margin and padding, so the optional divider never sits
 * on the text — add the rule modifier when the heading stands alone:
 *
 *     <div class="ajus-panel-heading ajus-panel-heading--rule">
 *         <h1 class="ajus-h1">Panel title</h1>
 *     </div>
 */

.ajus-panel-heading {
    margin: 1.15rem 0 1rem;
    padding-bottom: 0.75rem;
}

/* the block owns the spacing — the heading inside must not add its own */
.ajus-panel-heading > :first-child {
    margin-top: 0;
}

.ajus-panel-heading > :last-child {
    margin-bottom: 0;
}

.ajus-panel-heading--rule {
    border-bottom: 1px solid var(--color-border-soft);
}

@media (max-width: 575.98px) {
    .ajus-panel-heading {
        margin: 0.9rem 0 0.8rem;
        padding-bottom: 0.6rem;
    }
}

/* --------------------------------------------------------------------------
   Section rhythm
   A page is a stack of sections. The section owns the vertical gap, so no
   page needs ad-hoc mt-* / mb-* between its blocks.
-------------------------------------------------------------------------- */
.ajus-section {
    margin-bottom: 1.5rem;
}

.ajus-section:last-child {
    margin-bottom: 0;
}

.ajus-section-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-bottom: 0.85rem;
}

.ajus-section-head__title {
    margin: 0;
}

.ajus-section-head__actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-left: auto;
}

.ajus-section-body {
    min-width: 0;
}

/* Rule between two blocks of a page or card. */
.ajus-divider {
    margin: 1.15rem 0;
    border: 0;
    border-top: 1px solid var(--color-border-soft);
}

.ajus-divider--dashed {
    border-top-style: dashed;
}

/* --------------------------------------------------------------------------
   Flex rhythm
   Bootstrap 4 has no gap utilities — these two cover the common cases and
   read better than a pile of margin utilities.
-------------------------------------------------------------------------- */
.ajus-stack {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.ajus-stack--sm {
    gap: 0.6rem;
}

.ajus-inline {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.6rem;
}

.ajus-inline--between {
    justify-content: space-between;
}

.ajus-inline--end {
    justify-content: flex-end;
}

/* --------------------------------------------------------------------------
   Splash overlay (components/splash.twig)
-------------------------------------------------------------------------- */
.ajus-splash {
    position: fixed;
    top: 0;
    left: 0;
    z-index: var(--z-splash);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    height: 100%;
    background: var(--color-bg-surface);
}

.ajus-splash__main {
    display: flex;
    flex-grow: 1;
    align-items: center;
    justify-content: center;
    width: 100%;
}

.ajus-splash__logo {
    width: 40vw;
    max-width: 180px;
    height: auto;
}

.ajus-splash__foot {
    margin-bottom: 1.5rem;
    text-align: center;
}

.ajus-splash__from {
    display: block;
    margin-bottom: 0.25rem;
    font-size: 1rem;
    color: var(--color-text-muted);
}

.ajus-splash__brand {
    height: 28px;
}