/* Landingssidene for søk (/pdf-reader-apple-tv/ og de andre, på alle språk) og de korte forsidene
   under /de/, /fr/, /es/, /sv/ og /da/. Bygger på stil.css og forside.css: åpningen, delene med
   tekst og skjermbilde, faktatabellen, spørsmålene og avslutningen er forsidens. Her står bare det
   som er nytt. Sidene har ikke noe JavaScript, så ingenting er skjult før det tones inn. */

.guide .apning { padding-top: clamp(20px, 4vw, 44px); }

.guide .apning h1 {
  max-width: 16em;
  font-size: clamp(38px, 6.4vw, 76px);
}

/* Brødsmulestien over overskriften. */
.smuler { margin: 0 0 clamp(28px, 4vw, 44px); font-size: 14px; }
.smuler ol { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 10px; margin: 0; padding: 0; list-style: none; }
.smuler li { margin: 0; color: var(--dempet); }
.smuler li + li::before { content: "›"; margin-right: 10px; color: var(--dempet); }
.smuler a { color: var(--dempet); }
.smuler a:hover, .smuler a:focus-visible { color: var(--tekst); }

/* Linjen som sier hvilke språk appen selv er på (sidene på tysk, fransk, spansk, svensk og dansk). */
.appsprak {
  display: inline-block;
  margin: 18px auto 0;
  padding: 8px 16px;
  border: 1px solid var(--strek);
  border-radius: 999px;
  background: var(--flate);
  color: var(--tekst);
  font-size: 15px;
  line-height: 1.4;
}

/* Det store skjermbildet under åpningen. */
.helt { margin: clamp(40px, 6vw, 72px) auto 0; max-width: 1040px; }

.helt img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  border-radius: 14px;
  background: var(--flate);
  box-shadow: 0 0 0 1px var(--strek), 0 40px 80px -40px rgba(0, 0, 0, 0.85);
}

/* Tekstdeler uten bilde, og avsnitt i hodet på en del. */
.guide .rolig > .hode p { margin: 0 0 14px; }
.guide .rolig > .hode p:last-child { margin-bottom: 0; }
.guide .tekstdel > .hode { max-width: 44em; }

/* Nummererte steg i en veiledning. */
.trinn { margin: 18px 0; padding: 0; list-style: none; counter-reset: trinn; }

.trinn li {
  position: relative;
  margin: 0;
  padding: 12px 0 12px 46px;
  border-top: 1px solid var(--strek);
  color: var(--tekst);
  font-size: 17px;
  line-height: 1.5;
  counter-increment: trinn;
}

.trinn li:last-child { border-bottom: 1px solid var(--strek); }

.trinn li::before {
  content: counter(trinn);
  position: absolute;
  left: 0;
  top: 11px;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--flate-hoy);
  color: var(--lakk);
  font-size: 15px;
  font-weight: 600;
  line-height: 30px;
  text-align: center;
}

/* De tre stegene i «Slik kommer filene inn». */
.steg {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin: 32px 0 0;
  padding: 0;
  list-style: none;
  counter-reset: steg;
}

.steg li {
  margin: 0;
  padding: 22px;
  border-radius: 16px;
  background: var(--flate);
  font-size: 16px;
  line-height: 1.5;
  counter-increment: steg;
}

.steg li::before {
  content: counter(steg);
  display: block;
  margin-bottom: 12px;
  color: var(--lakk);
  font: 700 38px/1 "Bodoni Moda", "Bodoni 72", Didot, Georgia, serif;
}

.steg strong { display: block; margin-bottom: 4px; font-size: 19px; line-height: 1.3; }

@media (max-width: 820px) { .steg { grid-template-columns: minmax(0, 1fr); } }

.guide .kilderad { margin-top: 28px; }
.merknad { max-width: 44em; margin: 22px 0 0; font-size: 16px; }

/* To kort ved siden av hverandre: når AirPlay holder, og når Blad passer bedre. */
.sammenlign { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-top: 32px; }
.sammenlign > div { padding: 24px; border-radius: 16px; background: var(--flate); }
.sammenlign > div + div { border: 1px solid rgba(230, 207, 159, 0.35); }
.sammenlign h3 { margin: 0 0 12px; color: var(--tekst); font-size: 20px; line-height: 1.3; }
.sammenlign ul { margin: 0; padding-left: 1.2em; }
.sammenlign li { font-size: 17px; line-height: 1.5; }

@media (max-width: 700px) { .sammenlign { grid-template-columns: minmax(0, 1fr); } }

/* Språkvelgeren i toppen: en liste som åpnes uten JavaScript. Hver lenke går til den samme siden på det språket. */
.sprakvalg { position: relative; font-size: 15px; line-height: 1.4; }

.sprakvalg summary {
  padding: 7px 14px;
  border: 1px solid var(--strek);
  border-radius: 999px;
  background: var(--flate);
  color: var(--tekst);
  cursor: pointer;
  list-style: none;
}

.sprakvalg summary::-webkit-details-marker { display: none; }
.sprakvalg summary::after { content: "▾"; margin-left: 8px; color: var(--dempet); }
.sprakvalg summary:focus-visible { outline: 2px solid var(--lakk); outline-offset: 3px; }

.sprakvalg ul {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  z-index: 5;
  min-width: 11em;
  margin: 0;
  padding: 6px;
  border: 1px solid var(--strek);
  border-radius: 14px;
  background: var(--flate-hoy);
  box-shadow: 0 20px 40px -20px #000;
  list-style: none;
}

.sprakvalg li { margin: 0; }
.sprakvalg a { display: block; padding: 8px 12px; border-radius: 8px; color: var(--dempet); text-decoration: none; }
.sprakvalg a:hover, .sprakvalg a:focus-visible { color: var(--tekst); }
.sprakvalg a[aria-current] { background: var(--flate); color: var(--tekst); }

/* «Blad på jobben»: ett kort per bruksted, med det man bør vite nederst i kortet. */
.scener { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-top: 32px; }
.scener article { display: flex; flex-direction: column; padding: 24px; border-radius: 16px; background: var(--flate); }
.scener h3 { margin: 0 0 10px; color: var(--tekst); font-size: 20px; line-height: 1.3; }
.scener p { margin: 0 0 16px; font-size: 17px; line-height: 1.5; }
.scener .vit { margin: auto 0 0; padding-top: 14px; border-top: 1px solid var(--strek); color: var(--dempet); font-size: 15px; }
.scener .vit strong { color: var(--lakk); font-weight: 600; }

.scener article:last-child:nth-child(odd) { grid-column: 1 / -1; }

@media (max-width: 760px) { .scener { grid-template-columns: minmax(0, 1fr); } }

/* Faktatabellen når den følger rett etter kildekortene og skjermbildet. */
.guide .helt + .fakta { margin-top: clamp(40px, 6vw, 72px); }

/* «Det Blad ikke er»: en liste med streker mellom punktene. */
.punkter { max-width: 44em; margin: 28px 0 0; padding: 0; list-style: none; }
.punkter li { margin: 0; padding: 14px 0; border-top: 1px solid var(--strek); color: var(--dempet); font-size: 17px; line-height: 1.5; }
.punkter li:last-child { border-bottom: 1px solid var(--strek); }
.punkter strong { color: var(--tekst); font-weight: 600; }