/* ===================================================================
   Шапка и меню реализованных проектов. Один файл на все страницы сайта:
   главную и внутренние (o-nas, blog, kontakty). Разметка шапки в каждом
   файле своя — статика, включать нечем, — а оформление и поведение здесь,
   чтобы четыре копии не разъезжались.

   На главной этот файл подключается ПОСЛЕ слоёв <style> в <head>, поэтому
   он намеренно не трогает .top, .logo, .nav и .gold: их вид уже задан там,
   и переопределять его отсюда значило бы держать два источника правды.
   Базовый вид шапки для внутренних страниц лежит ниже под body.page —
   селектор с классом body не пересекается с главной.
   =================================================================== */

:root{
  --paper:#f3f0e9;--ink:#080808;--red:#df1822;--line:#c9c5bc;--muted:#65625c;
  --glass:rgba(5,5,5,.91);--glass-soft:rgba(5,5,5,.78);
  --glass-line:rgba(255,255,255,.18);--glass-shine:rgba(255,255,255,.09);
  --font-text:"Segoe UI",system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif;
  --font-display:system-ui,-apple-system,"Segoe UI","Helvetica Neue",Arial,sans-serif;
  --font-data:ui-monospace,"Cascadia Mono","Segoe UI Mono",Consolas,"SF Mono","Roboto Mono","DejaVu Sans Mono",monospace;
}

/* --- Пункт меню «Реализованные проекты» ---------------------------
   Кнопка, а не ссылка: она ничего не открывает по адресу, а раскрывает
   панель. Ссылкой её делать нельзя — с клавиатуры и в озвучивании она
   обещала бы переход. Подчёркивание при наведении повторяет .nav a. */
/* Без position:relative намеренно: содержащим блоком для панели должна быть
   шапка (она position:fixed), а не сам пункт меню. С relative панель
   вставала под кнопкой и уезжала за левый край окна — замерено. */
.projects{display:flex;align-items:center}
.projects-toggle{
  position:relative;display:inline-flex;align-items:center;gap:8px;
  padding:0;border:0;background:none;color:inherit;cursor:pointer;
  font-family:var(--font-data);font-weight:600;font-size:11px;
  letter-spacing:.11em;text-transform:uppercase;
}
.projects-toggle:after{
  content:"";position:absolute;left:0;right:100%;bottom:-7px;height:2px;
  background:var(--red);transition:.25s;
}
@media(hover:hover){.projects-toggle:hover:after{right:0}}
.projects-toggle[aria-expanded="true"]:after{right:0}
.projects-toggle:focus-visible{outline:2px solid var(--red);outline-offset:4px}
/* Галочка поворачивается — единственный признак того, что панель раскрыта,
   кроме самой панели: подчёркивание при наведении выглядит так же. */
.projects-toggle i{
  display:block;width:7px;height:7px;border-right:1.5px solid currentColor;
  border-bottom:1.5px solid currentColor;transform:translateY(-2px) rotate(45deg);
  transition:transform .25s;
}
.projects-toggle[aria-expanded="true"] i{transform:translateY(1px) rotate(-135deg)}

/* --- Панель с карточками ------------------------------------------
   Отсчёт идёт не от кнопки, а от шапки: панель шире пункта меню и должна
   вставать по центру окна. Содержащий блок здесь — сама .top: она
   position:fixed, поэтому top:100% — это ровно под шапкой, а left:50% —
   середина окна, а не середина колонки меню.
   Из-за backdrop-filter у .top position:fixed внутри всё равно считался
   бы от неё, так что absolute тут не ограничение, а честная запись. */
.projects-panel{
  position:absolute;z-index:49;top:100%;left:50%;transform:translateX(-50%);
  width:min(1120px,calc(100vw - 28px));max-height:calc(100svh - 96px);
  overflow-y:auto;overscroll-behavior:contain;
  padding:clamp(20px,2.4vw,32px);
  border:1px solid var(--glass-line);border-top:0;
  border-radius:0 0 24px 24px;
  /* Панель непрозрачная, в отличие от остального стекла на сайте: под ней
     лежит плашка с заголовком в 162px белым по чёрному, и даже 7% прозрачности
     давали сквозь карточки читаемые буквы. */
  background:linear-gradient(135deg,#0d0d0d,#000 60%,#1a1a1a);
  box-shadow:inset 0 1px var(--glass-shine),0 26px 70px rgba(0,0,0,.4);
  color:#fff;
}
.projects-panel[hidden]{display:none}
.projects-head{
  display:flex;align-items:baseline;justify-content:space-between;gap:20px;
  margin:0 0 18px;padding-bottom:14px;border-bottom:1px solid rgba(255,255,255,.16);
}
.projects-head strong{
  font-family:var(--font-display);font-weight:700;font-size:clamp(20px,2.2vw,28px);
  letter-spacing:-.03em;
}
.projects-head span{
  font-family:var(--font-data);font-size:10px;letter-spacing:.14em;
  text-transform:uppercase;color:rgba(255,255,255,.55);
}
.projects-grid{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:12px;
}
/* Карточки — не ссылки: адресов сайтов проектов у нас нет (см. журнал
   правок). Ссылку добавляем той карточке, у которой адрес появится, —
   тег меняется на <a> без правки оформления. */
.pcard{
  display:flex;flex-direction:column;gap:10px;min-height:118px;
  padding:16px 18px;border:1px solid rgba(255,255,255,.16);border-radius:16px;
  background:rgba(255,255,255,.035);transition:border-color .3s,background .3s;
}
.pcard b{
  font-family:var(--font-display);font-weight:700;font-size:17px;
  line-height:1.2;letter-spacing:-.02em;
}
.pcard span{
  margin-top:auto;font-family:var(--font-data);font-size:10px;letter-spacing:.12em;
  text-transform:uppercase;color:rgba(255,255,255,.55);
}
.pcard:before{content:"";width:26px;height:2px;background:var(--red)}
@media(hover:hover){
  .pcard:hover{border-color:rgba(223,24,34,.7);background:rgba(255,255,255,.06)}
}
a.pcard:focus-visible{outline:2px solid var(--red);outline-offset:3px}

/* --- Шторка на узких экранах --------------------------------------
   На главной .nav в медиазапросе спрятана, а разделов теперь четыре, и
   попасть в них с телефона надо. Поэтому та же разметка .nav на узком
   экране раскрывается панелью под шапкой — второй копии ссылок нет.
   Селектор из двух классов перебивает display:none из слоёв главной. */
@media(max-width:900px){
  .nav.open{
    /* justify-content:flex-start обязателен: у .nav в обычном состоянии стоит
       center, и в столбце с прокруткой центрирование выносило верх содержимого
       за верхнюю кромку — до карточек проектов было не докрутить. */
    display:flex;flex-direction:column;justify-content:flex-start;align-items:flex-start;gap:0;
    position:fixed;z-index:48;top:74px;left:0;right:0;
    max-height:calc(100svh - 74px);overflow-y:auto;overscroll-behavior:contain;
    padding:8px 20px 22px;
    border-bottom:1px solid var(--glass-line);
    background:linear-gradient(135deg,rgba(10,10,10,.98),rgba(0,0,0,.96));
    backdrop-filter:blur(16px);color:#fff;
  }
  .nav.open>*,.nav.open .projects{width:100%}
  /* .projects — флекс-строка, и в шторке панель становилась вторым элементом
     этой строки: вставала справа от кнопки полосой в 251px и уезжала выше
     верха окна. В столбце она встаёт под кнопкой, как и задумано. */
  .nav.open .projects{flex-direction:column;align-items:stretch}
  .nav.open a,.nav.open .projects-toggle{
    width:100%;padding:16px 0;border-bottom:1px solid rgba(255,255,255,.12);
    font-size:12px;letter-spacing:.12em;justify-content:space-between;
  }
  .nav.open a:after,.nav.open .projects-toggle:after{display:none}
  /* В шторке панель встаёт в поток: fixed-панель поверх столбца ссылок
     перекрывала бы их, а прокручивать пришлось бы две области сразу. */
  .nav.open .projects-panel{
    position:static;transform:none;width:auto;max-height:none;overflow:visible;
    margin:0;padding:16px 0 4px;border:0;border-radius:0;background:none;
    box-shadow:none;backdrop-filter:none;
  }
  .nav.open .projects-head{margin-bottom:14px}
  .nav.open .projects-grid{grid-template-columns:1fr}
  .menu-btn.open{color:var(--red)}
}
