/* =================================================================
   Myrvann Cacao - mood board for product page redesign
   Three sections, three variants each (A / B / C). Pick winners.

   Editorial counter-language to the artisanal-kraft UI:
   - no L-brackets, no cream gradient kraft containers
   - colored slugs (terracotta, sage, spice, berry) as accents
   - mendl-sans-variable for kickers and small UI chrome
   - new-spirit-condensed for italic display and pull moments
   - roca for big display
   - new-spirit (theme body) for prose

   Layout discipline: theme handles content width via Gutenberg align
   on each block. No max-width or inline-axis margins anywhere here.
   ================================================================= */


/* -----------------------------------------------------------------
   Mood-board chrome (annotation, only for evaluation)
   ----------------------------------------------------------------- */

.section-marker {
  font-family: "mendl-sans-variable", sans-serif;
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  text-align: center;
  color: var(--text-color-muted);
  padding: 1.4em 0;
  margin: 6em 0 3em;
  border-top: 1px solid var(--border-color-light);
  border-bottom: 1px solid var(--border-color-light);
}

.variant-label {
  font-family: "mendl-sans-variable", sans-serif;
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--text-color-muted);
  opacity: 0.7;
  margin: 0 0 2em;
  padding: 0.5em 0.9em;
  border-left: 2px solid var(--color-terracotta-light);
  display: inline-block;
}

.variant {
  margin: 0 0 5rem;
}


/* =================================================================
   SECTION 01 - HERO
   Variant A - Type as hero (wp:group with cacao gradient bg)
   Variant B - Masked vista (media-text, fjellmaske mask on photo)
   Variant C - Two-band split (columns, color band + photo)
   ================================================================= */

/* --- shared kicker treatment for hero variants --- */

.variant-hero-a .kicker,
.variant-hero-b .kicker,
.variant-hero-c .kicker {
  font-family: "mendl-sans-variable", sans-serif;
  font-size: 0.85rem;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  margin: 0 0 1.5em;
}


/* --- Variant A: Type as hero ---------------------------------- */

.variant-hero-a {
  background: var(--gradient-cacao-origin);
  color: var(--color-cream-100);
  padding: 7rem 2rem 6rem;
  text-align: center;
}

.variant-hero-a .variant-label {
  color: var(--color-cream-200);
  border-left-color: var(--color-spice-light);
  opacity: 0.6;
}

.variant-hero-a .kicker {
  color: var(--color-cream-200);
  opacity: 0.85;
}

.variant-hero-a .display-mega {
  font-family: "roca", sans-serif;
  font-weight: 800;
  font-size: clamp(5rem, 18vw, 14rem);
  line-height: 0.9;
  letter-spacing: -0.04em;
  margin: 0;
  background: var(--gradient-cacao-shimmer);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}

.variant-hero-a .subhead {
  font-family: "new-spirit-condensed", serif;
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1.2rem, 2.6vw, 1.9rem);
  margin: 0.6em 0 2em;
  color: var(--color-cream-200);
}

.variant-hero-a .sense {
  font-style: italic;
  font-size: 1.05rem;
  line-height: 1.55;
  color: var(--color-cream-300);
  opacity: 0.92;
}


/* --- Variant B: Masked vista ----------------------------------- */

.variant-hero-b.mask-vista .wp-block-media-text__media {
  -webkit-mask-image: url("/wp-content/themes/myrvann/img/fjellmaske.svg");
          mask-image: url("/wp-content/themes/myrvann/img/fjellmaske.svg");
  -webkit-mask-size: 110% auto;
          mask-size: 110% auto;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-position: bottom center;
          mask-position: bottom center;
}

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

.variant-hero-b .display {
  font-family: "roca", sans-serif;
  font-weight: 800;
  font-size: clamp(3rem, 8vw, 6.5rem);
  line-height: 0.95;
  letter-spacing: -0.03em;
  margin: 0;
  color: var(--color-brown-800);
}

.variant-hero-b .subhead {
  font-family: "new-spirit-condensed", serif;
  font-style: italic;
  font-weight: 400;
  font-size: 1.4rem;
  color: var(--color-terracotta-dark);
  margin: 0.4em 0 2em;
}

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

.variant-hero-b .lede.has-drop-cap::first-letter {
  font-family: "roca", sans-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);
}


/* --- Variant C: Two-band split (Penguin-style) ----------------- */

.variant-hero-c.penguin {
  gap: 0;
  align-items: stretch;
}

.variant-hero-c .penguin-band {
  background: var(--color-terracotta-dark);
  color: var(--color-cream-100);
  padding: 5rem 3.5rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.variant-hero-c .penguin-band .variant-label {
  color: var(--color-cream-200);
  border-left-color: var(--color-spice-light);
}

.variant-hero-c .penguin-band .kicker {
  color: var(--color-cream-200);
  opacity: 0.9;
}

.variant-hero-c .display-stacked {
  font-family: "roca", sans-serif;
  font-weight: 800;
  font-size: clamp(4rem, 9vw, 8.5rem);
  line-height: 0.9;
  letter-spacing: -0.04em;
  margin: 0.1em 0;
  color: var(--color-cream-100);
}

.variant-hero-c .subhead {
  font-family: "new-spirit-condensed", serif;
  font-style: italic;
  font-weight: 400;
  font-size: 1.4rem;
  color: var(--color-cream-200);
  margin: 0.4em 0 1.8em;
}

.variant-hero-c .penguin-body {
  font-size: 1rem;
  line-height: 1.55;
  color: var(--color-cream-200);
  opacity: 0.95;
}

.variant-hero-c .penguin-photo {
  padding: 0;
}

.variant-hero-c .penguin-photo .wp-block-image,
.variant-hero-c .penguin-photo figure {
  margin: 0;
  height: 100%;
}

.variant-hero-c .penguin-photo img {
  width: 100%;
  height: 100%;
  min-height: 32rem;
  object-fit: cover;
  display: block;
}


/* =================================================================
   SECTION 02 - INGREDIENSER
   Variant A - Apothecary grid (7 specimen cards)
   Variant B - To familier (Sopplaget vs Bareren, photo on side)
   Variant C - Manifest (typographic table)
   ================================================================= */

/* --- shared kicker + display for ingredient variants --- */

.variant-ing-a .kicker,
.variant-ing-b .kicker,
.variant-ing-c .kicker {
  font-family: "mendl-sans-variable", sans-serif;
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--text-color-muted);
  margin: 0 0 0.6em;
}

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


/* --- Variant A: Apothecary grid -------------------------------- */

.variant-ing-a .lede {
  font-family: "new-spirit", serif;
  font-style: italic;
  font-size: 1.1rem;
  margin: 0 0 3em;
  color: var(--text-color-muted);
}

.variant-ing-a .apothecary-grid {
  gap: 0;
  border-top: 1px solid var(--border-color-light);
  border-left: 1px solid var(--border-color-light);
}

.variant-ing-a .specimen {
  padding: 2.2rem 1.6rem 2.6rem;
  border-right: 1px solid var(--border-color-light);
  border-bottom: 1px solid var(--border-color-light);
  background: var(--bg-color);
  transition: background 0.3s ease;
}

.variant-ing-a .specimen:hover {
  background: var(--bg-color-alt);
}

.variant-ing-a .specimen-role {
  font-family: "mendl-sans-variable", sans-serif;
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--color-terracotta-dark);
  margin: 0 0 0.6em;
}

.variant-ing-a .specimen-cordyceps  .specimen-role { color: var(--color-spice-dark); }
.variant-ing-a .specimen-chaga      .specimen-role { color: var(--color-brown-700); }
.variant-ing-a .specimen-lions-mane .specimen-role { color: var(--color-spice); }
.variant-ing-a .specimen-reishi     .specimen-role { color: var(--color-berry); }
.variant-ing-a .specimen-mct        .specimen-role { color: var(--color-clay-dark); }
.variant-ing-a .specimen-salt       .specimen-role { color: var(--color-sage-dark); }

.variant-ing-a .specimen-name {
  font-family: "roca", sans-serif;
  font-weight: 500;
  font-size: 1.7rem;
  line-height: 1.05;
  margin: 0 0 0.15em;
  letter-spacing: -0.01em;
  color: var(--color-brown-900);
}

.variant-ing-a .specimen-latin {
  font-family: "new-spirit", serif;
  font-style: italic;
  font-size: 0.85rem;
  color: var(--text-color-muted);
  margin: 0 0 1.1em;
  opacity: 0.7;
}

.variant-ing-a .specimen-note {
  font-size: 0.95rem;
  margin: 0;
  line-height: 1.5;
  color: var(--text-color);
}


/* --- Variant B: To familier ------------------------------------ */

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

.variant-ing-b .families-lede {
  font-family: "new-spirit", serif;
  font-style: italic;
  font-size: 1.05rem;
  color: var(--text-color-muted);
  margin: 0 0 2.5em;
}

.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-family: "mendl-sans-variable", sans-serif;
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--text-color-muted);
  margin: 0 0 0.4em;
}

.variant-ing-b .family-name {
  font-family: "roca", sans-serif;
  font-weight: 700;
  font-size: 1.9rem;
  margin: 0.1em 0 0.9em;
  letter-spacing: -0.01em;
}

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

.variant-ing-b .family ul.wp-block-list {
  list-style: none;
  padding: 0;
  margin: 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-family: "new-spirit", serif;
  font-weight: 500;
  color: var(--color-brown-800);
}


/* --- Variant C: Manifest --------------------------------------- */

.variant-ing-c.manifest .display {
  margin-bottom: 1.6em;
}

.variant-ing-c .manifest-table {
  margin: 0;
}

.variant-ing-c .manifest-table table.has-fixed-layout {
  table-layout: auto;
  width: 100%;
  border-collapse: collapse;
  font-family: "new-spirit", serif;
}

.variant-ing-c .manifest-table thead th {
  font-family: "mendl-sans-variable", sans-serif;
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  text-align: left;
  padding: 1rem 0.8rem;
  border-bottom: 2px solid var(--color-brown-700);
  color: var(--text-color-muted);
}

.variant-ing-c .manifest-table tbody td {
  padding: 1.1rem 0.8rem;
  border-bottom: 1px solid var(--border-color-light);
  vertical-align: top;
  line-height: 1.45;
}

.variant-ing-c .manifest-table tbody tr:last-child td {
  border-bottom: 0;
}

.variant-ing-c .manifest-table tbody td:first-child {
  font-family: "new-spirit-condensed", serif;
  font-style: italic;
  font-size: 1.05rem;
  color: var(--color-terracotta-dark);
  width: 4em;
  letter-spacing: 0.05em;
}

.variant-ing-c .manifest-table tbody td:nth-child(2) {
  font-family: "roca", sans-serif;
  font-weight: 500;
  font-size: 1.1rem;
  color: var(--color-brown-900);
  width: 12em;
}

.variant-ing-c .marginalia {
  margin-top: 2.4em;
  padding-top: 1.2em;
  border-top: 1px solid var(--border-color-light);
  font-family: "new-spirit", serif;
  font-size: 0.9rem;
  font-style: italic;
  color: var(--text-color-muted);
}


/* =================================================================
   SECTION 03 - FOR KJENNERE
   Variant A - Vintner editorial (kicker, display, italic, drop cap, pull, terroir grid)
   Variant B - Almanac spread (sage gradient bg, big stat 1200+)
   Variant C - Field notes (66/34 columns, marginalia in side column)
   ================================================================= */

/* --- shared kicker + display for kjennere variants --- */

.variant-kj-a .kicker,
.variant-kj-b .kicker,
.variant-kj-c .kicker {
  font-family: "mendl-sans-variable", sans-serif;
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--text-color-muted);
  margin: 0 0 1em;
}


/* --- Variant A: Vintner editorial ------------------------------ */

.variant-kj-a .display {
  font-family: "roca", sans-serif;
  font-weight: 700;
  font-size: clamp(2rem, 4.5vw, 3.6rem);
  line-height: 1.05;
  letter-spacing: -0.02em;
  margin: 0;
  color: var(--color-brown-900);
}

.variant-kj-a .display-italic {
  font-family: "new-spirit-condensed", serif;
  font-style: italic;
  font-weight: 500;
  font-size: clamp(1.4rem, 3vw, 2.2rem);
  line-height: 1.2;
  color: var(--color-terracotta-dark);
  margin: 0.6em 0 1.6em;
}

.variant-kj-a .lede.has-drop-cap {
  font-size: 1.2rem;
  line-height: 1.55;
  margin-bottom: 1.4em;
}

.variant-kj-a .lede.has-drop-cap::first-letter {
  font-family: "roca", sans-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);
}

.variant-kj-a .pull {
  border-top: 1px solid var(--border-color);
  border-bottom: 1px solid var(--border-color);
  padding: 2.2rem 0;
  margin: 3rem 0;
  background: transparent;
}

.variant-kj-a .pull blockquote {
  border: 0;
  padding: 0;
  margin: 0;
}

.variant-kj-a .pull blockquote p {
  font-family: "new-spirit-condensed", serif;
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1.6rem, 4vw, 2.6rem);
  line-height: 1.2;
  color: var(--color-brown-700);
  text-align: center;
  margin: 0;
}

.variant-kj-a .terroir-grid {
  gap: 2rem;
  margin-top: 0.6rem;
}

.variant-kj-a .terroir-card {
  display: flex;
  flex-direction: column;
}

.variant-kj-a .terroir-num {
  font-family: "new-spirit-condensed", serif;
  font-style: italic;
  font-weight: 500;
  font-size: 1.5rem;
  color: var(--color-terracotta-dark);
  margin: 0;
  line-height: 1;
}

.variant-kj-a .terroir-name {
  font-family: "roca", sans-serif;
  font-weight: 500;
  font-size: 1.3rem;
  line-height: 1.1;
  margin: 0.4em 0 0.5em;
  color: var(--color-brown-900);
}

.variant-kj-a .terroir-note {
  font-size: 0.95rem;
  line-height: 1.5;
  margin: 0;
  color: var(--text-color);
}

.variant-kj-a > .marginalia {
  margin-top: 3rem;
  padding-top: 1.2rem;
  border-top: 1px solid var(--border-color-light);
  font-size: 0.9rem;
  font-style: italic;
  color: var(--text-color-muted);
}


/* --- Variant B: Almanac spread --------------------------------- */

.variant-kj-b.almanac {
  background: var(--gradient-plantation);
}

.variant-kj-b .almanac-spread {
  align-items: flex-start;
  gap: 0;
}

.variant-kj-b .almanac-stat {
  border-right: 1px solid var(--color-sage-dark);
  padding: 0 2.5rem 0 0;
  text-align: left;
}

.variant-kj-b .almanac-stat .kicker {
  color: var(--color-sage-dark);
  opacity: 0.85;
}

.variant-kj-b .display-stat {
  font-family: "roca", sans-serif;
  font-weight: 800;
  font-size: clamp(5rem, 14vw, 11rem);
  line-height: 0.85;
  letter-spacing: -0.05em;
  color: var(--color-sage-dark);
  margin: 0.1em 0 0.4em;
}

.variant-kj-b .display-stat sup {
  font-size: 0.4em;
  vertical-align: super;
  font-weight: 500;
  color: var(--color-terracotta-dark);
}

.variant-kj-b .stat-caption {
  font-family: "new-spirit-condensed", serif;
  font-style: italic;
  font-weight: 400;
  font-size: 1.2rem;
  line-height: 1.3;
  color: var(--color-brown-800);
  margin: 0;
}

.variant-kj-b .almanac-text {
  padding: 0 0 0 2.5rem;
}

.variant-kj-b .almanac-text .kicker {
  color: var(--color-brown-700);
}

.variant-kj-b .almanac-text .display {
  font-family: "roca", sans-serif;
  font-weight: 700;
  font-size: clamp(1.8rem, 3.5vw, 2.6rem);
  line-height: 1.1;
  margin: 0 0 1em;
  color: var(--color-brown-900);
}

.variant-kj-b .almanac-text p {
  font-size: 1rem;
  line-height: 1.55;
  margin-bottom: 1em;
  color: var(--color-brown-800);
}

.variant-kj-b .almanac-text .marginalia {
  font-family: "mendl-sans-variable", sans-serif;
  font-style: normal;
  font-size: 0.78rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-sage-dark);
  margin-top: 1.6em;
  padding-top: 1em;
  border-top: 1px solid var(--color-sage);
}


/* --- Variant C: Field notes ------------------------------------ */

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

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

.variant-kj-c .main-text {
  padding: 0;
}

.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 .lede.has-drop-cap::first-letter {
  font-family: "roca", sans-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);
}

.variant-kj-c .main-text > p {
  margin-bottom: 1.2em;
}

.variant-kj-c .pull {
  border-left: 3px solid var(--color-terracotta);
  border-top: 0;
  border-bottom: 0;
  padding: 0.4rem 0 0.4rem 1.5rem;
  margin: 2rem 0;
  background: transparent;
}

.variant-kj-c .pull blockquote {
  border: 0;
  padding: 0;
  margin: 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;
}

.variant-kj-c .margin-notes {
  border-left: 1px solid var(--border-color-light);
  padding: 0.6rem 0 0.6rem 2rem;
  font-family: "new-spirit", serif;
  font-size: 0.92rem;
  line-height: 1.5;
}

.variant-kj-c .note-label {
  font-family: "mendl-sans-variable", sans-serif;
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--text-color-muted);
  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);
  color: var(--text-color);
}

.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;
  padding-top: 0.6em;
  margin-top: 0.4em;
}


/* -----------------------------------------------------------------
   Mobile collapse - keep variants legible at narrow widths
   ----------------------------------------------------------------- */

@media (max-width: 760px) {
  .variant-hero-a {
    padding: 5rem 1.5rem 4rem;
  }

  .variant-hero-c.penguin {
    flex-direction: column;
  }

  .variant-hero-c .penguin-band,
  .variant-hero-c .penguin-photo {
    flex-basis: 100% !important;
    width: 100%;
  }

  .variant-hero-c .penguin-photo img {
    min-height: 22rem;
  }

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

  .variant-kj-b .almanac-stat {
    border-right: 0;
    border-bottom: 1px solid var(--color-sage-dark);
    padding: 0 0 2.5rem 0;
    margin-bottom: 2.5rem;
  }

  .variant-kj-b .almanac-text {
    padding: 0;
  }

  .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;
  }
}