/* ==========================================================================
   MEDIA BUYING (23. oktober 2026)

   Bare det som er Media buyings eget: hodet, Oversikt og de to rolige
   sidene (Google, og Snapchat før den er koblet til). Kortene,
   nøkkelrekkene, korthodet og periodevalget er Lodds egne, og #skjerm-media
   står i :is()-listene i lodd.css ved siden av Hjem og Lager, slik at de
   samme delene ser like ut overalt.

   Annonsetabellen har sin egen fil, meta.css: den er den samme tabellen for
   Meta og Snapchat.

   Alt her står under #skjerm-media, så ingen av navnene blir en ny
   toppnivåklasse i Lodd (taket i sjekk-tak.mjs). Hver verdi er et token.
   ========================================================================== */

:root {
  /* Bredden på et avsnitt man skal lese, ikke skanne. Samme tanke som
     --setning-bredde i Lodd, men i tegn: teksten her er brødtekst. */
  --md-tekst: 62ch;
}

#skjerm-media .md-side { display: flex; flex-direction: column; }
#skjerm-media .md-side > .etikett { margin: 0 0 var(--s-2); }
#skjerm-media .md-side > .ingress { margin: 0 0 var(--s-5); }

/* Kanalkortene står ved siden av hverandre, men Samlet tar hele raden: det
   er linja man leser først, og den skal ikke klemmes ned i en halv bredde. */
#skjerm-media .md-samlet { grid-column: 1 / -1; }

#skjerm-media .md-forklaring {
  margin: var(--s-4) 0 0;
  padding: var(--s-4);
  border-radius: var(--r-2);
  background: var(--flate-2);
  font-size: var(--t-2);
  line-height: var(--t-2-h);
  color: var(--ink-3);
}

#skjerm-media .md-kanal .nokkelrekke { margin-top: var(--s-2); }

/* Det som mangler, som en rolig liste og ikke som en advarsel: ingenting av
   det er en feil, det er ting som ikke er koblet ennå. */
#skjerm-media .md-merknader {
  margin: 0;
  padding: 0 0 0 var(--s-5);
  font-size: var(--t-3);
  line-height: var(--t-3-h);
  color: var(--ink-3);
}
#skjerm-media .md-merknader li + li { margin-top: var(--s-2); }

/* Siden som sier at Snapchat ikke er koblet til, er én setning og én
   knapp. Den skal ikke strekke seg over 1920: en setning som er to meter
   bred, leses ikke. */
#skjerm-media .md-kobl { max-width: calc(var(--md-tekst) + var(--s-8)); }

#skjerm-media .md-google {
  margin: 0;
  max-width: var(--md-tekst);
  font-size: var(--t-3);
  line-height: var(--t-3-h);
  color: var(--ink-2);
}
#skjerm-media .md-knapperad { margin: var(--s-5) 0 0; }

#skjerm-media .md-laster {
  padding: var(--s-7) var(--s-5);
  font-size: var(--t-3);
  color: var(--ink-3);
  text-align: center;
}

/* Én spalte når spalten blir smal, som Lager. Kortene er like høye i en rad
   og rolige fra 375 til 1920 (Lodd, jevne kort). */
@media (max-width: 899px) {
  #skjerm-media .rutenett { grid-template-columns: minmax(0, 1fr); gap: var(--s-4); margin-bottom: var(--s-4); }
}