/* =========================================================
   Nordvik Anlegg — Prosjekter (egen stil, bygger på styles.css)
   Lastes ETTER styles.css. Prosjektkortene (.proj m.fl.)
   gjenbrukes fra styles.css.
   ========================================================= */

/* ---------- MASTHEAD ---------- */
.proj-masthead {
  position: relative;
  background: #141414;
  color: #fff;
  overflow: hidden;
}
.proj-masthead__img {
  position: absolute; inset: 0;
  background-image: url('../images/prosjekt-vei.png');
  background-size: cover;
  background-position: center;
}
.proj-masthead__overlay {
  position: absolute; inset: 0;
  background: linear-gradient(
    90deg,
    rgba(15, 15, 15, .94) 0%,
    rgba(15, 15, 15, .80) 42%,
    rgba(15, 15, 15, .40) 75%,
    rgba(15, 15, 15, .25) 100%
  );
}
.proj-masthead .container {
  position: relative; z-index: 1;
  min-height: clamp(320px, 42vh, 460px);
  display: flex; flex-direction: column; justify-content: center;
  padding-top: 64px; padding-bottom: 64px;
}
.proj-masthead h1 {
  font-size: clamp(2.4rem, 5.5vw, 4rem);
  font-weight: 900; letter-spacing: -.03em; line-height: 1;
  color: #fff; margin-bottom: 22px; max-width: 16ch;
}
.proj-masthead .lead {
  color: rgba(255, 255, 255, .82);
  font-size: 1.08rem; line-height: 1.65;
  max-width: 56ch; margin: 0;
}

/* ---------- BREADCRUMB ---------- */
.crumbs {
  display: flex; align-items: center; gap: 10px;
  font-size: .76rem; font-weight: 600; letter-spacing: .08em;
  text-transform: uppercase; margin-bottom: 26px;
}
.crumbs a { color: rgba(255, 255, 255, .6); }
.crumbs a:hover { color: #fff; }
.crumbs__here { color: rgba(255, 255, 255, .92); }
.crumbs__sep { color: rgba(255, 255, 255, .35); }

/* ---------- FILTER ---------- */
.proj-filter {
  display: flex; flex-wrap: wrap; gap: 10px;
  margin-bottom: clamp(28px, 4vw, 44px);
}
.proj-filter button {
  font-family: var(--font); font-weight: 700; font-size: .8rem;
  letter-spacing: .06em; text-transform: uppercase;
  color: var(--ink); background: #fff;
  border: 1px solid var(--line); padding: 11px 18px;
  cursor: pointer;
  transition: background .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease);
}
.proj-filter button:hover { border-color: var(--ink); }
.proj-filter button.is-active { background: var(--ink); color: #fff; border-color: var(--ink); }
.proj.is-hidden { display: none; }

/* ---------- REVEAL ---------- */
.reveal,
.reveal-stagger > * {
  opacity: 0; transform: translateY(22px);
  transition: opacity .7s var(--ease), transform .7s var(--ease);
}
.reveal.is-visible,
.reveal-stagger.is-visible > * { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal,
  .reveal-stagger > * { opacity: 1 !important; transform: none !important; transition: none !important; }
}

/* ---------- RESPONSIV ---------- */
@media (max-width: 600px) {
  .proj-masthead .container { padding-top: 48px; padding-bottom: 48px; min-height: 0; }
  .proj-masthead h1 { max-width: 100%; }
}