/* oppgaver.css - Informasjonsside for oppgaver (light theme)
   Struktur:
   1) Layout og grunnstil
   2) Typografi
   3) Komponenter (kort, callouts)
   4) Lenker og kilder
   5) Responsivt
*/

/* 1) Layout og grunnstil */
* { box-sizing: border-box }
body { margin: 0 }
.wrap { max-width: 980px; margin: 18px auto; padding: 0 16px }
.section { margin: 20px 0 }
header.section .header-actions { margin-top: 18px }

/* 2) Typografi */
h1 { font-size: clamp(24px, 4vw, 32px); font-weight: 500; margin: 10px 0 8px }
h2 { font-size: 20px; font-weight: 600; margin: 18px 0 10px }
p { margin: 8px 0 }
ul { margin: 8px 0 8px 20px }
.small { font-size: 13px; color: var(--muted, #475569) }
.muted { color: var(--muted, #475569) }

/* 3) Komponenter */
.card {
  background: #ffffff;
  border: 1px solid var(--border, #e5e7eb);
  border-radius: 14px;
  padding: 14px 16px;
  box-shadow: 0 1px 2px rgba(0,0,0,.03);
  margin-bottom: 16px;
  display: flow-root; /* contain floats (video on the right) so card height expands */
}
.callout {
  border-left: 4px solid #3b82f6;
  background: #f8fbff;
}
.cta {
  display: inline-block;
  background: #111827; color: #ffffff;
  border-radius: 999px; padding: 10px 14px;
  text-decoration: none; font-weight: 600;
}
.cta:hover { filter: brightness(0.95) }

/* Blue button variant for prominent CTAs (matches kalkulator.css) */
.btn.cta {
  display: inline-flex; align-items: center; gap: 8px;
  background: #2563eb; /* solid blue-600 */
  color: #fff;
  border: 1px solid #1e40af; /* blue-800 */
  border-radius: 12px;
  padding: 12px 16px;
  font-weight: 700;
  font-size: 16px;
  letter-spacing: .2px;
  text-decoration: none;
  box-shadow: 0 6px 14px rgba(37,99,235,.25);
  transition: transform .12s ease, box-shadow .12s ease, filter .12s ease, background-color .12s ease;
}
.btn.cta:hover { background: #1d4ed8; box-shadow: 0 8px 18px rgba(37,99,235,.3); transform: translateY(-1px) }
.btn.cta:active { transform: translateY(0); filter: brightness(0.96) }
.btn.cta:focus { outline: none; box-shadow: 0 0 0 3px rgba(59,130,246,.35), 0 6px 14px rgba(37,99,235,.25) }

/* Right-aligned media (video) inside cards */
.media-right {
  float: right;
  margin: 0 0 10px 14px; /* space to the left so text wraps nicely */
  max-width: min(36%, 320px); /* a bit smaller to balance layout */
}
.media-right video {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0,0,0,.08);
}

/* Gentle color pass on cards to reduce sterile look */
.wrap > .section.card:nth-of-type(1) { background: #FFF1F2; border-color: #FDA4AF } /* Rose-50/300 */
.wrap > .section.card:nth-of-type(2) { background: #F0FDF4; border-color: #A7F3D0 } /* Green-50/200 */
.wrap > .section.card:nth-of-type(3) { background: #FEF2F2; border-color: #FCA5A5 } /* Rose-50/300 */
.wrap > .section.card:nth-of-type(4) { background: #EFF6FF; border-color: #93C5FD } /* Blue-50/300 (video) */
.wrap > .section.card:nth-of-type(5) { background: #FAF5FF; border-color: #D8B4FE } /* Violet-50/300 */
.wrap > .section.card:nth-of-type(6) { background: #F8FBFF } /* keep callout light */
.wrap > .section.card:nth-of-type(7) { background: #F5F5F4; border-color: #E7E5E4 } /* Stone-100 */

/* Specific styling for the video card */
.video-card { background: #EFF6FF; border-color: #93C5FD; padding: 20px 20px; min-height: 360px }
.video-card h2 { color: #0F172A }
.video-card .media-right { max-width: min(45%, 420px) }

/* 4) Lenker og kilder */
a { color: #0f172a; text-decoration: underline; text-underline-offset: 2px }
a:hover { opacity: .9 }
.sources li { margin: 6px 0 }
.kilde { font-size: 13px; color: var(--muted, #475569) }

/* 5) Responsivt */
@media (max-width: 640px) {
  .wrap { padding: 0 12px }
  h2 { font-size: 18px }
  .media-right { float: none; margin: 8px 0; max-width: 100% }
  .video-card { min-height: auto; padding: 16px }
}