/* ==========================================================================
   Mysteeriboxi — sub-page components
   "Living wall" — same atmospheric language as etusivu (copper-forged accents,
   leaf textures, hand-drawn voice). Prose flows around shape-outside leaves
   instead of being chopped into rectangular cards. Hairlines and organic
   ornaments mark transitions between sections rather than hard borders.
   ========================================================================== */

@layer atmosphere {
  /* Decorative leaf placed in the page header corner — the section already
     carries a wider leaf-vein backdrop, this is a smaller secondary motif
     anchored to the hero stack. */
  .wx-page-hero {
    position: relative;
    isolation: isolate;
  }

  .wx-page-hero__corner-leaf {
    position: absolute;
    inset-block-start: -2rem;
    inset-inline-end: -1rem;
    inline-size: clamp(160px, 22vw, 280px);
    block-size: auto;
    opacity: 0.15;
    mix-blend-mode: overlay;
    pointer-events: none;
    transform: rotate(-12deg);
    z-index: 0;
  }

  @media (max-width: 720px) {
    .wx-page-hero__corner-leaf {
      inset-block-start: -1rem;
      inset-inline-end: -0.5rem;
      inline-size: 140px;
      opacity: 0.1;
    }
  }

  /* Hand-drawn organic ornament between sections — a single sketched copper
     line with two ✦ marks, evoking the seal motif. Block-level, centered. */
  .wx-flourish {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.85rem;
    margin-block: clamp(1rem, 2vw, 1.5rem);
    color: color-mix(in oklch, var(--wp--preset--color--primary) 70%, transparent);
    pointer-events: none;
    user-select: none;
  }

  .wx-flourish__mark {
    font-size: 0.85rem;
    line-height: 1;
  }

  .wx-flourish svg {
    inline-size: clamp(120px, 30vw, 240px);
    block-size: auto;
    color: inherit;
  }
}

@layer components {

  /* ----- Page hero ------------------------------------------------------- */

  .wx-page-hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
    gap: clamp(1.5rem, 4vw, 3rem);
    padding-block-end: clamp(1rem, 2.5vw, 1.5rem);
  }

  @container (max-width: 760px) {
    .wx-page-hero { grid-template-columns: 1fr; }
  }
  @media (max-width: 760px) {
    .wx-page-hero { grid-template-columns: 1fr; }
  }

  .wx-page-hero__poster {
    position: relative;
    z-index: 1;
  }

  .wx-page-hero__eyebrow {
    margin: 0 0 0.6rem;
    font-family: var(--wp--preset--font-family--condensed);
    font-size: 0.78rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: var(--wp--preset--color--primary);
    display: flex;
    align-items: center;
    gap: 0.6rem;
  }

  .wx-page-hero__eyebrow::before {
    content: "";
    inline-size: 2.4rem;
    block-size: 1px;
    background: var(--wp--preset--color--primary);
    flex-shrink: 0;
  }

  .wx-page-hero__title {
    margin: 0;
    font-family: var(--wp--preset--font-family--display);
    font-size: clamp(1.85rem, 8.5vw, 6rem);
    font-weight: 900;
    line-height: 0.95;
    letter-spacing: 0.01em;
    overflow-wrap: anywhere;
  }

  .wx-page-hero__taglines {
    margin: 0.85rem 0 0;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    max-inline-size: 44ch;
  }

  .wx-page-hero__taglines p {
    margin: 0;
    line-height: 1.45;
  }

  .wx-page-hero__lead {
    font-family: var(--wp--preset--font-family--heading);
    font-size: clamp(1rem, 1.6vw, 1.25rem);
    color: color-mix(in oklch, var(--wp--preset--color--contrast) 90%, transparent);
  }

  .wx-page-hero__sub {
    font-style: italic;
    font-size: 0.95rem;
    color: color-mix(in oklch, var(--wp--preset--color--contrast) 70%, transparent);
  }

  .wx-chapter-mark {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.25rem;
    font-family: var(--wp--preset--font-family--condensed);
    text-align: end;
    position: relative;
    z-index: 1;
  }

  .wx-chapter-mark__label {
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.22em;
    color: color-mix(in oklch, var(--wp--preset--color--contrast) 60%, transparent);
  }

  .wx-chapter-mark__num {
    font-family: var(--wp--preset--font-family--display);
    font-size: clamp(2.5rem, 5vw, 4rem);
    font-weight: 900;
    line-height: 1;
    color: var(--wp--preset--color--primary);
  }

  .wx-chapter-mark__num small {
    font-size: 0.5em;
    color: color-mix(in oklch, var(--wp--preset--color--contrast) 50%, transparent);
    margin-inline-start: 0.1em;
  }

  @media (max-width: 760px) {
    .wx-chapter-mark {
      align-items: baseline;
      flex-direction: row;
      gap: 0.6rem;
    }
    .wx-chapter-mark__num { font-size: 1.8rem; }
  }

  /* ----- Pull-quote intro — etusivu-style flow with shape-outside leaf -- */

  .wx-pull-quote {
    display: flow-root;
    border-inline-start: 2px solid var(--wp--preset--color--primary);
    padding-inline-start: clamp(1rem, 2.5vw, 1.75rem);
  }

  .wx-pull-quote__lead {
    margin: 0 0 1rem;
    font-family: var(--wp--preset--font-family--heading);
    font-size: clamp(1.15rem, 1.6vw, 1.4rem);
    font-style: italic;
    line-height: 1.45;
    color: color-mix(in oklch, var(--wp--preset--color--contrast) 90%, transparent);
  }

  /* ----- Trilogia stanzas — three chapters as flowing prose -------------
     No card borders. Each stanza is a BFC with a big copper drop-cap
     number floated to alternating sides; text flows around. A small leaf
     can shape-outside the opposite side for a "living wall" feel. */

  .wx-stanzas {
    display: flex;
    flex-direction: column;
    gap: clamp(2rem, 4vw, 3.25rem);
  }

  .wx-stanza {
    display: flow-root;
    position: relative;
  }

  .wx-stanza__num {
    margin: 0;
    font-family: var(--wp--preset--font-family--display);
    font-weight: 900;
    font-size: clamp(4rem, 11vw, 8rem);
    line-height: 0.85;
    letter-spacing: -0.02em;
    color: color-mix(in oklch, var(--wp--preset--color--primary) 35%, transparent);
    float: inline-start;
    margin-inline-end: clamp(0.75rem, 2vw, 1.5rem);
    margin-block-start: -0.15em;
    user-select: none;
  }

  .wx-stanza--alt .wx-stanza__num {
    float: inline-end;
    margin-inline-start: clamp(0.75rem, 2vw, 1.5rem);
    margin-inline-end: 0;
  }

  .wx-stanza__leaf {
    inline-size: clamp(140px, 18vw, 220px);
    block-size: auto;
    max-block-size: 280px;
    object-fit: contain;
    shape-outside: url("../images/leaf-700.webp");
    shape-image-threshold: 0.5;
    shape-margin: 1rem;
    margin-block-start: 0.25rem;
    opacity: 0.35;
    filter: grayscale(20%);
    pointer-events: none;
  }

  .wx-stanza__leaf--right {
    float: inline-end;
    margin-inline-start: 1.25rem;
    transform: scaleX(-1);
  }

  .wx-stanza__leaf--left {
    float: inline-start;
    margin-inline-end: 1.25rem;
  }

  @media (max-width: 600px) {
    .wx-stanza__leaf {
      float: none;
      display: block;
      inline-size: 50%;
      margin-inline: auto;
      max-block-size: 160px;
      opacity: 0.2;
    }
  }

  .wx-stanza__title {
    margin: 0 0 0.5rem;
    font-family: var(--wp--preset--font-family--display);
    font-size: clamp(1.4rem, 2.5vw, 1.85rem);
    font-weight: 800;
    line-height: 1.15;
  }

  .wx-stanza__body {
    margin: 0;
    line-height: 1.55;
    color: color-mix(in oklch, var(--wp--preset--color--contrast) 88%, transparent);
  }

  /* ----- Inline callout (Aikabudjetointi) — hairline only, no box -------- */

  .wx-callout-line {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: clamp(1rem, 2vw, 1.5rem);
    align-items: start;
    padding-block-start: clamp(1rem, 2vw, 1.5rem);
    border-block-start: 1px solid color-mix(in oklch, var(--wp--preset--color--primary) 40%, transparent);
  }

  .wx-callout-line__icon {
    inline-size: clamp(2rem, 4vw, 2.75rem);
    block-size: auto;
    color: var(--wp--preset--color--primary);
    flex-shrink: 0;
  }

  .wx-callout-line__title {
    margin: 0 0 0.5rem;
    font-family: var(--wp--preset--font-family--condensed);
    font-size: 0.78rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: var(--wp--preset--color--primary);
  }

  .wx-callout-line__body {
    margin: 0;
    font-size: 0.97rem;
    line-height: 1.55;
  }

  /* ----- Manifesto interlude -------------------------------------------- */

  .wx-manifesto {
    position: relative;
    padding-block: clamp(1.5rem, 3vw, 2.5rem);
    text-align: center;
  }

  .wx-manifesto__rule {
    inline-size: 3rem;
    block-size: 1px;
    margin-inline: auto;
    margin-block-end: 1.25rem;
    background: var(--wp--preset--color--primary);
    border: 0;
  }

  .wx-manifesto__statement {
    margin: 0 auto;
    max-inline-size: 24ch;
    font-family: var(--wp--preset--font-family--display);
    font-size: clamp(1.5rem, 3.5vw, 2.5rem);
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: 0.005em;
  }

  .wx-manifesto__support {
    margin: 1.5rem auto 0;
    max-inline-size: 56ch;
    font-size: 1rem;
    line-height: 1.6;
    color: color-mix(in oklch, var(--wp--preset--color--contrast) 80%, transparent);
  }

  /* ----- Two-column prose (Saa + Kenelle) — no card borders ------------- */

  .wx-prose-2col {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(1.75rem, 4vw, 3.5rem);
  }

  @media (max-width: 760px) {
    .wx-prose-2col { grid-template-columns: 1fr; }
  }

  .wx-prose-2col__head {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-block-end: 1rem;
    padding-block-end: 0.75rem;
    border-block-end: 1px solid color-mix(in oklch, var(--wp--preset--color--primary) 35%, transparent);
  }

  .wx-prose-2col__icon {
    inline-size: 1.85rem;
    block-size: auto;
    color: var(--wp--preset--color--primary);
    flex-shrink: 0;
  }

  .wx-prose-2col__title {
    margin: 0;
    font-family: var(--wp--preset--font-family--condensed);
    font-size: 0.85rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    color: var(--wp--preset--color--primary);
  }

  .wx-prose-2col ul {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
  }

  .wx-prose-2col ul li {
    position: relative;
    padding-inline-start: 1.5rem;
    line-height: 1.5;
  }

  .wx-prose-2col ul li::before {
    content: "";
    position: absolute;
    inset-block-start: 0.7em;
    inset-inline-start: 0;
    inline-size: 0.9rem;
    block-size: 1px;
    background: var(--wp--preset--color--primary);
  }

  /* ----- Price stamp — standalone forged moment, no box ----------------- */

  .wx-price-stamp {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    padding-block: clamp(2rem, 4vw, 3rem);
    text-align: center;
    border-block-start: 1px solid color-mix(in oklch, var(--wp--preset--color--primary) 40%, transparent);
    border-block-end: 1px solid color-mix(in oklch, var(--wp--preset--color--primary) 40%, transparent);
  }

  .wx-price-stamp__eyebrow {
    margin: 0 0 0.5rem;
    font-family: var(--wp--preset--font-family--condensed);
    font-size: 0.78rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.22em;
    color: var(--wp--preset--color--primary);
  }

  .wx-price-stamp__num {
    margin: 0;
    font-family: var(--wp--preset--font-family--display);
    font-size: clamp(3.5rem, 11vw, 7rem);
    font-weight: 900;
    line-height: 0.9;
    letter-spacing: -0.02em;
  }

  .wx-price-stamp__vat {
    margin: 0.5rem 0 0;
    font-family: var(--wp--preset--font-family--condensed);
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    color: color-mix(in oklch, var(--wp--preset--color--contrast) 65%, transparent);
  }

  /* ----- Numbered timeline — kept (organic via copper line) ------------- */

  .wx-timeline {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: clamp(1.5rem, 3vw, 2.25rem);
    counter-reset: wx-step;
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .wx-timeline::before {
    content: "";
    position: absolute;
    inset-block: 0;
    inset-inline-start: 1.4rem;
    inline-size: 1px;
    background: linear-gradient(
      to bottom,
      color-mix(in oklch, var(--wp--preset--color--primary) 50%, transparent),
      color-mix(in oklch, var(--wp--preset--color--primary) 10%, transparent)
    );
  }

  .wx-timeline__step {
    position: relative;
    padding-inline-start: 4rem;
    counter-increment: wx-step;
  }

  .wx-timeline__step::before {
    content: counter(wx-step, decimal-leading-zero);
    position: absolute;
    inset-inline-start: 0;
    inset-block-start: -0.1rem;
    inline-size: 2.8rem;
    block-size: 2.8rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--wp--preset--color--base);
    border: 1.5px solid var(--wp--preset--color--primary);
    color: var(--wp--preset--color--primary);
    font-family: var(--wp--preset--font-family--display);
    font-weight: 800;
    font-size: 0.95rem;
    letter-spacing: 0.02em;
    z-index: 1;
  }

  .wx-timeline__body {
    margin: 0;
    line-height: 1.55;
    color: color-mix(in oklch, var(--wp--preset--color--contrast) 88%, transparent);
  }

  .wx-timeline__body strong {
    color: var(--wp--preset--color--contrast);
    font-weight: 700;
  }

  /* ----- Quotes — flowing testimonials, no card borders ---------------- */

  .wx-quotes {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(1.75rem, 4vw, 3rem);
  }

  @media (max-width: 760px) {
    .wx-quotes { grid-template-columns: 1fr; }
  }

  .wx-quote {
    position: relative;
    padding-inline-start: clamp(2.25rem, 4vw, 3rem);
  }

  .wx-quote::before {
    content: "\201C";
    position: absolute;
    inset-block-start: -1rem;
    inset-inline-start: 0;
    font-family: var(--wp--preset--font-family--display);
    font-size: clamp(3rem, 6vw, 4.5rem);
    line-height: 1;
    color: color-mix(in oklch, var(--wp--preset--color--primary) 50%, transparent);
    pointer-events: none;
    user-select: none;
  }

  .wx-quote__body {
    margin: 0 0 1rem;
    font-family: var(--wp--preset--font-family--heading);
    font-style: italic;
    font-size: clamp(1rem, 1.4vw, 1.1rem);
    line-height: 1.55;
  }

  .wx-quote__attribution {
    margin: 0;
    font-family: var(--wp--preset--font-family--condensed);
    font-size: 0.78rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    color: var(--wp--preset--color--primary);
    display: flex;
    align-items: center;
    gap: 0.6rem;
  }

  .wx-quote__attribution::before {
    content: "";
    inline-size: 1.6rem;
    block-size: 1px;
    background: var(--wp--preset--color--primary);
  }

  /* ----- Single quote used as a closing CTA -----------------------------
     The Quotes block is a 2-col testimonial grid; with one child it strands
     the quote hard-left in the first column. When it holds a single quote we
     treat the quote + the button that follows it as one closing CTA:
       - collapse to a centered single column, re-center glyph + attribution;
       - lead with a hairline + breathing room (overrides the 4rem blockGap
         margin WordPress auto-injects above it);
       - tighten the gap down to the trailing button (also a blockGap victim).
     Targets the existing markup, so every Palvelut sub-page inherits it. ---- */

  .wx-quotes:has(.wx-quote:only-child) {
    grid-template-columns: 1fr;
    justify-items: center;
    /* !important: WordPress's constrained-layout max-width is unlayered and
       would otherwise beat this @layer rule and leave the unit full-width. */
    max-inline-size: 44rem !important;
    margin-block-start: clamp(2.5rem, 5vw, 4rem);
    margin-inline: auto;
    padding-block-start: clamp(2.5rem, 5vw, 4rem);
    border-block-start: 1px solid color-mix(in oklch, var(--wp--preset--color--contrast) 14%, transparent);
    text-align: center;
  }

  .wx-quotes:has(.wx-quote:only-child) .wx-quote {
    padding-inline-start: 0;
  }

  .wx-quotes:has(.wx-quote:only-child) .wx-quote::before {
    position: static;
    display: block;
    inset: auto;
    margin-block-end: 0.25rem;
  }

  .wx-quotes:has(.wx-quote:only-child) .wx-quote__body {
    font-size: clamp(1.2rem, 1.8vw, 1.45rem);
    line-height: 1.5;
  }

  .wx-quotes:has(.wx-quote:only-child) .wx-quote__attribution {
    justify-content: center;
  }

  /* Pull the trailing CTA button up — it otherwise inherits the container's
     4rem (spacing|80) blockGap as a top margin, stranding it from the quote.
     !important: that blockGap margin is unlayered and beats @layer otherwise. */
  .wx-quotes:has(.wx-quote:only-child) + .wp-block-buttons {
    margin-block-start: clamp(1.5rem, 3vw, 2rem) !important;
  }

  /* ----- Player passcode ribbon — no dashed box ------------------------ */

  .wx-pass-stamp {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    padding-block: clamp(1.5rem, 3vw, 2rem);
    text-align: center;
    border-block-start: 1px solid color-mix(in oklch, var(--wp--preset--color--contrast) 18%, transparent);
  }

  .wx-pass-stamp__eyebrow {
    margin: 0;
    font-family: var(--wp--preset--font-family--condensed);
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.22em;
    color: var(--wp--preset--color--primary);
  }

  .wx-pass-stamp__body { margin: 0; font-size: 0.95rem; }

  .wx-pass-stamp__body code {
    display: inline-block;
    margin-inline: 0.25rem;
    padding: 0.1rem 0.5rem;
    font-family: var(--wp--preset--font-family--mono, monospace);
    font-size: 0.9em;
    background: color-mix(in oklch, var(--wp--preset--color--primary) 12%, transparent);
    border-radius: 2px;
  }
}