/* ==========================================================================
   KS FACTOR — project.css  (vetëm për projekt.html)
   ========================================================================== */

/* ---------- Koka e projektit ---------- */
.project-hero { --ph: var(--c-green-700); }
.project-hero.cat-pun { background: var(--cat-pun); }
.project-hero.cat-rin { background: var(--cat-rin); }
.project-hero.cat-kul { background: var(--cat-kul); }
.project-hero.cat-tur { background: var(--cat-tur); }
.project-hero.cat-gra { background: var(--cat-gra); }
.project-hero.cat-kom { background: var(--cat-kom); }
.project-hero__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin-top: 24px; font-size: 14px; font-weight: 600; color: #E4EEE9; }
.project-hero__cat { background: rgba(255, 255, 255, .16); padding: 6px 12px; border-radius: 6px; letter-spacing: .08em; text-transform: uppercase; font-size: 12px; font-weight: 700; color: var(--c-white); }

/* ---------- Foto kryesore ---------- */
.project-cover { margin-top: -40px; position: relative; z-index: 1; }
.project-cover .ph { height: clamp(260px, 42vw, 520px); border-radius: var(--radius-lg); box-shadow: var(--shadow); }

/* ---------- Përmbajtja + anësorja ---------- */
.project-layout { display: flex; flex-wrap: wrap; gap: 56px; align-items: flex-start; }
.project-article { flex: 3 1 560px; min-width: 0; }
.project-article .lead p { margin-bottom: 20px; }
.project-article .lead p:first-child { font-size: 1.12em; color: var(--c-ink); }

.objective {
  margin-top: 32px;
  padding: 28px 32px;
  background: var(--c-green-50);
  border-radius: var(--radius);
}
.objective h2 { font-size: 20px; font-weight: 800; display: flex; align-items: center; gap: 10px; }
.objective p { margin-top: 10px; line-height: 1.7; color: var(--c-text); }

.gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr)); gap: 12px; margin-top: 40px; }
.gallery a { display: block; border-radius: var(--radius-sm); overflow: hidden; aspect-ratio: 4 / 3; }
.gallery img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s; }
.gallery a:hover img { transform: scale(1.04); }

.project-links { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }

.project-aside { flex: 2 1 320px; min-width: 0; position: sticky; top: calc(var(--header-h) + 24px); display: flex; flex-direction: column; gap: 20px; }
.aside-card { background: var(--c-white); border: 1px solid var(--c-line); border-radius: var(--radius-lg); padding: 8px 28px; }
.aside-card dl { margin: 0; }
.aside-card dl > div { padding: 18px 0; border-bottom: 1px solid var(--c-line); }
.aside-card dl > div:last-child { border-bottom: none; }
.aside-card dt { font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--c-muted-2); }
.aside-card dd { margin: 6px 0 0; font-weight: 600; line-height: 1.5; }

.share { background: var(--c-white); border: 1px solid var(--c-line); border-radius: var(--radius-lg); padding: 24px 28px; }
.share h2 { font-family: var(--f-body); font-size: 15px; font-weight: 700; }
.share__btns { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; }
.share__btns a, .share__btns button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 10px 16px;
  border-radius: var(--radius-pill);
  border: 1.5px solid var(--c-input);
  background: var(--c-white);
  color: var(--c-green);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
}
.share__btns a:hover, .share__btns button:hover { border-color: var(--c-green); color: var(--c-green); }

.aside-cta { background: var(--c-green); color: var(--c-white); border-radius: var(--radius-lg); padding: 28px; }
.aside-cta h2 { font-size: 22px; font-weight: 800; }
.aside-cta p { margin: 10px 0 20px; color: #D6E4DD; }

/* ---------- Para / pas ---------- */
.pager { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 16px; margin-top: 64px; padding-top: 32px; border-top: 1px solid var(--c-line); }
.pager a { display: flex; flex-direction: column; gap: 6px; padding: 20px 24px; border-radius: var(--radius); background: var(--c-white); border: 1px solid var(--c-line); text-decoration: none; color: var(--c-ink); transition: border-color .2s; }
.pager a:hover { border-color: var(--c-green); color: var(--c-ink); }
.pager span { font-size: 13px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--c-muted-2); }
.pager strong { font-family: var(--f-display); font-size: 18px; line-height: 1.3; }
.pager__next { text-align: right; }

.not-found { text-align: center; padding-block: 96px; }
.not-found p { margin: 16px auto 32px; max-width: 520px; color: var(--c-muted); font-size: 18px; }

@media (max-width: 900px) { .project-aside { position: static; } }