/* ================================================================
   css/portfolio.css — галерея, фильтры, окно проекта
   ================================================================ */
.portfolio-page{padding-top:8rem}
.portfolio-hero{text-align:center;padding:4rem 0 3rem}
.portfolio-hero-title{font-family:var(--ff-display);font-weight:600;font-size:clamp(2.8rem,6.5vw,6rem);line-height:1;letter-spacing:-.02em;margin-bottom:1.25rem}

/* Фильтры */
.portfolio-filters{display:flex;flex-wrap:wrap;justify-content:center;gap:.75rem;margin-bottom:3rem}
.filter-btn{padding:.75rem 1.5rem;border:1px solid var(--line-2);border-radius:999px;font-size:.78rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);transition:color .3s,border-color .3s,background .3s}
.filter-btn:hover{color:var(--text);border-color:var(--gold)}
.filter-btn.active{background:var(--grad);border-color:transparent;color:#140d06}

/* Сетка в стиле журнальной вёрстки */
.portfolio-grid{display:grid;grid-template-columns:repeat(3,1fr);grid-auto-rows:340px;grid-auto-flow:dense;gap:1.25rem}
.portfolio-item{position:relative;border-radius:var(--radius);overflow:hidden;cursor:pointer;transition:transform .25s ease-out}
.portfolio-item-wide{grid-column:span 2}
.portfolio-item-tall{grid-row:span 2}
.portfolio-item.is-hidden{display:none}
.portfolio-item.is-entering{animation:itemIn .7s var(--ease) backwards}
@keyframes itemIn{from{opacity:0;transform:scale(.94) translateY(24px)}}

.portfolio-image{position:relative;width:100%;height:100%;background:var(--bg-2)}
.portfolio-image img{width:100%;height:100%;object-fit:cover;transition:transform 1.4s var(--ease),filter .6s}
.portfolio-item:hover .portfolio-image img{transform:scale(1.07);filter:brightness(.5) saturate(1.1)}
.portfolio-fallback{position:absolute;inset:0;display:none;place-items:center;font-family:var(--ff-display);font-style:italic;font-size:8rem;color:rgba(233,165,104,.35);background:radial-gradient(circle at 50% 30%,#2a2118,var(--bg-2))}
.portfolio-image.no-img img{display:none}
.portfolio-image.no-img .portfolio-fallback{display:grid}

/* Подпись поверх фото */
.portfolio-overlay{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:flex-end;padding:clamp(1.5rem,3vw,2.25rem);background:linear-gradient(to top,rgba(7,8,11,.92),rgba(7,8,11,.15) 55%,transparent)}
.portfolio-tag{align-self:flex-start;font-size:.7rem;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:var(--gold);margin-bottom:.6rem}
.portfolio-title{font-family:var(--ff-display);font-size:clamp(1.5rem,2.4vw,2.1rem);font-weight:600;line-height:1.1;margin-bottom:.6rem}
.portfolio-desc{color:var(--muted);font-size:.92rem;max-width:420px;margin-bottom:1.25rem}
.portfolio-results{display:flex;flex-wrap:wrap;gap:.75rem;margin-bottom:1.25rem}
.result-badge{display:flex;flex-direction:column;padding:.7rem 1rem;border:1px solid rgba(233,165,104,.3);border-radius:12px;background:rgba(233,165,104,.08);font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.result-badge strong{font-family:var(--ff-display);font-size:1.4rem;letter-spacing:0;text-transform:none;color:var(--gold-light)}
.portfolio-btn{align-self:flex-start;display:inline-flex;align-items:center;gap:.5rem;padding:.7rem 1.25rem;border:1px solid var(--line-2);border-radius:999px;background:rgba(255,255,255,.08);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);font-size:.74rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;transition:background .3s,color .3s,border-color .3s}
.portfolio-btn:hover{background:var(--gold);border-color:var(--gold);color:#140d06}
.portfolio-btn svg{width:16px;height:16px}

/* На компьютере детали появляются при наведении, на телефоне видны всегда */
@media (hover:hover){
  .portfolio-desc,.portfolio-results,.portfolio-btn{opacity:0;transform:translateY(14px);transition:opacity .5s var(--ease),transform .5s var(--ease),background .3s,color .3s}
  .portfolio-item:hover .portfolio-desc{opacity:1;transform:none}
  .portfolio-item:hover .portfolio-results{opacity:1;transform:none;transition-delay:.06s}
  .portfolio-item:hover .portfolio-btn{opacity:1;transform:none;transition-delay:.12s}
}

.portfolio-cta{text-align:center}
.portfolio-cta .section-tag{justify-content:center}

/* Окно проекта */
body.modal-lock{overflow:hidden}
.modal{position:fixed;inset:0;z-index:9400;display:grid;place-items:center;padding:var(--pad);visibility:hidden;opacity:0;transition:opacity .45s var(--ease),visibility .45s}
.modal.open{visibility:visible;opacity:1}
.modal-backdrop{position:absolute;inset:0;background:rgba(5,6,8,.86);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
.modal-dialog{position:relative;display:grid;grid-template-columns:1.1fr .9fr;width:min(1120px,100%);max-height:90vh;overflow:auto;border:1px solid var(--line);border-radius:var(--radius);background:var(--bg-2);transform:translateY(40px) scale(.97);transition:transform .6s var(--ease)}
.modal.open .modal-dialog{transform:none}
.modal-media{position:relative;min-height:460px;background:radial-gradient(circle at 50% 30%,#2a2118,#0d0f14)}
.modal-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.modal-media.no-img img{display:none}
.modal-media.no-img::after{content:'N';position:absolute;inset:0;display:grid;place-items:center;font-family:var(--ff-display);font-style:italic;font-size:9rem;color:rgba(233,165,104,.35)}
.modal-body{display:flex;flex-direction:column;padding:clamp(2rem,4vw,3.25rem)}
.modal-title{font-family:var(--ff-display);font-size:clamp(2rem,3.5vw,3rem);line-height:1.05;margin-bottom:1rem}
.modal-text{color:var(--muted);margin-bottom:1.75rem}
.modal-meta{display:grid;grid-template-columns:1fr 1fr;gap:1.25rem;padding:1.5rem 0;border-block:1px solid var(--line);margin-bottom:1.5rem}
.modal-meta dt{font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;color:var(--dim);margin-bottom:.25rem}
.modal-meta dd{font-weight:500}
.modal-results{display:flex;flex-wrap:wrap;gap:.75rem;margin-bottom:1.75rem}
.modal-nav{display:flex;justify-content:space-between;margin:auto 0 1.25rem;padding-top:1rem}
.modal-nav button{font-size:.78rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);transition:color .3s}
.modal-nav button:hover{color:var(--gold)}
.modal-close{position:absolute;top:1rem;right:1rem;z-index:2;width:46px;height:46px;display:grid;place-items:center;border:1px solid var(--line-2);border-radius:50%;background:rgba(7,8,11,.75);font-size:1.6rem;line-height:1;transition:background .3s,color .3s,transform .4s var(--ease)}
.modal-close:hover{background:var(--gold);color:#140d06;transform:rotate(90deg)}

/* Адаптив */
@media (max-width:1024px){
  .portfolio-grid{grid-template-columns:repeat(2,1fr);grid-auto-rows:320px}
  .modal-dialog{grid-template-columns:1fr}
  .modal-media{min-height:320px}
}
@media (max-width:640px){
  .portfolio-page{padding-top:6rem}
  .portfolio-grid{grid-template-columns:1fr;grid-auto-rows:440px}
  .portfolio-item-wide,.portfolio-item-tall{grid-column:auto;grid-row:auto}
  .modal{padding:0;place-items:end center}
  .modal-dialog{max-height:94vh;border-radius:var(--radius) var(--radius) 0 0}
}
@keyframes itemIn {
  from {
    opacity: 0;
    transform: scale(0.94) translateY(30px) rotateX(8deg);
    filter: blur(6px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0) rotateX(0);
    filter: blur(0);
  }
}