/* ==========================================================================
   МосЭкоСила System v3 — interior.css
   Композиции внутренних страниц. Подключается после base.css,
   перед components.css.

   Здесь живут только композиции конкретных страниц. Общие компоненты —
   в components.css, паттерны ds-* — в system-v3.css.

   Содержание:
     1.  Hero внутренних страниц ... .v-hero, .v-text-hero
     2.  Две колонки ............... .split, .feature-image
     3.  Полоса истории ............ .v-history (about)
     4.  Факты ..................... .facts
     5.  Реестр .................... .ledger
     6.  Статья .................... .article-layout, .prose, .toc, .callout
     7.  Каталог видов бизнеса ..... .directory
     8.  Лицензии .................. .license-preview, .missing-document
     9.  Контакты .................. .map-panel, .contacts-phone
     10. Ошибка 404 ............... .error-layout
     11. Карта шаблонов ........... .template-* (index.html)
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Hero внутренних страниц

   Разметка: <section class="v-hero container"> с .v-hero-copy
   и figure.v-hero-media внутри. Текстовый вариант без изображения —
   .v-hero.v-text-hero.
   -------------------------------------------------------------------------- */

.v-hero {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
    gap: 4.8rem;
    align-items: center;
    padding: 3.2rem 0 4.8rem
}

.v-hero-copy {
    min-width: 0
}

.v-hero-media {
    margin: 0;
    position: relative;
    min-width: 0;
    align-self: stretch;
    display: flex;
    flex-direction: column
}

.v-hero-media>.v-photo {
    width: 100%;
    height: 100%;
    min-height: 28rem;
    max-height: 38rem;
    object-fit: cover;
    border-radius: 1.6rem
}

.v-hero-facts {
    display: flex;
    gap: 2.4rem;
    flex-wrap: wrap;
    margin-top: 2.8rem;
    font-size: 1.3rem;
    color: var(--muted)
}

.v-hero-facts span {
    display: flex;
    align-items: center;
    gap: 1rem
}

.v-hero-facts .v-icon {
    width: 2.4rem;
    height: 2.4rem
}

.v-text-hero {
    display: block;
    max-width: 95rem
}

/* --------------------------------------------------------------------------
   2. Две колонки

   Класс ставится на .container внутри секции или на внутренний блок:
   <section class="section"><div class="container split">…</div></section>
   -------------------------------------------------------------------------- */

.split {
    display: grid;
    grid-template-columns: 1.2fr 0.6fr;
    gap: 4.8rem;
    align-items: start
}

.split-container {
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.split>* {
    min-width: 0
}

.split .button.secondary {
    margin-top: auto
}

@media (min-width: 1024px) {
    .business-preparation {
        position: sticky;
        top: 10rem;
        align-self: start
    }
}

.feature-image {
    width: 100%;
    aspect-ratio: 1.3;
    object-fit: cover;
    border-radius: 1.6rem
}

.split .feature-image {
    height: 100%;
    min-height: 28rem;
    max-height: 38rem
}

/* О компании: особенности колонок и медиа */
.view-about .paper .split>div>.v-icon {
    margin-bottom: 2rem
}

.view-about .feature-image {
    aspect-ratio: 1.6
}

.view-about .split .lead {
    font-size: 1.8rem
}

.about-process__layout {
    display: grid;
    grid-template-columns: minmax(22rem, 0.72fr) minmax(0, 2fr);
    gap: clamp(4rem, 7vw, 10rem);
    align-items: start
}

.about-process__head h2 {
    max-width: 34rem;
    font-size: 3.4rem
}

.about-process__steps {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    border-top: 0.1rem solid var(--line)
}

.about-process__step {
    min-width: 0;
    padding: 2.8rem 3.2rem 0 0
}

.about-process__step+.about-process__step {
    padding-left: 3.2rem;
    border-left: 0.1rem solid var(--line)
}

.about-process__meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1.6rem;
    margin-bottom: 3.6rem
}

.about-process__number {
    color: var(--green);
    font-size: 1.3rem;
    line-height: 1;
    font-weight: 700;
    letter-spacing: 0.08em
}

.about-process__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 4.8rem;
    height: 4.8rem;
    border: 0.1rem solid #b7c6ae;
    border-radius: 50%;
    background: #fff
}

.about-process__icon .v-icon {
    width: 2.4rem;
    height: 2.4rem
}

.about-process__step h3 {
    margin-bottom: 1.6rem;
    font-size: 2.2rem
}

.about-process__step p {
    max-width: 43rem;
    margin: 0;
    color: var(--muted);
    font-size: 1.7rem;
    line-height: 1.65
}

@media (max-width: 900px) {
    .about-process__layout {
        grid-template-columns: 1fr;
        gap: 3.6rem
    }

    .about-process__head h2 {
        max-width: none
    }
}

@media (max-width: 600px) {
    .about-process__head h2 {
        font-size: 2.8rem
    }

    .about-process__steps {
        grid-template-columns: 1fr
    }

    .about-process__step {
        padding: 2.4rem 0 3.2rem
    }

    .about-process__step+.about-process__step {
        padding: 3.2rem 0 0;
        border-top: 0.1rem solid var(--line);
        border-left: 0
    }

    .about-process__meta {
        margin-bottom: 2.4rem
    }
}

/* Лицензии: текстовая колонка шире (только десктоп, на mobile — одна колонка) */
@media (min-width: 1024px) {
    .view-licenses .split {
        grid-template-columns: 1.25fr 1fr;
        align-items: start
    }
}

.view-licenses figcaption h2 {
    font-size: 2.4rem;
    margin-top: 2.4rem
}

/* --------------------------------------------------------------------------
   3. Полоса истории (about)

   Разметка: <section class="v-history container"> — полоса с собственным
   ритмом, .section не добавляется.
   -------------------------------------------------------------------------- */

.v-history {
    display: flex;
    gap: 4.8rem;
    align-items: center;
    border-block: 0.1rem solid var(--line);
    padding: 2.8rem 0;
    margin-bottom: 4.8rem
}

.v-history strong {
    font-size: 5.6rem;
    line-height: 1.1;
    color: var(--green);
    font-weight: 600;
    letter-spacing: -0.2rem
}

.v-history span {
    display: block;
    font-size: 1.3rem;
    color: var(--muted);
    margin-top: 0.8rem
}

.v-history p {
    font-size: 1.8rem
}

.v-history>.v-icon {
    margin-left: auto;
    width: 6.4rem;
    height: 6.4rem
}

/* --------------------------------------------------------------------------
   4. Факты (about)
   -------------------------------------------------------------------------- */

.facts {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    border-block: 0.1rem solid var(--line);
    gap: 3.2rem;
    padding: 2.4rem 0;
}

.facts>div {
    display: grid;
    grid-template-columns: 3.6rem 1fr;
    column-gap: 1.6rem;
    align-content: center
}

.facts>div>.v-icon {
    grid-row: 1 / 3
}

.facts strong {
    display: block;
    font-size: 2rem;
    font-weight: 600
}

.facts span {
    font-size: 1.3rem;
    color: var(--muted)
}

/* --------------------------------------------------------------------------
   5. Реестр (реквизиты, контакты)
   -------------------------------------------------------------------------- */

.ledger {
    margin: 2.4rem 0
}

.ledger>div {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2.4rem;
    padding: 1.6rem 0;
    border-bottom: 0.1rem solid var(--line)
}

.ledger dt {
    color: var(--muted);
    font-size: 1.4rem
}

.ledger dd {
    margin: 0;
    overflow-wrap: anywhere
}

/* --------------------------------------------------------------------------
   6. Статья
   -------------------------------------------------------------------------- */

/* Редакторский текст услуги: вертикальный ритм между смысловыми блоками. */
.service-body > :first-child {
    margin-top: 1.6rem
}

.service-body h2 {
    margin: 4.8rem 0 1.8rem;
    font-size: 3rem
}

.service-body h3 {
    margin: 3.8rem 0 1.6rem
}

.service-body h4,
.service-body h5,
.service-body h6 {
    margin: 3.2rem 0 1.2rem;
    line-height: 1.3
}

.service-body p {
    margin: 1.6rem 0 0
}

.service-body ul,
.service-body ol {
    margin: 1.8rem 0 0;
    padding-left: 2.4rem
}

.service-body li {
    line-height: 1.65
}

.service-body li + li {
    margin-top: 0.8rem
}

.service-body :is(h2, h3, h4, h5, h6) + :is(p, ul, ol) {
    margin-top: 0
}

.article-layout {
    display: grid;
    grid-template-columns: minmax(0, 76rem) 28rem;
    gap: 8rem;
    align-items: start
}

.article-layout>* {
    min-width: 0
}

.prose h2 {
    margin: 4rem 0 2.4rem;
    font-size: 2.8rem
}

.prose h3 {
    margin: 3.2rem 0 1.6rem
}

.prose p {
    margin: 1.6rem 0
}

.prose ul {
    padding-left: 2.4rem
}

.prose li {
    margin: 1.2rem 0;
    line-height: 1.7
}

.callout {
    border-left: 0.3rem solid var(--green);
    padding: 2.4rem 3.2rem;
    background: var(--paper);
    margin: 3.2rem 0
}

.toc {
    padding: 2.4rem;
    border-block: 0.1rem solid var(--line)
}

.toc a {
    display: block;
    padding: 1rem 0;
    font-size: 1.4rem
}

.side-nav {
    position: sticky;
    top: 10rem
}

.side-nav a {
    display: block;
    border-bottom: 0.1rem solid var(--line);
    padding: 1.6rem 0;
    font-size: 1.5rem
}

.meta {
    margin-top: 2.4rem;
    color: var(--muted);
    font-size: 1.3rem
}

/* Сводка в начале статьи */
.v-article-summary {
    border: 0.1rem solid var(--line);
    background: var(--paper);
    border-radius: var(--radius);
    padding: 2.4rem;
    margin: 2.4rem 0 3.2rem
}

.v-article-summary>div {
    display: flex;
    gap: 2.4rem;
    flex-wrap: wrap;
    margin-top: 2rem
}

.v-article-summary span {
    display: flex;
    align-items: center;
    gap: 1.2rem;
    font-size: 1.4rem
}

.v-article-summary .v-icon {
    width: 2.4rem;
    height: 2.4rem
}

/* Список тезисов в статье */
.v-article-checks {
    padding: 0;
    list-style: none;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
    margin: 2.4rem 0
}

.v-article-checks li {
    margin: 0;
    display: flex;
    align-items: start;
    gap: 1.6rem;
    padding: 1.6rem 0;
    border-top: 0.1rem solid var(--line);
    font-size: 1.5rem
}

.v-article-checks .v-icon {
    width: 2.8rem;
    height: 2.8rem
}

/* --------------------------------------------------------------------------
   7. Каталог видов бизнеса
   -------------------------------------------------------------------------- */

.directory {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0 3.2rem
}

.directory a {
    border-bottom: 0.1rem solid var(--line);
    padding: 1.4rem 0;
    display: flex;
    justify-content: space-between;
    gap: 1.6rem;
    font-size: 1.4rem;
    overflow-wrap: anywhere
}

.v-directory-more {
    margin: 3.2rem 0 0;
    text-align: center
}

.v-directory-more .caption {
    margin: 1.2rem auto 0
}

.view-business-catalog .paper {
    border-top: 0.1rem solid var(--line)
}

/* --------------------------------------------------------------------------
   8. Лицензии
   -------------------------------------------------------------------------- */

.license-preview {
    padding: 3.2rem;
    background: var(--paper);
    border-radius: 1.6rem
}

.license-preview img {
    height: 42rem;
    width: 100%;
    object-fit: contain
}

.license-preview button {
    border: 0;
    background: transparent;
    width: 100%;
    padding: 0
}

#license-dialog {
    width: fit-content;
    max-width: calc(100% - 3.2rem);
    max-height: calc(100dvh - 3.2rem);
    padding: 1.6rem;
    overflow: hidden;
    border-color: rgb(32 40 30 / 0.12);
    border-radius: 2rem;
    background: var(--surface);
    box-shadow: 0 2.4rem 7rem rgb(29 35 27 / 0.24)
}

#license-dialog .close {
    margin: 0 0 1.2rem auto
}

#license-dialog img {
    display: block;
    width: auto;
    max-width: 100%;
    height: auto;
    max-height: calc(100dvh - 10.4rem);
    object-fit: contain;
    border-radius: 1.2rem
}

.missing-document {
    min-height: 28rem;
    padding: 3.2rem;
    background: var(--paper);
    display: flex;
    flex-direction: column;
    justify-content: center;
    border-radius: 1.6rem
}

.missing-document>.v-icon {
    width: 4.4rem;
    height: 4.4rem;
    margin-bottom: 2.4rem
}

.missing-document h2 {
    font-size: 2.6rem
}

.missing-document p {
    color: var(--muted);
    font-size: 1.5rem;
    margin-top: 1.6rem
}

/* --------------------------------------------------------------------------
   9. Контакты
   -------------------------------------------------------------------------- */

.contacts-section {
    padding-top: 3.2rem
}

.contacts-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(32rem, 0.6fr);
    gap: 4.8rem;
    align-items: start
}

.contacts-content,
.contacts-layout>* {
    min-width: 0
}

.contacts-content .v-hero-copy {
    max-width: 76rem
}

.contacts-details {
    margin-top: 6.4rem
}

.map-panel.contacts-map-panel {
    position: sticky;
    top: 10rem;
    align-self: start
}

.map-panel {
    position: relative;
    overflow: hidden;
    min-height: 0;
    background: var(--paper);
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 3.2rem;
    border-radius: 1.6rem;
    border: 0.1rem solid var(--line)
}

.map-panel>.v-icon {
    margin-bottom: 2rem;
    width: 4rem;
    height: 4rem
}

.map-panel>.actions {
    margin-top: 1.6rem;
}

.map-panel .address {
    font-size: 2.8rem;
    line-height: 1.3;
    margin: 2rem 0
}

.contacts-phone {
    display: inline-block;
    font-size: 4rem;
    font-weight: 600
}

.v-address-photo {
    width: 100%;
    height: 16rem;
    object-fit: cover;
    object-position: 75% 55%;
    margin-top: 2.4rem;
    border-radius: var(--radius-control)
}

/* --------------------------------------------------------------------------
   10. Ошибка 404

   Разметка: <section class="error-layout container"> — цельная композиция
   с собственным ритмом, .section не добавляется.
   -------------------------------------------------------------------------- */

.error-layout {
    display: grid;
    grid-template-columns: 1fr 1.2fr;
    gap: 8rem;
    align-items: center;
    padding: 6.4rem 0 9.6rem
}

.error-number {
    font-size: 26rem;
    color: var(--green);
    letter-spacing: -0.08em;
    line-height: 1
}

.v-error-photo {
    width: 100%;
    height: 17rem;
    object-fit: cover;
    object-position: right center;
    margin-top: 2.4rem;
    border-radius: 1.6rem
}

/* --------------------------------------------------------------------------
   11. Карта шаблонов (index.html, служебная страница)
   -------------------------------------------------------------------------- */

.view-index main {
    padding-bottom: 11.2rem
}

.template-hero {
    max-width: 86rem;
    padding-top: 3.2rem;
    padding-bottom: 5.6rem
}

.template-hero .lead {
    max-width: 72rem
}

.template-jumps {
    display: flex;
    flex-wrap: wrap;
    gap: 0.8rem;
    margin-top: 2.4rem
}

.template-jumps a {
    display: inline-flex;
    align-items: center;
    min-height: 3.8rem;
    padding: 0.8rem 1.4rem;
    border: 0.1rem solid #cdd9ca;
    border-radius: 99.9rem;
    color: #1d3b24;
    font-size: 1.4rem;
    text-decoration: none;
    transition: border-color 0.2s ease, background-color 0.2s ease
}

.template-jumps a:hover,
.template-jumps a:focus-visible {
    border-color: var(--green);
    background: #f1f7ef
}

.template-map {
    display: grid;
    gap: 8.4rem
}

.template-section {
    scroll-margin-top: 9.6rem
}

.template-section-head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(26rem, 44rem);
    gap: 2.8rem;
    align-items: end;
    padding-bottom: 2rem;
    border-bottom: 0.1rem solid var(--line);
    margin-bottom: 2.4rem
}

.template-section-head h2 {
    margin: 0;
    font-size: 4.4rem
}

.template-section-head p {
    margin: 0;
    color: var(--muted);
    line-height: 1.55
}

.template-kicker {
    display: block;
    margin-bottom: 0.7rem;
    color: var(--green);
    font-size: 1.2rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase
}

.template-root {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 1.8rem;
    align-items: center;
    padding: 2.2rem 2.4rem;
    border: 0.1rem solid var(--green);
    border-radius: 1.6rem;
    background: #eef6eb;
    color: #17371e;
    text-decoration: none
}

.template-root strong,
.template-card strong,
.template-child strong {
    display: block;
    font-size: 1.9rem;
    line-height: 1.25
}

.template-root small,
.template-card small,
.template-child small {
    display: block;
    margin-top: 0.7rem;
    color: var(--muted);
    font-size: 1.4rem;
    line-height: 1.45
}

.template-level {
    display: inline-flex;
    align-items: center;
    width: max-content;
    margin-bottom: 1rem;
    padding: 0.4rem 0.8rem;
    border-radius: 99.9rem;
    background: #dcebd8;
    color: #225d1b;
    font-size: 1.1rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase
}

.template-arrow {
    font-size: 2.4rem;
    line-height: 1;
    transition: transform 0.2s ease
}

.template-branches {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.8rem;
    margin-top: 1.8rem
}

.template-branch {
    display: grid;
    align-content: start;
    gap: 1rem;
    padding: 1.4rem;
    border: 0.1rem solid var(--line);
    border-radius: 1.8rem;
    background: #fafcf9
}

.template-card,
.template-child {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 1.4rem;
    align-items: center;
    padding: 1.8rem;
    border-radius: var(--radius);
    color: #17371e;
    text-decoration: none
}

.template-card {
    min-height: 14.4rem;
    border: 0.1rem solid #b7c9b2;
    background: #fff
}

.template-child {
    border: 0.1rem dashed #c8d3c5;
    background: #f4f7f3
}

.template-child strong {
    font-size: 1.6rem
}

.template-child .template-level {
    background: #e5eae3;
    color: #536056
}

.template-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.6rem
}

.template-grid .template-card {
    min-height: 12.4rem
}

.template-card:hover,
.template-card:focus-visible,
.template-child:hover,
.template-child:focus-visible,
.template-root:hover,
.template-root:focus-visible {
    border-color: var(--green);
    outline: none;
    box-shadow: 0 1rem 2.8rem rgb(28 72 27 / 0.08)
}

.template-root:hover .template-arrow,
.template-card:hover .template-arrow,
.template-child:hover .template-arrow {
    transform: translateX(0.4rem)
}

/* --------------------------------------------------------------------------
   Адаптив
   -------------------------------------------------------------------------- */

@media (max-width: 1199px) {
    .v-hero {
        gap: 3.2rem
    }

    .article-layout {
        gap: 4rem;
        grid-template-columns: minmax(0, 1fr) 24rem
    }
}

@media (max-width: 1023px) {
    .v-hero {
        grid-template-columns: minmax(0, 1fr) minmax(0, 0.8fr)
    }

    .v-hero-media>.v-photo {
        min-height: 30rem
    }

    .v-text-hero {
        display: block
    }

    .view-about .v-hero {
        display: block
    }

    .view-about .v-hero-media {
        margin-top: 2.4rem;
    }

    .split {
        gap: 3.2rem
    }

    .contacts-layout {
        grid-template-columns: minmax(0, 1fr) minmax(28rem, 0.65fr);
        gap: 3.2rem
    }

    .article-layout {
        grid-template-columns: 1fr
    }

    .article-layout aside {
        order: -1
    }

    .side-nav {
        position: static
    }

    .side-nav:not(.toc) {
        display: flex;
        flex-wrap: wrap;
        gap: 1.6rem
    }

    .side-nav a {
        padding: 1.2rem 0
    }

    .directory {
        grid-template-columns: repeat(2, minmax(0, 1fr))
    }
}

@media (max-width: 900px) {
    .template-branches {
        grid-template-columns: 1fr
    }

    .template-section-head {
        grid-template-columns: 1fr;
        gap: 1rem
    }
}

@media (max-width: 767px) {
    .v-hero {
        grid-template-columns: 1fr;
        gap: 2.4rem;
        padding: 1.6rem 0 4rem
    }

    .split-container {
        row-gap: 1.6rem;
    }

    .split .button.secondary {
        width: 100%;
    }

    .v-hero-media>.v-photo {
        height: 22rem;
        min-height: 0;
        max-height: 22rem
    }

    .v-hero-facts {
        gap: 1.6rem;
        margin-top: 2rem;
        font-size: 1.2rem
    }

    .v-history {
        gap: 2.4rem;
        align-items: start;
        flex-direction: column
    }

    .v-history>.v-icon {
        display: none
    }

    .v-history strong {
        font-size: 4.8rem
    }

    .v-history p {
        font-size: 1.6rem
    }

    .split {
        grid-template-columns: 1fr
    }

    .contacts-section {
        padding-top: 1.6rem
    }

    .contacts-layout {
        grid-template-columns: 1fr;
        gap: 3.2rem
    }

    .contacts-details {
        margin-top: 4rem
    }

    .map-panel.contacts-map-panel {
        position: static
    }

    .facts {
        grid-template-columns: 1fr;
        gap: 1.6rem
    }

    .facts>div {
        padding-block: 1.2rem
    }

    .facts>div+div {
        border-top: 0.1rem solid var(--line);
        padding-top: 2rem
    }

    .ledger>div {
        grid-template-columns: 1fr;
        gap: 0.4rem
    }

    .prose h2 {
        font-size: 2.5rem
    }

    .service-body h2 {
        margin-top: 4rem;
        font-size: 2.6rem
    }

    .service-body h3 {
        margin-top: 3.2rem
    }

    .v-article-checks {
        grid-template-columns: 1fr;
        gap: 0
    }

    .v-article-summary>div {
        display: grid;
        gap: 1.6rem
    }

    .directory {
        grid-template-columns: 1fr
    }

    .license-preview {
        padding: 2.4rem
    }

    .license-preview img {
        height: 32rem
    }

    #license-dialog {
        max-width: calc(100% - 1.6rem);
        max-height: calc(100dvh - 1.6rem);
        padding: 0.8rem;
        border-radius: 1.4rem
    }

    #license-dialog .close {
        margin: 0 0 0.8rem auto
    }

    #license-dialog img {
        max-height: calc(100dvh - 8rem);
        border-radius: 0.8rem
    }

    .missing-document {
        min-height: 32rem
    }

    .map-panel {
        min-height: 28rem
    }

    .error-layout {
        grid-template-columns: 1fr;
        padding: 2.4rem 0 5.6rem;
        gap: 2.4rem
    }

    .error-number {
        font-size: 12rem
    }

    .v-error-photo {
        height: 10rem
    }
}

@media (max-width: 640px) {
    .template-grid {
        grid-template-columns: 1fr
    }

    .template-root,
    .template-card,
    .template-child {
        padding: 1.6rem
    }
}