/* ==========================================================================
   ENHEDEN — skærme i cases, tegnet frem for fotograferet

   Hvert medie er ÉN skærm, beskåret til selve websiden: ingen adresselinje,
   ingen statuslinje, ingen systembjælke. Kabinettet er streger herfra, og
   det henter sine farver fra motoren — så enheden følger døgn og årstid
   ligesom alt andet på siden.

   Tre blokke i Gutenberg:
     Gruppe            .rw-enhed
       Gruppe          .rw-enhed__ramme
         Video/Billede .rw-enhed__skaerm
   ========================================================================== */

.rw-enhed{
  --rw-e-streg:2px;    /* kabinettets stregtykkelse */
  --rw-e-luft:15px;    /* kabinettets bredde */
  --rw-e-hj:40px;      /* ydre hjørne */
  --rw-e-ind:calc(var(--rw-e-hj) - var(--rw-e-luft));
  margin:0; max-width:300px;
}

.rw-enhed__ramme{
  position:relative;
  border:var(--rw-e-streg) solid var(--rw-ink, currentColor);
  border-radius:var(--rw-e-hj);
  padding:calc(var(--rw-e-luft)*1.9) var(--rw-e-luft);
  transition:border-color .45s ease;
}

/* Gutenberg hænger klassen på <figure>, ikke på <video>. Styler man figuren,
   sker der ingenting man kan se — det er den samme fælde som border-radius
   på en video. Derfor står begge dele i selektoren. */
/* Blokken lægger en helt almindelig Video- eller Billed-blok ind i
   kabinettet, og den har sin egen figure med sin egen klasse. Derfor
   rammer vi på PLADSEN — alt medie inde i kabinettet — og ikke på en
   klasse nogen skal huske at sætte. rw-enhed__skaerm bliver stående for
   markup der er skrevet i hånden. */
.rw-enhed__ramme figure{ margin:0 }
.rw-enhed__skaerm{ margin:0 }
.rw-enhed__ramme video, .rw-enhed__ramme img,
.rw-enhed__skaerm video, .rw-enhed__skaerm img,
video.rw-enhed__skaerm, img.rw-enhed__skaerm{
  display:block; width:100%; height:auto;
  /* FORHOLDET ER IKKE FAST. Chromes værktøjslinje kaster sin skygge ni
     pixels nede i siden; Safaris gør ikke. Snittet falder derfor to
     forskellige steder, og ingen af optagelserne er samme højde. Rammen
     retter sig efter skærmen — alternativet er at skære i indholdet for
     at ramme et rundt tal. Sæt --rw-forhold på .rw-enhed. */
  aspect-ratio:var(--rw-forhold, 668/1212);
  /* clip-path, ikke border-radius: en video tegnes i sit eget lag, og
     runde hjørner på elementet klipper ikke altid selve indholdet. */
  clip-path:inset(0 round var(--rw-e-ind));
  background:var(--rw-soft, transparent);
}

/* Højttaler og home-streg: ét stryg hver. Ikke en notch, ikke en knap. */
.rw-enhed__ramme::before,
.rw-enhed__ramme::after{
  content:""; position:absolute; left:50%; translate:-50% 0;
  background:var(--rw-ink, currentColor);
  height:var(--rw-e-streg); border-radius:99px;
  transition:background-color .45s ease;
}
.rw-enhed__ramme::before{ top:calc(var(--rw-e-luft)*.85); width:20% }
.rw-enhed__ramme::after{ bottom:calc(var(--rw-e-luft)*.85); width:34% }

/* --------------------------------------------------------------------------
   DESKTOP — samme greb, andre tal
   Ingen højttaler, ingen home-streg. Tre prikker i stedet: nok til at sige
   "browser" uden at påstå en adresse der ikke står der.
   -------------------------------------------------------------------------- */
.rw-enhed--desktop{
  --rw-e-luft:12px; --rw-e-hj:14px;
  --rw-forhold:2756/1568;
  /* Et browservindue er bredt, men ikke uendeligt: uden loftet løber det
     ud over tekstspalten og gør casen bredere end den skal være. */
  max-width:min(100%, 1100px);
}
.rw-enhed--desktop .rw-enhed__ramme{
  padding:calc(var(--rw-e-luft)*2.4) var(--rw-e-luft) var(--rw-e-luft);
}
.rw-enhed--desktop .rw-enhed__ramme::before{
  /* tre prikker, tegnet med én kasse og to skygger */
  left:calc(var(--rw-e-luft)*1.4); translate:0 0;
  top:calc(var(--rw-e-luft)*1.15);
  width:6px; height:6px; border-radius:99px;
  box-shadow:11px 0 0 0 var(--rw-ink, currentColor),
             22px 0 0 0 var(--rw-ink, currentColor);
  opacity:.55;
}
.rw-enhed--desktop .rw-enhed__ramme::after{ content:none }

/* --------------------------------------------------------------------------
   LANGE SKÆRMBILLEDER — en hel side i ét billede
   Rulning INDE i rammen, men kun hvor der er en markør. Et rullefelt inde i
   et rullefelt er en klassisk mobilfælde: starter fingeren inde i billedet,
   kan man ikke rulle siden, og man sidder fast. På telefon får man i stedet
   billedet i spaltens bredde og ruller siden — man er jo allerede i en
   telefonbred kolonne, så det ER den naturlige form.
   -------------------------------------------------------------------------- */
.rw-enhed--lang .rw-enhed__ramme figure,
.rw-enhed--lang .rw-enhed__skaerm{
  clip-path:inset(0 round var(--rw-e-ind));
  overflow:hidden;
}
.rw-enhed--lang .rw-enhed__ramme img,
.rw-enhed--lang .rw-enhed__skaerm img{
  aspect-ratio:auto; clip-path:none;
}

@media (hover:hover) and (pointer:fine){
  .rw-enhed--lang .rw-enhed__ramme figure,
  .rw-enhed--lang .rw-enhed__skaerm{
    max-height:var(--rw-e-loft, 560px);
    overflow-y:auto; overscroll-behavior:contain;
    scrollbar-width:thin;
    scrollbar-color:var(--rw-mute, currentColor) transparent;
  }
  /* En hårfin skygge i bunden siger "der er mere" uden at tegne en kant. */
  .rw-enhed--lang .rw-enhed__ramme{ isolation:isolate }
  .rw-enhed--lang .rw-enhed__ramme > .rw-enhed__skaerm::after{ content:none }
}
@media not all and (hover:hover){
  .rw-enhed--lang{ max-width:100% }
  .rw-enhed--lang .rw-enhed__ramme{
    border:0; padding:0; border-radius:0;
  }
  .rw-enhed--lang .rw-enhed__ramme::before,
  .rw-enhed--lang .rw-enhed__ramme::after{ content:none }
  .rw-enhed--lang .rw-enhed__ramme figure,
  .rw-enhed--lang .rw-enhed__skaerm{ clip-path:inset(0 round 10px) }
}

/* --------------------------------------------------------------------------
   FLOW — flere skærme i rækkefølge
   Ikke ét bredt billede: fem telefoner klemt ned i 375 px kan ingen læse.
   -------------------------------------------------------------------------- */
.rw-flow{
  display:flex; gap:18px; margin:0; padding-block:2px 14px;
  overflow-x:auto; overscroll-behavior-x:contain;
  scroll-snap-type:x proximity;
  scrollbar-width:thin; scrollbar-color:var(--rw-rule, currentColor) transparent;
}
.rw-flow > .rw-enhed{
  flex:0 0 auto; width:min(216px,58vw); max-width:none;
  scroll-snap-align:start;
  --rw-e-luft:11px; --rw-e-hj:30px;
}

/* --------------------------------------------------------------------------
   STYRINGEN — pause, og hvad skærmen viser
   WCAG 2.2.2: noget der bevæger sig af sig selv i mere end fem sekunder
   skal kunne standses. Knappen bygges af enhed.js og bor UDEN FOR skærmen,
   sammen med billedteksten — et halvgennemsigtigt lag oven på produktet
   ville skjule præcis det man er kommet for at se.
   -------------------------------------------------------------------------- */
.rw-enhed__styr{
  display:flex; align-items:baseline; gap:14px; flex-wrap:wrap;
  margin-top:12px;
}
.rw-enhed__pause{
  font:inherit; font-family:var(--rw-mono,ui-monospace,SFMono-Regular,Menlo,monospace);
  font-size:.68rem; letter-spacing:.1em; text-transform:uppercase;
  color:var(--rw-mute, currentColor);
  background:none; border:0; border-bottom:1px solid currentColor;
  padding:0 0 1px; cursor:pointer;
}
.rw-enhed__pause:hover{ color:var(--rw-ink, currentColor) }
.rw-enhed__pause:focus-visible{
  outline:2px solid var(--rw-accent, currentColor); outline-offset:3px;
  border-bottom-color:transparent;
}

@media (prefers-reduced-motion:reduce){
  .rw-enhed__ramme{ transition:none }
  .rw-enhed__ramme::before,.rw-enhed__ramme::after{ transition:none }
}