/* ─── Section Band Block — louisbourg/section-band ─── */
/* The single home for article band chrome: the full-bleed breakout, the
   background variants, the measured inner column, and the in-band treatment
   of the blocks that live here (Section Heading, core/table, group labels,
   small print). Nothing else in the theme should reimplement these.         */

.wp-block-louisbourg-section-band {
    position: relative;
    padding-block: 80px;
    margin-block: 56px;
    margin-inline: calc(50% - 50vw);
    width: 100vw;
    max-width: 100vw;
}

/* Beat `.article-body .prose-content > *`, which pins children to the prose
   measure with margin-inline: auto. */
.article-body .prose-content > .wp-block-louisbourg-section-band {
    max-width: 100vw;
    margin-inline: calc(50% - 50vw);
}

/* Consecutive bands butt together — see "Full-bleed bands butt together" in
   the theme stylesheet. The rule lives there rather than here because it has
   to cover Content With Numbers too, and this file is only enqueued on pages
   that actually contain a Section Band. */

/* Two hairlines meeting at the seam render as a 2px rule — drop the second. */
.wp-block-louisbourg-section-band + .wp-block-louisbourg-section-band.has-rules {
    border-top: none;
}

/* ─── Background variants ─── */

.wp-block-louisbourg-section-band.is-bg-white { background: #fff; }
.wp-block-louisbourg-section-band.is-bg-paper { background: var(--paper); }
.wp-block-louisbourg-section-band.is-bg-bone  { background: var(--bone); }

.wp-block-louisbourg-section-band.has-rules {
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
}

/* ─── Inner measure ─── */

.wp-block-louisbourg-section-band .lb-band__inner {
    max-width: 820px;
    margin: 0 auto;
    padding: 0 40px;
}

.wp-block-louisbourg-section-band.is-width-prose .lb-band__inner {
    max-width: var(--prose-max-width);
}

.wp-block-louisbourg-section-band.is-width-container .lb-band__inner {
    max-width: var(--max);
}

/* ─── Section Heading, in band context ───
   The standalone block is sized for full-page sections; inside an article
   band it steps down a scale and holds the prose measure. Overrides the
   .container class that section-heading's render.php applies.              */

.wp-block-louisbourg-section-band .sh {
    max-width: var(--prose-max-width);
    margin: 0 auto 44px;
    padding-left: 0;
    padding-right: 0;
}

.wp-block-louisbourg-section-band .sh.container {
    max-width: var(--prose-max-width);
    padding-left: 0;
    padding-right: 0;
}

.wp-block-louisbourg-section-band .sh .eyebrow-wrapper {
    margin-bottom: 16px;
}

.wp-block-louisbourg-section-band .sh h2 {
    font-size: clamp(24px, 3vw, 36px);
    margin-bottom: 14px;
}

.wp-block-louisbourg-section-band .sh-description {
    font-size: 16.5px;
    max-width: none;
}

/* ─── Table group label ─── */

.wp-block-louisbourg-section-band .table-group-label {
    font-family: var(--sans);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--grey);
    padding: 18px 0 10px;
    border-bottom: 2px solid var(--ink);
    margin: 0;
}

/* ─── core/table, restyled as the data table ─── */

.wp-block-louisbourg-section-band .wp-block-table {
    margin: 0 0 40px;
    overflow-x: auto;
}

/* Cells top-align: a one-line cell next to a three-line cell should start
   level with it, not float in the middle. */
.wp-block-louisbourg-section-band .wp-block-table :is( th, td ) {
    vertical-align: top;
}

.wp-block-louisbourg-section-band .wp-block-table table {
    width: 100%;
    border-collapse: collapse;
    font-family: var(--sans);
    border: 0;
}

.wp-block-louisbourg-section-band .wp-block-table thead {
    border-bottom: 0;
}

.wp-block-louisbourg-section-band .wp-block-table thead tr {
    background: var(--ink);
}

.wp-block-louisbourg-section-band .wp-block-table th {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .75);
    padding: 14px 18px;
    text-align: left;
    border: 0;
}

/* Columns read as text by default: left-aligned, regular weight. A table of
   figures says so by picking the "Figures" style, which restores the
   right-aligned bold treatment this used to apply to everything. */

.wp-block-louisbourg-section-band .wp-block-table tbody tr {
    border-bottom: 1px solid var(--line-soft);
}

.wp-block-louisbourg-section-band .wp-block-table tbody tr:hover {
    background: var(--bone);
}

.wp-block-louisbourg-section-band .wp-block-table tbody td {
    font-size: 15px;
    color: var(--text);
    padding: 14px 18px;
    border: 0;
}



/* ─── Figures treatment ─── */
/* The old default, now opt-in. Columns of numbers want to be right-aligned so
   the digits line up, and bold so the figure carries. Comparison implies it —
   a comparison is numeric by definition.

   Alignment still steps aside for any cell the author has aligned by hand. */

:is(
    .wp-block-louisbourg-section-band.is-comparison .wp-block-table,
    .wp-block-louisbourg-section-band .wp-block-table.is-style-figures,
    .wp-block-louisbourg-section-band .wp-block-table.is-style-comparison
) :is( thead th, tbody td, tfoot td ):not(:first-child):not([class*="has-text-align"]) {
    text-align: right;
}

:is(
    .wp-block-louisbourg-section-band.is-comparison .wp-block-table,
    .wp-block-louisbourg-section-band .wp-block-table.is-style-figures,
    .wp-block-louisbourg-section-band .wp-block-table.is-style-comparison
) tbody td:not(:first-child) {
    font-weight: 700;
}

/* Comparison column accents. Pick "Comparison" on the Table block itself, or
   leave the older band-level Tables setting in place — both land here. */

:is(
    .wp-block-louisbourg-section-band.is-comparison .wp-block-table,
    .wp-block-louisbourg-section-band .wp-block-table.is-style-comparison
) tbody td:nth-child(2) {
    color: #1a5276;
}

:is(
    .wp-block-louisbourg-section-band.is-comparison .wp-block-table,
    .wp-block-louisbourg-section-band .wp-block-table.is-style-comparison
) tbody td:nth-child(3) {
    color: #5b4f00;
}

/* Footer row */

.wp-block-louisbourg-section-band .wp-block-table tfoot {
    border-top: 0;
}

.wp-block-louisbourg-section-band .wp-block-table tfoot tr {
    background: var(--bone);
    border-top: 2px solid var(--ink);
}

.wp-block-louisbourg-section-band .wp-block-table tfoot td {
    font-size: 15px;
    font-weight: 700;
    color: var(--ink);
    padding: 16px 18px;
    border: 0;
}



.wp-block-louisbourg-section-band .wp-block-table figcaption {
    font-family: var(--sans);
    font-size: 12px;
    color: var(--grey-soft);
    text-align: left;
    margin-top: 10px;
}

/* ─── Last child stops short of the band's own padding ─── */
/* A band already ends in 80px of padding. When its last block also carries a
   bottom margin — Versus Columns' 40px, a table's, a grid's — the two stack
   and the band ends in 120px of nothing, which reads as a gap rather than as
   the band's rhythm. The band owns the space below its content. */

.wp-block-louisbourg-section-band .lb-band__inner > *:last-child {
    margin-bottom: 0;
}

/* ─── Body copy inside a band ─── */

/* Direct children only — the Section Heading's own description keeps its
   size, and paragraphs nested in charts or tables keep theirs. */
.wp-block-louisbourg-section-band .lb-band__inner > p {
    font-family: var(--sans);
    font-size: 16px;
    color: var(--grey);
    line-height: 1.7;
}

/* Small print — core/paragraph "Small Print" style. Its type is set in the
   theme stylesheet (see "Small Print") so it holds wherever the paragraph
   sits; only the spacing is a band concern.

   The pull-up is for tables, whose bottom margin leaves the source line
   stranded. It used to apply to every small-print line in a band, which
   dragged the line under a chart up into the chart's own legend. */
.wp-block-louisbourg-section-band .is-style-small-print {
    margin-top: 20px;
}

.wp-block-louisbourg-section-band .wp-block-table + .is-style-small-print {
    margin-top: -24px;
}

@media (max-width: 768px) {
    .wp-block-louisbourg-section-band {
        padding-block: 60px;
        margin-block: 44px;
    }

    .wp-block-louisbourg-section-band .lb-band__inner {
        padding-left: 22px;
        padding-right: 22px;
    }

    .wp-block-louisbourg-section-band .wp-block-table table {
        min-width: 520px;
    }

    .wp-block-louisbourg-section-band .wp-block-table th,
    .wp-block-louisbourg-section-band .wp-block-table tbody td,
    .wp-block-louisbourg-section-band .wp-block-table tfoot td {
        padding-left: 12px;
        padding-right: 12px;
    }
}


/* ─── Row Labels treatment ─── */
/* Columns already read as text by default, so this treatment is only about
   the first column: it becomes the row's label rather than another cell.
   Bold, held to a narrow measure, and an italic run on its own line at the
   top of it becomes a small maroon kicker.

   The older "Text Columns" and "Cost" names, and the band-level Cost setting,
   all resolve here — they described the same thing back when plain text was
   the opt-in rather than the default. */

:is(
    .wp-block-louisbourg-section-band.is-cost-table .wp-block-table,
    .wp-block-louisbourg-section-band .wp-block-table.is-style-cost,
    .wp-block-louisbourg-section-band .wp-block-table.is-style-text-columns,
    .wp-block-louisbourg-section-band .wp-block-table.is-style-row-labels
) tbody td:first-child {
    font-weight: 700;
    color: var(--ink);
    width: 22%;
}

:is(
    .wp-block-louisbourg-section-band.is-cost-table .wp-block-table,
    .wp-block-louisbourg-section-band .wp-block-table.is-style-cost,
    .wp-block-louisbourg-section-band .wp-block-table.is-style-text-columns,
    .wp-block-louisbourg-section-band .wp-block-table.is-style-row-labels
) tbody td:first-child em {
    display: block;
    font-family: var(--serif);
    font-style: italic;
    font-weight: 400;
    font-size: 13px;
    color: var(--maroon);
    margin-bottom: 4px;
}

@media (max-width: 768px) {
    :is(
        .wp-block-louisbourg-section-band.is-cost-table .wp-block-table,
        .wp-block-louisbourg-section-band .wp-block-table.is-style-cost,
        .wp-block-louisbourg-section-band .wp-block-table.is-style-text-columns,
        .wp-block-louisbourg-section-band .wp-block-table.is-style-row-labels
) tbody td:first-child {
        width: auto;
    }
}