@import url("assets/css/design.css");

*, *::before, *::after { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:var(--ferie-background); color:var(--ferie-text); font:var(--ferie-body-size)/var(--ferie-line-height) var(--ferie-font); }
a { color:var(--ferie-accent); }
a:focus-visible, input:focus-visible, select:focus-visible { outline:2px solid var(--ferie-accent); outline-offset:3px; }
.wrap { max-width:var(--ferie-content-width); margin:auto; padding:0 18px; }
.eyebrow { font:13px/1.5 var(--ferie-ui-font); margin:0 0 8px; }
.intro { max-width:680px; margin:8px auto 0; }
.jump { display:inline-flex; margin-top:var(--ferie-button-gap); padding:var(--ferie-button-padding); border:1px solid var(--ferie-button-border); border-radius:var(--ferie-button-radius); background:var(--ferie-surface); color:var(--ferie-accent); font:13px/1.5 var(--ferie-ui-font); text-decoration:none; }
.jump:hover { background:var(--ferie-accent); color:white; }
main.wrap { padding-top:30px; padding-bottom:30px; }
.sectionhead { display:flex; justify-content:space-between; align-items:end; gap:24px; }
.sectionhead h2, .resources h2 { font-size:22px; font-weight:400; line-height:1.5; margin:0; }
.filters { display:flex; flex-wrap:wrap; gap:16px; margin:24px 0 26px; }
.filters label { display:flex; flex:1 1 160px; min-width:0; flex-direction:column; gap:6px; color:var(--ferie-muted); font:14px/1.5 var(--ferie-ui-font); }
.filters input, .filters select { width:100%; min-width:0; padding:11px 12px; border:1px solid var(--ferie-button-border); border-radius:9px; background:var(--ferie-surface); color:var(--ferie-text); font:16px/1.5 var(--ferie-ui-font); }
.cards { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; }
.card { display:block; min-width:0; overflow:hidden; border:1px solid var(--ferie-border); border-radius:var(--ferie-radius); background:var(--ferie-surface); color:var(--ferie-text); text-decoration:none; box-shadow:var(--ferie-shadow); transition:transform .2s; }
.card[href]:hover { transform:translateY(-3px); }
.visual { height:190px; display:grid; place-items:center; background:#e9eee9; color:var(--ferie-muted); font:italic 24px var(--ferie-font); }
.visual img { display:block; width:100%; height:100%; object-fit:cover; }
.cardbody { padding:20px; overflow-wrap:anywhere; }
.meta, .status { color:var(--ferie-muted); font:13px/1.5 var(--ferie-ui-font); }
.card h3 { font-size:22px; line-height:1.4; font-weight:400; margin:8px 0 12px; }
.status { color:var(--ferie-accent); }
.card:not([href]) { opacity:.7; }
.resources { margin-top:55px; }
.links { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; margin-top:22px; }
.links a { display:block; padding:18px 20px; border:1px solid var(--ferie-border); border-radius:var(--ferie-radius); background:var(--ferie-surface); box-shadow:var(--ferie-shadow); font:14px/1.5 var(--ferie-ui-font); text-decoration:none; overflow-wrap:anywhere; }
.links a:hover { text-decoration:underline; text-underline-offset:3px; }
footer { padding:40px 18px; text-align:center; color:var(--ferie-muted); font:14px/1.5 var(--ferie-ui-font); }
@media(max-width:800px) { .cards { grid-template-columns:repeat(2,minmax(0,1fr)); } .sectionhead { display:block; } }
@media(max-width:600px) { .sectionhead h2, .resources h2, .card h3 { font-size:20px; } }
@media(max-width:560px) { .cards, .links { grid-template-columns:1fr; } .filters label { flex-basis:100%; } }
@media(prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } .card { transition:none; } }