/* SAS Bootstrap Containers — frontend styles v1.1.0 */

/* ══════════════════════════════════════════════════════════════
   SECTION — full-width with inner constraint
══════════════════════════════════════════════════════════════ */
.wp-block-bcb-section {
    width:        100vw;
    position:     relative;
    left:         50%;
    margin-left:  -50vw;
    margin-right: -50vw;
}

.wp-block-bcb-section > .bcb-section-inner {
    max-width:     1150px;
    margin-left:   auto;
    margin-right:  auto;
    padding-left:  16px;
    padding-right: 16px;
}

/* Rows inside section must NOT break out — section is already full-width */
.wp-block-bcb-section .wp-block-bcb-columns {
    width:        auto !important;
    position:     static !important;
    left:         auto !important;
    margin-left:  0 !important;
    margin-right: 0 !important;
}
.wp-block-bcb-section .wp-block-bcb-columns .boot-block {
    max-width:     100% !important;
    padding-left:  0 !important;
    padding-right: 0 !important;
}

/* ══════════════════════════════════════════════════════════════
   BACKGROUND STRAPS (shared by section and row)
══════════════════════════════════════════════════════════════ */
.feature-strap   { background: var(--sas-row-background-feature); }
.secondary-strap { background: var(--sas-row-background-secondary); }
.odd-strap       { background: var(--sas-row-background-odd); }
.even-strap      { background: var(--sas-row-background-even); }
.gray-strap      { background: var(--sas-row-background-gray); }

/* ══════════════════════════════════════════════════════════════
   STRAP BLEED — extend background 20px beyond content edges via
   box-shadow (no layout/padding change, content stays in place).
   !important required to beat the section .boot-block reset below.
══════════════════════════════════════════════════════════════ */
.wp-block-bcb-columns.feature-strap   .boot-block,
.wp-block-bcb-columns.secondary-strap .boot-block,
.wp-block-bcb-columns.odd-strap       .boot-block,
.wp-block-bcb-columns.even-strap      .boot-block,
.wp-block-bcb-columns.gray-strap      .boot-block,
.wp-block-bcb-section .wp-block-bcb-columns.feature-strap   .boot-block,
.wp-block-bcb-section .wp-block-bcb-columns.secondary-strap .boot-block,
.wp-block-bcb-section .wp-block-bcb-columns.odd-strap       .boot-block,
.wp-block-bcb-section .wp-block-bcb-columns.even-strap      .boot-block,
.wp-block-bcb-section .wp-block-bcb-columns.gray-strap      .boot-block {
    box-shadow: 20px 0 0 0 var(--sas-strap-bg, transparent),
                -20px 0 0 0 var(--sas-strap-bg, transparent);
}

.wp-block-bcb-columns.feature-strap   .boot-block { --sas-strap-bg: var(--sas-row-background-feature); }
.wp-block-bcb-columns.secondary-strap .boot-block { --sas-strap-bg: var(--sas-row-background-secondary); }
.wp-block-bcb-columns.odd-strap       .boot-block { --sas-strap-bg: var(--sas-row-background-odd); }
.wp-block-bcb-columns.even-strap      .boot-block { --sas-strap-bg: var(--sas-row-background-even); }
.wp-block-bcb-columns.gray-strap      .boot-block { --sas-strap-bg: var(--sas-row-background-gray); }

/* ══════════════════════════════════════════════════════════════
   ROWS/COLUMNS — standalone (outside section)
══════════════════════════════════════════════════════════════ */
.wp-block-bcb-columns {
    width:        100vw;
    position:     relative;
    left:         50%;
    margin-left:  -50vw;
    margin-right: -50vw;
}
.wp-block-bcb-columns .boot-block {
    max-width:     1150px;
    margin-left:   auto;
    margin-right:  auto;
    padding-left:  16px;
    padding-right: 16px;
}

/* Row link */
.bcb-row-link { display: block; color: inherit; text-decoration: none; }
.bcb-row-link:hover { color: inherit; text-decoration: none; }

/* Column link */
.bcb-col-link { display: block; color: inherit; text-decoration: none; }
.bcb-col-link:hover { color: inherit; text-decoration: none; }

/* ── GROW ─────────────────────────────────────────────────── */

/* Default: columns start at natural height (no stretching) */
.wp-block-bcb-columns .row:not(.bcb-grow-cols) {
    align-items: flex-start;
}

/* Grow ON: force row to stretch-align so all columns match tallest */
.row.bcb-grow-cols {
    align-items: stretch;
}
.bcb-grow-cols > [class*="col-"] {
    align-self:  stretch;
    display:     flex;
    flex-direction: column;
}

/* Text alignment inside columns */
.wp-block-bcb-columns .has-text-align-center { text-align: center !important; }
.wp-block-bcb-columns .has-text-align-right  { text-align: right  !important; }
.wp-block-bcb-columns .has-text-align-left   { text-align: left   !important; }

/* ── COLUMN GAP (CSS Grid) ───────────────────────────────── */
.row.bcb-gap-1,
.row.bcb-gap-3,
.row.bcb-gap-5 {
    display:               grid !important;
    grid-template-columns: repeat(12, 1fr);
    --bs-gutter-x:         0;
    margin-left:           0 !important;
    margin-right:          0 !important;
}
.row.bcb-gap-1 { gap: 1em; }
.row.bcb-gap-3 { gap: 3em; }
.row.bcb-gap-5 { gap: 5em; }

.row.bcb-gap-1 > [class*="col-"],
.row.bcb-gap-3 > [class*="col-"],
.row.bcb-gap-5 > [class*="col-"] {
    width: auto !important; max-width: none !important; min-width: 0;
}

@media (min-width: 992px) {
    .row.bcb-gap-1 > .col-lg-1,  .row.bcb-gap-3 > .col-lg-1,  .row.bcb-gap-5 > .col-lg-1  { grid-column: span 1; }
    .row.bcb-gap-1 > .col-lg-2,  .row.bcb-gap-3 > .col-lg-2,  .row.bcb-gap-5 > .col-lg-2  { grid-column: span 2; }
    .row.bcb-gap-1 > .col-lg-3,  .row.bcb-gap-3 > .col-lg-3,  .row.bcb-gap-5 > .col-lg-3  { grid-column: span 3; }
    .row.bcb-gap-1 > .col-lg-4,  .row.bcb-gap-3 > .col-lg-4,  .row.bcb-gap-5 > .col-lg-4  { grid-column: span 4; }
    .row.bcb-gap-1 > .col-lg-5,  .row.bcb-gap-3 > .col-lg-5,  .row.bcb-gap-5 > .col-lg-5  { grid-column: span 5; }
    .row.bcb-gap-1 > .col-lg-6,  .row.bcb-gap-3 > .col-lg-6,  .row.bcb-gap-5 > .col-lg-6  { grid-column: span 6; }
    .row.bcb-gap-1 > .col-lg-7,  .row.bcb-gap-3 > .col-lg-7,  .row.bcb-gap-5 > .col-lg-7  { grid-column: span 7; }
    .row.bcb-gap-1 > .col-lg-8,  .row.bcb-gap-3 > .col-lg-8,  .row.bcb-gap-5 > .col-lg-8  { grid-column: span 8; }
    .row.bcb-gap-1 > .col-lg-9,  .row.bcb-gap-3 > .col-lg-9,  .row.bcb-gap-5 > .col-lg-9  { grid-column: span 9; }
    .row.bcb-gap-1 > .col-lg-10, .row.bcb-gap-3 > .col-lg-10, .row.bcb-gap-5 > .col-lg-10 { grid-column: span 10; }
    .row.bcb-gap-1 > .col-lg-11, .row.bcb-gap-3 > .col-lg-11, .row.bcb-gap-5 > .col-lg-11 { grid-column: span 11; }
    .row.bcb-gap-1 > .col-lg-12, .row.bcb-gap-3 > .col-lg-12, .row.bcb-gap-5 > .col-lg-12 { grid-column: span 12; }
}
@media (max-width: 991px) {
    .row.bcb-gap-1 > [class*="col-"],
    .row.bcb-gap-3 > [class*="col-"],
    .row.bcb-gap-5 > [class*="col-"] { grid-column: span 12; }

    /*
     * CRITICAL: Zero out column-gap on mobile.
     * When columns stack to span-12, the 12-column grid still has 11 column
     * gaps. At gap:5em that's 880px of gap — wider than any phone screen —
     * causing every child to overflow. column-gap:0 removes that entirely.
     * row-gap provides the vertical breathing room between stacked blocks.
     */
    .row.bcb-gap-1,
    .row.bcb-gap-3,
    .row.bcb-gap-5 {
        column-gap: 0;
        row-gap:    1.5em;
    }
}