/* ============================================================
   MonumentArt — 07 CASESTUDIE-PANEL
   Fullskjermspanel som åpnes fra porteføljen.
   ============================================================ */

.project-panel {
  position: fixed; inset: 0;
  z-index: var(--z-modal);
  visibility: hidden;
  transition: visibility 0s linear .7s;   /* lukking: skjules når alt har tonet ut */
}
.project-panel.is-open { visibility: visible; transition-delay: 0s; }
/* Panelet selv tones IKKE inn med opacity. En forelder med opacity under 1
   gjør at backdrop-filter på sløret ikke ser siden bak: mens panelet tonet
   inn, lå porteføljen skarp bak teksten, og først da tonen var ferdig,
   slo uskarpheten inn med et rykk. Nå tones sløret og innholdet hver
   for seg: sløret først (blur fra første bilde), innholdet like etter. */
.project-panel:not(.is-open),
.project-panel:not(.is-open) * { pointer-events: none !important; }

.project-panel__scrim {
  position: absolute; inset: 0;
  background: rgba(3, 4, 6, .82);
  -webkit-backdrop-filter: blur(20px) saturate(130%);
  backdrop-filter: blur(20px) saturate(130%);
  opacity: 0;
  transition: opacity .5s var(--e-out) .15s;
}
.project-panel.is-open .project-panel__scrim {
  opacity: 1;
  transition: opacity .38s var(--e-out);
}

.project-panel__body {
  position: absolute; inset: 0;
  overflow-y: auto; overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  padding: clamp(1rem, 3vw, 2.5rem) clamp(1rem, 4vw, 3.5rem) clamp(3rem, 7vw, 6rem);
  transform: scale(.965) translateY(26px);
  opacity: 0;
  transition: transform .4s var(--e-out), opacity .3s var(--e-out);
}
.project-panel.is-open .project-panel__body {
  transform: none; opacity: 1;
  transition: transform .8s var(--e-out) .14s, opacity .5s var(--e-out) .14s;
}

.project-panel__body > * {
  max-width: 1400px;
  margin-inline: auto;
}

.project-panel__close {
  position: fixed;
  top: clamp(1rem, 2.5vw, 2rem);
  right: clamp(1rem, 2.5vw, 2rem);
  z-index: 3;
  background: rgba(10, 13, 17, .78);
}

.project-panel__hero { min-width: 0; }
.project-panel__hero .media,
.project-panel__hero .player { border-radius: var(--r-xl); box-shadow: var(--sh-xl); }

/* ---------- Toppen av en casestudie ----------
   Én og samme flate for alle prosjekter: 16:9, venstrestilt, med
   fakta i spalten ved siden av. Se kommentaren i portfolio.js for
   hvorfor 16:9 og ikke 21:9.

   Bredden har et tak: i full bredde blir 16:9 så høyt at tittelen
   under havner utenfor skjermen på en vanlig laptop. Taket regnes ut
   fra hvor høy flaten får lov til å bli — 66 % av skjermen — pluss
   mellomrommet og faktaspalten, siden de to står ved siden av
   hverandre. Da smalner hele toppen samlet, og spalten følger med i
   stedet for å bli hengende igjen.

   vh-linja står først for nettlesere uten svh; svh er høyden uten
   nettleserens egne linjer, som er den som gjelder på telefon. */
.project-panel__topp {
  /* Formatet på toppmediet. 16:9 for bilde og film; en brosjyreside
     har sitt eget, og da settes tallet på elementet fra portfolio.js. */
  --hero-ratio: 1.7778;
  /* Hvor mye av skjermhøyden toppen får ta, som rene tall. Enheten
     ligger i --vu, slik at hvert brytepunkt bare bytter tallet. */
  --hero-h: 66;
  --vu: 1vh;
  margin-bottom: clamp(2rem, 4vw, 3.5rem);
}
/* svh er skjermhøyden uten nettleserens egne linjer — den som faktisk
   gjelder på telefon. Eldre nettlesere blir stående på vh over. */
@supports (height: 1svh) {
  .project-panel__topp { --vu: 1svh; }
}

@media (min-width: 1001px) {
  .project-panel__topp {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 280px;
    gap: 2.25rem;
    align-items: start;
    max-width: calc(var(--hero-h) * var(--vu) * var(--hero-ratio) + 2.25rem + 280px);
    margin-inline: 0;                 /* venstrestilt, som teksten */
  }
}
@media (min-width: 1001px) and (max-width: 1199px) {
  .project-panel__topp {
    grid-template-columns: minmax(0, 1fr) 230px;
    max-width: calc(var(--hero-h) * var(--vu) * var(--hero-ratio) + 2.25rem + 230px);
  }
}

/* Under 1000 px er det ikke plass til to spalter. Da legger fakta seg
   under bildet, og bildet får hele bredden — med samme høydetak. */
@media (max-width: 1000px) {
  .project-panel__topp { --hero-h: 74; }
  .project-panel__hero { max-width: calc(var(--hero-h) * var(--vu) * var(--hero-ratio)); }
  .project-panel__meta { margin-top: clamp(1.4rem, 3vw, 2rem); }
}

/* Telefon i liggende stilling: hele skjermen er lavere enn toppen
   alene ville vært. Da må flaten ned, ellers ser man ingenting annet. */
@media (orientation: landscape) and (max-height: 560px) {
  .project-panel__topp { --hero-h: 58; }
}

/* Faktaspalten: kolonne ved siden av bildet, rad under det. */
.project-panel__meta .case__facts { margin-top: 1.1rem; }
@media (min-width: 1001px) {
  .project-panel__meta { padding-top: .35rem; }
}
/* Lukkeknappen ligger fast i hjørnet av vinduet. Fra rundt 1560 px og
   nedover når innholdet helt ut dit, og knappen legger seg oppå
   kickeren øverst i faktaspalten. Da starter spalten under knappen i
   stedet. Over den bredden er det luft nok, og spalten står i flukt
   med toppen av bildet. */
@media (min-width: 1001px) and (max-width: 1559px) {
  .project-panel__meta { padding-top: 3.1rem; }
  .project-panel__meta .case__facts {
    grid-template-columns: 1fr;
    gap: 0;
  }
  .project-panel__meta .case__facts > * {
    padding: .85rem 0;
    border-top: 1px solid var(--line);
  }
  .project-panel__meta .case__facts > *:last-child { padding-bottom: 0; }
}

.project-panel__head { margin-bottom: clamp(2.5rem, 5vw, 4.5rem); }
.project-panel__head .section-title { margin-top: .8rem; }

.project-panel__story { margin-bottom: clamp(2.5rem, 5vw, 4.5rem); }

.project-panel__gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr));
  gap: clamp(.8rem, 1.5vw, 1.4rem);
  margin-bottom: clamp(2.5rem, 5vw, 4.5rem);
}
.project-panel__cell { aspect-ratio: 3 / 2; }

/* Fem bilder: 2 store over 3 mindre. Rutenettet deles i seks, de to
   første tar tre hver, de tre neste to hver — slik blir hver rad full
   og alle rutene beholder 3:2. Gjelder bare når panelet er bredt nok
   til flere kolonner; smalere enn det ligger bildene under hverandre. */
.project-panel__body { container-type: inline-size; }
@container (min-width: 780px) {
  .project-panel__gallery--fem { grid-template-columns: repeat(6, 1fr); }
  .project-panel__gallery--fem > * { grid-column: span 2; }
  .project-panel__gallery--fem > :nth-child(-n+2) { grid-column: span 3; }

  /* Sju bilder: tre små, så to rader med to store (3 + 2 + 2). */
  .project-panel__gallery--sju { grid-template-columns: repeat(6, 1fr); }
  .project-panel__gallery--sju > * { grid-column: span 3; }
  .project-panel__gallery--sju > :nth-child(-n+3) { grid-column: span 2; }
}
.project-panel__cell .work-card { width: 100%; height: 100%; border-radius: var(--r-md); }
/* Klippet er en rute som de andre: samme format, samme hjørner.
   Spillerens eget 16:9 overstyres, ellers ville raden bli ujevn. */
.project-panel__cell .player--rute {
  width: 100%; height: 100%;
  aspect-ratio: auto;
  border-radius: var(--r-md);
}

/* Avslutningen: «Vil du ha noe lignende?» over knappen.
   .label er inline-flex (den bærer en prikk ved siden av teksten), så
   avsnittet og knappen la seg på samme linje — og margin-top på
   knappen dro den opp i teksten i stedet for å skyve den ned.
   En kolonne med egen gap løser begge deler, og holder avstanden
   riktig på alle bredder. */
.project-panel__foot {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(1.1rem, 2.2vw, 1.8rem);
  text-align: center;
  padding-top: clamp(2.5rem, 5vw, 4rem);
  padding-bottom: clamp(.5rem, 2vw, 1.5rem);
  border-top: 1px solid var(--line);
}
/* gap-en styrer avstanden her — hjelpeklassen skal ikke legge til mer */
.project-panel__foot > * { margin-top: 0; margin-bottom: 0; }

/* Bakgrunnen skyves litt bort når panelet er åpent */
/* Fjernet: html.panel-open .shell { filter: saturate(.85) }. Et filter på
   hele siden i samme øyeblikk som panelet åpnes, tvang telefonen til å
   tegne alt bak på nytt – det var en del av forsinkelsen før sløret kom.
   Under et 82 % mørkt slør synes ikke forskjellen. */

@media (max-width: 640px) {
  .project-panel__cell { aspect-ratio: 4 / 3; }
  .project-panel__hero .media { border-radius: var(--r-md); }
}