/* ==========================================================================
   Page section — shared container for static page chrome (Sprint 2 Faza B)
   Used on about, calculator, agencies, prices, buy-vs-rent, etc. Replaces
   four independent .page-section definitions.

   Patterns:
   - .page-section          default warm-white band with hairline divider
   - .page-section--cream   alternating band
   - .page-section--ink     dark slab (used by calculator result, hero,
                            sticky CTAs)
   - .page-section--narrow  narrows max-width to 720px for prose
   ========================================================================== */

.page-section {
    padding: clamp(48px, 6vw, 80px) 0;
    background: var(--warm-white);
    border-bottom: 1px solid var(--hairline);
}

.page-section:last-child {
    border-bottom: none;
}

.page-section--cream { background: var(--cream); }
.page-section--paper { background: var(--paper); }

.page-section--ink {
    background: var(--ink);
    color: var(--cream);
    border-bottom-color: rgba(255, 255, 255, 0.1);
}

.page-section--ink :where(h1, h2, h3, h4) {
    color: var(--cream);
}

.page-section--ink :where(p, li) {
    color: var(--cream);
    opacity: 0.85;
}

/* Narrow inner column — for long-form prose */
.page-section--narrow .container,
.page-section__narrow {
    max-width: 720px;
    margin: 0 auto;
}

/* Compact spacing — when stacked in a dense layout */
.page-section--compact {
    padding: clamp(28px, 4vw, 48px) 0;
}