/*
 * TRB snippet kit — layout helpers for HTML snippets in page or person content.
 *
 * Values are measured from the /style-guide/ sections (64px section padding,
 * 1313px content width with a 32px gutter, 32px grid gap, 3 → 2 → 1 columns at
 * the site's tablet/phone breakpoints, 10px-radius white cards with the blog
 * card shadow). Typography, `.tagline` and the `button-atom button-atom--primary`
 * / `--secondary` buttons come from the site's global styles — don't restyle
 * them here.
 */

/* Full-width background band = one page section. */
.trb-band {
    box-sizing: border-box;
    width: 100%;
    padding-block: 64px;
}
.trb-band--roomy { padding-block: 96px; }
.trb-band--light-blue { background: #e0e8ed; }
.trb-band--cream { background: #f4f1ed; }
.trb-band--blue { background: #003c69; color: #fff; }
.trb-band--blue :is(h1, h2, h3, h4, h5, h6, .tagline, a:not(.button-atom)) { color: #fff; }

/* Content width inside a band. */
.trb-container {
    box-sizing: border-box;
    width: min(1313px, 100% - 64px);
    margin-inline: auto;
}
.trb-container--narrow { width: min(860px, 100% - 64px); }

.trb-center { text-align: center; }
.trb-center .trb-buttons { justify-content: center; }

/* Columns: matches the style guide "3 Column Grid" (3 → 2 at ≤1023 → 1 at ≤767). */
.trb-grid {
    display: grid;
    gap: 32px;
    grid-template-columns: repeat(var(--trb-cols, 3), minmax(0, 1fr));
}
.trb-grid--1 { --trb-cols: 1; }
.trb-grid--2 { --trb-cols: 2; }
.trb-grid--3 { --trb-cols: 3; }
.trb-grid--4 { --trb-cols: 4; }
@media (max-width: 1023px) {
    .trb-grid--3, .trb-grid--4 { --trb-cols: 2; }
}
@media (max-width: 767px) {
    .trb-grid { --trb-cols: 1; }
}

/* White card — same radius and shadow as the blog cards and contact pills. */
.trb-card {
    box-sizing: border-box;
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, .145);
    padding: 32px;
    color: #001729;
}
.trb-card > :last-child { margin-bottom: 0; }

/* Content image — the style guide's 10px-radius photo. */
.trb-image {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 10px;
}

/* Large pull-quote / testimonial text. */
.trb-quote {
    font-size: 1.5rem;
    line-height: 1.4;
    font-weight: 500;
    color: #003c69;
    margin: 0 0 16px;
}
.trb-card .trb-quote { font-size: 1.125rem; }

/* Row of buttons (or small_outlined_button tags). */
.trb-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    align-items: center;
    margin: 16px 0;
}

/*
 * Core Gutenberg buttons — the Buttons block and the File block's Download
 * button — drawn as the site's button-atom pills (blue, ink on hover), so
 * editors can use native blocks instead of HTML. The "Bronze" block style
 * (class-snippet-shortcodes.php) is the secondary button. Colors picked in the
 * block sidebar still win: preset classes are !important, custom colors inline.
 * Palette vars are Breakdance's, with the hex as fallback (block editor).
 * The core Outline style keeps its own border and transparent fill.
 */
.wp-block-button .wp-block-button__link,
.wp-block-file .wp-block-file__button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    padding: var(--bde-button-padding-base, 14px 24px);
    border-radius: 25px;
    font-family: inherit;
    font-size: var(--bde-button-font-size, 1rem);
    font-weight: var(--bde-button-font-weight, 500);
    line-height: var(--bde-button-line-height, 1);
    text-align: center;
    text-decoration: none;
    transition: all var(--bde-transition-duration, 200ms) ease-in-out;
}
.wp-block-button:not(.is-style-outline) .wp-block-button__link,
.wp-block-file .wp-block-file__button {
    border: 1px solid transparent;
    background: var(--bde-palette-color-1-7927f54e-f7cf-418a-961f-da30b0a3f50a, #003c69);
    color: #fff;
}
.wp-block-button.is-style-trb-secondary .wp-block-button__link,
.wp-block-file.is-style-trb-secondary .wp-block-file__button {
    background: var(--bde-palette-color-1-27b01945-14e6-4025-9637-d229a549b8e3, #7a5f42);
}
.wp-block-button:not(.is-style-outline) .wp-block-button__link:hover,
.wp-block-file .wp-block-file__button:hover,
.wp-block-button.is-style-trb-secondary .wp-block-button__link:hover,
.wp-block-file.is-style-trb-secondary .wp-block-file__button:hover {
    background: var(--bde-palette-color-1-d26b2c44-020c-4e25-afb3-3e199f653f95, #001729);
    color: #fff;
}
/* A row of them (Buttons block, or File blocks in a Row group) gets the
   .trb-buttons gap; WordPress's default is 0.5em and with no theme.json the
   block's own spacing setting isn't output. */
.wp-block-buttons.is-layout-flex,
.wp-block-group.is-layout-flex:has(> .wp-block-file) {
    gap: 16px;
}

/* Space between a section intro and the grid/cards below it. */
.trb-container > :not(.trb-grid) + .trb-grid { margin-top: 32px; }

/* [trb_posts]: let each Breakdance card fill its grid cell. */
.trb-posts__item { display: flex; min-width: 0; }
.trb-posts__item > * { flex: 1 1 auto; width: 100%; }
.trb-posts-feed > .trb-posts { margin-top: 32px; }

/*
 * Flow layout for content a template renders full width (People bios):
 * plain content sits in an 860px reading column; .trb-band sections (and
 * .trb-full blocks) run edge to edge.
 */
.trb-content { width: 100%; }
.trb-content > :not(.trb-band):not(.trb-full):not(.trb-page) {
    box-sizing: border-box;
    width: min(860px, 100% - 64px);
    margin-inline: auto;
}
.trb-content > :not(.trb-band):not(.trb-full):not(.trb-page):first-child { margin-top: 64px; }
.trb-content > :not(.trb-band):not(.trb-full):not(.trb-page):last-child { margin-bottom: 64px; }
.trb-content > .trb-band:first-child { margin-top: 0; }