/* ===== muyo.ru — article.css =====================================
   Общий стиль контент-страниц (подборки + гиды). Подключается ПОСЛЕ
   /assets/v4.css. Заменяет прежний инлайн-блок и добавляет:
   hero-шапку, карточки объектов (.plist/.pcard), нумерацию разделов,
   выразительные врезки и CTA-баннер. Мобайл-first, reduced-motion-safe. */

/* ---- контейнер-статья + мягкая hero-подложка --------------------- */
.article{position:relative;padding:30px 0 84px;isolation:isolate}
.article::before{content:"";position:absolute;inset:0 0 auto 0;height:300px;z-index:-2;
  background:linear-gradient(180deg,var(--sky-50) 0%,#FBFDFF 62%,transparent 100%)}
.article::after{content:"";position:absolute;top:0;right:0;width:min(46%,560px);height:300px;z-index:-1;pointer-events:none;
  background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='560' height='300' viewBox='0 0 560 300'><circle cx='452' cy='86' r='52' fill='%23FFB22B' opacity='0.20'/><circle cx='452' cy='86' r='30' fill='%23FFB22B' opacity='0.28'/><path d='M0 226 L120 176 L236 224 L360 174 L470 222 L560 186 L560 300 L0 300Z' fill='%231B86FF' opacity='0.10'/><path d='M0 262 L150 214 L300 264 L440 216 L560 256 L560 300 L0 300Z' fill='%2316B07A' opacity='0.10'/></svg>") no-repeat top right}
.article .wrap{max-width:840px}

/* ---- хлебные крошки ---------------------------------------------- */
.crumbs{margin:0 0 1rem}
.crumbs ol{list-style:none;display:flex;flex-wrap:wrap;gap:.35rem .5rem;padding:0;margin:0;font-size:.85rem;color:var(--muted)}
.crumbs li{display:inline-flex;align-items:center;gap:.5rem}
.crumbs li+li::before{content:"›";color:var(--line-2);font-weight:700}
.crumbs a{color:var(--muted);font-weight:600}
.crumbs a:hover{color:var(--sky-700)}
.crumbs [aria-current="page"]{color:var(--ink);font-weight:600}

/* ---- шапка статьи: eyebrow + H1 + лид ----------------------------- */
.prose>.eyebrow{margin:0 0 .5rem}
.prose h1{font-size:clamp(2.05rem,4.6vw,3.1rem);margin:.2rem 0 0;letter-spacing:-.025em}
.lede-pg{color:var(--muted);font-size:1.16rem;line-height:1.5;margin:.85rem 0 0;max-width:60ch}

/* ---- проза + нумерация разделов ----------------------------------- */
.prose{counter-reset:sec}
.prose h2{font-size:clamp(1.5rem,3vw,2.05rem);margin:2.7rem 0 .9rem;scroll-margin-top:96px;
  display:flex;align-items:center;gap:.7rem;letter-spacing:-.02em}
.prose h2::before{counter-increment:sec;content:counter(sec);flex:none;
  width:1.7em;height:1.7em;display:inline-grid;place-items:center;font-size:.62em;
  font-family:"Inter Tight",sans-serif;font-weight:800;color:#fff;border-radius:.55em;
  background:var(--primary);box-shadow:0 2px 6px -2px rgba(16,58,99,.4)}
#faq.faq-sec h2::before,h2.no-num::before{content:none}
.prose h3{font-size:1.22rem;margin:1.7rem 0 .5rem}
.prose p{margin:0 0 1rem}
.prose ul,.prose ol{margin:0 0 1rem;padding-left:1.3rem}
.prose li{margin:.35rem 0}
.prose a{color:var(--sky-700);text-decoration:underline;text-underline-offset:2px}
.prose a:hover{color:var(--sky)}
.prose .btn{text-decoration:none}

/* ---- AEO «Коротко» — врезка прямого ответа ------------------------ */
.kort{position:relative;background:var(--soft);
  border:1px solid var(--line);border-radius:var(--r);padding:20px 22px 20px 24px;margin:1.5rem 0 0}
.kort::before{content:"";position:absolute;left:0;top:14px;bottom:14px;width:4px;border-radius:5px;background:var(--primary)}
.kort .kort-l{display:inline-flex;align-items:center;gap:.5rem;font-family:"Inter Tight";font-weight:700;font-size:.78rem;letter-spacing:.08em;text-transform:uppercase;color:var(--sky-700);margin-bottom:.5rem}
.kort .kort-l svg{width:18px;height:18px}
.kort p{font-size:1.08rem;line-height:1.55;margin:0}

/* ---- оглавление (TOC) -------------------------------------------- */
.toc{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:18px 22px;margin:1.8rem 0}
.toc .toc-l{font-family:"Inter Tight";font-weight:700;font-size:.95rem;margin-bottom:.7rem;display:flex;align-items:center;gap:.5rem}
.toc .toc-l::before{content:"";width:18px;height:3px;border-radius:3px;background:var(--primary)}
.toc ol{list-style:none;counter-reset:t;padding:0;margin:0;display:grid;grid-template-columns:1fr 1fr;gap:.2rem .9rem}
.toc li{counter-increment:t}
.toc a{display:flex;gap:.6rem;font-weight:600;color:var(--ink);padding:.25rem 0}
.toc a::before{content:counter(t);font-family:"Inter Tight";font-weight:700;color:var(--sky);min-width:1.3em}
.toc a:hover{color:var(--sky-700)}

/* ---- карточки объектов (.plist/.pcard) — ядро подборки ------------ */
.plist{display:grid;grid-template-columns:repeat(auto-fill,minmax(248px,1fr));gap:16px;margin:1.3rem 0 1.5rem}
.pcard{display:flex;flex-direction:column;background:var(--card);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;transition:.22s var(--ease)}
.pcard:hover{transform:translateY(-3px);box-shadow:var(--shadow);border-color:var(--line-2)}
.pcard .thumb{position:relative;aspect-ratio:16/10}
.pcard .thumb svg{width:100%;height:100%;display:block}
.pcard .badge{position:absolute;top:10px;left:10px;background:rgba(255,255,255,.94);color:var(--ink);
  font-family:"Inter Tight";font-weight:700;font-size:.72rem;padding:.28rem .6rem;border-radius:999px;box-shadow:var(--shadow-sm)}
.pcard .rate{position:absolute;bottom:10px;left:10px;display:inline-flex;align-items:center;gap:.28rem;
  background:rgba(255,255,255,.94);color:var(--ink);font-family:"Inter Tight";font-weight:700;font-size:.78rem;padding:.28rem .55rem;border-radius:8px;box-shadow:var(--shadow-sm)}
.pcard .rate svg{width:13px;height:13px;color:var(--sun)}
.pcard .pb{padding:14px 16px 16px;display:flex;flex-direction:column;gap:.45rem;flex:1}
.pcard h4{font-family:"Inter Tight";font-weight:700;font-size:1.04rem;line-height:1.22;margin:0;color:var(--ink)}
.pcard .loc{display:flex;align-items:center;gap:.35rem;color:var(--muted);font-size:.9rem}
.pcard .loc svg{width:14px;height:14px;color:var(--sky);flex:none}
.pcard .pf{margin-top:auto;display:flex;align-items:flex-end;justify-content:space-between;gap:.5rem;padding-top:.55rem;border-top:1px solid var(--line)}
.pcard .price b{font-family:"Inter Tight";font-weight:800;font-size:1.12rem;color:var(--ink)}
.pcard .price span{display:block;color:var(--muted);font-size:.8rem;margin-top:-.1rem}
.pcard .pf a{font-family:"Inter Tight";font-weight:700;font-size:.85rem;color:var(--sky-700);text-decoration:none;
  display:inline-flex;align-items:center;gap:.3rem;white-space:nowrap}
.pcard .pf a:hover{color:var(--sky)}
.plist-note{color:var(--muted);font-size:.86rem;margin:.2rem 0 0}

/* ---- фото-герой статьи (Pexels CDN) ------------------------------ */
.ahero-photo{position:relative;margin:0 0 1.4rem;border-radius:var(--r);overflow:hidden;box-shadow:var(--shadow-sm);aspect-ratio:1280/360;background:var(--soft)}
.ahero-photo img{width:100%;height:100%;object-fit:cover;display:block}
.ahero-photo figcaption{position:absolute;left:0;right:0;bottom:0;display:flex;justify-content:space-between;align-items:flex-end;gap:1rem;padding:36px 18px 13px;background:linear-gradient(0deg,rgba(8,26,46,.6),rgba(8,26,46,.1) 60%,transparent);color:#fff}
.ahero-photo .ah-loc{font-family:"Inter Tight";font-weight:700;font-size:1.06rem;display:inline-flex;align-items:center;gap:.4rem;text-shadow:0 1px 8px rgba(0,0,0,.45)}
.ahero-photo .ah-loc svg{width:16px;height:16px}
.ahero-photo .ah-cr{font-size:.72rem;opacity:.78;white-space:nowrap}
.article::after{display:none}
@media(max-width:600px){.ahero-photo{aspect-ratio:16/10}}
/* фото внутри карточек объектов */
.pcard .thumb img{width:100%;height:100%;object-fit:cover;display:block}

/* ---- таблицы (цены/сезоны/расстояния) ---------------------------- */
.tbl-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:1rem 0;border:1px solid var(--line);border-radius:var(--r)}
table.tbl{width:100%;border-collapse:collapse;font-size:.95rem;min-width:480px}
table.tbl th,table.tbl td{text-align:left;padding:.75rem 1rem;border-bottom:1px solid var(--line)}
table.tbl thead th{font-family:"Inter Tight";font-weight:700;background:var(--soft);color:var(--sky-700);white-space:nowrap}
table.tbl tbody tr:last-child td{border-bottom:none}
table.tbl tbody tr:nth-child(even){background:var(--bg)}
table.tbl tbody tr:hover{background:var(--sky-50)}

/* ---- врезка-совет ------------------------------------------------- */
.tip{position:relative;background:#FFF7EC;border:1px solid #F0DFBF;border-left:4px solid var(--accent);border-radius:var(--r-sm);padding:14px 18px;margin:1.2rem 0;font-size:.98rem}
.tip b{font-family:"Inter Tight"}

/* ---- FAQ ---------------------------------------------------------- */
.faq{margin:1rem 0 0}
.faq .qa{border:1px solid var(--line);border-radius:var(--r-sm);padding:16px 18px;margin:.6rem 0;background:var(--card);transition:.18s var(--ease)}
.faq .qa:hover{border-color:var(--line-2);box-shadow:var(--shadow-sm)}
.faq .q{font-family:"Inter Tight";font-weight:700;font-size:1.08rem;margin:0 0 .4rem;display:flex;gap:.55rem}
.faq .q::before{content:"?";flex:none;width:1.4em;height:1.4em;display:grid;place-items:center;font-size:.8em;color:#fff;background:var(--meadow);border-radius:.4em}
.faq .a{margin:0;color:var(--ink)}

/* ---- связанные ссылки + CTA-баннер ------------------------------- */
.relinks{margin:2.6rem 0 0}
.relinks .rl-l{font-family:"Inter Tight";font-weight:700;font-size:1.2rem;margin-bottom:.9rem}
.relinks .rl-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
.relinks a{display:flex;align-items:center;gap:.6rem;background:var(--card);border:1px solid var(--line);border-radius:var(--r-sm);padding:14px 16px;font-weight:600;transition:.18s var(--ease)}
.relinks a:hover{border-color:var(--sky);color:var(--sky-700);transform:translateY(-2px);box-shadow:var(--shadow-sm)}
.relinks a svg{width:18px;height:18px;color:var(--sky);flex:none}

.cta-band{margin:2.4rem 0 0;background:var(--primary);color:#fff;
  border-radius:var(--r);padding:28px 30px;display:flex;align-items:center;justify-content:space-between;gap:1.2rem;flex-wrap:wrap}
.cta-band .cb-t{font-family:"Inter Tight";font-weight:800;font-size:1.3rem;margin:0}
.cta-band .cb-s{margin:.3rem 0 0;color:rgba(255,255,255,.86);font-size:.98rem}
.cta-band .btn--sun{flex:none}

/* ---- мобайл ------------------------------------------------------- */
@media(max-width:760px){.toc ol{grid-template-columns:1fr}}
@media(max-width:600px){
  .relinks .rl-grid{grid-template-columns:1fr}
  .article{padding:20px 0 58px}
  .article::after{width:70%}
  .cta-band{padding:22px}
  .prose h2{gap:.55rem}
}


/* ---- section chips (shared; was inline+Rubik in 5 section indexes) ------ */
.chips{display:flex;flex-wrap:wrap;gap:.55rem}
.chips-group+.chips-group{margin-top:1.1rem}
.chips-cap{font-family:"Inter Tight","Inter",system-ui,sans-serif;font-size:.78rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);margin:0 0 .6rem}
.chip{display:inline-flex;align-items:center;gap:.45rem;background:#fff;border:1.5px solid var(--line-2);border-radius:var(--r-sm);padding:.58rem 1rem;font-family:"Inter Tight","Inter",system-ui,sans-serif;font-weight:600;font-size:.92rem;letter-spacing:-.01em;line-height:1;color:var(--ink);min-height:44px;text-decoration:none;transition:border-color .18s var(--ease),color .18s var(--ease),transform .14s var(--ease),box-shadow .18s var(--ease)}
.chip svg{width:16px;height:16px;color:var(--sky);flex:none;transition:transform .18s var(--ease)}
.chip:hover{border-color:var(--sky);color:var(--sky-700);transform:translateY(-2px);box-shadow:var(--shadow-sm)}
.chip:hover svg{transform:scale(1.08)}
.chip:active{transform:translateY(0) scale(.98)}
.chip:focus-visible{outline:3px solid var(--sky);outline-offset:2px}
.chip.c-intent svg,.chip--int svg{color:var(--sun-600)}
.chip.c-intent:hover,.chip--int:hover{border-color:var(--sun-600);color:var(--sky-700)}
@media(prefers-reduced-motion:reduce){.chip,.chip svg{transition:border-color .18s,color .18s}.chip:hover,.chip:active{transform:none}.chip:hover svg{transform:none}}


/* inner-page first-screen entrance (section/money/article hero) */
@keyframes muyoRise{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:translateY(0)}}
.ahero-photo{animation:muyoRise .6s var(--ease) backwards}
.crumbs{animation:muyoRise .55s var(--ease) .06s backwards}
.article h1,.prose h1{animation:muyoRise .62s var(--ease) .14s backwards}
.lede-pg{animation:muyoRise .62s var(--ease) .2s backwards}
@media(prefers-reduced-motion:reduce){.ahero-photo,.crumbs,.article h1,.prose h1,.lede-pg{animation:none}}