/* ===== ПРОЕКТИ — стилове на страницата (след main.css и uslugi.css) ===== */

/* редовете имат собствен display — без това атрибутът hidden не би ги скрил */
.pj[hidden], .pj-row[hidden] { display: none; }

/* ---- Филтър ---- */
/* на широк екран лентата с бутоните остава под горната лента, докато се превърта списъкът */
.pj-filter { padding-top: clamp(1.8rem, 4vw, 2.6rem); }
@media (min-width: 701px) {
  .pj-filter {
    position: sticky; top: 4.15rem; z-index: 50; padding-block: .9rem;
    background: rgba(27, 35, 49, .92); backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--ink-3);
  }
}
.pj-filter__group { display: flex; flex-wrap: wrap; gap: .6rem; }
.pj-filter__btn {
  display: inline-flex; align-items: baseline; gap: .55rem; min-height: 44px;
  padding: .62rem 1.05rem; border-radius: 999px;
  font: inherit; font-size: var(--fs-small); color: #C9D3E1;
  background: transparent; border: 1px solid var(--line-strong); cursor: pointer;
  -webkit-tap-highlight-color: transparent; touch-action: manipulation;
  transition: color .25s, background-color .25s, border-color .25s, transform .14s cubic-bezier(.22, 1, .36, 1);
}
@media (hover: hover) and (pointer: fine) { .pj-filter__btn:hover { color: var(--white); border-color: var(--blue-map); } }
.pj-filter__btn:active { transform: scale(.97); }
.pj-filter__btn[aria-pressed="true"] { color: var(--white); background: var(--blue-deep); border-color: var(--blue-deep); }
.pj-filter__n { font-size: var(--fs-label); color: var(--blue-map); font-variant-numeric: tabular-nums; }
.pj-filter__btn[aria-pressed="true"] .pj-filter__n { color: rgba(244, 247, 251, .92); } /* .78 даваше 4,2:1 върху синьото */

/* ---- Знакови проекти: широки редове, разделени с линии ---- */
.pj-feat { padding-top: clamp(3rem, 7vw, 5rem); }
.pj-list { list-style: none; margin-top: clamp(1.6rem, 4vw, 2.6rem); margin-bottom: 0; padding: 0; }
.pj {
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(1.5rem, 4vw, 3.5rem);
  align-items: start; padding-block: clamp(2.2rem, 4.5vw, 3.4rem);
  border-top: 1px solid var(--ink-3); scroll-margin-top: 5.5rem;
}
.pj:last-child { border-bottom: 1px solid var(--ink-3); }

/* медия: снимка, карта или голямото число — една и съща рамка 3:2 */
.pj__media {
  position: relative; aspect-ratio: 3 / 2; overflow: hidden; border-radius: 14px;
  background-color: var(--ink-2); border: 1px solid rgba(127, 179, 224, .14);
}
.pj__media img { display: block; width: 100%; height: 100%; object-fit: cover; }
.pj__media--photo::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(27, 35, 49, 0) 55%, rgba(27, 35, 49, .35)); pointer-events: none; }
/* чужда снимка: надпис с място, автор и лиценз върху по-тъмния долен край */
.pj__media--credited::after { background: linear-gradient(180deg, rgba(27, 35, 49, 0) 58%, rgba(27, 35, 49, .85)); }
.pj__credit {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 1; margin: 0; padding: .9rem 1rem .7rem;
  font-size: var(--fs-label); line-height: 1.45; letter-spacing: .02em; color: rgba(244, 247, 251, .88);
}
.pj__credit a { color: inherit; text-decoration: underline; text-decoration-color: rgba(244, 247, 251, .4); text-underline-offset: 2px; transition: text-decoration-color .25s; }
.pj__credit a:hover { text-decoration-color: currentColor; }
.pj__media--map, .pj__media--figure {
  background-image:
    linear-gradient(rgba(127, 179, 224, .06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(127, 179, 224, .06) 1px, transparent 1px);
  background-size: 36px 36px;
}
.pj-map { position: absolute; inset: 7% 5%; width: 90%; height: 86%; overflow: visible; }
.pj-map use { opacity: .6; }
.pj-map__pt .core { fill: var(--blue-bright); filter: drop-shadow(0 0 7px rgba(91, 168, 245, .9)); }
.pj-map__pt .pulse { fill: rgba(91, 168, 245, .5); animation: pulse 2.4s ease-out infinite; transform-box: fill-box; transform-origin: center; }
.pj-map__label {
  font-family: var(--font-mono); font-size: 19px; letter-spacing: .1em; fill: var(--white);
  paint-order: stroke; stroke: var(--ink-2); stroke-width: 5px; stroke-linejoin: round;
}
/* нанасянето на точките: JS слага is-waiting, а при влизане в екрана — is-plotting */
.pj-map.is-waiting .pj-map__pt { visibility: hidden; }
.pj-map.is-plotting .pj-map__pt { transform-box: fill-box; transform-origin: center; animation: pjPlot .8s cubic-bezier(.16, 1, .3, 1) var(--d, 0s) backwards; }
@keyframes pjPlot { from { opacity: 0; transform: translateY(-16px) scale(.55); } }

.pj__media--figure { display: grid; place-content: center; justify-items: center; gap: .6rem; text-align: center; }
.pj__fig {
  font-family: var(--font-head); font-weight: 700; font-size: clamp(7rem, 14vw, 11rem); line-height: .82;
  color: transparent; -webkit-text-stroke: 1.5px rgba(91, 168, 245, .8);
}
.pj__figlabel { font-size: var(--fs-label); letter-spacing: .12em; text-transform: uppercase; color: var(--blue-map); }

/* текст */
.pj__body { min-width: 0; }
.pj__meta { display: flex; flex-wrap: wrap; align-items: baseline; gap: .3rem .9rem; margin: 0 0 .7rem; font-size: var(--fs-small); color: var(--gray); }
.pj__years { font-size: var(--fs-label); letter-spacing: .02em; color: var(--blue-bright); font-variant-numeric: tabular-nums; }
.pj__title { font-family: var(--font-head); font-weight: 600; font-size: clamp(1.45rem, 1.15rem + .9vw, 2rem); line-height: 1.15; margin: 0 0 .9rem; text-wrap: balance; transition: color .3s; }
.pj__what { max-width: var(--measure); margin: 0 0 1.15rem; font-size: var(--fs-body); line-height: 1.6; color: #C9D3E1; }
/* техническите числа — с обикновения шрифт (цифри с еднаква ширина), в ширината на текста */
.pj__facts { display: flex; flex-wrap: wrap; row-gap: .35rem; list-style: none; margin: 0 0 1.15rem; padding: 0; max-width: var(--measure); font-family: var(--font-body); font-size: var(--fs-small); letter-spacing: .01em; font-variant-numeric: tabular-nums; color: var(--white); }
/* разделителят е след точката — при пренасяне остава в края на реда, не в началото на следващия */
.pj__facts li:not(:last-child)::after { content: '·'; margin: 0 .6rem; color: var(--blue-map); }
.pj__role { max-width: var(--measure); margin: 0 0 1.3rem; font-size: var(--fs-small); line-height: 1.55; color: #C9D3E1; }
.pj__label { margin-right: .5rem; font-size: var(--fs-label); letter-spacing: .12em; text-transform: uppercase; color: var(--blue-map); }
.pj__cert { max-width: var(--measure); margin: 0; padding-top: 1rem; border-top: 1px solid var(--ink-3); }
/* удостоверение без цитат — само издателят; линията над него изглеждаше като недовършен блок */
.pj__cert:not(:has(blockquote)) { padding-top: 0; border-top: 0; }
.pj__cert blockquote { margin: 0 0 .55rem; }
.pj__cert blockquote p { margin: 0; font-size: var(--fs-body); line-height: 1.55; color: var(--white); }
.pj__cert figcaption { font-size: var(--fs-label); line-height: 1.5; letter-spacing: .02em; color: var(--gray); }

/* ред, към който води адрес с котва (стар адрес от предишния сайт) */
.pj:target .pj__title, .pj-row:target .pj-row__title { color: var(--blue-bright); }
.pj-row:target { background-color: rgba(43, 116, 202, .14); }

/* ---- Архив ---- */
.pj-arch { padding-block: clamp(3.5rem, 8vw, 6rem); }
.pj-arch__intro { max-width: var(--measure); margin: 0 0 2rem; font-size: var(--fs-lead); color: #C9D3E1; }
.pj-arch__list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line-blue); }
.pj-row {
  display: grid; grid-template-columns: 7.5rem minmax(0, 1fr) minmax(0, 17rem); gap: .35rem 1.6rem; align-items: baseline;
  padding: 1rem .4rem; border-bottom: 1px solid var(--row-line, var(--line-blue)); scroll-margin-top: 5.5rem; transition: background-color .3s;
}
/* подсветката помага да се проследи редът през колоните — само при мишка; синкава, а годините светват */
@media (hover: hover) and (pointer: fine) {
  .pj-row:hover { background-color: rgba(43, 116, 202, .12); }
  .pj-row:hover .pj-row__years { color: var(--glow); transition: color .2s ease; }
}
.pj-row__years { font-size: var(--fs-label); letter-spacing: .02em; color: var(--blue-bright); font-variant-numeric: tabular-nums; white-space: nowrap; }
.pj-row__title { font-size: var(--fs-body); line-height: 1.45; color: var(--white); overflow-wrap: break-word; transition: color .3s; }
.pj-row__client { font-size: var(--fs-small); line-height: 1.45; color: var(--gray); overflow-wrap: break-word; }

/* ---- Таблет и телефон ---- */
@media (max-width: 900px) {
  .pj { grid-template-columns: minmax(0, 1fr); gap: 1.3rem; }
  .pj__media { max-width: 600px; }
  .pj-row { grid-template-columns: 6.5rem minmax(0, 1fr); }
  .pj-row__client { grid-column: 2; }
}
@media (max-width: 600px) {
  .pj-map__label { font-size: 26px; }
  .pj-row { grid-template-columns: minmax(0, 1fr); gap: .3rem; padding-inline: 0; }
  .pj-row__client { grid-column: auto; }
}
/* надписът на картата остава ≥ 12 px на екрана: в двете колони (901–1260 px) и на най-тесните телефони */
@media (min-width: 901px) and (max-width: 1100px) { .pj-map__label { font-size: 26px; } }
@media (min-width: 1101px) and (max-width: 1260px) { .pj-map__label { font-size: 21px; } }
@media (max-width: 360px) { .pj-map__label { font-size: 29px; letter-spacing: .06em; } }

@media (prefers-reduced-motion: reduce) {
  .pj-map__pt .pulse { animation: none; }
  .pj-map.is-plotting .pj-map__pt { animation: none; }
  .pj__title, .pj-row, .pj-row__title, .pj-filter__btn { transition: none; }
}