/* lindbom.dev — familjens startsida och skolans index.
   GUPPIs stilspråk (Klinisk Studio): alltid ljust, terrakotta, Plus Jakarta Sans,
   platta kort med hårfina kanter. Samma tokens som Hem. Inga externa beroenden. */

@font-face { font-family: "Plus Jakarta Sans"; font-style: normal; font-weight: 400; font-display: swap; src: url("/typsnitt/plus-jakarta-sans-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Plus Jakarta Sans"; font-style: normal; font-weight: 500; font-display: swap; src: url("/typsnitt/plus-jakarta-sans-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "Plus Jakarta Sans"; font-style: normal; font-weight: 600; font-display: swap; src: url("/typsnitt/plus-jakarta-sans-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Plus Jakarta Sans"; font-style: normal; font-weight: 700; font-display: swap; src: url("/typsnitt/plus-jakarta-sans-latin-700-normal.woff2") format("woff2"); }

:root {
  color-scheme: light;
  --bg: #F5F2EB;
  --surface: #FCFBF9;
  --surface-2: #EAE5DC;
  --ink: #1C1917;
  --ink-2: #47413B;
  --muted: #655D54;
  --line: #DDD7CC;
  --line-strong: #8A8175;
  --accent: #B44625;
  --accent-soft: #F7E7E2;
  --good: #226B48;
  --good-soft: #E3F1EA;
  --radius: 8px;
  --sans: "Plus Jakarta Sans", system-ui, -apple-system, sans-serif;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

body {
  min-height: 100dvh;
  background: var(--bg);
  color: var(--ink);
  font: 400 15px/1.5 var(--sans);
  -webkit-font-smoothing: antialiased;
  display: grid;
  place-items: center;
}

::selection { background: var(--accent-soft); color: var(--ink); }
a { color: var(--accent); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; }

/* ---------- startsidan ---------- */

.omslag {
  width: 100%;
  max-width: 44rem;
  padding: 3rem 16px 2.5rem;
}

.huvud { margin-bottom: 1.5rem; }

.ogonbryn {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--muted);
}

h1 {
  margin-top: .3rem;
  font-size: clamp(1.6rem, 5vw, 2rem);
  font-weight: 700;
  letter-spacing: -.02em;
  line-height: 1.15;
}

.val {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}

.kort {
  display: grid;
  grid-template-rows: auto 1fr auto;
  min-height: 9rem;
  padding: 16px;
  color: inherit;
  text-decoration: none;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  transition: border-color .12s ease, background-color .12s ease;
}
.kort:hover { border-color: var(--line-strong); background: var(--surface-2); }

.ikon {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 6px;
  border: 1px solid var(--line);
  background: var(--surface-2);
  color: var(--accent);
}

.namn {
  margin-top: 12px;
  font-size: 1.2rem;
  font-weight: 600;
  letter-spacing: -.01em;
  line-height: 1.25;
}

.fotrad {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 12px;
}

.bricka {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 2px 8px;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: 12px;
  font-weight: 500;
  color: var(--ink-2);
  background: var(--surface);
}
.bricka svg { flex: none; }
.bricka.öppen { color: var(--good); background: var(--good-soft); border-color: transparent; }

.pil {
  font-size: 1.1rem;
  color: var(--accent);
  transition: transform .12s ease;
}
.kort:hover .pil { transform: translateX(3px); }

/* Telefon: korten staplas, så de behöver inte vara höga. */
@media (max-width: 40rem) {
  .omslag { padding-top: 2rem; }
  .kort { min-height: 0; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: 12px; align-items: center; }
  .ikon { grid-row: 1 / span 2; }
  .namn { margin-top: 0; }
  .fotrad { margin-top: 2px; }
  .val { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .kort, .pil, .provlista a { transition: none; }
  .kort:hover .pil { transform: none; }
}

/* ---------- skolan ---------- */

.omslag.smal { max-width: 40rem; }

.tillbaka {
  display: inline-block;
  margin-bottom: 1.25rem;
  font-size: 13px;
  color: var(--muted);
  text-decoration: none;
}
.tillbaka:hover { color: var(--ink); }

.ingress { margin-top: .4rem; color: var(--ink-2); }

.arskurs { margin-top: 1.75rem; }

.arskurs h2 {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
  font-size: 1.05rem;
  font-weight: 600;
}

.ak-bricka {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 700;
  color: #fff;
  background: var(--accent);
}

.provlista { list-style: none; display: grid; gap: 8px; }

.provlista a {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  color: inherit;
  text-decoration: none;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  transition: border-color .12s ease, background-color .12s ease;
}
.provlista a:hover { border-color: var(--line-strong); background: var(--surface-2); }

.emoji { font-size: 1.4rem; line-height: 1; }

.provtext { display: grid; min-width: 0; }
.provnamn { font-weight: 600; line-height: 1.3; }
.provamne { font-size: 13px; color: var(--muted); }

.provdatum {
  font-size: 12px;
  color: var(--muted);
  white-space: nowrap;
}