/* =================================================================
   Myrvann Cacao — product page section styling
   DELTA over the theme base (see .claude/theme.md → "Build on the base").
   The theme already gives: Roca headings, new-spirit body, muted-brown
   palette, core drop-caps. We add only what it doesn't: uppercase-sans
   chrome, accent colours, borders/dividers, the hero mask, spacing.
   No font-family re-declared where the base already cascades it.
   No widths — Gutenberg align handles content width.
   ================================================================= */


/* --- Editorial chrome: uppercase sans over the serif base ---------
   Base renders these as sentence-case new-spirit; the delta is the
   mendl uppercase treatment + accent. --------------------------------- */

.variant-label,
.kicker,
.family-kicker,
.note-label {
  font-family: var(--font-family-sans);
  font-weight: 500;
  text-transform: uppercase;
  color: var(--text-color-muted);
}

.variant-label {
  display: inline-block;
  font-size: 0.7rem;
  letter-spacing: 0.2em;
  opacity: 0.7;
  margin: 0 0 2em;
  padding: 0.5em 0 0.5em 0.9em;
  border-left: 2px solid var(--color-terracotta-light);
}

.kicker {
  font-size: 0.78rem;
  letter-spacing: 0.24em;
  margin: 0 0 0.8em;
}

/* Subhead: condensed italic accent (a distinct face → declared) */
.subhead {
  font-family: "new-spirit-condensed", serif;
  font-style: italic;
  font-size: 1.4rem;
  color: var(--color-terracotta-dark);
  margin: 0.4em 0 2em;
}

/* Display headings — size/colour delta only; Roca comes from the base */
.variant-hero-b .display {
  font-size: clamp(3rem, 8vw, 6.5rem);
  line-height: 0.95;
  letter-spacing: -0.03em;
  color: var(--color-brown-800);
  margin: 0;
}

.variant-ing-b .display {
  font-size: clamp(2.4rem, 5vw, 4.2rem);
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--color-brown-800);
  margin: 0.1em 0 0.6em;
}

.variant-kj-c .display {
  font-size: clamp(2rem, 4vw, 3rem);
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--color-brown-900);
  margin: 0 0 2em;
}

/* Drop-cap: deliberate override of core's inherited serif → Roca + accent */
.variant-hero-b .lede.has-drop-cap::first-letter,
.variant-kj-c .main-text .lede.has-drop-cap::first-letter {
  font-family: "roca", serif;
  font-weight: 700;
  font-size: 4em;
  float: left;
  line-height: 0.85;
  margin: 0.05em 0.12em -0.05em 0;
  color: var(--color-terracotta);
}


/* --- Section 01 · Hero --------------------------------------------- */

.variant-hero-b .wp-block-media-text__content { padding: 4rem 3rem; }

.variant-hero-b .lede.has-drop-cap {
  font-size: 1.15rem;
  line-height: 1.55;
  margin-bottom: 1.4em;
}


/* --- Section 02 · Ingredienser (to familier) ---------------------- */

.variant-ing-b.families .wp-block-media-text__content { padding: 4rem 3rem; }

.variant-ing-b .families-grid { gap: 2.5rem; margin-top: 1rem; }

.variant-ing-b .family {
  padding: 1.4rem 0 0;
  border-top: 2px solid var(--border-color);
}

.variant-ing-b .family-sopp   { border-top-color: var(--color-sage-dark); }
.variant-ing-b .family-bearer { border-top-color: var(--color-terracotta-dark); }

.variant-ing-b .family-kicker { font-size: 0.7rem; letter-spacing: 0.24em; margin: 0 0 0.4em; }

/* family-name is an h3 → Roca from base; size/colour delta only */
.variant-ing-b .family-name { font-size: 1.9rem; letter-spacing: -0.01em; margin: 0.1em 0 0.9em; }
.variant-ing-b .family-sopp   .family-name { color: var(--color-sage-dark); }
.variant-ing-b .family-bearer .family-name { color: var(--color-terracotta-dark); }

/* list → ledger rows */
.variant-ing-b .family ul.wp-block-list { list-style: none; margin: 0; padding: 0; }
.variant-ing-b .family li {
  padding: 0.7rem 0;
  border-bottom: 1px solid var(--border-color-light);
  font-size: 1.05rem;
  line-height: 1.5;
}
.variant-ing-b .family li:last-child { border-bottom: 0; }
.variant-ing-b .family li strong { font-weight: 500; color: var(--color-brown-800); }


/* --- Section 03 · For kjennere (field notes) ---------------------- */

/* Ousia zeroes the first child's top margin in a constrained group, and this
   group (unlike the media-text sections) has no inner content padding — so it
   needs its own block padding for top air, matching the other sections. */
.variant-kj-c { padding-block: 4rem 2rem; }

.variant-kj-c .field-notes-grid { gap: 4rem; align-items: flex-start; }

.variant-kj-c .main-text .lede.has-drop-cap { font-size: 1.15rem; line-height: 1.55; margin-bottom: 1.4em; }
.variant-kj-c .main-text > p { margin-bottom: 1.2em; }

/* pullquote → left terracotta bar, left-aligned (override core's centred frame) */
.variant-kj-c .pull {
  border-left: 3px solid var(--color-terracotta);
  padding: 0.4rem 0 0.4rem 1.5rem;
  margin: 2rem 0;
  background: transparent;
}
.variant-kj-c .pull blockquote { border: 0; margin: 0; padding: 0; }
.variant-kj-c .pull blockquote p {
  font-family: "new-spirit-condensed", serif;
  font-style: italic;
  font-size: clamp(1.4rem, 2.8vw, 2rem);
  line-height: 1.2;
  color: var(--color-terracotta-dark);
  text-align: left;
  margin: 0;
}

/* margin column */
.variant-kj-c .margin-notes {
  padding: 0.6rem 0 0.6rem 2rem;
  border-left: 1px solid var(--border-color-light);
  font-size: 0.92rem;
  line-height: 1.5;
}
.variant-kj-c .note-label { font-size: 0.68rem; letter-spacing: 0.24em; margin: 0 0 1.4em; }
.variant-kj-c .note {
  margin: 0 0 1.3em;
  padding-bottom: 1em;
  border-bottom: 1px dashed var(--border-color-light);
}
.variant-kj-c .note:last-of-type { border-bottom: 0; }
.variant-kj-c .note strong {
  font-family: "new-spirit-condensed", serif;
  font-weight: 500;
  font-style: italic;
  color: var(--color-terracotta-dark);
}
.variant-kj-c .note.marginalia {
  font-style: italic;
  color: var(--text-color-muted);
  border-bottom: 0;
  margin-top: 0.4em;
  padding-top: 0.6em;
}


/* --- Mobile collapse (winners only) ------------------------------- */

/* 781px = WP's column-stacking breakpoint (columns collapse to 1-up here).
   Side gutter is handled by the theme's --wide-width token, not here. */
@media (max-width: 781px) {
  .variant-hero-b .wp-block-media-text__content,
  .variant-ing-b.families .wp-block-media-text__content { padding: 2.5rem 1.5rem; }

  .variant-kj-c .field-notes-grid { gap: 2rem; }
  .variant-kj-c .margin-notes {
    border-left: 0;
    border-top: 1px solid var(--border-color-light);
    padding: 1.5rem 0 0;
  }
}