/* Undervisning page body — 1:1 port of staging /undervisning (outside the video grid,
   which keeps its own vs-undervisning.css). Tokens match the app. */

.vs-uvside {
	--uv-bg: hsl(40 20% 96%);
	--uv-fg: hsl(160 30% 15%);
	--uv-muted: hsl(160 10% 45%);
	--uv-card: hsl(40 20% 98%);
	--uv-border: hsl(35 20% 82%);
	--uv-primary: hsl(160 40% 22%);
	--uv-dark: hsl(160 30% 12%);
	--uv-cream: hsl(40 20% 96%);
	background: var(--uv-bg);
	color: var(--uv-fg);
	font-size: 16px;
	line-height: 1.625;
}
.vs-uvside *, .vs-uvside *::before, .vs-uvside *::after { box-sizing: border-box; }
.vs-uvside h1, .vs-uvside h2, .vs-uvside h3 { font-family: "Domine", Georgia, serif; margin: 0; }
.vs-uvside p { margin: 0; }

/* Hero */
.vs-uvside-hero { position: relative; height: 50vh; display: flex; align-items: center; justify-content: center; overflow: hidden; }
@media (min-width: 768px) { .vs-uvside-hero { height: 60vh; } }
.vs-uvside-hero__bg { position: absolute; inset: 0; background-size: cover; background-position: center; }
.vs-uvside-hero__overlay { position: absolute; inset: 0; background: hsl(160 30% 12% / 0.5); }
.vs-uvside-hero__inner { position: relative; z-index: 10; text-align: center; padding: 0 1.5rem; max-width: 56rem; }
.vs-uvside-hero__title { font-size: 1.875rem; font-weight: 600; line-height: 1.25; color: var(--uv-cream); }
@media (min-width: 768px) { .vs-uvside-hero__title { font-size: 3rem; } }
@media (min-width: 1024px) { .vs-uvside-hero__title { font-size: 3.75rem; } }

/* Intro */
.vs-uvside-intro { max-width: 48rem; margin: 0 auto; padding: 4rem 1.5rem; display: flex; flex-direction: column; gap: 1.25rem; color: var(--uv-muted); font-size: 1rem; line-height: 1.625; }
@media (min-width: 768px) { .vs-uvside-intro { padding: 5rem 1.5rem; font-size: 1.125rem; } }

/* Section headers */
.vs-uvside-sechead { text-align: center; margin-bottom: 3rem; }
.vs-uvside-sechead h2 { font-size: 1.5rem; font-weight: 600; color: var(--uv-fg); margin-bottom: 1.5rem; }
@media (min-width: 768px) { .vs-uvside-sechead h2 { font-size: 2.25rem; } }
.vs-uvside-sechead p { max-width: 48rem; margin: 0 auto; color: var(--uv-muted); font-size: 1.125rem; line-height: 1.625; }
@media (min-width: 768px) { .vs-uvside-sechead p { font-size: 1.25rem; } }

.vs-uvside-videos { max-width: 72rem; margin: 0 auto; padding: 0 1.5rem; }
.vs-uvside-temaer { max-width: 64rem; margin: 0 auto; padding: 0 1.5rem 6rem; }

/* Divider */
.vs-uvside-dividerwrap { max-width: 64rem; margin: 0 auto; padding: 3rem 1.5rem; }
@media (min-width: 768px) { .vs-uvside-dividerwrap { padding: 6rem 1.5rem; } }
.vs-uvside-divider { border-top: 1px solid hsl(35 20% 82% / 0.6); }

/* Category accordion grid */
.vs-uvside-temaer__grid { display: grid; grid-template-columns: 1fr; gap: 2rem; }
@media (min-width: 768px) { .vs-uvside-temaer__grid { grid-template-columns: repeat(2, 1fr); } }

.vs-uvcard { background: var(--uv-card); border: 1px solid var(--uv-border); border-radius: 0.5rem; box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05); overflow: hidden; transition: box-shadow .3s, border-color .3s; }
.vs-uvcard:hover { box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1); border-color: hsl(160 40% 22% / 0.4); }

.vs-uvcard__toggle { width: 100%; padding: 2rem; display: flex; flex-direction: column; align-items: center; text-align: center; background: none; border: 0; cursor: pointer; font: inherit; color: inherit; }
@media (min-width: 768px) { .vs-uvcard__toggle { padding: 2.5rem; } }
.vs-uvcard__icon { width: 4rem; height: 4rem; border-radius: 9999px; background: hsl(160 40% 22% / 0.1); display: flex; align-items: center; justify-content: center; margin-bottom: 1.5rem; color: var(--uv-primary); transition: background-color .2s; }
.vs-uvcard:hover .vs-uvcard__icon { background: hsl(160 40% 22% / 0.2); }
.vs-uvcard__icon svg { width: 2rem; height: 2rem; }
.vs-uvcard__title { font-size: 1.25rem; font-weight: 600; color: var(--uv-fg); margin-bottom: 0.75rem; }
@media (min-width: 768px) { .vs-uvcard__title { font-size: 1.5rem; } }
.vs-uvcard__desc { font-size: 0.875rem; color: var(--uv-muted); line-height: 1.625; }
@media (min-width: 768px) { .vs-uvcard__desc { font-size: 1rem; } }
.vs-uvcard__more { margin-top: 1.5rem; display: inline-flex; align-items: center; gap: 0.25rem; font-size: 0.875rem; font-weight: 500; color: var(--uv-primary); }
.vs-uvcard__chevron svg { width: 1rem; height: 1rem; transition: transform .2s; }
.vs-uvcard__toggle[aria-expanded="true"] .vs-uvcard__chevron svg { transform: rotate(180deg); }
.vs-uvcard__more-hide { display: none; }
.vs-uvcard__toggle[aria-expanded="true"] .vs-uvcard__more-show { display: none; }
.vs-uvcard__toggle[aria-expanded="true"] .vs-uvcard__more-hide { display: inline; }

.vs-uvcard__panel { padding: 1.5rem 1.5rem 2rem; border-top: 1px solid hsl(35 20% 82% / 0.6); }
@media (min-width: 768px) { .vs-uvcard__panel { padding: 1.5rem 2rem 2rem; } }
.vs-uvcard__panel[hidden] { display: none; }
.vs-uvcard__empty { text-align: center; font-size: 0.875rem; color: var(--uv-muted); font-style: italic; padding: 1.5rem 0; }
@media (min-width: 768px) { .vs-uvcard__empty { font-size: 1rem; } }

.vs-uvcard__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 1.25rem; }
.vs-uvcard__item { display: flex; flex-direction: column; gap: 1rem; align-items: flex-start; background: hsl(40 20% 96% / 0.6); border: 1px solid hsl(35 20% 82% / 0.6); border-radius: 0.5rem; padding: 1rem; }
@media (min-width: 640px) { .vs-uvcard__item { flex-direction: row; align-items: center; } }
.vs-uvcard__cover { width: 100%; aspect-ratio: 16 / 9; flex-shrink: 0; border-radius: 0.375rem; background: hsl(35 15% 90%); display: flex; align-items: center; justify-content: center; font-size: 0.75rem; color: var(--uv-muted); }
@media (min-width: 640px) { .vs-uvcard__cover { width: 8rem; } }
.vs-uvcard__itembody { flex: 1; min-width: 0; width: 100%; }
.vs-uvcard__itemtitle { font-size: 0.875rem; font-weight: 500; color: var(--uv-fg); line-height: 1.375; margin-bottom: 0.75rem; text-align: left; }
.vs-uvcard__num { color: var(--uv-muted); margin-right: 0.25rem; }
.vs-uvcard__downloads { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.vs-uvcard__dl { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.5rem 1rem; background: var(--uv-dark); color: var(--uv-cream); font-size: 0.875rem; font-weight: 500; border-radius: 0.375rem; text-decoration: none; transition: background-color .2s; }
.vs-uvcard__dl:hover { background: hsl(160 30% 12% / 0.9); color: var(--uv-cream); }
.vs-uvcard__dl svg { width: 1rem; height: 1rem; }