/**
 * Shared frame rhythm for every mkb/* block: section padding, the inner
 * width container, the eyebrow line, a generic grid helper, and the base
 * button classes. Everything here reads --mkb-* variables from tokens.css,
 * nothing is a fixed color or size of its own, so it works in both schemes
 * automatically wherever a variable differs by scheme (see tokens.css's
 * .mkb-scheme-9er block). Per block CSS lives in src/blocks/<name>/style.css
 * instead, see plugin/mkbaukasten/src/README.md - do not add block specific
 * rules here.
 *
 * Every selector is scoped to .mkb- (docs/phase1-spec.md section 2: no bare
 * element selectors like h2 or .entry-content p).
 */

/* ---------------------------------------------------------------------- */
/* Shared frame padding                                                   */
/* One consistent layout rule for every mkb/* frame block (section, hero, */
/* media-split, cta-band, feature-grid, steps, pricing, product-hub,      */
/* testimonials, course-outline, stats, subnav, guarantee): the outer     */
/* wrapper carries this fluid side padding, whether the block sits        */
/* standalone right in .entry-content or as the top level element of a   */
/* mkb/section. The width cap and centering (narrow/normal/full) is a     */
/* SEPARATE concern that lives on .mkb-inner below, with no padding of    */
/* its own - stacking both max-width and padding-inline on one element    */
/* was the bug this fixes (docs/phase1-spec.md section 5 measured defect: */
/* a mkb-inner--normal box shrank to 1140 - 2 * padding instead of 1140). */
/*                                                                        */
/* Nested case: a frame block placed inside another frame block's         */
/* InnerBlocks (typically a mkb/section) sits inside that ancestor's      */
/* already padded .mkb-inner, so its own padding must not add a second    */
/* inset - zeroed here for any .mkb-frame descendant of a .mkb-frame,     */
/* regardless of nesting depth.                                          */
/* ---------------------------------------------------------------------- */

.mkb-frame {
  padding-inline: var(--mkb-space-section-x);
}

/* width "full" (see .mkb-inner--full below): before this rule, "full" only
 * dropped .mkb-inner's own max-width while the ancestor .mkb-frame kept
 * charging its usual ~150px side padding (--mkb-space-section-x), so at
 * common viewports (e.g. 1440) "full" rendered identically to "normal" -
 * Tobias' review of the first draft measured this against his old
 * homepage, where the same logo row spans edge to edge. A small fixed
 * edge margin instead of the section's own fluid padding - not zero - so
 * content still clears the viewport edge. ":has(> .mkb-inner--full)"
 * keys off the child .mkb-inner's own width class rather than a
 * block-specific class (e.g. ".mkb-section--width-full"), so any current
 * or future mkb/* frame block that reuses this same "own .mkb-frame
 * wrapper + child .mkb-inner--*" shape (see the file header) gets this
 * for free - mkb/section is only the first block with a width attribute.
 * Nested frames are unaffected: placed BEFORE ".mkb-frame .mkb-frame"
 * below on purpose - both are (0,2,0) specificity, so for a NESTED full
 * width frame the later, plain zeroing rule wins the cascade instead of
 * this one, same as it already does for narrow/normal. */
.mkb-frame:has(> .mkb-inner--full) {
  padding-inline: clamp(20px, 2.8vw, 40px);
}

/* Mobile fallback: clamp()'s own 20px floor already applies below a
 * ~714px viewport (2.8vw < 20px), this just states that floor explicitly
 * at the codebase's usual mobile breakpoint (see e.g. the logo gallery
 * rules below) rather than relying on the arithmetic alone. */
@media (max-width: 480px) {
  .mkb-frame:has(> .mkb-inner--full) {
    padding-inline: 20px;
  }
}

.mkb-frame .mkb-frame {
  padding-inline: 0;
}

/* ---------------------------------------------------------------------- */
/* Section frame                                                          */
/* ---------------------------------------------------------------------- */

.mkb-section {
  position: relative;
  padding-block: var(--mkb-space-section-y);
  color: var(--mkb-color-text);
}

.mkb-section--padding-s {
  padding-block: calc(var(--mkb-space-section-y) * 0.5);
}

.mkb-section--padding-l {
  padding-block: calc(var(--mkb-space-section-y) * 1.5);
}

.mkb-section--bg-none {
  background: none;
}

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

.mkb-section--bg-sand {
  background: var(--mkb-color-sand);
  color: var(--mkb-color-sand-text);
}

.mkb-section--bg-dark {
  background: var(--mkb-color-dark);
  color: var(--mkb-color-dark-text);
}

.mkb-section--bg-image {
  background-size: cover;
  background-position: center;
}

/* Sits behind the section's content (z-index 0 < 1), above the background image. */
.mkb-section--overlay::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--mkb-color-hero-overlay);
  z-index: 0;
}

.mkb-section--bg-dark,
.mkb-section--bg-image {
  --mkb-color-heading: var(--mkb-color-dark-text);
  --mkb-color-text: var(--mkb-color-dark-text);
  --mkb-color-text-muted: var(--mkb-color-dark-text-muted);
}

/* ---------------------------------------------------------------------- */
/* Inner width container                                                  */
/* ---------------------------------------------------------------------- */

.mkb-inner {
  position: relative;
  z-index: 1;
  width: 100%;
  margin-inline: auto;
}

/* !important: on a page using Astra's "volle Breite" content layout,
   Astra's own dynamic CSS includes
   ".entry-content[data-ast-blocks-layout] > :not(.wp-block-group) > *
   { max-width: none; margin-left/right: auto }" aimed at core block
   markup - specificity (0,4,0), which plain classes here cannot beat.
   Without this, .mkb-inner (a direct child of any mkb/* block placed
   right in the content) loses its own width constraint and every
   section's content runs edge to edge. margin-inline stays as declared
   above (Astra's margin:auto has the same effect, no conflict there).
   No padding-inline here on purpose: the fluid side padding lives on the
   ancestor .mkb-frame instead (see above), so a viewport that is wider
   than 1140px + 2 * that padding gets the extra room split evenly by
   this margin, landing the content's left edge exactly where the hero's
   own .mkb-frame padding puts its text - see docs/phase1-spec.md
   section 5. */
.mkb-inner--narrow {
  max-width: var(--mkb-width-narrow) !important;
}

.mkb-inner--normal {
  max-width: var(--mkb-width-normal) !important;
}

.mkb-inner--full {
  max-width: var(--mkb-width-full) !important;
}

/* ---------------------------------------------------------------------- */
/* Eyebrow line (small label above a heading, e.g. mkb/hero's eyebrow)    */
/* ---------------------------------------------------------------------- */

.mkb-eyebrow {
  display: block;
  font: var(--mkb-eyebrow-weight) var(--mkb-size-eyebrow) / var(--mkb-lh-eyebrow) var(--mkb-font-heading);
  letter-spacing: var(--mkb-eyebrow-tracking);
  text-transform: uppercase;
  color: var(--mkb-color-accent);
}

/* Astra's own ".entry-content p { margin-bottom: 1.6em }" is 0,2,0 and
   would otherwise beat a plain ".mkb-eyebrow" (0,1,0), since every eyebrow
   renders as a <p>; doubling the class raises specificity to 0,2,0 without
   reaching for !important. .mkb-hero__content already sets its own
   spacing between children (see hero/style.css), so it gets a larger
   value there than the 12px every other eyebrow uses. */
.mkb-eyebrow.mkb-eyebrow {
  margin: 0 0 var(--mkb-space-12) 0;
}

.mkb-hero__content > .mkb-eyebrow.mkb-eyebrow {
  margin-bottom: var(--mkb-space-16);
}

/* The default accent (red resp. 9er brown) barely reads on a dark
   background (mockup D "Podcast" and C "YouTube Kanal" both use the
   lighter primary/copper-light tone there instead, see mkb/hero--full's
   identical fallback below). Scoped to the two backgrounds that actually
   turn text light, same as the color variables just above. */
.mkb-section--bg-dark .mkb-eyebrow,
.mkb-section--bg-image .mkb-eyebrow,
.mkb-cta-band--dark .mkb-eyebrow,
.is-style-mkb-cta .mkb-eyebrow {
  color: var(--mkb-color-primary-light, var(--mkb-color-primary));
}

/* ---------------------------------------------------------------------- */
/* Heading scale inside frame blocks                                      */
/* tokens.css defines --mkb-size-h2 (clamp 30-40px) but nothing applied   */
/* it to a heading typed into a mkb/section, mkb/media-split or           */
/* mkb/cta-band's InnerBlocks, so it stayed at the theme's own H2 size     */
/* (Astra: 2.125rem, fixed, no clamp). mkb/hero's H1 sizing lives in its   */
/* own src/blocks/hero/style.css instead (its markup is more specific:    */
/* split vs. full variant).                                               */
/* ---------------------------------------------------------------------- */

.mkb-section__content > h1,
.mkb-section__content > h2,
.mkb-media-split__content > h1,
.mkb-media-split__content > h2 {
  font-size: var(--mkb-size-h2);
  line-height: var(--mkb-lh-h2);
}

.mkb-cta-band__content > h1,
.mkb-cta-band__content > h2 {
  font-size: 32px;
  line-height: 1.15;
}

/* ---------------------------------------------------------------------- */
/* Grid helper                                                            */
/* ---------------------------------------------------------------------- */

.mkb-grid {
  display: grid;
  gap: var(--mkb-space-grid-gap);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
}

.mkb-grid--cols-2 {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
}

.mkb-grid--cols-3 {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
}

.mkb-grid--cols-4 {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
}

.mkb-grid--gap-steps {
  gap: var(--mkb-space-steps-gap);
}

/* ---------------------------------------------------------------------- */
/* Buttons                                                                */
/* Malzknecht: gold fill / dark outline, radius 4, 16px/600.              */
/* 9er (.mkb-scheme-9er): copper fill / dark outline, radius 8, 18px/700. */
/* ---------------------------------------------------------------------- */

.mkb-btn {
  display: inline-block;
  font: var(--mkb-button-weight) var(--mkb-size-button) / var(--mkb-lh-button) var(--mkb-font-heading);
  text-decoration: none;
  border-radius: var(--mkb-radius-button);
  padding: 15px 26px;
  border: 0;
  cursor: pointer;
}

.mkb-scheme-9er .mkb-btn {
  /* --mkb-font-heading-strong, not the plain --mkb-font-heading: this
     weight (700) is the plugin's own self hosted cut, not one Astra
     already loads live, so it needs the privately named face - see
     tools/design/build-tokens.mjs's mkbFontFaceFamily(). */
  font: var(--mkb-button-9er-weight) var(--mkb-size-button-9er) / var(--mkb-lh-button-9er) var(--mkb-font-heading-strong);
  padding: 14px 26px;
}

.mkb-btn-primary {
  background: var(--mkb-color-primary);
  color: var(--mkb-color-button-primary-text);
}

.mkb-btn-primary:hover,
.mkb-btn-primary:focus-visible {
  background: var(--mkb-color-primary-hover);
}

.mkb-btn-outline {
  background: transparent;
  color: var(--mkb-color-heading);
  border: var(--mkb-border-outline-button);
  padding: 13px 24px;
}

.mkb-btn-outline:hover,
.mkb-btn-outline:focus-visible {
  background: var(--mkb-color-heading);
  color: var(--mkb-color-background);
}