/*
 * Content Section block — center/content-section
 * Full-width section with background variants.
 */

/* --- Wrapper --- */

.content-section {
    padding-block: var(--section-padding);
    margin-block: 0;
}

/* --- Inner constraint --- */

.content-section__inner {
    width: min(var(--max-width-content), 100% - 2 * var(--site-padding));
    margin-inline: auto;
}

/* Flow spacing between child blocks */

.content-section__content {
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
    container-type: inline-size;
}

.content-section__content > * {
    margin-block: 0;
    max-width: none;
}

/* Visual breaks keep their margin for a deliberate pause */
.content-section__content > .wp-block-separator,
.content-section__content > .wp-block-pullquote,
.content-section__content > .wp-block-quote,
.content-section__content > .wp-block-verse,
.content-section__content > figure.wp-block-image,
.content-section__content > figure.wp-block-audio,
.content-section__content > .wp-block-embed,
.content-section__content > .wp-block-file,
.content-section__content > .wp-block-details {
    margin-block: var(--space-block-break);
}

/* Consecutive details blocks — collapse to normal gap between them */
.content-section__content > .wp-block-details + .wp-block-details {
    margin-block-start: calc(-1 * var(--space-block-break));
}

/* Heading spacing — more space before a heading, less after */
.content-section__content > .wp-block-heading {
    margin-top: var(--space-4);
}

.content-section__content > *:first-child {
    margin-top: 0;
}

/* Heading followed by paragraph — slightly tighter than default gap */
.content-section__content > .wp-block-heading + p,
.content-section__content > .wp-block-heading + .wp-block-paragraph,
.content-section__content > .wp-block-heading + .wp-block-list {
    margin-top: calc(-1 * var(--space-1));
}

/* --- Alignment breakouts --- */

/* Both wide and full escape the constrained __inner wrapper
   using viewport-relative width + negative margin to center. */

/* Wide: full viewport until content hits max-width, then caps at 1400px */
.content-section__content > .alignwide {
    width: min(100vw, 1400px);
    max-width: none;
    align-self: center;
    margin-inline: calc(50% - min(50vw, 700px));
}

/* Full: break out to viewport edges */
.content-section__content > .alignfull {
    width: 100vw;
    max-width: none;
    align-self: center;
    margin-inline: calc(50% - 50vw);
}

/* --- Background variants --- */

.content-section--warm {
    background-color: var(--color-neutral-warm-light);
}

.content-section--cream {
    background-color: var(--color-cream);
}

.content-section--navy {
    background-color: var(--color-blue-dark);
}

.content-section--blue {
    background-color: var(--color-blue-medium);
}

/* --- Dark background text overrides --- */

.content-section--dark {
    color: var(--color-white);
}

.content-section--dark h1,
.content-section--dark h2,
.content-section--dark h3,
.content-section--dark h4 {
    color: var(--color-white);
}

.content-section--dark a {
    color: var(--color-blue-light);
}

.content-section--dark a:hover {
    color: var(--color-white);
}