/* ============================================================
   UnderstandSEO — section-variety.css
   ------------------------------------------------------------
   PURPOSE
   Fixes the "every site is the same white stack" problem. These
   are SECTION SHAPES (frame treatments) you wrap around any
   <section> so adjacent sections alternate rhythm. Combined with
   the type pairings (type-pairings.css) and the layout-variant
   components, two sites built from the same parts read differently.

   USAGE
   Add ONE shape class to a <section> (or its wrapper). Alternate
   shapes down the page so no two adjacent sections share a frame.
   Pair with the standard `.container-prose` inside.

   RULE OF THUMB
   - 2-4 shaped sections per page, the rest plain (var(--bg)).
   - Never two identical shapes back to back.
   - Dark/accent bands carry their own inverted text colors.
   Load after tokens.css / type-pairings.css.
   ============================================================ */

/* consistent vertical rhythm helper */
.section-pad { padding-block: clamp(4rem, 8vw, 6rem); }
.section-pad-lg { padding-block: clamp(5rem, 10vw, 8rem); }

/* 1. TINT BAND — soft surface-2 band, the gentlest change of rhythm */
.shape-band-tint { background: var(--surface-2); }

/* 2. SURFACE BAND — clean off-white panel */
.shape-band-surface { background: var(--surface); }

/* 3. INK BAND — full-bleed dark band with inverted text */
.shape-band-ink { background: var(--ink); color: var(--bg); }
.shape-band-ink h1, .shape-band-ink h2, .shape-band-ink h3, .shape-band-ink h4 { color: var(--bg); }
.shape-band-ink p { color: rgba(255,255,255,0.75); }
.shape-band-ink .eyebrow { color: rgba(255,255,255,0.55); }
.shape-band-ink .display-italic { color: var(--accent-soft); }
.shape-band-ink a:not(.btn) { color: var(--accent-soft); }
.shape-band-ink .btn-secondary { color: var(--bg); border-color: rgba(255,255,255,0.3); }
.shape-band-ink .btn-secondary:hover { background: var(--bg); color: var(--ink); }

/* 4. ACCENT BAND — bold accent block with inverted text (use sparingly, once) */
.shape-band-accent { background: var(--accent); color: #fff; }
.shape-band-accent h1, .shape-band-accent h2, .shape-band-accent h3, .shape-band-accent h4 { color: #fff; }
.shape-band-accent p { color: rgba(255,255,255,0.9); }
.shape-band-accent .eyebrow { color: rgba(255,255,255,0.7); }
.shape-band-accent .display-italic { color: #fff; text-decoration: underline; text-underline-offset: 4px; }
.shape-band-accent .btn-primary { background: #fff; color: var(--accent-ink); }
.shape-band-accent .btn-secondary { color: #fff; border-color: rgba(255,255,255,0.5); }

/* 5. INSET CARD — content floats in a rounded card on a tinted page */
.shape-inset { background: var(--surface-2); }
.shape-inset > .container-prose {
  background: var(--bg);
  border: 1px solid var(--rule);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  padding: clamp(2rem, 5vw, 4rem) !important;
  max-width: var(--max-w);
}

/* 6. DIAGONAL — slanted top+bottom edges via clip-path (use on a tint/ink band) */
.shape-diagonal {
  clip-path: polygon(0 2.5vw, 100% 0, 100% calc(100% - 2.5vw), 0 100%);
  margin-block: -1px; /* avoid hairline gaps */
}
/* give diagonal sections extra padding so content clears the slant */
.shape-diagonal.section-pad { padding-block: clamp(5.5rem, 11vw, 8rem); }

/* 7. BORDERED PANEL — hairline-framed block, editorial feel */
.shape-bordered > .container-prose {
  border: 1px solid var(--rule);
  border-radius: var(--radius-lg);
  padding: clamp(2rem, 5vw, 3.5rem) !important;
}

/* 8. EDGE IMAGE BAND — helper for an edge-to-edge image strip with caption.
   Wrap an <img> + caption; the image bleeds full width. */
.shape-edge-image { position: relative; }
.shape-edge-image img { width: 100%; height: clamp(220px, 38vw, 460px); object-fit: cover; display: block; }
.shape-edge-image .edge-caption {
  position: absolute; left: 0; right: 0; bottom: 0;
  background: linear-gradient(to top, rgba(0,0,0,0.6), transparent);
  color: #fff; padding: clamp(1.5rem, 4vw, 3rem);
}
.shape-edge-image .edge-caption .eyebrow { color: rgba(255,255,255,0.7); }
.shape-edge-image .edge-caption h2 { color: #fff; }

/* 9. RAIL — thin accent rule on the left of a section (subtle marker) */
.shape-rail { border-left: 3px solid var(--accent); }

@media (prefers-reduced-motion: no-preference) {
  /* shapes are static; no motion needed */
}