/* ============================================================
   project-detail.css — KUN individuelle projektsider (Fase 4)
   Kræver tokens.css + base.css + components.css.

   Struktur og målte værdier fra referencens Tudor-side:
   https://www.soundingreece.com/projects/tudor-born-to-dare

   Genbrug fra Fase 1–3: masthead, sticky nav, mobilheader, mobilmenu,
   Lenis, sort footer, .section-title. Herunder kun: projekt-hero
   (to-kolonne), 16:9-videoområde, credits, "Projektet."-sektion og
   "Flere projekter."-listen.
   ============================================================ */

/* Gutters: 20px ≥810, 10px ≤809 (som resten af sitet) */
@media (max-width: 809px) {
  main .container { padding-inline: var(--work-gutter-mobile); }
}

/* ============================================================
   PROJEKT-HERO
   Tudor: sektion-padding 140px top / 80px bund. Flex-kolonne, gap 20px:
   titelrække → 1px-linje → medierække.
   ============================================================ */
/* Detaljesider har ingen identitetsmasthead — den sticky menurække er
   sidens øverste element. Top-afstanden matcher Tudor (H1 ca. 140px fra
   toppen) MINUS det fjernede identitetsområde: menurække (~42px) + 96px. */
.project-hero {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding-top: 96px;
  padding-bottom: 80px;
}
@media (max-width: 809px) {
  .project-hero { padding-top: 48px; }   /* kompakt mobilheader overtager */
}

/* ---- Titelrække: H1 (2fr) | kategori (1fr), bund-justeret ----
   To-kolonne ≥810, stablet ≤809 (Tudor-målt).                  */
.project-hero__head {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  align-items: end;
}
@media (min-width: 810px) {
  .project-hero__head { grid-template-columns: 2fr 1fr; gap: 40px; }
}

.project-hero__title {
  font-size: 80px;                    /* ≥1200 — målt                */
  font-weight: var(--fw-medium);      /* 500                          */
  line-height: 1;                     /* målt: lh = font-size         */
  letter-spacing: -0.06em;            /* −4.8px ved 80px              */
  text-transform: uppercase;
  color: var(--fg);
  margin: 0;
  overflow-wrap: anywhere;
  hyphens: auto;
}
/* Kategoritag — lysegrå baggrund, dimensioneret efter teksten,
   højrestillet i titelrækkens højre celle (flugter med højre kant).
   (justify-self: end er grid-korrekt højrejustering; svarer til
   margin-left: auto på en shrink-to-content-tag.)                    */
.project-cat {
  justify-self: end;
  align-self: end;
  display: inline-flex;
  width: max-content;
  max-width: 100%;
  background: #F2F2F2;
  color: #0F0F0F;
  padding: 8px 12px;
  font-size: 12px;
  font-weight: var(--fw-semibold);    /* 600                          */
  line-height: 1;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  border-radius: 0;
  margin: 0;
}

/* ---- 1px-delelinje mellem titel og medie ---- */
.project-hero__rule {
  height: 1px;
  background: #C8C8C8;
}

/* ---- Medierække: video (2fr) | credits-aside (1fr) ----
   To-kolonne ≥1200, stablet ≤1199 (Tudor-målt: medie kollapser før
   titelrækken).                                                 */
.project-hero__body {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
  align-items: start;
}
@media (min-width: 1200px) {
  .project-hero__body { grid-template-columns: 2fr 1fr; gap: 40px; }
}

/* ============================================================
   VIDEOOMRÅDE — direkte YouTube-iframe, 16:9
   aspect-ratio reserverer arealet FØR iframe loader → intet layout shift.
   ============================================================ */
.project-media {
  position: relative;
  aspect-ratio: 16 / 9;
  width: 100%;
  overflow: hidden;
  background: var(--line);            /* neutral flade under indlæsning */
}
/* Kun på desktop-2-kolonne (≥1200) kappes videoen (748px = 16:9 i Tudors
   ~421px højde). CENTRERET i 2fr-kolonnen via margin-inline:auto → mere
   balanceret, central medieplacering som referencens Tudor-side (Fase 8-
   rettelse; tidligere venstrestillet). Ved stablet layout (≤1199) og mobil
   bruger videoen fuld bredde.                                          */
@media (min-width: 1200px) {
  .project-media { max-width: 748px; margin-inline: auto; }
}
.project-media__frame {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

/* Mediekolonne: kun video-embed (det synlige YouTube-link er fjernet i Fase 8). */
.project-hero__media { min-width: 0; }

/* ============================================================
   MEDIETYPER — Spotify · lodret par (Shorts) · placeholder
   Tilføjet ved projektudvidelsen. Alle arver .project-media, men
   overskriver aspect-ratio/bredde efter behov (senere kildeorden vinder).
   ============================================================ */

/* ---- Spotify-show — fast højde (episodeliste), ingen 16:9 ---- */
.project-media--spotify {
  aspect-ratio: auto;
  height: 352px;
  background: transparent;
}

/* ---- To lodrette Shorts (9:16): side om side ≥620, stablet derunder ---- */
.project-pair {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
  justify-items: center;
  min-width: 0;
}
@media (min-width: 620px) {
  .project-pair { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
}
/* Overskriver .project-media's 16:9 + ≥1200-max-width:748/centrering. */
.project-media--vertical {
  aspect-ratio: 9 / 16;
  width: 100%;
  max-width: 300px;
  margin-inline: auto;
}
/* pair-horizontal: to almindelige 16:9-videoer (fx NOAHs ekstra videoer) —
   fylder hele deres gridcelle (ingen 748-cap), side om side ≥620, stablet derunder. */
.project-pair--horizontal .project-media { max-width: none; margin-inline: 0; }

/* ---- "VIDEO KOMMER" — neutral 16:9-placeholder (intet embed endnu) ---- */
.project-media--placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  background: #F2F2F2;
  border: 1px solid #E2E2E2;
}
.project-media__placeholder-text {
  font-size: 13px;
  font-weight: var(--fw-semibold);
  line-height: 1;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #9A9A9A;
}

/* ============================================================
   "FLERE VIDEOER FRA PROJEKTET." — indlejret playliste + presselinks
   (youtube-playlist-project). Samme rytme som .project-prose/.related.
   ============================================================ */
.project-playlist { padding-block: 80px; }
.project-playlist__media { margin-top: 20px; }
.project-presslinks {
  margin-top: 24px;
  display: flex;
  flex-wrap: wrap;
  gap: 12px 20px;
}
.project-presslink { font-size: var(--fs-body); }

/* ============================================================
   CREDITS — i hero-højrekolonnen (Tudor-position)
   Label/value-liste; kun udfyldte felter (byggescriptet udelader tomme).
   ============================================================ */
.project-hero__aside {
  display: flex;
  flex-direction: column;
  gap: 40px;                          /* Tudor: 40px mellem intro og credits */
}

/* ---- Kort introtekst over credits (Tudor-position) ---- */
.project-intro {
  font-size: var(--fs-body);          /* 18/15                         */
  font-weight: var(--fw-medium);      /* 500                           */
  line-height: var(--lh-body);        /* 1.4                           */
  letter-spacing: var(--ls-body);     /* −0.04em                       */
  color: var(--fg);
  margin: 0;
  max-width: none;
}

/* ---- Credits: label/value-liste med separatorlinjer ----
   "Credits"-overskrift med linje under, derefter én række pr. felt med
   linje under. Linjerne spænder hele creditkolonnens bredde.          */
.credits { display: flex; flex-direction: column; }
.credits__heading {
  font-size: 13px;
  font-weight: var(--fw-medium);
  line-height: 1.4;
  letter-spacing: -0.39px;
  text-transform: uppercase;
  color: var(--fg);
  margin: 0;
  max-width: none;                    /* ophæv base.css p { max-width:68ch } */
  padding-bottom: 8px;
  border-bottom: 1px solid #C8C8C8;
}
.credits__list { margin: 0; }
.credits__row {
  padding-block: 8px;
  border-bottom: 1px solid #C8C8C8;
}
.credits__label {
  font-size: 14px;
  font-weight: var(--fw-medium);
  line-height: 1.4;
  letter-spacing: -0.42px;
  color: #757575;                     /* dæmpet grå — målt             */
  margin: 0;
}
.credits__value {
  font-size: 14px;
  font-weight: var(--fw-medium);
  line-height: 1.4;
  letter-spacing: -0.42px;
  color: var(--fg);                   /* mørk — målt                   */
  margin: 4px 0 0;
}

/* ============================================================
   "PROJEKTET." — dansk pendant til Tudors "Production Context."
   Kun renderet når projektet har tekst (byggescriptet styrer det).
   ============================================================ */
.project-prose { padding-block: 80px; }   /* Tudor-målt                 */
.project-section__rule {
  height: 1px;
  background: #C8C8C8;
  margin-top: 20px;
}
.project-section__body {
  margin-top: 20px;
  display: flex;
  flex-direction: column;
  gap: var(--fs-sm);
}
.project-section__p {
  font-size: var(--fs-body);          /* 18/15                         */
  font-weight: var(--fw-medium);
  line-height: var(--lh-body);
  letter-spacing: var(--ls-body);
  color: var(--fg);
  max-width: 68ch;                    /* læsbar linjelængde            */
}

/* Punktliste — synlige markører (base.css nulstiller list-style på ul).
   Samme brødtekststørrelse som afsnit; venstrestillet; behagelig
   afstand; ikke overindrykket. Følger --fs-body ned på mobil.        */
.project-section__list {
  margin: 0;
  padding-left: 1.2em;
  list-style: disc;
  max-width: 68ch;
}
.project-section__list li {
  font-size: var(--fs-body);          /* 18/15                         */
  font-weight: var(--fw-medium);
  line-height: var(--lh-body);        /* 1.4                           */
  letter-spacing: var(--ls-body);     /* −0.04em                       */
  color: var(--fg);
}
.project-section__list li + li { margin-top: 0.5em; }

/* ============================================================
   "FLERE PROJEKTER." — nummererede listerækker (maks 4)
   Samme struktur som referencens "More Projects".
   ============================================================ */
.related { padding-block: 80px; }
.related__rule {
  height: 1px;
  background: #C8C8C8;
  margin-top: 20px;
}
.related__list {
  list-style: none;
  margin: 20px 0 0;
  padding: 0;
}
.related__item { border-bottom: 1px solid #C8C8C8; }

.related__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 139px minmax(0, 0.5fr);
  gap: 8px;
  align-items: center;
  padding-block: 16px;
}
.related__main {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}
.related__num {
  font-size: 13px;
  font-weight: var(--fw-medium);
  line-height: 1.4;
  letter-spacing: -0.39px;
  text-transform: uppercase;
  color: #757575;
}
.related__title {
  font-size: 16px;
  font-weight: var(--fw-medium);
  line-height: 1.4;
  letter-spacing: -0.04em;
  text-transform: uppercase;
  color: var(--fg);
  margin: 0;
  min-width: 0;
}
.related__client {
  font-size: 13px;
  font-weight: var(--fw-medium);
  line-height: 1.4;
  letter-spacing: -0.39px;
  color: #757575;
  margin: 0;
  max-width: none;
}
.related__cat {
  font-size: 16px;
  font-weight: var(--fw-medium);
  line-height: 1.4;
  letter-spacing: -0.04em;
  color: var(--fg);
  min-width: 0;
}
.related__thumb {
  display: block;
  width: 139px;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--line);
}
.related__thumb img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform var(--motion-normal) var(--ease-standard);
}
/* Kvadratiske podcastcovers vises 'contain' på neutral flade; manglende
   thumbnail bliver en neutral placeholder-flade (intet dødt billede). */
.related__thumb--contain { background: #F2F2F2; }
.related__thumb--contain img { object-fit: contain; }
.related__thumb--empty { background: #F2F2F2; }
.related__row:hover .related__thumb img,
.related__row:focus-visible .related__thumb img { transform: scale(1.03); }
.related__row:hover .related__title,
.related__row:focus-visible .related__title {
  text-decoration: underline;
  text-underline-offset: 4px;
}

/* ============================================================
   RESPONSIVE — sidetitlen + listerækkernes komprimering
   ============================================================ */
@media (max-width: 1199px) {
  .project-hero__title { font-size: 60px; }         /* Tudor-målt 810–1199 */
  .related__row { grid-template-columns: minmax(0, 1fr) 110px minmax(0, 0.5fr); }
  .related__thumb { width: 110px; }
}
@media (max-width: 809px) {
  .project-hero__title { font-size: 40px; }         /* Tudor-målt ≤809     */
  .related__row { grid-template-columns: minmax(0, 1fr) 76px minmax(0, 0.45fr); }
  .related__thumb { width: 76px; }
  .related__title, .related__cat { font-size: 15px; }
}
@media (max-width: 480px) {
  .related__row { grid-template-columns: minmax(0, 1fr) 56px minmax(0, 0.42fr); gap: 6px; }
  .related__thumb { width: 56px; }
  .related__title, .related__cat { font-size: 14px; }
  .related__num, .related__client { font-size: 12px; }
}

/* ============================================================
   NOAH — redaktionel case-opbygning af "Projektet."
   Skiftevis to-kolonne (grid, ikke order). Stablet: tekst FØR billede.
   Bevarer sitets identitet: skarpe hjørner, sort/hvid, ingen skygger/rammer.
   ============================================================ */
.case-flow {
  margin-top: 20px;
  display: flex;
  flex-direction: column;
  gap: 56px;
}

/* Stablet grundtilstand: én kolonne, tekst FØR billede (markup-rækkefølge). */
.case-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
  align-items: center;
}
.case-row__text {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--fs-sm);
}
.case-row__text .project-section__p { max-width: 72ch; }   /* ~55–75 tegn */

/* Mediekolonne: billedgrupper stables lodret (aldrig små side-by-side). */
.case-row__media {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* Illustrationer: egne proportioner bevaret, contain, aldrig beskåret.
   Ingen ramme, ingen afrundede hjørner, ingen skygge. */
.case-figure { margin: 0; }
.case-figure img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
}
/* Vertikal illustration (opdeling): begræns bredden, så billedet ikke bliver
   for højt/dominerende, men bevar fuld proportion (må ikke beskæres til liggende).
   Bredde-begrænsning (ikke width:auto) → aspect-ratio fra width/height-attributter
   reserverer højden FØR lazy-load → intet layout shift. */
.case-figure--tall {
  max-width: 360px;
  margin-inline: auto;
}
/* Redaktionel før/efter-label (skjult/hævet) — supplerer alt-teksten, er
   aldrig eneste informationskilde. */
.case-figure__label {
  display: block;
  margin-top: 8px;
  font-size: 12px;
  font-weight: var(--fw-semibold);
  line-height: 1.4;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #757575;
}

/* Desktop: skiftevis to-kolonne. "Billede-venstre" placeres visuelt via
   grid-column (IKKE order) → tekst forbliver først i skærmlæser-rækkefølgen. */
@media (min-width: 1000px) {
  .case-row {
    grid-template-columns: 1fr 1fr;
    gap: 48px;
  }
  .case-row--image-left .case-row__text { grid-column: 2; grid-row: 1; }
  .case-row--image-left .case-row__media { grid-column: 1; grid-row: 1; }
}

/* Sektion 5 — bred, selvstændig tekstblok ("Mit arbejde"): tydeligere vægt,
   smallere linjelængde, mere luft, tynd separatorlinje. */
.case-block--lead {
  max-width: 60ch;
  padding-top: 28px;
  border-top: 1px solid #C8C8C8;
}
.project-section__p--lead {
  font-size: calc(var(--fs-body) + 3px);
  max-width: 56ch;
}

/* Sektion 6 — afsluttende note (patentforbehold): mindre vægt, separator over,
   ingen boks/ikon/baggrund; fortsat fuldt læsbar. */
.case-note {
  padding-top: 24px;
  border-top: 1px solid #C8C8C8;
}
.case-note .project-section__p {
  max-width: 72ch;
  color: #5A5A5A;
}