/* =========================================================================
   Хаб «Создание сайтов под ключ» (W01):
   /uslugi/razrabotka-i-dorabotka-sajtov/razrabotka-sajtov/
   Первый экран — один макет браузера, в котором по очереди видны три формата
   сайта, под ним общая основа. Подбор формата: два вопроса подсвечивают карточку.
   Таблица форматов, общая основа, порядок работы.
   Без JS и при «уменьшить движение» виден лендинг и все карточки, вопросы скрыты.
   Поведение — assets/js/scenes/sitepick.js. Макет браузера — .browser из site.css.
   ========================================================================= */

/* ---------- первый экран: три формата в одном макете ---------- */
.fmt { display: grid; gap: 14px; width: 100%; max-width: 560px; margin-left: auto; align-content: center; }
.fmt-tabs { display: inline-flex; flex-wrap: wrap; justify-self: start; gap: 4px; padding: 4px; border-radius: 999px; background: var(--night-2); border: 1px solid var(--night-line); }
html:not(.js) .fmt-tabs { display: none; }
.fmt-tabs button { padding: 8px 16px; border: 0; border-radius: 999px; background: transparent; color: var(--fog); font: 600 0.9rem/1.2 var(--font-text); cursor: pointer; transition: background-color 0.25s, color 0.25s; }
.fmt-tabs button:hover { color: #eef2fb; }
.fmt-tabs button[aria-pressed="true"] { background: var(--signal); color: var(--ink); }
.fmt-tabs button:focus-visible { outline: 2px solid var(--signal); outline-offset: 2px; }
.fmt-view { position: relative; height: 292px; overflow: hidden; }
.fmt-screen { position: absolute; inset: 14px; display: grid; gap: 10px; align-content: start; opacity: 0; visibility: hidden; transform: translateY(14px); transition: opacity 0.45s, transform 0.6s var(--ease-out), visibility 0s 0.45s; }
.fmt-screen.is-on { opacity: 1; visibility: visible; transform: none; transition: opacity 0.45s, transform 0.6s var(--ease-out), visibility 0s; }
.fmt-note { margin: 0; color: var(--fog-dim); font-size: var(--step--1); }
.fmt-meta { margin: 0; color: #eef2fb; font-weight: 600; font-size: 0.95rem; min-height: 1.5em; }
.fmt-base { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; }
.fmt-base li { display: inline-flex; align-items: center; gap: 8px; padding: 7px 12px; border-radius: 999px; border: 1px solid var(--night-line); background: var(--night-2); color: var(--fog); font-size: 0.85rem; line-height: 1.3; }
.fmt-base li::before { content: ""; flex: none; width: 10px; height: 5px; border-left: 2px solid var(--ok); border-bottom: 2px solid var(--ok); transform: rotate(-45deg) translateY(-2px); }

/* каркасы страниц внутри макета */
.wf-bar { display: flex; align-items: center; gap: 6px; padding: 8px 10px; border-radius: 10px; background: #fff; box-shadow: 0 0 0 1px #e3e8f1; }
.wf-logo { width: 26px; height: 12px; border-radius: 4px; background: var(--ink); margin-right: auto; }
.wf-bar span { padding: 2px 7px; border-radius: 6px; background: #eef1f7; color: #4a5470; font-size: 0.62rem; line-height: 1.4; white-space: nowrap; }
.wf-bar .wf-cart { position: relative; background: var(--flow); color: #fff; }
.wf-bar .wf-cart b { position: absolute; right: -6px; top: -6px; min-width: 14px; height: 14px; padding: 0 3px; border-radius: 7px; background: var(--signal); color: var(--ink); font-size: 0.58rem; line-height: 14px; text-align: center; }
.wf-hero { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 12px; align-items: center; padding: 16px; border-radius: 12px; background: var(--night); }
.wf-hero > div { display: grid; gap: 7px; }
.wf-hero i { display: block; height: 9px; border-radius: 4px; background: #3a4a72; }
.wf-hero i.h { height: 14px; width: 92%; background: #eef2fb; }
.wf-hero i.h + i.h { width: 70%; }
.wf-hero i.s { width: 80%; }
.wf-hero em { justify-self: start; margin-top: 4px; padding: 5px 12px; border-radius: 999px; background: var(--signal); color: var(--ink); font-style: normal; font-size: 0.62rem; font-weight: 700; }
.wf-pic { aspect-ratio: 4 / 3; border-radius: 10px; background: linear-gradient(135deg, #24345a, #18264a); box-shadow: inset 0 0 0 1px #2c3d66; }
.wf-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.wf-card { display: grid; gap: 6px; padding: 10px; border-radius: 10px; background: #fff; box-shadow: 0 0 0 1px #e3e8f1; }
.wf-card i { display: block; height: 7px; border-radius: 3px; background: #dfe4ee; }
.wf-card i.h { height: 10px; width: 70%; background: #c9d1e1; }
.wf-card i.dot { width: 18px; height: 18px; border-radius: 6px; background: rgba(76, 125, 255, 0.18); }
.wf-card small { justify-self: start; padding: 1px 6px; border-radius: 5px; background: var(--signal-soft); color: #8a5200; font-size: 0.58rem; font-weight: 700; }
.wf-form { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; gap: 8px; align-items: center; padding: 10px; border-radius: 10px; background: #fff; box-shadow: 0 0 0 1px #e3e8f1, 0 0 0 4px rgba(255, 176, 32, 0.18); }
.wf-form i { display: block; height: 22px; border-radius: 7px; background: #eef1f7; box-shadow: inset 0 0 0 1px #dfe4ee; }
.wf-form b { padding: 5px 10px; border-radius: 999px; background: var(--signal); color: var(--ink); font-size: 0.62rem; }
.wf-title { display: block; height: 14px; width: 46%; border-radius: 4px; background: #c9d1e1; margin: 2px 0; }
.wf-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.wf-shop { display: grid; grid-template-columns: 82px minmax(0, 1fr); gap: 10px; }
.wf-filters { display: grid; gap: 7px; align-content: start; padding: 10px; border-radius: 10px; background: #fff; box-shadow: 0 0 0 1px #e3e8f1; }
.wf-filters i { display: flex; align-items: center; gap: 5px; height: 8px; }
.wf-filters i::before { content: ""; flex: none; width: 8px; height: 8px; border-radius: 2px; box-shadow: inset 0 0 0 1.5px #9aa6c2; }
.wf-filters i::after { content: ""; flex: 1; height: 6px; border-radius: 3px; background: #dfe4ee; }
.wf-filters i.on::before { background: var(--flow); box-shadow: none; }
.wf-filters u { display: block; height: 6px; margin-top: 4px; border-radius: 3px; background: linear-gradient(90deg, #dfe4ee 15%, var(--flow) 15% 70%, #dfe4ee 70%); }
.wf-prod { display: grid; gap: 5px; padding: 7px; border-radius: 10px; background: #fff; box-shadow: 0 0 0 1px #e3e8f1; }
.wf-prod span { display: block; aspect-ratio: 1; border-radius: 7px; background: linear-gradient(160deg, #e7edff, #d6def0); }
.wf-prod i { display: block; height: 6px; border-radius: 3px; background: #dfe4ee; }
.wf-prod b { justify-self: start; font-size: 0.6rem; color: var(--ink); }
.wf-prod em { display: block; height: 14px; border-radius: 999px; background: var(--flow); opacity: 0.85; }

/* ---------- подбор формата ---------- */
.pk-wrap { display: grid; grid-template-columns: minmax(0, 0.72fr) minmax(0, 1.28fr); gap: clamp(24px, 4vw, 48px); align-items: start; }
.pk-quiz { position: sticky; top: calc(var(--header-h) + 24px); display: grid; gap: 16px; padding: clamp(20px, 3vw, 28px); border-radius: var(--radius-lg); background: var(--night); color: #eef2fb; }
html:not(.js) .pk-quiz { display: none; }
.pk-quiz-k { margin: 0; color: var(--fog); font-size: 0.85rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; }
.pk-step { display: grid; gap: 12px; }
.pk-step[hidden] { display: none; }
.pk-step p { margin: 0; font-family: var(--font-display); font-size: var(--step-1); font-weight: 600; letter-spacing: -0.02em; line-height: 1.25; }
.pk-opts { display: grid; gap: 8px; }
.pk-opts button { padding: 12px 16px; border-radius: 14px; border: 1.5px solid var(--night-line); background: var(--night-2); color: #eef2fb; font: 500 0.97rem/1.35 var(--font-text); text-align: left; cursor: pointer; transition: border-color 0.25s, background-color 0.25s; }
.pk-opts button:hover { border-color: var(--flow-light); }
.pk-opts button:focus-visible { outline: 2px solid var(--signal); outline-offset: 2px; }
.pk-result { margin: 0; min-height: 1.5em; color: var(--fog); }
.pk-result:empty { display: none; }
.pk-result b { color: var(--signal); font-weight: 650; }
.pk-result a { color: var(--flow-light); }
.pk-reset { justify-self: start; padding: 0; border: 0; background: none; color: var(--fog); font: 600 0.9rem/1.3 var(--font-text); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.pk-reset[hidden] { display: none; }
.pk-groups { display: grid; gap: 32px; }
.pk-h { margin-bottom: 14px; color: var(--fg-dim); font-size: 0.85rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; }
.pk-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.pk-cards--two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.pk-card { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 1fr auto auto auto; gap: 10px; padding: 22px; border-radius: var(--radius-md); background: var(--surface); border: 1px solid var(--line); color: inherit; text-decoration: none; transition: border-color 0.3s, transform 0.4s var(--ease-out), filter 0.3s, box-shadow 0.3s; }
.pk-card:hover { border-color: var(--flow); transform: translateY(-3px); text-decoration: none; }
.pk-card > * { margin: 0; }
.pk-name { font-family: var(--font-display); font-size: var(--step-1); font-weight: 600; letter-spacing: -0.02em; line-height: 1.2; }
.pk-when { color: var(--fg-soft); font-size: 0.95rem; line-height: 1.45; }
.pk-price { font-family: var(--font-display); font-size: var(--step-1); font-weight: 600; letter-spacing: -0.02em; padding-top: 12px; border-top: 1px solid var(--line); }
.pk-term { color: var(--fg-dim); font-size: 0.9rem; }
.pk-go { color: var(--link); font-weight: 600; font-size: 0.95rem; }
.pk-go::after { content: " →"; }
/* затемняем фильтром, а не opacity: переход opacity мешает появлению карточек (GSAP в motion.js) */
.is-picked .pk-card.is-dim { filter: opacity(0.45); }
.is-picked .pk-card.is-match { border-color: var(--signal); box-shadow: 0 0 0 2px var(--signal); }

/* ---------- таблица форматов ---------- */
.fmt-table-wrap { border-radius: var(--radius-lg); border: 1px solid var(--line); background: var(--surface); overflow: hidden; }
.fmt-table { width: 100%; border-collapse: collapse; font-size: 0.97rem; line-height: 1.45; }
.fmt-table caption { padding: 16px 20px 4px; text-align: left; color: var(--fg-dim); font-size: 0.88rem; caption-side: top; }
.fmt-table th, .fmt-table td { padding: 14px 20px; text-align: left; vertical-align: top; border-top: 1px solid var(--line); }
.fmt-table thead th { border-top: 0; font-family: var(--font-display); font-size: var(--step-1); font-weight: 600; letter-spacing: -0.02em; }
.fmt-table thead th:first-child { width: 22%; }
.fmt-table tbody th { color: var(--fg-dim); font-size: 0.88rem; font-weight: 600; }
.fmt-table td { color: var(--fg-soft); }
.fmt-table .fmt-cost td { color: var(--fg); font-family: var(--font-display); font-weight: 600; letter-spacing: -0.02em; }
.fmt-table a { font-weight: 600; }

/* ---------- общая основа ---------- */
.base-grid { list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin: 0; padding: 0; }
.base-grid li { display: grid; gap: 10px; align-content: start; padding: 22px; border-radius: var(--radius-md); background: var(--surface); border: 1px solid var(--line); }
.base-grid svg { width: 30px; height: 30px; fill: none; stroke: var(--signal); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.base-grid b { font-weight: 650; font-size: 1.05rem; line-height: 1.3; }
.base-grid span { color: var(--fg-soft); font-size: 0.95rem; line-height: 1.45; }

/* ---------- адаптив ---------- */
@media (max-width: 1180px) {
  .base-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 1080px) {
  .fmt { margin: 0 auto; }
  .pk-wrap { grid-template-columns: minmax(0, 1fr); }
  .pk-quiz { position: static; }
}
@media (max-width: 860px) {
  .pk-cards, .pk-cards--two { grid-template-columns: minmax(0, 1fr); }
  .pk-card { grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto; column-gap: 16px; }
  .pk-name, .pk-when, .pk-go { grid-column: 1 / -1; }
  .pk-price { padding-top: 10px; }
  .pk-term { align-self: end; padding-top: 10px; border-top: 1px solid var(--line); text-align: right; }
  /* таблица превращается в карточки форматов: подписи строк из data-label */
  .fmt-table, .fmt-table tbody, .fmt-table tr, .fmt-table td { display: block; }
  .fmt-table thead { display: none; }
  .fmt-table tr { padding: 4px 0; }
  .fmt-table tbody tr { border-top: 1px solid var(--line); }
  .fmt-table tbody th { display: block; padding: 14px 18px 4px; border: 0; color: var(--fg); font-size: 1rem; }
  .fmt-table td { display: grid; grid-template-columns: minmax(0, 0.42fr) minmax(0, 0.58fr); gap: 12px; padding: 8px 18px; border: 0; }
  .fmt-table td::before { content: attr(data-label); color: var(--fg-dim); font-size: 0.88rem; font-weight: 600; font-family: var(--font-text); letter-spacing: 0; }
}
@media (max-width: 640px) {
  .fmt-view { height: 268px; }
  .wf-hero { grid-template-columns: minmax(0, 1fr); }
  .wf-pic { display: none; }
  .wf-bar span:nth-child(n+4):not(.wf-cart) { display: none; }
  .wf-shop { grid-template-columns: minmax(0, 1fr); }
  .wf-filters { display: none; }
  .wf-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .wf-grid > :nth-child(n+5) { display: none; }
  .base-grid { grid-template-columns: minmax(0, 1fr); }
  .base-grid li { grid-template-columns: 30px minmax(0, 1fr); column-gap: 14px; row-gap: 4px; padding: 18px; }
  .base-grid svg { grid-row: span 2; }
  .fmt-table td { grid-template-columns: minmax(0, 1fr); gap: 2px; }
}