/* Кейсы-панели (VuCases) со страницы программы Вануату, снимок 17.10.2026 скриптом scripts/quote-std/extract2.cjs.
   Стили закрыты классом .qStd. Обновить: снять заново и пересобрать. */
.qStd {
  --line-strong: #9aa2b1;
  --contents-nav-offset: 133px;
  --bg-page: #f9f9f9;
  --ink: #1B1B1B;
  --muted: #6B7280;
  --action: #0057ff;
  --bg: #F9F9F9;
  --bg-alt: #f3f4f6;
  --text-primary: #1b1b1b;
  --text-muted: #6b7280;
  --line: #e7e9ee;
  --pg-accent: #0057ff;
  --state-ok: #29b202;
  --pg-ok: #29b202;
  --pg-photo-tint: #6d7f96;
  --r-btn: 14px;
  --pg-bg: #F9F9F9;
  --pg-ink: #1b1b1b;
  --pg-wrap: 1320px;
  --pg-pad: 20px;
  --pg-section-y: 84px;
  --pg-line: #e7e9ee;
  --pg-bg-alt: #f3f4f6;
  --font: 'Montserrat', 'Montserrat Fallback';
  --pg-muted: #6b7280;
  --metal1: "Metal-Reg-1", sans-serif;
  --pg-measure: 720px;
  --pg-r-card: 18px;
  --pg-card: #F9F9F9;
  --pg-section-y-mob: 56px;
  --font-text: 'Montserrat', -apple-system, sans-serif;
  --r-card: 18px;
  --d-8b93a3: #8b93a3;
  --bg-surface: #ffffff;
  --d-d9dfeb: #d9dfeb;
  --d-eef1f5: #eef1f5;
  --d-f2f5fb: #f2f5fb;
  --d-4a5568: #4a5568;
  --d-3d4553: #3d4553;
  --d-d2d2d5: #d2d2d5;
}
html[data-theme="dark"] .qStd {
  --line-strong: #636366;
  --bg-page: #1c1c1e;
  --ink: #f5f5f7;
  --muted: #b8b8bf;
  --action: #8bb4ff;
  --bg: #1c1c1e;
  --bg-alt: #222224;
  --text-primary: #f5f5f7;
  --text-muted: #b8b8bf;
  --line: #444446;
  --pg-accent: #8bb4ff;
  --state-ok: #3fc41a;
  --pg-ok: #3fc41a;
  --pg-bg: #1c1c1e;
  --pg-ink: #f5f5f7;
  --pg-line: #444446;
  --pg-bg-alt: #222224;
  --pg-muted: #b8b8bf;
  --pg-card: #1c1c1e;
  --d-8b93a3: #9b9b9b;
  --bg-surface: #2c2c2e;
  --d-d9dfeb: rgba(255, 255, 255, 0.08);
  --d-eef1f5: rgba(255, 255, 255, 0.08);
  --d-f2f5fb: #212121;
  --d-4a5568: #cdcdcd;
  --d-3d4553: #ececec;
  --d-d2d2d5: rgba(255, 255, 255, 0.08);
}
.qStd .art { display: block; --bg-page: #f9f9f9; --bg-surface: #ffffff; --bg-subtle: #f3f4f6; --bg-navy: #10213d; --ink: #1b1b1b; --muted: #6b7280; --faint: #9aa2b1; --line: #e7e9ee; --rule: #1b1b1b; --action: #0057ff; --action-light: #7fa9ff; --ok: #29b202; --on-photo: #fff; --on-photo-muted: rgb(255 255 255 / .8); --line-on-photo: rgb(255 255 255 / .24); --veil-0: rgb(11 21 38 / 0); --veil-1: rgb(11 21 38 / .86); --veil-2: rgb(11 21 38 / .55); --display: var(--br-metal,'Metal-Reg-1'), 'Montserrat', sans-serif; --text: 'Montserrat', -apple-system, sans-serif; --wrap: 1320px; --pad: 20px; --gutter: 40px; --sec-y: clamp(80px, 10vw, 144px); --head-gap: 56px; --top-gap: 64px; --edge: max(var(--pad), calc((100% - var(--wrap)) / 2 + var(--pad))); --ease: cubic-bezier(.2, .7, .2, 1); --art-h1: clamp(32px, 3.9vw, 56px); --art-h2: clamp(30px, 3.6vw, 52px); background: var(--bg-page); color: var(--ink); font-family: var(--text); }
html[data-theme="dark"] .qStd .art { --bg-page: #07090d; --bg-subtle: #0a0d12; --bg-surface: #10141a; --ink: #f2f4f7; --muted: #a7afba; --faint: #7e8794; --line: rgba(180, 195, 215, .12); --rule: rgb(242 244 247 / .7); --action: #4d8cff; }
.qStd .art * { box-sizing: border-box; }
.qStd .art-wrap { width: 100%; max-width: var(--wrap); margin: 0px auto; padding: 0 var(--pad); }
.qStd .art-grid { display: grid; grid-template-columns: repeat(12, minmax(0px, 1fr)); column-gap: var(--gutter); }
.qStd .art .art-h2 { margin: 0px; font: 400 var(--art-h2)/1.08 var(--display); letter-spacing: -0.005em; }
.qStd .art-h2 > span { display: block; }
.qStd .art-text { margin: 0px; font: 400 16px/1.7 var(--text); color: var(--muted); }
.qStd .art-rv { opacity: 0; transform: translateY(28px); transition: opacity .9s var(--ease) var(--d, 0s), transform .9s var(--ease) var(--d, 0s); }
.qStd .art-rv.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
.qStd .art-rv { opacity: 1; transform: none; transition: none; }
}
.qStd .art-sec { padding: var(--sec-y) 0; }
.qStd .art-shead { display: grid; grid-template-columns: 96px 1fr auto; align-items: baseline; gap: 0px 16px; padding-top: 18px; border-top: 1px solid var(--rule); font: 600 13px/1.3 var(--text); letter-spacing: 0.14em; text-transform: uppercase; }
.qStd .art-shead__n { font: 400 15px/1 var(--display); letter-spacing: 0.04em; color: var(--action); }
.qStd .art-shead__r { color: var(--muted); font-weight: 500; text-align: right; }
.qStd .art-top { align-items: end; margin: var(--head-gap) 0 var(--top-gap); }
.qStd .art-top__l { grid-column: 1 / span 8; }
.qStd .art-top__r { grid-column: 9 / span 4; }
@media (max-width: 960px) {
.qStd .art-top__l,
.qStd .art-top__r { grid-column: 1 / -1; }
.qStd .art-top__r { margin-top: 20px; }
}
@media (max-width: 600px) {
.qStd .art-shead { grid-template-columns: 48px 1fr; }
.qStd .art-shead__r { display: none; }
}
.qStd .art-shead__dash { display: inline-block; width: 26px; height: 2px; background: var(--action); vertical-align: middle; }
@media (max-width: 760px) {
.qStd .art-grid { grid-template-columns: minmax(0px, 1fr); column-gap: 0px; }
.qStd .art-grid > * { grid-column: 1 / -1 !important; }
}
.qStd .art-cs__chip { display: inline-flex; align-items: center; height: 34px; padding: 0px 14px; border-radius: 99px; background: rgba(255, 255, 255, 0.14); border: 1px solid var(--line-on-photo); color: var(--on-photo); font: 500 13px/1 var(--text); backdrop-filter: blur(10px); }
.qStd .art-cs__row { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.qStd .art-cs__btn { display: inline-flex; align-items: center; gap: 10px; height: 34px; padding: 0px 3px 0px 16px; border-radius: 99px; background: var(--on-photo); color: var(--ink); font: 600 13px/1 var(--text); text-decoration: none; transition: background .3s var(--ease); }
.qStd .art-cs__arr { display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--action); color: rgb(255, 255, 255); font-size: 15px; transition: transform .3s var(--ease); }
.qStd .art-cs__btn:hover .art-cs__arr { transform: translateX(3px); }
.qStd .art-cs__ft { display: block; margin: 14px 0px 16px; font: 400 clamp(22px, 2vw, 30px)/1.18 var(--display); color: var(--on-photo); text-decoration: none; max-width: 520px; }
.qStd .art-cs__all { font: 600 15px/1.4 var(--text); color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--action); padding-bottom: 4px; }
.qStd .art-cs__foot { margin: 36px 0px 0px; text-align: right; }
.qStd .art-cs__b { display: flex; gap: 12px; height: 480px; }
.qStd .art-cs__p { position: relative; isolation: isolate; flex: 1 1 0%; min-width: 0px; border-radius: 24px; overflow: hidden; cursor: pointer; transition: flex .7s var(--ease); }
.qStd .art-cs__p::before { content: ""; position: absolute; inset: 0px; z-index: -1; background: linear-gradient(180deg, var(--veil-0) 35%, var(--veil-1)); }
.qStd .art-cs__p.is-on { flex: 4.2 1 0%; cursor: default; }
.qStd .art-cs__p img { position: absolute; inset: 0px; z-index: -2; width: 100%; height: 100%; object-fit: cover; }
.qStd .art-cs__n { position: absolute; top: 24px; left: 24px; font: 400 15px/1 var(--display); color: var(--on-photo); }
.qStd .art-cs__v { position: absolute; left: 50%; bottom: 24px; max-height: 340px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; transform: translateX(-50%) rotate(180deg); writing-mode: vertical-rl; font: 600 15px/1.3 var(--text); color: var(--on-photo); transition: opacity .3s var(--ease); }
.qStd .art-cs__in { position: absolute; left: 28px; right: 28px; bottom: 28px; opacity: 0; pointer-events: none; transition: opacity .4s var(--ease); }
.qStd .art-cs__p.is-on .art-cs__in { opacity: 1; pointer-events: auto; transition-delay: 0.25s; }
.qStd .art-cs__p.is-on .art-cs__v,
.qStd .art-cs__p.is-on .art-cs__n { opacity: 0; }
@media (max-width: 960px) {
.qStd .art-cs__b { height: auto; gap: 12px; margin: 0 calc(-1 * var(--pad)); padding: 0 var(--pad); overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding: 0 var(--pad); scrollbar-width: none; }
.qStd .art-cs__b::-webkit-scrollbar { display: none; }
.qStd .art-cs__p,
.qStd .art-cs__p.is-on { flex: 0 0 86%; height: 460px; scroll-snap-align: start; cursor: default; }
.qStd .art-cs__v { display: none; }
.qStd .art-cs__n { opacity: 1; top: 20px; left: 20px; }
.qStd .art-cs__p.is-on .art-cs__n { opacity: 1; }
.qStd .art-cs__in { left: 20px; right: 20px; bottom: 20px; opacity: 1; pointer-events: auto; }
.qStd .art-cs__ft { font-size: 21px; margin: 10px 0px 14px; }
.qStd .art-cs__foot { text-align: left; }
}