/* Platform-wide section component (booking page redesign, 2026-10-03).

   A section is a block of content on a surface that already has a frame — a
   pane inside the page's one card. It draws no box of its own: a hairline
   between neighbours and a small sentence-case heading are the whole
   separation, so there is never a card inside a card.

       <section class="global-section">
         <h2 class="global-section__title">Money</h2>
         <div class="global-section__body">…</div>
       </section>

   `.global-section-grid` lays sections out in two equal columns on a wide
   screen and one column under 768px. Each column is a plain wrapper holding a
   stack of sections; a lone column takes the full width. */

.global-section {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
    min-width: 0;
    padding: var(--spacing-smd);
}

/* --flush: the content pads itself (a list of rows, a dropzone), so the section
   adds only the hairline. */
.global-section--flush {
    gap: 0;
    padding: 0;
}

.global-section + .global-section {
    border-top: 1px solid var(--color-border-hairline);
}

.global-section__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-sm);
}

.global-section__title {
    margin: 0;
    font-size: var(--font-size-md);
    font-weight: var(--font-weight-medium);
    color: var(--color-text);
}

.global-section__body {
    min-width: 0;
}

.global-section-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
}

.global-section-grid__col {
    min-width: 0;
}

.global-section-grid__col + .global-section-grid__col {
    border-left: 1px solid var(--color-border-hairline);
}

.global-section-grid > .global-section-grid__col:only-child {
    grid-column: 1 / -1;
}

@media (max-width: 767.98px) {
    .global-section-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .global-section-grid__col + .global-section-grid__col {
        border-left: 0;
        border-top: 1px solid var(--color-border-hairline);
    }
}