/* ============================================================
   Mistero — approved internal content flow v1
   Promoted from the approved live WordPress stand after visual review.

   Owners:
   - calculator zones = page-specific
   - flat internal FAQ (.faq-v6 without --cols) = shared internal component
   - homepage FAQ (.faq-v6--cols) = intentionally untouched
   - .section--ink = shared internal CTA component
   ============================================================ */
@layer pages {
  :root {
    --content-space-lg: clamp(96px, 8vw, 128px);
    --content-rule: rgba(140, 100, 41, .20);
    --content-rule-strong: rgba(140, 100, 41, .28);
  }

  /* ------------------------------------------------------------
     Calculator — 7 zones.
     Mountains are now a separate low layer and start below the copy;
     text never depends on contrast against the illustration.
     ------------------------------------------------------------ */
  main > .section:has(.zones-list) {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    padding: var(--content-space-lg) 0 clamp(188px, 14vw, 228px);
    border-top: 0;
    background:
      radial-gradient(circle at 89% 15%, rgba(210,166,90,.12) 0 1px, transparent 2px),
      radial-gradient(circle at 10% 24%, rgba(185,138,62,.09) 0 1px, transparent 2px),
      radial-gradient(ellipse at 50% 0%, rgba(255,255,255,.48), transparent 46%),
      linear-gradient(180deg, #eee5d4 0%, #f2eadc 52%, #f7f1e7 100%);
    background-size: 126px 126px, 172px 172px, auto, auto;
  }
  main > .section:has(.zones-list)::before {
    content: "";
    position: absolute;
    inset: auto 0 0;
    height: clamp(170px, 15vw, 230px);
    z-index: 0;
    pointer-events: none;
    background: url('../img/hero-mountains-strip.png') center bottom / 100% auto no-repeat;
    background: image-set(url('../img/hero-mountains-strip.webp') type("image/webp"), url('../img/hero-mountains-strip.png') type("image/png")) center bottom / 100% auto no-repeat;
    opacity: .38;
    -webkit-mask-image: linear-gradient(to bottom, transparent 0%, rgba(0,0,0,.28) 24%, #000 64%);
    mask-image: linear-gradient(to bottom, transparent 0%, rgba(0,0,0,.28) 24%, #000 64%);
  }
  main > .section:has(.zones-list)::after {
    content: "";
    position: absolute;
    inset: auto 0 0;
    height: 190px;
    z-index: 0;
    pointer-events: none;
    background: linear-gradient(180deg, transparent, rgba(247,241,231,.30) 44%, rgba(247,241,231,.58));
  }
  main > .section:has(.zones-list) > .container { position: relative; z-index: 1; }
  main > .section:has(.zones-list) .s-head--center {
    max-width: 920px;
    margin: 0 auto clamp(58px, 5vw, 72px);
    text-align: center;
  }
  main > .section:has(.zones-list) .s-head--center > .eyebrow {
    display: flex;
    width: max-content;
    max-width: 100%;
    margin: 0 auto;
    justify-content: center;
    gap: 9px;
    letter-spacing: .17em;
  }
  main > .section:has(.zones-list) .s-head--center > .eyebrow::before { display: none; }
  main > .section:has(.zones-list) .s-head--center > .eyebrow .eyebrow__dot {
    width: 5px;
    height: 5px;
    box-shadow: 0 0 0 3px rgba(185,138,62,.13);
  }
  main > .section:has(.zones-list) .s-head__title {
    max-width: 900px;
    margin: 18px auto 0;
    font-size: clamp(44px, 4vw, 56px);
    line-height: 1.06;
    text-wrap: balance;
  }
  main > .section:has(.zones-list) .s-head__sub {
    max-width: 760px;
    margin: 18px auto 0;
    font-size: clamp(16px, 1.3vw, 18px);
    line-height: 1.62;
    text-wrap: pretty;
  }

  .zones-list {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0,1fr) minmax(0,1fr);
    grid-template-rows: repeat(4, minmax(0, auto));
    grid-auto-flow: column;
    column-gap: clamp(56px, 7vw, 92px);
    width: min(100%, 1120px);
    margin: 0 auto;
    border-top: 1px solid var(--content-rule);
  }
  .zones-list::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 24px;
    bottom: 24px;
    width: 1px;
    background: linear-gradient(180deg, transparent, var(--content-rule) 12%, var(--content-rule) 88%, transparent);
    transform: translateX(-.5px);
  }
  .zone-item {
    display: grid;
    grid-template-columns: 54px minmax(0,1fr);
    gap: 0 18px;
    align-items: start;
    min-height: 132px;
    padding: 24px 0 26px;
    border-bottom: 1px solid var(--content-rule);
    background: transparent;
    transition: none;
  }
  .zone-item:hover { padding-left: 0; background: transparent; }
  .zone-item__num {
    font-family: var(--font-serif);
    font-size: 36px;
    line-height: 1;
    font-style: italic;
    font-weight: 400;
    color: var(--gold-lo);
  }
  .zone-item__content { gap: 7px; }
  .zone-item__title {
    font-family: var(--font-display);
    font-size: 23px;
    line-height: 1.15;
    font-weight: 440;
    color: var(--ink);
  }
  .zone-item__text {
    max-width: 46ch;
    font-size: 14.5px;
    line-height: 1.62;
    color: var(--ink-2);
  }

  /* ------------------------------------------------------------
     Shared INTERNAL FAQ.
     Homepage keeps its own .faq-v6--cols concept and is excluded.
     Internal pages use a full-width editorial accordion: heading above,
     no permanently empty left column when there are many questions.
     ------------------------------------------------------------ */
  .section--tight:has(.faq-v6:not(.faq-v6--cols)) {
    padding: var(--content-space-lg) 0 clamp(104px, 9vw, 136px);
    background:
      radial-gradient(ellipse at 8% 18%, rgba(210,166,90,.10), transparent 24%),
      radial-gradient(ellipse at 92% 86%, rgba(210,166,90,.07), transparent 25%),
      linear-gradient(180deg, #fbf8f1 0%, #f7f1e7 100%);
  }
  .section--tight:has(.faq-v6:not(.faq-v6--cols))::before { content: none; }
  .section--tight:has(.faq-v6:not(.faq-v6--cols)) > .container { position: relative; z-index: 1; }
  .section--tight:has(.faq-v6:not(.faq-v6--cols)) .prose--narrow {
    display: block;
    max-width: 1040px;
    margin: 0 auto;
  }
  .section--tight:has(.faq-v6:not(.faq-v6--cols)) .s-head {
    max-width: 800px;
    margin: 0 auto clamp(46px, 5vw, 64px);
    padding: 0;
    text-align: center;
  }
  .section--tight:has(.faq-v6:not(.faq-v6--cols)) .s-head .eyebrow {
    justify-content: center;
  }
  .section--tight:has(.faq-v6:not(.faq-v6--cols)) .s-head__title {
    max-width: none;
    margin: 18px auto 0;
    font-size: clamp(42px, 4.1vw, 58px);
    line-height: 1.04;
  }

  /* The component itself is shared across calculator, landing and article FAQ. */
  .faq-v6:not(.faq-v6--cols) {
    counter-reset: fq-internal;
    display: block;
    width: min(100%, 980px);
    margin: 0 auto;
    border-top: 1px solid var(--content-rule-strong);
  }
  .faq-v6:not(.faq-v6--cols) details {
    counter-increment: fq-internal;
    margin: 0;
    padding: 0;
    border: 0;
    border-bottom: 1px solid var(--content-rule-strong);
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    overflow: visible;
  }
  .faq-v6:not(.faq-v6--cols) summary {
    display: grid;
    grid-template-columns: 52px minmax(0,1fr) 34px;
    gap: 18px;
    align-items: center;
    min-height: 76px;
    padding: 18px 0;
    font-family: var(--font-text);
    font-size: clamp(16px, 1.3vw, 18px);
    line-height: 1.42;
    letter-spacing: 0;
    font-weight: 590;
    color: var(--ink);
    text-wrap: pretty;
  }
  .faq-v6:not(.faq-v6--cols) summary::before {
    content: counter(fq-internal, decimal-leading-zero);
    display: block;
    font-family: var(--font-serif);
    font-size: 18px;
    font-style: italic;
    font-weight: 400;
    color: var(--gold-lo);
    opacity: .82;
  }
  .faq-v6:not(.faq-v6--cols) summary::after {
    width: 30px;
    height: 30px;
    border: 1px solid rgba(140,100,41,.26);
    border-radius: 50%;
    color: var(--gold-lo);
    background: rgba(255,253,248,.46);
    font-size: 17px;
  }
  .faq-v6:not(.faq-v6--cols) details[open] summary::after {
    background: var(--gold-lo);
    border-color: var(--gold-lo);
    color: #fff;
  }
  .faq-v6:not(.faq-v6--cols) details > div {
    max-width: 830px;
    padding: 0 56px 24px 70px;
    font-size: 14.8px;
    line-height: 1.7;
    color: var(--ink-2);
  }
  .faq-v6:not(.faq-v6--cols) details > div a { color: var(--gold-lo); }

  /* Article pages carry FAQ inside article-narrow; same accordion, local heading. */
  .art-section:has(> .faq-v6:not(.faq-v6--cols)) {
    padding-top: clamp(16px, 2vw, 28px);
  }
  .art-section:has(> .faq-v6:not(.faq-v6--cols)) > h2 {
    margin-bottom: 28px;
  }
  .art-section > .faq-v6:not(.faq-v6--cols) {
    width: 100%;
  }

  /* ------------------------------------------------------------
     Shared internal final CTA — reference composition.
     Full-width atmospheric scene, centered copy, no nested card.
     Mountains and celestial art stay decorative and never cross copy.
     ------------------------------------------------------------ */
  .section--ink {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    padding: clamp(104px, 9vw, 132px) 0 clamp(150px, 12vw, 188px);
    border: 0;
    color: var(--ink);
    background:
      radial-gradient(circle at 12% 26%, rgba(185,138,62,.10) 0 1px, transparent 2px),
      radial-gradient(circle at 87% 18%, rgba(210,166,90,.10) 0 1px, transparent 2px),
      radial-gradient(ellipse at 50% 10%, rgba(255,255,255,.60), transparent 48%),
      linear-gradient(180deg, #f7f1e7 0%, #f5ecde 58%, #efe2cf 100%);
    background-size: 160px 160px, 130px 130px, auto, auto;
  }
  .section--ink::before {
    content: "";
    position: absolute;
    top: auto;
    left: 0;
    right: 0;
    bottom: 0;
    height: clamp(170px, 16vw, 238px);
    z-index: 0;
    pointer-events: none;
    background: url('../img/hero-mountains-strip.png') center bottom / 100% auto no-repeat;
    background: image-set(url('../img/hero-mountains-strip.webp') type("image/webp"), url('../img/hero-mountains-strip.png') type("image/png")) center bottom / 100% auto no-repeat;
    opacity: .54;
    -webkit-mask-image: linear-gradient(to bottom, transparent 0%, rgba(0,0,0,.25) 18%, #000 58%);
    mask-image: linear-gradient(to bottom, transparent 0%, rgba(0,0,0,.25) 18%, #000 58%);
  }
  .section--ink::after {
    content: "";
    position: absolute;
    right: clamp(-150px, -7vw, -70px);
    top: 47%;
    width: clamp(250px, 25vw, 380px);
    aspect-ratio: 1;
    z-index: 0;
    transform: translateY(-50%);
    pointer-events: none;
    background: url('../img/calc-hero-celestial.png') center / contain no-repeat;
    background: image-set(url('../img/calc-hero-celestial.webp') type("image/webp"), url('../img/calc-hero-celestial.png') type("image/png")) center / contain no-repeat;
    opacity: .16;
  }
  .section--ink .container.center {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: min(100%, 900px);
    max-width: 900px;
    min-height: 0;
    margin: 0 auto;
    padding: 0 32px;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    backdrop-filter: none;
    text-align: center;
  }
  .section--ink .container.center::after { content: none; }
  .section--ink .ink-rule { display: none; }
  .section--ink .eyebrow {
    display: flex;
    width: max-content;
    max-width: 100%;
    justify-content: center;
    margin: 0 auto 16px;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--gold-lo);
    letter-spacing: .17em;
  }
  .section--ink .eyebrow::before { display: none; }
  .section--ink .ink-title {
    max-width: 760px;
    margin: 0 auto 14px;
    color: var(--ink);
    font-size: clamp(38px, 3.55vw, 50px);
    line-height: 1.06;
    letter-spacing: -.025em;
    text-wrap: balance;
  }
  .section--ink .ink-title em { color: var(--gold-lo); }
  .section--ink .ink-sub {
    max-width: 700px;
    margin: 0 auto 30px;
    color: var(--ink-2);
    font-size: clamp(15px, 1.2vw, 17px);
    line-height: 1.62;
    text-align: center;
    text-wrap: pretty;
  }
  .section--ink .btn {
    min-width: min(100%, 330px);
    padding: 15px 28px;
    box-shadow: 0 16px 30px -14px rgba(112,75,24,.4);
  }

  /* Internal section kickers use dot + text only. The old one-sided dash
     produced inconsistent alignment from section to section. Hero remains
     owned by the hero shell and the homepage keeps its own composition. */
  body:not(.home) main > .section:not(.hero-full):not(.calc-page) .s-head > .eyebrow::before {
    display: none;
  }

  @media (max-width: 980px) {
    main > .section:has(.zones-list) { padding-bottom: 164px; }
    .zones-list {
      grid-template-columns: 1fr;
      grid-template-rows: none;
      grid-auto-flow: row;
      column-gap: 0;
    }
    .zones-list::before { display: none; }
    .zone-item { min-height: 0; }
    .zone-item__text { max-width: 64ch; }

    .section--ink .container.center {
      width: min(100%, 860px);
      padding: 0 32px;
    }
    .section--ink::after {
      right: -120px;
      opacity: .12;
    }
  }

  @media (max-width: 700px) {
    :root { --content-space-lg: 72px; }

    main > .section:has(.zones-list) {
      padding: 72px 0 126px;
    }
    main > .section:has(.zones-list)::before { height: 118px; opacity: .38; }
    main > .section:has(.zones-list) .s-head--center {
      margin-bottom: 38px;
      text-align: left;
    }
    main > .section:has(.zones-list) .eyebrow--center { justify-content: flex-start; }
    main > .section:has(.zones-list) .s-head__title { font-size: 38px; }
    main > .section:has(.zones-list) .s-head__sub { margin-left: 0; }
    .zone-item {
      grid-template-columns: 42px minmax(0,1fr);
      gap: 0 12px;
      padding: 19px 0 21px;
    }
    .zone-item__num { font-size: 28px; }
    .zone-item__title { font-size: 20px; }
    .zone-item__text { font-size: 14px; }

    .section--tight:has(.faq-v6:not(.faq-v6--cols)) {
      padding: 72px 0 86px;
    }
    .section--tight:has(.faq-v6:not(.faq-v6--cols)) .s-head {
      margin-bottom: 34px;
      text-align: left;
    }
    .section--tight:has(.faq-v6:not(.faq-v6--cols)) .s-head .eyebrow { justify-content: flex-start; }
    .section--tight:has(.faq-v6:not(.faq-v6--cols)) .s-head__title { font-size: 38px; }

    .faq-v6:not(.faq-v6--cols) summary {
      grid-template-columns: 38px minmax(0,1fr) 30px;
      gap: 10px;
      min-height: 68px;
      padding: 15px 0;
      font-size: 15px;
    }
    .faq-v6:not(.faq-v6--cols) summary::before { font-size: 15px; }
    .faq-v6:not(.faq-v6--cols) details > div {
      padding: 0 40px 20px 48px;
      font-size: 14px;
    }

    .section--ink {
      padding: 80px 0 124px;
    }
    .section--ink::before { height: 128px; opacity: .44; }
    .section--ink::after { display: none; }
    .section--ink .container.center {
      width: 100%;
      padding: 0 20px;
      text-align: center;
    }
    .section--ink .eyebrow { justify-content: center; margin-bottom: 14px; }
    .section--ink .ink-title {
      max-width: 12ch;
      font-size: 36px;
      margin-bottom: 14px;
    }
    .section--ink .ink-sub {
      max-width: 32ch;
      font-size: 14.5px;
      margin-bottom: 24px;
    }
    .section--ink .btn {
      min-width: 0;
      width: min(100%, 330px);
    }
  }
}

/* Approved refinement — D (Предназначение) is the literal central point.
   Desktop balances A–C | D | E–G instead of leaving an empty fourth row. */
@layer pages {
  @media (min-width: 981px) {
    .zones-list {
      grid-template-columns: minmax(0,1fr) clamp(196px, 16vw, 228px) minmax(0,1fr);
      grid-template-rows: repeat(3, minmax(122px, auto));
      grid-auto-flow: initial;
      column-gap: clamp(32px, 4vw, 54px);
      border-top: 0;
      align-items: stretch;
    }
    .zones-list::before { display: none; }

    .zone-item:nth-child(1) { grid-column: 1; grid-row: 1; }
    .zone-item:nth-child(2) { grid-column: 1; grid-row: 2; }
    .zone-item:nth-child(3) { grid-column: 1; grid-row: 3; }
    .zone-item:nth-child(4) { grid-column: 2; grid-row: 1 / span 3; }
    .zone-item:nth-child(5) { grid-column: 3; grid-row: 1; }
    .zone-item:nth-child(6) { grid-column: 3; grid-row: 2; }
    .zone-item:nth-child(7) { grid-column: 3; grid-row: 3; }

    .zone-item:nth-child(4) {
      position: relative;
      isolation: isolate;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      align-self: stretch;
      min-height: 100%;
      padding: 38px 18px;
      border: 0;
      text-align: center;
      background:
        radial-gradient(circle at 50% 50%, rgba(213,174,105,.16), rgba(213,174,105,.05) 42%, transparent 68%);
    }
    .zone-item:nth-child(4)::before,
    .zone-item:nth-child(4)::after {
      content: "";
      position: absolute;
      left: 50%;
      top: 50%;
      z-index: -1;
      pointer-events: none;
      border: 1px solid rgba(154,110,43,.20);
      transform: translate(-50%, -50%) rotate(45deg);
    }
    .zone-item:nth-child(4)::before {
      width: 168px;
      height: 168px;
      border-radius: 50%;
      transform: translate(-50%, -50%);
    }
    .zone-item:nth-child(4)::after {
      width: 122px;
      height: 122px;
      border-color: rgba(154,110,43,.14);
    }
    .zone-item:nth-child(4) .zone-item__num {
      display: grid;
      place-items: center;
      width: 56px;
      height: 56px;
      margin: 0 auto 20px;
      border: 1px solid rgba(154,110,43,.34);
      border-radius: 50%;
      background: rgba(255,252,245,.72);
      box-shadow: 0 10px 28px -20px rgba(91,57,13,.65);
      font-size: 31px;
      font-style: italic;
    }
    .zone-item:nth-child(4) .zone-item__content {
      position: relative;
      z-index: 1;
      display: block;
      max-width: 205px;
    }
    .zone-item:nth-child(4) .zone-item__title {
      margin-bottom: 10px;
      font-size: 22px;
      line-height: 1.1;
      color: var(--ink);
    }
    .zone-item:nth-child(4) .zone-item__text {
      max-width: 24ch;
      margin: 0 auto;
      font-size: 14px;
      line-height: 1.58;
    }
  }

  @media (max-width: 980px) {
    .zone-item:nth-child(4) {
      position: relative;
      background: linear-gradient(90deg, rgba(210,166,90,.09), transparent 72%);
    }
    .zone-item:nth-child(4) .zone-item__num {
      color: var(--gold-lo);
    }
  }
}