/* naturfag-udvalgte.css — "Udvalgte 3D-modeller" øverst på Start (2026-09-30).
   Gør de interaktive 3D-modeller synlige med det samme, i stedet for at de ligger langt nede
   eller bag en søgning. Kortene åbner modellen via PP_NATURFAG_NAV.aabn(id). */

.nf-udvalgte { margin: 4px 0 26px; }
.nf-udvalgte__hoved { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 6px 20px; margin-bottom: 12px; }
.nf-udvalgte__hoved h2 { margin: 2px 0 0; font-size: clamp(1.25rem, 2.4vw, 1.6rem); letter-spacing: -.02em; }
.nf-udvalgte__hoved p { margin: 0; max-width: 460px; color: #4a5c74; font-size: .92rem; line-height: 1.5; }
.nf-udvalgte__gitter { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.nf-udvalgt {
  position: relative; display: grid; grid-template-rows: auto 1fr; overflow: hidden; text-align: left; cursor: pointer;
  border: 1px solid rgba(123, 228, 238, .18); border-radius: 20px; padding: 0; font: inherit; color: #fff;
  background: radial-gradient(420px 200px at 90% -10%, color-mix(in srgb, var(--m, #12c4a8) 55%, transparent), transparent 60%), linear-gradient(150deg, #0d2038, #16335a);
  box-shadow: 0 18px 38px -26px rgba(13, 32, 56, .9); transition: transform .25s cubic-bezier(.22, .8, .24, 1), box-shadow .25s, border-color .25s;
}
.nf-udvalgt:hover { transform: translateY(-4px); border-color: color-mix(in srgb, var(--m, #12c4a8) 70%, #fff); box-shadow: 0 26px 46px -26px rgba(13, 32, 56, .95); }
.nf-udvalgt:focus-visible { outline: 3px solid #7be4ee; outline-offset: 3px; }
.nf-udvalgt__fig { display: block; height: 118px; }
.nf-udvalgt__fig svg { display: block; width: 100%; height: 100%; }
.nf-udvalgt__tekst { display: flex; flex-direction: column; gap: 4px; padding: 10px 16px 16px; }
.nf-udvalgt__tag { font-size: .66rem; font-weight: 850; letter-spacing: .09em; text-transform: uppercase; color: color-mix(in srgb, var(--m, #12c4a8) 55%, #fff); }
.nf-udvalgt strong { font-size: 1.05rem; letter-spacing: -.01em; }
.nf-udvalgt__kort { font-size: .84rem; line-height: 1.45; color: #cfdcec; }
.nf-udvalgt__cta { margin-top: auto; padding-top: 8px; font-size: .8rem; font-weight: 850; color: #7be4ee; }
.nf-udvalgt .nf-ny { position: absolute; top: 10px; right: 10px; padding: 3px 9px; border-radius: 999px; background: #7be4ee; color: #06202a; font-size: .64rem; font-weight: 900; letter-spacing: .06em; text-transform: uppercase; }

/* Emnefanerne: altid én række – ruller vandret i stedet for at bryde over to linjer */
@media (max-width: 1180px) {
  .journey-nav { flex-wrap: nowrap !important; justify-content: flex-start !important; overflow-x: auto; scrollbar-width: thin; }
  .journey-nav button { flex: none; }
}
@media (max-width: 860px) { .nf-udvalgte__gitter { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) {
  .nf-udvalgte__gitter { grid-template-columns: 1fr; }
  .nf-udvalgt__fig { height: 104px; }
  .nf-udvalgt__tekst { padding: 8px 14px 14px; }
  .nf-udvalgt__kort { font-size: .82rem; }
}
@media (prefers-reduced-motion: reduce) { .nf-udvalgt { transition: none; } .nf-udvalgt:hover { transform: none; } }

/* FAQ "Naturfag SOSU – kort fortalt": læsbar i mørk tilstand. Panelet omkring er lyst i begge
   tilstande, så boksene holdes lyse med mørk tekst (før: mørk boks med mørk tekst). */
.nf-faq details p { color: #2a3a52; }
@media (prefers-color-scheme: dark) {
  .nf-faq details { background: #fff !important; border-color: #d5e2ee !important; }
  .nf-faq summary { color: #17243b; }
  .nf-faq details p { color: #2a3a52; }
}