@charset "UTF-8";

/* ===========================================================================
   video.css — videokortene på video.html
   Fotografportefølje for David · Kristensen IT

   Forutsetter css/stil.css: tokens, reset og typografi kommer derfra, og den
   må lastes først.

   Siden er bygget for et fåtall videoer uten kategorier. Blir det mange nok
   til at den blir uoversiktlig, kan kategorimenyen og scroll-mekanikken fra
   galleriet gjenbrukes — se docs/prosjekt.md.
   =========================================================================== */


/* ---------------------------------------------------------------------------
   1. Siden
   --------------------------------------------------------------------------- */

.videoer {
  max-width: var(--maks-bredde);
  margin-inline: auto;
  padding: var(--rom-16) var(--side-marg) var(--rom-24);
}

.videoer__status,
.videoer__noskript {
  margin-top: var(--rom-8);
}

.videoer__personvern {
  max-width: var(--maks-tekst);
  margin-top: var(--rom-16);
}


/* ---------------------------------------------------------------------------
   2. Rutenettet

   Én kolonne på mobil, to på bred skjerm. Ikke fire som i galleriet: en video
   i 16:9 blir raskt for liten til å se noe i, og det er aldri mer enn en
   håndfull av dem.

   Radluften er større enn spalteluften. Uten det ville tittelen på en video
   lagt seg tett opptil miniatyren under, og det er ikke opplagt hvilken av
   dem den hører til.
   --------------------------------------------------------------------------- */

.videoer__liste {
  display: grid;
  gap: var(--rom-12) var(--rom-8);
  margin-top: var(--rom-12);
}

/* Tom liste skal ikke ta plass. Fram til David har sendt lenkene sine står
   div-en igjen uten barn, og luften over den kom i tillegg til luften over
   personvernsetningen — 3rem + 4rem tomrom under «Ingen videoer er lagt ut
   ennå». Gjelder også hvis manifestet feiler.

   :empty er nøye med blanktegn: den treffer bare fordi taggen i video.html
   står uten mellomrom eller linjeskift mellom <div> og </div>. Deles den
   over to linjer, slutter denne regelen å virke. */
.videoer__liste:empty {
  margin-top: 0;
}

@media (min-width: 900px) {
  /* minmax(0, 1fr) og ikke 1fr: uten nullgulvet kan en lang tittel uten
     mellomrom sette minstebredden for kolonnen og sprenge rutenettet. */
  .videoer__liste {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}


/* ---------------------------------------------------------------------------
   3. Videoruta

   Her er 16:9 satt med vilje, og det er ikke i strid med «bildeforholdet er
   hellig» i CLAUDE.md. Den regelen verner Davids fotografier mot beskjæring i
   galleriet. En YouTube-video ER 16:9, og miniatyren er et plakatbilde av
   den — ikke et av bildene hans.

   Ramma holder samme størrelse før og etter at det byttes til iframe.
   Utløseren og iframen fyller den begge, så byttet gir ingen layouthopp.
   --------------------------------------------------------------------------- */

.video__ramme {
  position: relative;
  aspect-ratio: 16 / 9;

  /* Svart bunn: mens miniatyren lastes — og bak en miniatyr som ikke skulle
     dekke hele ruta — leses flaten som en filmrute, ikke som et hull. */
  background-color: var(--blekk);
}

.video__utloser,
.video__ramme iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.video__utloser {
  display: grid;
  place-items: center;
  padding: 0;
  background: none;
}

/* object-fit: cover er riktig nettopp her, og bare her. YouTube garanterer
   bare hqdefault.jpg, som er 4:3 med svarte kanter over og under det ekte
   bildet. Beskjæringen til 16:9 fjerner akkurat de kantene og gir tilbake
   ruta slik den faktisk er. maxresdefault.jpg er 16:9 fra før og røres ikke.
   Se «Videominiatyren» i docs/struktur.md. */
.video__miniatyr {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}


/* ---------------------------------------------------------------------------
   4. Play-knappen

   Nettstedets eget formspråk, ikke YouTubes: rett boks, hårfin ramme, ingen
   farge. Den inverterer på hover og fokus, som .om__lenke på forsiden gjør —
   samme bevegelse, motsatt vei, fordi den ligger på et bilde og ikke på papir.
   --------------------------------------------------------------------------- */

.video__spill {
  /* Positioned, og etter miniatyren i DOM, så den maler seg over den uten at
     noen av dem trenger z-index. */
  position: relative;

  display: grid;
  place-items: center;
  width: var(--rom-12);
  height: var(--rom-12);

  border: 1px solid var(--papir);
  color: var(--papir);

  /* Slør bak knappen. Uten det forsvinner den hvite ramma i en lys miniatyr. */
  background-color: rgba(17, 17, 17, 0.55);

  transition: background-color var(--tid-rask) var(--kurve),
              color var(--tid-rask) var(--kurve);
}

/* Trekanten er tegnet med border og ikke med en SVG-fil: den arver
   currentColor, og da er hele inverteringen én fargeendring på boksen.
   margin-left retter opp den optiske skjevheten — en trekant ser ut til å
   ligge for langt til venstre når den er matematisk sentrert. */
.video__spill::before {
  content: '';
  width: 0;
  height: 0;
  margin-left: 0.2em;
  border-top: 0.45em solid transparent;
  border-bottom: 0.45em solid transparent;
  border-left: 0.75em solid currentColor;
}

.video__utloser:hover .video__spill,
.video__utloser:focus-visible .video__spill {
  background-color: var(--papir);
  color: var(--blekk);
}


/* ---------------------------------------------------------------------------
   5. Tittel og beskrivelse

   h2 settes her i brødskriften, ikke i Bodoni som stil.css gir h2 ellers.
   Fem display-overskrifter under hverandre ville ropt, og tittelen på en
   video er merkelapp — nærmere en bildetekst enn en seksjonstittel.
   Verdiene er de samme som h3 har i stil.css.
   --------------------------------------------------------------------------- */

.video__tittel {
  margin-top: var(--rom-4);

  font-family: var(--skrift-brod);
  font-size: var(--skala-ingress);
  font-weight: 500;
  line-height: 1.25;
  letter-spacing: -0.01em;
}

.video__beskrivelse {
  max-width: var(--maks-tekst);
  margin-top: var(--rom-2);
  font-size: var(--skala-liten);
  line-height: 1.5;
}