/* ==========================================================================
   Text-block container

   Family:
     .text-block

  Family modifiers:
    .left
    .right
    .center

   Example markup:
     <div class="text-block">...</div>
    <div class="text-block mw-md left">...</div>
     <div class="text-block mw-text-lg gap-24">...</div>
     <div class="text-block"><p class="eyebrow">Nyhet</p><h2>...</h2></div>

   Default width:
     .text-block uses .mw-text-md (40em) unless another container width
     modifier overrides it.

   Default gap:
     .text-block uses gap-16 rhythm unless a generic .gap-* modifier overrides it.
    Generic width and gap modifiers are defined in assets/css/utilities.css.
     Spacing rhythm is derived from the shared runtime --gap context.
    Inline padding follows shared runtime --pi context.

   Expects the first child to be one of h1-h6, or .eyebrow followed by h1-h6.
   ========================================================================== */

.text-block {
  --mw: var(--mw-text-md);
  --gap: 1.2em;
  display: flex;
  flex-direction: column;
  gap: var(--gap);
  align-items: center;
  text-align: center;
}

.text-block > :first-child:is(h1, h2, h3, h4, h5, h6),
.text-block > :is(h1, h2, h3, h4, h5, h6)[data-auth-role],
.text-block > .eyebrow + :is(h1, h2, h3, h4, h5, h6) {
  margin-bottom: 0.25em;
}
.text-block > .eyebrow + :is(h1, h2, h3, h4, h5, h6) {
  margin-top: calc(-1 * var(--gap) / 4);
}

/* Trailing CTA block: push it down by the text-block's own --gap so the
   button breathes from the preceding content. Adds a fixed margin on top
   of the natural flex gap; harmless when no .cta-block is present. */
.text-block > .cta-block {
  margin-top: var(--gap);
}

.text-block > .eyebrow {
  margin-bottom: -0.25em;
  font-size: var(--wp--preset--font-size--small);
  font-family: var(--body-font-family);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

/* Alignment */

.text-block.left {
  align-items: flex-start;
}

.text-block.right {
  align-items: flex-end;
}

.text-block.center {
  align-items: center;
}

.text-block.left :is(h1, h2, h3, h4, h5, h6, p) {
  text-align: left;
}

.text-block.right :is(h1, h2, h3, h4, h5, h6, p) {
  text-align: right;
}

.text-block.center :is(h1, h2, h3, h4, h5, h6, p) {
  text-align: center;
}

/* Per-element alignment override (e.g. a paragraph inside a center
   text-block that should be left-aligned). Higher specificity than the
   align-driven rules above so authors can override individual children. */
.text-block :is(h1, h2, h3, h4, h5, h6, p).text-left {
  text-align: left;
}

.text-block :is(h1, h2, h3, h4, h5, h6, p).text-right {
  text-align: right;
}

.text-block :is(h1, h2, h3, h4, h5, h6, p).text-center {
  text-align: center;
}