/* Блок «Выбери свой вектор» на главной, сразу под первым экраном (section#vector):
   три белые плашки в ряд с цветным контуром — синим, бирюзовым, жёлтым, без теней.
   На широком экране каждая плашка размером с карточку с мамонтом: --mw × --mh ставит скрипт
   внизу index.html, он же уменьшает шрифт плашек (--fs), если текст не влезает.
   Направления инженерной плашки раскрываются по клику (details). */

.vec-grid{--g:28px;display:flex;flex-direction:column;gap:var(--g)}

/* ---------- плашка ---------- */
.plq{--line-c:var(--k-blue);--rule:rgba(18,23,58,.12);
  display:flex;flex-direction:column;gap:.875em;
  font-size:calc(16px * var(--fs, 1));
  background:#FFFFFF;color:var(--k-navy);
  border:3px solid var(--line-c);border-radius:var(--r-xl);
  padding:clamp(28px,6vw,2.75em) clamp(22px,5vw,2.5em)}
.plq--dry{--line-c:var(--k-blue)}
.plq--wet{--line-c:var(--k-teal)}
.plq--eng{--line-c:var(--k-yellow)}

/* верхняя часть плашки (метка, заголовок, вводный текст) — ссылка на статью о векторе.
   Курсор — «рука», в конце текста статичная стрелка; дополнительной анимации при наведении нет */
.plq-link{display:flex;flex-direction:column;gap:inherit;color:inherit;text-decoration:none;cursor:pointer;border-radius:14px}
.plq-link:hover,.plq-link:visited{color:inherit;text-decoration:none}
.plq-link:focus-visible{outline:3px solid var(--line-c);outline-offset:8px}
.plq-arrow{color:var(--k-navy);font-weight:700;white-space:nowrap}

/* метка над заголовком */
.plq .plq-tag{display:inline-flex;align-items:center;align-self:flex-start;margin:0 0 .25em;padding:.4em .75em;
  background:#FFFFFF;border:2px solid var(--line-c);border-radius:12px;
  color:var(--k-navy);font-weight:700;font-size:.875em;line-height:1.2;letter-spacing:.02em;text-transform:uppercase}
/* метки залиты цветом: синяя плашка — красная метка, бирюзовая — жёлтая, жёлтая — бирюзовая */
.plq--dry .plq-tag{background:var(--k-red);border-color:var(--k-red);color:#FFFFFF}
.plq--wet .plq-tag{background:var(--k-yellow);border-color:var(--k-yellow);color:var(--k-navy)}
.plq--eng .plq-tag{background:var(--k-teal);border-color:var(--k-teal);color:#FFFFFF}

.plq-title{margin:0;font-size:1.75em;line-height:1.15}
.plq p{margin:0;color:rgba(18,23,58,.8);font-size:1.125em;line-height:1.55}
/* «для кого» — последняя фраза плашки, прижата к низу */
.plq .plq-who{margin-top:auto;padding-top:1em;border-top:2px solid var(--rule);color:var(--k-navy);font-weight:700}
/* «для кого» в серой плашке — как факт под карточкой с мамонтом на первом экране (.deck-fact) */
.plq .plq-who--plate{border-top:0;border-radius:14px;padding:.75em .875em;font-weight:400;font-size:1.0625em;color:var(--ink-2);
  background:var(--bg);background:color-mix(in srgb,var(--k-blue) 9%,var(--bg))}

/* плашки с крупным текстом (.plq--big, сейчас «Сухие» и «Мокрые»): текст и названия направлений 20px (при --fs 1).
   Если текст не влезает в высоту карточки с мамонтом, скрипт уменьшает только его (--own) —
   метка, заголовок и отступы остаются как у соседних плашек. Строки и пункты чуть плотнее, чтобы влезало. */
.plq--big{gap:.625em}
/* промежуток между абзацами меньше, чем у соседей (.625em против .875em) — метку отодвигаем на разницу,
   чтобы заголовки всех трёх плашек стояли на одной линии */
.plq--big .plq-tag{margin-bottom:calc(.25em + 4px * var(--fs, 1))}
.plq--big p{font-size:calc(1.25em * var(--own, 1))}
.plq--big p:not(.plq-tag){line-height:1.4}
.plq--big .plq-areas{margin-top:.75em}
/* у плашки с data-list-bottom список прижат к низу */
.plq--big[data-list-bottom] .plq-areas{margin-top:auto;padding-top:.75em}
.plq--big .plq-area summary{padding:.25em 0}
.plq--big .plq-area summary::after{width:26px;height:26px}
.plq--big .plq-area h3{font-size:calc(1.25em * var(--own, 1))}

/* ---------- инженерная плашка: четыре направления, раскрываются по клику ---------- */
.plq-areas{display:grid;margin-top:.5em}
.plq-area{border-top:2px solid var(--rule)}
.plq-area summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:10px;padding:.625em 0}
.plq-area summary::-webkit-details-marker{display:none}
.plq-area summary::after{content:"+";flex:none;width:28px;height:28px;border-radius:50%;border:2px solid var(--line-c);
  display:grid;place-items:center;font-weight:700;line-height:1;color:var(--k-navy)}
.plq-area[open] summary::after{content:"−"}
.plq-area summary:focus-visible{outline:3px solid var(--k-blue);outline-offset:2px;border-radius:8px}
.plq-area h3{display:flex;align-items:baseline;gap:10px;margin:0;font-size:1.1875em;line-height:1.3;color:var(--k-navy)}
.plq-area h3::before{content:"";flex:none;width:22px;height:8px;border-radius:999px;background:var(--line-c);transform:translateY(-2px)}
.plq-area p{padding-bottom:.625em}

/* ---------- широкий экран: ряд из трёх плашек размером с карточку с мамонтом, по центру экрана ---------- */
@media (min-width:960px){
  .vec-grid{flex-direction:row;align-items:stretch;
    width:calc(3 * var(--mw, 33%) + 2 * var(--g));
    margin-left:calc((100% - (3 * var(--mw, 33%) + 2 * var(--g))) / 2)}
  .vec-grid > .plq{flex:none;width:var(--mw, 33%);min-height:var(--mh, 0);box-sizing:border-box}
  /* замер для скрипта: высота по содержимому, раскрытые направления не учитываются */
  .vec-grid.measuring{align-items:flex-start}
  .vec-grid.measuring > .plq{min-height:0}
  .vec-grid.measuring .plq-area > p{display:none}
}

/* ---------- второй экран: блок «вектор» занимает ровно окно под шапкой ----------
   (шапка — --header-h плюс 1px рамки), содержимое по центру. Прокрутку колесом по экранам
   делает скрипт внизу index.html. */
@media (min-width:960px) and (min-height:640px){
  #vector{min-height:calc(100vh - var(--header-h) - 1px);min-height:calc(100dvh - var(--header-h) - 1px);
    display:flex;flex-direction:column;justify-content:center;padding-block:clamp(20px,3.5vh,56px)}
  #vector .sec-head{margin-bottom:clamp(20px,4vh,48px)}
}

/* ---------- наведение курсора: плашка подпрыгивает и чуть поворачивается, с пружинкой ----------
   как в концепте Gemini (gemini-code-1790015042111.html). В покое тени нет,
   при наведении появляется сплошная тень цвета рамки */
.plq{box-shadow:0 0 0 var(--line-c);
  transition:transform .3s cubic-bezier(.175,.885,.32,1.275),box-shadow .3s cubic-bezier(.175,.885,.32,1.275)}
@media (hover:hover){
  .plq:hover{transform:translateY(-6px) rotate(1deg);box-shadow:12px 14px 0 var(--line-c)}
}
@media (prefers-reduced-motion:reduce){
  .plq{transition:none}
  .plq:hover{transform:none;box-shadow:8px 8px 0 var(--line-c)}
}

/* ---------- страницы векторов: /suhie.html, /mokrye.html, /inzhenernye.html ---------- */
.vp-wrap{max-width:820px}
.vp--dry{--line-c:var(--k-blue)}
.vp--wet{--line-c:var(--k-teal)}
.vp--eng{--line-c:var(--k-yellow)}
.vp-tag{display:inline-block;margin:0 0 14px;padding:.4em .75em;border-radius:12px;font-weight:700;font-size:.875rem;line-height:1.2;letter-spacing:.02em;text-transform:uppercase}
.vp--dry .vp-tag{background:var(--k-red);color:#FFFFFF}
.vp--wet .vp-tag{background:var(--k-yellow);color:var(--k-navy)}
.vp--eng .vp-tag{background:var(--k-teal);color:#FFFFFF}
.vp h1{margin-bottom:22px}
.vp .lead{margin:0 0 14px;color:var(--ink)}
.vp-h2{margin:36px 0 16px;font-size:clamp(1.35rem,2.6vw,1.75rem);line-height:1.2}
.vp-areas{display:grid;gap:14px}
.vp-area{background:#FFFFFF;border:3px solid var(--line-c);border-radius:var(--r-l);padding:20px 24px}
.vp-area h3{display:flex;align-items:baseline;gap:10px;margin:0 0 8px;font-size:1.25rem;line-height:1.3;color:var(--k-navy)}
.vp-area h3::before{content:"";flex:none;width:22px;height:8px;border-radius:999px;background:var(--line-c);transform:translateY(-3px)}
.vp-area p{margin:0;font-size:1.125rem;line-height:1.55;color:var(--ink-2)}
.vp .actions{margin-top:36px}
/* несколько абзацев внутри одного направления */
.plq-area p + p,.vp-area p + p{margin-top:.5em}

/* ---------- выравнивание зон с плюсиками без скрипта (subgrid) ----------
   Три плашки — колонки одной сетки; строки общие: 1) метка+заголовок+текст, 2) плюсики, 3) запас до высоты
   карточки с мамонтом. Зоны с плюсиками всегда на одной линии сразу под самым длинным текстом,
   пустого места между текстом и плюсиками не бывает; лишняя высота уходит вниз, под плюсики. */
@supports (grid-template-rows:subgrid){
  @media (min-width:960px){
    #vector .vec-grid{display:grid;grid-template-columns:repeat(3,var(--mw, 1fr));grid-template-rows:auto auto 1fr;
      column-gap:var(--g);row-gap:0;min-height:var(--mh, 0);align-items:stretch}
    #vector .vec-grid > .plq{grid-row:span 3;display:grid;grid-template-rows:subgrid;row-gap:0;min-height:0;width:auto}
    #vector .vec-grid > .plq > .plq-link{align-self:start;gap:.625em}
    #vector .vec-grid > .plq > .plq-areas{align-self:start;margin-top:.75em}
  }
}

/* ---------- невысокий экран (ноутбук, масштаб 125%): блок «вектор» целиком в окне ----------
   шрифт остаётся 20px, ужимаются только поля: секции, под заголовком и внутри плашек */
@media (min-width:960px) and (min-height:640px) and (max-height:860px){
  #vector{padding-block:10px}
  #vector .sec-head{margin-bottom:14px}
  #vector .vec-grid > .plq{padding:26px 26px 22px}
}

/* текст внутри раскрывашки — ссылка на статью, в конце стрелка цвета плашки */
.plq-area a.plq-more{color:inherit;text-decoration:none}
.plq-area a.plq-more:hover{text-decoration:underline;text-decoration-color:var(--line-c);text-underline-offset:3px}
.plq-area a.plq-more:focus-visible{outline:3px solid var(--line-c);outline-offset:2px;border-radius:6px}
.plq-more-arr{color:var(--line-c);font-weight:700;white-space:nowrap}
/* наведение на текст-ссылку: без подчёркивания, подсветка светло-жёлтым фоном */
.plq-area a.plq-more{border-radius:6px;transition:background-color .15s;-webkit-box-decoration-break:clone;box-decoration-break:clone}
.plq-area a.plq-more:hover{text-decoration:none;background-color:#FFF3B8}
/* если текст раскрывашки разбит на абзацы-ссылки на одну статью — подсвечиваются все вместе (биоинформатика, 26.10.2026) */
.plq-area:has(a.plq-more:hover) a.plq-more{text-decoration:none;background-color:#FFF3B8}

/* ссылки на статьи в плюсиках плашек «вектора» подсвечены светло-жёлтым всегда (02.11.2026) */
.plq-area a.plq-more{background-color:#FFF3B8}