/* ========================================================================
   section.css -- ScribeHold section rhythm

   Component layer of the modular CSS bundle. Consumes tokens from
   tokens.css. Owns the vertical spacing between page sections and the
   header block that opens one:

     .section              -- vertical-rhythm wrapper for a page section
     .section--tight       -- reduced rhythm for dense/utility sections
     .section--spacious    -- extended rhythm for a feature moment
     .section--bordered    -- hairline top rule between adjacent sections
     .section--warm        -- warm panel surface (alternating band)
     .section__header      -- eyebrow + heading + subheading cluster
     .section__header--centered -- centered variant of the header cluster
     .section__body        -- prose block constrained to a readable measure

   Expected HTML structure:

       <section class="section">
           <div class="container">
               <div class="section__header">
                   <p class="eyebrow">For attorneys</p>
                   <h2 class="section-heading">Built for legal review</h2>
                   <p class="section-subheading">Court-ready exports.</p>
               </div>
               ...
           </div>
       </section>

   .section owns block spacing only; horizontal centering remains the
   .container's job (layout.css). Heading typography stays in
   typography.css -- this file positions those clusters, it does not
   restyle them.

   Breakpoints (inlined per project convention -- CSS custom properties
   cannot appear inside @media queries):
       md:  768px
       lg: 1024px

   Bundle order: tokens -> base -> layout -> components/* -> pages/*
   ======================================================================== */

/* ------------------------------------------------------------------------
   1. .section -- vertical-rhythm wrapper
   ------------------------------------------------------------------------ */

.section {
    padding-block: var(--space-12);
}

@media (min-width: 768px) {
    .section {
        padding-block: var(--space-16);
    }
}

@media (min-width: 1024px) {
    .section {
        padding-block: var(--space-20);
    }
}

/* ------------------------------------------------------------------------
   2. Rhythm modifiers
   ------------------------------------------------------------------------ */

.section--tight {
    padding-block: var(--space-8);
}

@media (min-width: 768px) {
    .section--tight {
        padding-block: var(--space-10);
    }
}

@media (min-width: 1024px) {
    .section--tight {
        padding-block: var(--space-12);
    }
}

.section--spacious {
    padding-block: var(--space-16);
}

@media (min-width: 768px) {
    .section--spacious {
        padding-block: var(--space-20);
    }
}

@media (min-width: 1024px) {
    .section--spacious {
        padding-block: var(--space-28);
    }
}

/* ------------------------------------------------------------------------
   3. Surface modifiers
   ------------------------------------------------------------------------ */

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

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

.section--manila {
    background: var(--color-bg-manila);
}

/* ------------------------------------------------------------------------
   4. .section__header -- eyebrow + heading + subheading cluster

   Separates the header block from the section body without relying on
   the trailing margins of whichever element happens to come last.
   ------------------------------------------------------------------------ */

.section__header {
    margin-bottom: var(--space-8);
    max-width: var(--measure);
}

@media (min-width: 768px) {
    .section__header {
        margin-bottom: var(--space-10);
    }
}

.section__header > :last-child {
    margin-bottom: 0;
}

.section__header--centered {
    margin-inline: auto;
    text-align: center;
}

/* ------------------------------------------------------------------------
   5. .section__body -- prose constrained to a readable measure
   ------------------------------------------------------------------------ */

.section__body {
    max-width: var(--measure);
}

.section__body--narrow {
    max-width: var(--measure-narrow);
}

.section__body--wide {
    max-width: var(--measure-wide);
}

.section__body--centered {
    margin-inline: auto;
}

/* ------------------------------------------------------------------------
   6. .section__footer -- trailing CTA / note block
   ------------------------------------------------------------------------ */

.section__footer {
    margin-top: var(--space-8);
}

@media (min-width: 768px) {
    .section__footer {
        margin-top: var(--space-10);
    }
}

.section__footer--centered {
    text-align: center;
}