/* mlc.css — только страница /<lang>/mobila-la-comanda/ (templates/mobila_la_comanda.html).
   Подключается после style.min.css. Всё под .mlc — на другие страницы не влияет.
   Правило страницы: любое фото показывается ЦЕЛИКОМ — рамка = пропорции файла (width/height у <img>),
   никаких object-fit:cover, никаких scale у <img> в покое. Скрытые состояния в CSS не задаются никогда:
   прячет только mlc.js, только ниже экрана и только после первого действия человека. */

/* ───────── токены ───────── */
.mlc {
    --mlc-paper: #fff;
    --mlc-warm: #f5f0eb;
    --mlc-dark: #1a1a1a;
    --mlc-ink: #1a1a1a;
    --mlc-text: #3b342d;
    --mlc-muted: #6b6258;
    --mlc-accent: #5a3e29;
    --mlc-accent-d: #e8d5c4;
    --mlc-on-dark: #f5f0eb;
    --mlc-on-dark-2: rgba(245, 240, 235, .66);
    --mlc-line: rgba(26, 26, 26, .12);
    --mlc-line-d: rgba(245, 240, 235, .18);
    --mlc-gutter: clamp(20px, 4.7vw, 48px);            /* = край шапки (48 px) от 1024 */
    --mlc-gap: clamp(12px, 1.67vw, 24px);
    --mlc-max: 1360px;
    --mlc-sec: clamp(72px, 3rem + 5vw, 144px);
    --mlc-head: clamp(36px, 1.25rem + 2.4vw, 72px);
    --mlc-header: 107px;
    --mlc-top: var(--header-h, var(--mlc-header));
    --mlc-sticky: calc(var(--mlc-top) + 48px);
    --mlc-ease: cubic-bezier(.16, 1, .3, 1);
    display: block;
    background: var(--mlc-paper);
    color: var(--mlc-text);
    font-weight: 400;
    font-variant-numeric: lining-nums;
    font-feature-settings: "lnum" 1;
    overflow-wrap: break-word;
    interpolate-size: allow-keywords;
}
@media (max-width: 768px) {
    .mlc { --mlc-header: 80px; }
}

/* ───────── база ───────── */
.mlc :where(section) { position: relative; padding: var(--mlc-sec) 0; }
.mlc :where(figure) { margin: 0; }
.mlc img { display: block; width: 100%; height: auto; max-width: none; }
.mlc :where(p) { margin: 0; }
.mlc-container {
    width: 100%;
    max-width: calc(var(--mlc-max) + 2 * var(--mlc-gutter));
    margin-inline: auto;
    padding-inline: var(--mlc-gutter);
}
.mlc-media { position: relative; overflow: hidden; background: var(--mlc-warm); }
.mlc a:focus-visible,
.mlc button:focus-visible,
.mlc summary:focus-visible { outline: 1px solid var(--mlc-accent); outline-offset: 4px; }

/* ───────── типографика ───────── */
.mlc-h2 {
    margin: 0 0 var(--mlc-head);
    max-width: 24ch;
    font-size: clamp(1.875rem, 1.35rem + 1.6vw, 2.875rem);
    font-weight: 300;
    line-height: 1.14;
    letter-spacing: -.01em;
    color: var(--mlc-ink);
    text-wrap: balance;
}
/* «гравированная» риска над каждым H2; mlc.js дорисовывает её через --mlc-rule (0→1) */
.mlc-h2::before {
    content: "";
    display: block;
    width: 32px;
    height: 1px;
    margin-bottom: 24px;
    background: var(--mlc-accent);
    transform-origin: left center;
    transform: scaleX(var(--mlc-rule, 1));
}
/* маски строк SplitText: запас .1em сверху/снизу под диакритику (Î, Ă, Й) и выносные (ș, р, у).
   Без отрицательных margin (они схлопываются и дают +4 px на строку = CLS): строка ужата на те же .2em,
   итоговая высота маски = 1.14em, как у строки без разбиения. */
.mlc-h2 .mlc-line-mask { padding-block: .1em; }
.mlc-h2 .mlc-line { line-height: .94em; }
.mlc-lead {
    font-size: clamp(1.125rem, 1rem + .42vw, 1.3125rem);
    line-height: 1.6;
    color: #2b2520;
    max-width: 46ch;
}
.mlc-prose p,
.mlc-step__body,
.mlc-faq__a {
    font-size: 1.0625rem;
    line-height: 1.72;
    color: var(--mlc-text);
    max-width: 36em;                                  /* ≈ 66 знаков; 66ch у Raleway = 767 px и не ограничивал */
    text-wrap: pretty;
}
.mlc-prose p + p { margin-top: 1.05em; }
.mlc-prose--lead p:first-child {
    font-size: clamp(1.125rem, 1rem + .42vw, 1.3125rem);
    line-height: 1.6;
    color: #2b2520;
}
.mlc-eyebrow {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 28px;
    font-size: .75rem;
    font-weight: 500;
    letter-spacing: .24em;
    text-transform: uppercase;
    color: var(--mlc-accent);
}
.mlc-eyebrow::after {
    content: "";
    flex: none;
    width: 48px;
    height: 1px;
    background: currentColor;
    transform-origin: left center;
    animation: mlc-rule .9s var(--mlc-ease) .25s both;
}

/* ───────── кнопка и стрелка ───────── */
.mlc-btn {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    min-height: 56px;
    padding: 0 30px;
    background: var(--mlc-ink);
    color: #fff;
    font-size: .8125rem;
    font-weight: 500;
    letter-spacing: .18em;
    text-transform: uppercase;
    text-decoration: none;
    white-space: nowrap;
}
.mlc-btn::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: var(--mlc-accent);
    transform: scaleX(0);
    transform-origin: left center;                    /* одна точка опоры: уход курсора посреди заливки без скачка */
    transition: transform .5s cubic-bezier(.33, 1, .68, 1);
}
.mlc-arrow { flex: none; width: 26px; height: 12px; transition: transform .5s var(--mlc-ease); }
.mlc-pin { width: 20px; height: 20px; }
@media (hover: hover) {
    .mlc-btn:hover::before { transform: scaleX(1); }
    .mlc-btn:hover .mlc-arrow { transform: translateX(4px); }
}
.mlc-btn:focus-visible::before { transform: scaleX(1); }

/* ───────── 1. hero ───────── */
.mlc-hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    background: var(--mlc-warm);
    padding: var(--mlc-top) 0 56px max(var(--mlc-gutter), calc((100% - var(--mlc-max)) / 2));
}
.mlc-hero__text { padding: 40px clamp(32px, 5vw, 96px) 40px 0; }
.mlc-hero__title {
    margin: 0 0 28px;
    font-size: clamp(2.5rem, 1.6rem + 3.4vw, 4.75rem);
    font-weight: 300;
    line-height: 1.04;
    letter-spacing: -.015em;
    color: var(--mlc-ink);
    text-wrap: balance;
}
.mlc-hero__sub {
    max-width: 34em;
    margin-bottom: 40px;
    font-size: clamp(1.0625rem, .98rem + .35vw, 1.25rem);
    line-height: 1.62;
    color: #2b2520;
}
.mlc-hero__fig {
    position: relative;
    overflow: hidden;
    align-self: start;
    background: #e9e1d7;
    width: min(52vw, calc((100vh - var(--mlc-top) - 56px) * var(--arn, 1)));
    width: min(52vw, calc((100svh - var(--mlc-top) - 56px) * var(--arn, 1)));
}
/* въезд фото: «оседание» 1.04→1 за 1.8 с, чистый CSS (не ждёт GSAP, LCP не задерживает, в покое scale=1) */
.mlc-hero__fig img { animation: mlc-settle 1.8s var(--mlc-ease) both; }
@keyframes mlc-settle { from { transform: scale(1.04); } to { transform: none; } }
@keyframes mlc-rule { from { transform: scaleX(0); } to { transform: none; } }

@media (max-width: 1023px) {
    .mlc-hero {
        display: block;
        padding: var(--mlc-top) 0 0;
    }
    .mlc-hero__text { padding: 40px var(--mlc-gutter) 44px; }
    .mlc-hero__fig {
        margin-inline: auto;
        width: min(100%, calc((100vh - var(--mlc-top) - 32px) * var(--arn, 1)));
        width: min(100%, calc((100svh - var(--mlc-top) - 32px) * var(--arn, 1)));
    }
}
@media (max-width: 767px) {
    .mlc-hero__text { padding: 32px var(--mlc-gutter) 36px; }
    .mlc-hero__title { margin-bottom: 20px; }
    .mlc-hero__sub { margin-bottom: 28px; }
    .mlc-btn { display: flex; width: 100%; padding: 14px 20px; letter-spacing: .14em; white-space: normal; text-align: center; }
}

/* ───────── 2. intro ───────── */
.mlc-intro__grid,
.mlc-split,
.mlc-mat__head,
.mlc-show__wrap,
.mlc-cta__grid {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--mlc-gap);
    align-items: start;
}
.mlc-intro__aside { grid-column: 1 / span 5; }
.mlc-intro__aside .mlc-h2 { margin-bottom: 40px; }
.mlc-intro__body { grid-column: 7 / -1; padding-top: 25px; }
@media (min-width: 1024px) and (min-height: 700px) {
    .mlc-intro__aside { position: sticky; top: var(--mlc-sticky); }
}
@media (max-width: 1023px) {
    .mlc-intro__aside, .mlc-intro__body { grid-column: 1 / -1; }
    .mlc-intro__body { padding-top: 40px; }
}

/* ───────── 3. категории ───────── */
.mlc-cats { background: var(--mlc-warm); }
.mlc-cats__grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 48px var(--mlc-gap); }
.mlc-cat { display: block; color: var(--mlc-ink); text-decoration: none; }
.mlc-cat__media {
    display: block;
    aspect-ratio: 1 / 1;
    background: #fff;
    transition: transform .7s var(--mlc-ease), box-shadow .7s var(--mlc-ease);
}
/* фото 1:1 в плитке 1:1 — совпадает точно; если в каталоге окажется не квадрат, будет поле, а не обрезка */
.mlc-cat__media img { width: 100%; height: 100%; object-fit: contain; }
/* интерьер среди вырезок: паспарту на той же белой плитке — все карточки читаются как «предмет на белом» */
.mlc-cat__media--photo { padding: 9%; }
.mlc-cat__cap {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 18px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--mlc-line);
}
.mlc-cat__cap::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1px;
    height: 1px;
    background: var(--mlc-accent);
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform .7s var(--mlc-ease);
}
.mlc-cat__label { font-size: 1rem; font-weight: 500; letter-spacing: .02em; line-height: 1.35; }
.mlc-cat .mlc-arrow { color: var(--mlc-accent); transform: translateX(-6px); }
@media (hover: hover) {
    .mlc-cat:hover .mlc-cat__media { transform: translateY(-6px); box-shadow: 0 26px 48px -30px rgba(26, 26, 26, .32); }
    .mlc-cat:hover .mlc-cat__cap::after { transform: scaleX(1); }
    .mlc-cat:hover .mlc-arrow { transform: none; }
}
@media (max-width: 1023px) {
    .mlc-cats__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px var(--mlc-gap); }
    /* пятая карточка (нечётная последняя) — по центру, той же ширины, а не одна у левого края */
    .mlc-cat:last-child:nth-child(odd) {
        grid-column: 1 / -1;
        justify-self: center;
        width: calc((100% - var(--mlc-gap)) / 2);
    }
}
@media (max-width: 767px) {
    .mlc-cat__cap { margin-top: 12px; padding-bottom: 10px; }
    .mlc-cat__label { font-size: .9375rem; }
    .mlc-cat .mlc-arrow { width: 18px; }
}

/* ───────── 4. процесс (и общий «сплит»: липкий заголовок + колонка) ───────── */
.mlc-split__head { grid-column: 1 / span 4; }
.mlc-steps, .mlc-faq__list { grid-column: 6 / -1; }
@media (min-width: 1024px) and (min-height: 700px) {
    .mlc-split__head { position: sticky; top: var(--mlc-sticky); }
}
.mlc-steps { position: relative; border-top: 1px solid var(--mlc-line); }
.mlc-steps__rail { position: absolute; left: 0; top: 0; bottom: 0; width: 1px; background: var(--mlc-line); }
.mlc-steps__fill { position: absolute; inset: 0; background: var(--mlc-accent); transform-origin: center top; }
.mlc-step {
    display: grid;
    grid-template-columns: clamp(72px, 7vw, 112px) minmax(0, 1fr);
    padding: 40px 0 44px;
    border-bottom: 1px solid var(--mlc-line);
}
.mlc-step__num {
    padding-left: 24px;
    font-size: clamp(1.75rem, 1.2rem + 1.4vw, 2.5rem);
    font-weight: 300;
    line-height: 1;
    color: var(--mlc-accent);
    transition: color .5s ease;
}
@media (min-width: 1024px) {
    .mlc-step { grid-template-columns: calc((100% + var(--mlc-gap)) / 7) minmax(0, 1fr); }
    .mlc-faq__list { grid-column: 7 / -1; }           /* вопросы на той же вертикали, что текст шагов и intro */
}
.mlc-steps.is-live .mlc-step__num { color: #9a8f82; }
.mlc-steps.is-live .mlc-step.is-active .mlc-step__num { color: var(--mlc-accent); }
.mlc-step__title {
    margin: 4px 0 14px;
    font-size: clamp(1.125rem, 1rem + .35vw, 1.3125rem);
    font-weight: 500;
    letter-spacing: .01em;
    color: var(--mlc-ink);
}
@media (max-width: 1023px) {
    .mlc-split__head, .mlc-steps, .mlc-faq__list { grid-column: 1 / -1; }
}
@media (max-width: 767px) {
    .mlc-steps__rail { display: none; }
    .mlc-step { grid-template-columns: 44px minmax(0, 1fr); align-items: baseline; padding: 28px 0 32px; }
    .mlc-step__main { display: contents; }            /* номер + заголовок в строку, текст на всю ширину */
    .mlc-step__num { padding-left: 0; font-size: 1.625rem; }
    .mlc-step__title { grid-column: 2; margin: 0; }
    .mlc-step__body { grid-column: 1 / -1; margin-top: 14px; }
}

/* ───────── 5. why ───────── */
.mlc-why { background: var(--mlc-dark); color: var(--mlc-on-dark); }
.mlc-why--pano { padding-bottom: 0; }
.mlc-why .mlc-h2 { color: var(--mlc-on-dark); }
.mlc-why .mlc-h2::before { background: var(--mlc-accent-d); }
.mlc-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: var(--mlc-gap); row-gap: 44px; }
.mlc-stat { position: relative; padding: 4px 16px 0 24px; }
.mlc-stat::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 1px;
    background: var(--mlc-line-d);
    transform-origin: center top;
    transform: scaleY(var(--mlc-draw, 1));
}
.mlc-stat:first-child { padding-left: 0; }
.mlc-stat:first-child::before { display: none; }
.mlc-stat__value {
    overflow: hidden;
    overflow: clip;
    padding-block: .08em;
    margin-block: -.08em;
    font-size: clamp(2rem, 1rem + 3.2vw, 4.25rem);
    font-weight: 300;
    line-height: 1;
    letter-spacing: -.02em;
    white-space: nowrap;
    color: var(--mlc-accent-d);
}
.mlc-stat__v { display: inline-block; }
.mlc-stat__label {
    margin-top: 18px;
    font-size: .75rem;
    font-weight: 500;
    line-height: 1.5;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--mlc-on-dark-2);
}
.mlc-why__band {
    margin-top: var(--mlc-sec);
    background: linear-gradient(to bottom, var(--mlc-dark) 0 62%, var(--mlc-paper) 62% 100%);
}
.mlc-why__fig { background: #2a2622; }
@media (max-width: 767px) {
    .mlc-why__band .mlc-container { padding-inline: 0; }   /* панорама 2,19:1 на телефоне — во всю ширину, как hero */
}
@media (max-width: 1199px) {
    .mlc-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .mlc-stat:nth-child(odd) { padding-left: 0; }
    .mlc-stat:nth-child(odd)::before { display: none; }
}
@media (max-width: 767px) {
    .mlc-stat { padding: 4px 4px 0 16px; }
    .mlc-stat:nth-child(odd) { padding-left: 0; }
}

/* ───────── 6. материалы ───────── */
.mlc-mat__head { margin-bottom: var(--mlc-head); }
.mlc-mat__head .mlc-h2 { grid-column: 1 / span 5; margin-bottom: 0; }
.mlc-mat__intro { grid-column: 7 / -1; padding-top: 25px; }
.mlc-mat__grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); column-gap: var(--mlc-gap); }
.mlc-mat__item { position: relative; padding-top: 26px; }
.mlc-mat__item::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 1px;
    background: rgba(90, 62, 41, .5);
    transform-origin: left center;
    transform: scaleX(var(--mlc-draw, 1));
}
.mlc-mat__name {
    margin: 0 0 12px;
    font-size: 1.125rem;
    font-weight: 500;
    letter-spacing: .01em;
    color: var(--mlc-ink);
}
.mlc-mat__body { font-size: .9375rem; line-height: 1.65; color: var(--mlc-text); text-wrap: pretty; }
/* переносы по слогам — только немецкий (длинные составные слова в узких колонках) */
.mlc-mat__body:lang(de), .mlc-stat__label:lang(de) { -webkit-hyphens: auto; hyphens: auto; }
@media (max-width: 1199px) {
    .mlc-mat__grid { grid-template-columns: 1fr; }
    .mlc-mat__item {
        display: grid;
        grid-template-columns: repeat(12, minmax(0, 1fr));
        column-gap: var(--mlc-gap);
        padding: 26px 0 30px;
    }
    .mlc-mat__name { grid-column: 1 / span 6; margin: 0; }
    .mlc-mat__body { grid-column: 7 / -1; max-width: 36em; font-size: 1rem; }   /* = вертикаль вводного абзаца */
}
@media (max-width: 1023px) {
    .mlc-mat__head .mlc-h2, .mlc-mat__intro { grid-column: 1 / -1; }            /* T: как все секции — стопкой */
    .mlc-mat__intro { padding-top: 0; margin-top: 28px; }
    .mlc-mat__name { grid-column: 1 / span 4; }
    .mlc-mat__body { grid-column: 5 / -1; }
}
@media (max-width: 767px) {
    .mlc-mat__item { display: block; padding: 22px 0 26px; }
    .mlc-mat__name { margin-bottom: 10px; }
}

/* ───────── 7. FAQ ───────── */
.mlc-faq { background: var(--mlc-warm); }
.mlc-faq__list { border-top: 1px solid var(--mlc-line); }
.mlc-faq__item { border-bottom: 1px solid var(--mlc-line); }
.mlc-faq__item summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    min-height: 72px;
    padding: 22px 0;
    list-style: none;
    cursor: pointer;
    font-size: clamp(1.0625rem, 1rem + .3vw, 1.25rem);
    font-weight: 500;
    line-height: 1.4;
    color: var(--mlc-ink);
    transition: color .35s ease;
}
.mlc-faq__item summary::-webkit-details-marker { display: none; }
.mlc-faq__item summary::marker { content: ""; }
.mlc-faq__icon { position: relative; flex: none; width: 16px; height: 16px; }
.mlc-faq__icon::before,
.mlc-faq__icon::after {
    content: "";
    position: absolute;
    background: var(--mlc-accent);
    transition: transform .45s var(--mlc-ease), opacity .35s ease;
}
.mlc-faq__icon::before { left: 0; right: 0; top: 50%; height: 1px; margin-top: -.5px; }
.mlc-faq__icon::after { top: 0; bottom: 0; left: 50%; width: 1px; margin-left: -.5px; }
.mlc-faq__item[open] .mlc-faq__icon::after { transform: rotate(90deg); opacity: 0; }
.mlc-faq__a { padding: 0 48px 30px 0; transition: opacity .3s ease .06s; }
.mlc-faq__item:not([open]) .mlc-faq__a { opacity: 0; transition-delay: 0s; }
/* плавное раскрытие без JS: Chrome/Edge 131+ анимируют, Safari 18.4+ раскрывает сразу, остальные — нативно.
   .45 с < 500 мс окна после клика — сдвиг блоков ниже не идёт в CLS */
.mlc-faq__item::details-content {
    block-size: 0;
    overflow-y: clip;
    transition: block-size .45s var(--mlc-ease), content-visibility .45s allow-discrete;
}
.mlc-faq__item[open]::details-content { block-size: auto; }
@media (hover: hover) {
    .mlc-faq__item summary:hover { color: var(--mlc-accent); }
}
@media (max-width: 767px) {
    .mlc-faq__item summary { min-height: 64px; padding: 18px 0; }
    .mlc-faq__a { padding-right: 0; padding-bottom: 24px; }
}

/* ───────── 8. шоурумы + фасад карты ───────── */
.mlc-show { background: var(--mlc-paper); }
.mlc-show__list { grid-column: 1 / span 5; border-top: 1px solid var(--mlc-line); }
.mlc-show__list--solo { max-width: 640px; }
.mlc-show__item { position: relative; padding: 24px 0 26px; border-bottom: 1px solid var(--mlc-line); }
/* место под круглую кнопку-пин справа: только у строк, где она есть (RO, несколько шоурумов) */
.mlc-show__item--pin .mlc-show__name, .mlc-show__item--pin .mlc-show__addr { padding-right: 60px; }
.mlc-show__name { margin: 0 0 8px; font-size: 1.125rem; font-weight: 500; color: var(--mlc-ink); }
.mlc-show__addr,
.mlc-show__hours { display: block; font-size: .9375rem; line-height: 1.6; color: var(--mlc-muted); }
.mlc-show__phone {
    display: inline-block;
    margin: 6px 0;
    font-size: 1rem;
    color: var(--mlc-ink);
    text-decoration: none;
    background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat;
    transition: background-size .5s var(--mlc-ease), color .3s;
}
.mlc-show__pin {
    position: absolute;
    right: 0;
    top: 20px;
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 1px solid var(--mlc-line);
    border-radius: 50%;
    background: transparent;
    color: var(--mlc-accent);
    cursor: pointer;
    transition: background-color .35s ease, border-color .35s ease, color .35s ease;
}
.mlc-show__item.is-active .mlc-show__pin { background: var(--mlc-accent); border-color: var(--mlc-accent); color: #fff; }
@media (hover: hover) {
    .mlc-show__phone:hover { background-size: 100% 1px; color: var(--mlc-accent); }
    .mlc-show__pin:hover { border-color: var(--mlc-accent); }
}
.mlc-map {
    grid-column: 7 / -1;
    position: relative;
    overflow: hidden;
    aspect-ratio: 4 / 3;
    background-color: var(--mlc-warm);
    background-image:
        linear-gradient(rgba(90, 62, 41, .07) 1px, transparent 1px),
        linear-gradient(90deg, rgba(90, 62, 41, .07) 1px, transparent 1px);
    background-size: 64px 64px;
    background-position: -1px -1px;
}
@media (min-width: 1024px) and (min-height: 700px) {
    .mlc-map { position: sticky; top: var(--mlc-sticky); }
}
.mlc-map iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; }
.mlc-map__ask {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 24px;
    border: 0;
    background: radial-gradient(closest-side, rgba(245, 240, 235, .96), rgba(245, 240, 235, .55) 70%, rgba(245, 240, 235, 0));
    color: var(--mlc-accent);
    font: inherit;
    cursor: pointer;
}
.mlc-map__ask .mlc-pin { order: 1; width: 30px; height: 30px; transition: transform .5s var(--mlc-ease); }
.mlc-map__ask::before {
    content: attr(data-title);
    order: 2;
    font-size: .8125rem;
    font-weight: 500;
    letter-spacing: .18em;
    text-transform: uppercase;
}
.mlc-map__ask::after {
    content: attr(data-note);
    order: 3;
    max-width: 34ch;
    font-size: .8125rem;
    line-height: 1.5;
    color: var(--mlc-muted);
    text-align: center;
}
@media (hover: hover) {
    .mlc-map__ask:hover .mlc-pin { transform: translateY(-4px); }
}
.mlc-show--single .mlc-show__wrap { align-items: center; }
.mlc-show--single .mlc-map { aspect-ratio: 16 / 10; }
.mlc-show--single .mlc-show__name { font-size: clamp(1.25rem, 1.1rem + .5vw, 1.5rem); font-weight: 400; }
@media (max-width: 1023px) {
    .mlc-show__list, .mlc-map { grid-column: 1 / -1; }
    .mlc-map { margin-top: 32px; }
}
@media (max-width: 767px) {
    .mlc-map, .mlc-show--single .mlc-map { aspect-ratio: 4 / 3; }
}
/* Safari < 15 без aspect-ratio: у фасада только absolute-дети, без запасной высоты он схлопнулся бы в 0 */
@supports not (aspect-ratio: 1 / 1) {
    .mlc-map { height: 0; padding-top: 75%; }
    .mlc-show--single .mlc-map { padding-top: 62.5%; }
    @media (max-width: 767px) {
        .mlc-show--single .mlc-map { padding-top: 75%; }
    }
}

/* ───────── 9. CTA ───────── */
.mlc-cta { background: var(--mlc-warm); }
.mlc-cta__grid { align-items: start; }
.mlc-cta__fig { grid-column: 7 / -1; grid-row: 1; }
.mlc-cta__text { grid-column: 1 / span 5; grid-row: 1; }
.mlc-cta__body { margin-bottom: 40px; }
@media (max-width: 1023px) {
    .mlc-cta__fig, .mlc-cta__text { grid-column: 1 / -1; grid-row: auto; }
    .mlc-cta__text { margin-top: 48px; }
}

/* ───────── доступность и печать ───────── */
@media (prefers-reduced-motion: reduce) {
    .mlc *, .mlc *::before, .mlc *::after {
        animation: none !important;
        transition-duration: .01ms !important;
    }
    .mlc-cat:hover .mlc-cat__media { transform: none; box-shadow: none; }
}
@media print {
    .mlc [style] { opacity: 1 !important; transform: none !important; clip-path: none !important; visibility: visible !important; }
    .mlc-map { display: none; }
}