/* Formprov D: Kunskapsstödet, omgång 6. Bara det som är unikt för sidan; allt gemensamt ligger i ../gemensam.css.
   En morgonsida: heron är skrivbordet i morgonljus, resten av sidan står i morgonens ton med ett band i
   morgon-2 för kunskapsfönstret. Två textstorlekar per avsnitt. */

/* Heron. Den lugnaste ytan är den mörka väggen överst, ovanför pärmarna (som börjar vid en tredjedel av höjden),
   och skåpet längst ned. Rubriken står överst, meningen och knapparna nere till vänster. Bilden förankras en
   aning uppåt, så att väggen får så mycket plats som möjligt. */
.kunskap-hero {
  --fokus-x: .5; --fokus-y: .45;
  --ljus-x: 26%; --ljus-y: 48%; --ljus-b: 62%; --ljus-h: 80%; --ljus-farg: rgba(255, 190, 110, .32); --ljus-styrka: .55;
}
/* Toningen ligger bakom rubriken uppe till vänster (väggen har solstrimmor där) och bakom meningen och
   knapparna nere till vänster. Fönstret, växten och persiennerna till höger får ha kvar sitt ljus. */
.kunskap-hero::before {
  background:
    radial-gradient(ellipse 60% 48% at 28% 18%, rgba(6, 14, 22, .64), rgba(6, 14, 22, .46) 55%, rgba(6, 14, 22, 0) 100%),
    linear-gradient(rgba(6, 14, 22, .6), rgba(6, 14, 22, .3) 22%, rgba(6, 14, 22, 0) 40%),
    radial-gradient(ellipse 54% 44% at 18% 100%, rgba(6, 14, 22, .82), rgba(6, 14, 22, .62) 50%, rgba(6, 14, 22, 0) 100%),
    linear-gradient(to top, rgba(6, 14, 22, .5), rgba(6, 14, 22, 0) 26%);
}
.kunskap-hero .hero-ingress { margin-top: auto; }
.kunskap-hero .hero-ingress strong { font-weight: 600; }
@media (min-width: 761px) {
  .kunskap-hero h1 { font-size: clamp(3rem, min(6.2vw, 7.6vh), 7rem); }
}
/* Det samlade ögonblicket: rummet är först i skugga, och morgonljuset breder ut sig från fönstret till vänster.
   Skuggan är en toning som glider undan åt höger. I slutläget (och utan skript) syns ingen skugga. */
.kunskap-hero .sida-hero-bild::after {
  opacity: .5; background-color: transparent; background-size: 300% 100%; background-position: 0 0;
  background-image: linear-gradient(100deg, rgba(4, 10, 16, 0) 33%, rgba(4, 10, 16, .6) 52%, #040A10 66%);
}
@keyframes ljus-breder { from { background-position: 100% 0; } to { background-position: 0 0; } }
.skript .kunskap-hero .sida-hero-bild::after { animation: ljus-breder 5.2s cubic-bezier(.35, .1, .25, 1) .2s both; }
@media (max-width: 760px) {
  .kunskap-hero { --fokus-x: .3; }
  .kunskap-hero::before {
    background:
      linear-gradient(rgba(6, 14, 22, .76), rgba(6, 14, 22, .66) 30%, rgba(6, 14, 22, .3) 40%, rgba(6, 14, 22, 0) 50%),
      linear-gradient(to top, rgba(6, 14, 22, .88), rgba(6, 14, 22, .7) 20%, rgba(6, 14, 22, 0) 38%);
  }
  .kunskap-hero h1 { font-size: clamp(2.3rem, 10.4vw, 3rem); }
  .kunskap-hero .knappar { margin-top: clamp(14px, 2vh, 22px); }
}

/* Problemet: samma fråga tre gånger under en vecka. Frågorna står över veckans dagar, med en stam ned till
   dagen. Kortens vänsterkant ligger på 0, 35 och 70 procent och dagarnas mitt på 10, 50 och 90 procent. */
.problem { padding: var(--luft) 0; }
.problem h2 { max-width: 16ch; margin-bottom: clamp(40px, 8vh, 80px); }
.vecka-fragor { list-style: none; margin: 0; padding: 0; display: grid; }
.vecka-fragor li {
  grid-area: 1 / 1; align-self: end; position: relative; width: 30%; margin-bottom: 36px;
  padding: 18px 22px 20px; border-radius: 22px 22px 22px 6px; background: var(--vit); box-shadow: 0 0 0 1px var(--kant), 0 14px 40px -24px rgba(16, 38, 46, .35);
}
.vecka-fragor li:nth-child(1) { --stam: 33.3%; }
.vecka-fragor li:nth-child(2) { --stam: 50%; margin-left: 35%; }
.vecka-fragor li:nth-child(3) { --stam: 66.7%; margin-left: 70%; }
.vecka-fragor li::after { content: ""; position: absolute; left: var(--stam); top: 100%; height: 36px; border-left: 1.5px solid var(--linje-stark); }
.vecka-fragor time { display: block; margin-bottom: 6px; font-size: .95rem; color: var(--ink-mjuk); }
.vecka-fragor p { margin: 0; font-family: var(--rubrik); font-size: clamp(1.2rem, 1rem + .8vw, 1.65rem); font-weight: 540; line-height: 1.3; }
.vecka-dagar { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); position: relative; }
.vecka-dagar::before { content: ""; position: absolute; left: 0; right: 0; top: 0; border-top: 1.5px solid var(--linje-stark); transform-origin: 0 50%; }
.vecka-dagar li { position: relative; padding-top: 18px; text-align: center; font-size: .95rem; color: var(--ink-mjuk); }
.vecka-dagar li::before { content: ""; position: absolute; left: 50%; top: -4px; width: 1.5px; height: 9px; margin-left: -.75px; background: var(--linje-stark); }
.vecka-dagar .har-fraga { color: var(--ink); font-weight: 600; }
.vecka-dagar .har-fraga::before { top: -6px; width: 12px; height: 12px; margin-left: -6px; border-radius: 50%; background: var(--jade); box-shadow: 0 0 0 4px var(--morgon); }
/* Frågorna kommer fram en i taget när veckan kommer i bild. */
.kan-rita .vecka .vecka-dagar::before { transform: scaleX(0); }
.kan-rita .vecka.ritad .vecka-dagar::before { transform: none; transition: transform 1.2s cubic-bezier(.4, 0, .2, 1); }
.kan-rita .vecka .vecka-fragor li { translate: 0 10px; }
.kan-rita .vecka.ritad .vecka-fragor li { translate: 0 0; transition: opacity .7s ease, translate .7s ease; }
.kan-rita .vecka.ritad .vecka-fragor li:nth-child(1) { transition-delay: .5s; }
.kan-rita .vecka.ritad .vecka-fragor li:nth-child(2) { transition-delay: 1.2s; }
.kan-rita .vecka.ritad .vecka-fragor li:nth-child(3) { transition-delay: 1.9s; }
@media (max-width: 860px) {
  /* På mobil står frågorna under varandra och förskjuts en aning, som tre meddelanden under veckan. */
  .vecka-fragor { gap: 14px; }
  .vecka-fragor li { grid-area: auto; width: 86%; margin: 0; padding: 14px 18px 16px; }
  .vecka-fragor li:nth-child(2) { margin-left: 7%; }
  .vecka-fragor li:nth-child(3) { margin-left: 14%; }
  .vecka-fragor li::after, .vecka-dagar { display: none; }
}

/* Hur fungerar det? Stegen till vänster och kunskapsfönstret i högra halvan, i ett band i morgon-2.
   Raden följer innehållsbreddens vänsterkant men går nästan ut till högerkanten, så att fönstret blir stort. */
.hur { padding: var(--luft) 0; background: var(--morgon-2); }
.hur-rad {
  display: grid; grid-template-columns: minmax(0, min(36%, 30rem)) minmax(0, 1fr); gap: 40px clamp(32px, 4vw, 72px); align-items: center;
  padding-left: max(var(--gutter), calc((100% - var(--max)) / 2 + var(--gutter))); padding-right: var(--gutter);
}
.hur-text h2 { margin-bottom: 14px; }
.hur-under { margin: 0 0 clamp(28px, 5vh, 44px); font-size: clamp(1.08rem, 1.02rem + .25vw, 1.2rem); color: var(--ink-mjuk); }
.hur-steg { list-style: none; margin: 0; padding: 0; counter-reset: steg; display: grid; gap: 22px; }
.hur-steg li { counter-increment: steg; position: relative; padding-left: 46px; font-size: clamp(1.05rem, 1rem + .2vw, 1.15rem); line-height: 1.5; }
.hur-steg li::before {
  content: counter(steg); position: absolute; left: 0; top: .1em; display: grid; place-items: center; width: 30px; height: 30px;
  border-radius: 50%; background: var(--jade); color: var(--vit); font: 650 14px/1 var(--sans);
}
.hur-steg b { display: block; font-family: var(--rubrik); font-weight: 620; }
.hur-steg span { display: block; color: var(--ink-mjuk); }
.kb-figur { margin: 0; justify-self: end; width: min(100%, 880px); }
.kb-figur figcaption { margin-top: 12px; }
.hur-not { margin: clamp(36px, 6vh, 56px) 0 0; max-width: 62ch; font-size: clamp(1.05rem, 1rem + .2vw, 1.15rem); color: var(--ink-mjuk); }
.hur-not a { color: var(--ink); font-weight: 600; text-decoration-color: var(--trad-morgon); text-decoration-thickness: 2px; }

/* Kunskapsfönstret läses uppifrån och ned: exempelfrågorna som val, sedan svaret med källan och dokumentet med
   det markerade stycket. Svaret och dokumentet står bredvid varandra när fönstret är brett nog, annars under
   varandra (en containerfråga, eftersom fönstret är smalt på en liten dator). */
.kb { font-size: 16px; container-type: inline-size; box-shadow: 0 0 0 1px var(--kant), 0 30px 80px -40px rgba(16, 38, 46, .35); }
.kb .fonster-list { padding: 14px 24px; font-size: 14px; }
.kb-val { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 18px 24px 18px; border: 0; border-bottom: 1px solid #E1E9E6; min-width: 0; }
.kb-val legend { float: left; width: 100%; margin: 0 0 6px; padding: 0; font-size: 14px; font-weight: 650; color: #41585E; }
.kb-val label { position: relative; display: inline-flex; cursor: pointer; }
.kb-val input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.kb-val input:disabled { cursor: default; }
.kb-val label span {
  padding: 8px 14px; border-radius: 999px; background: #F3F8F6; box-shadow: inset 0 0 0 1px #C9D6D2;
  font-size: 14.5px; line-height: 1.35; color: var(--blak); transition: background-color .2s ease, color .2s ease;
}
.kb-val label:hover span { box-shadow: inset 0 0 0 1.5px #6B7F84; }
.kb-val input:checked + span { background: var(--blak); color: var(--vit); box-shadow: none; }
.kb-val input:focus-visible + span { outline: 3px solid var(--natt); outline-offset: 2px; }
/* De fyra exemplen ligger i samma rutnätscell och de dolda är bara osynliga, så att fönstret behåller höjden
   när man byter fråga. */
.kb-exempel-ram { display: grid; }
.kb-exempel { grid-area: 1 / 1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); }
.kb-exempel[hidden] { display: grid; visibility: hidden; }
.kb-etikett { margin: 0 0 10px; font-size: 13px; font-weight: 650; color: #6B7F84; }
.kb-svar { display: flex; flex-direction: column; align-items: flex-start; padding: 22px 26px 26px; }
.kb-svar p { margin: 0; }
.kb-svar-text { color: var(--blak); font-size: 17px; line-height: 1.55; }
.kb-svar .kb-kalla { margin-top: 18px; padding-top: 12px; border-top: 1px solid #E1E9E6; font-size: 14px; font-weight: 650; line-height: 1.4; color: #0B6B63; text-wrap: balance; }
.kb-dok { padding: 22px 24px 24px; background: #F3F8F6; border-left: 1px solid #E1E9E6; }
.kb-dok-namn { display: flex; align-items: center; gap: 8px; margin: 0 0 10px; font-size: 14.5px; font-weight: 650; color: var(--blak); }
.kb-dok-namn svg { flex: none; fill: none; stroke: #0B6B63; stroke-width: 1.3; }
.kb-dok ol { margin: 0; padding: 0; list-style: none; counter-reset: stycke; display: grid; gap: 4px; }
.kb-dok li { counter-increment: stycke; position: relative; padding: 7px 10px 7px 34px; border-radius: 8px; font-size: 14px; line-height: 1.5; color: #41585E; }
.kb-dok li::before { content: counter(stycke) "."; position: absolute; left: 10px; top: 7px; font-weight: 650; color: #6B7F84; font-variant-numeric: tabular-nums; }
.kb-dok li.markerad { background: #DCEFE7; color: var(--blak); box-shadow: inset 3px 0 0 var(--trad-morgon); }
.kb-dok li.markerad::before { color: var(--jade-mork); }
@media (prefers-reduced-motion: no-preference) {
  .kb-exempel:not([hidden]) .kb-svar-text, .kb-exempel:not([hidden]) .kb-kalla, .kb-exempel:not([hidden]) .kb-dok { animation: kb-in .45s ease both; }
  @keyframes kb-in { from { opacity: 0; } }
}
@media (max-width: 960px) {
  .hur-rad { grid-template-columns: minmax(0, 1fr); padding-inline: var(--gutter); }
  .kb-figur { justify-self: stretch; width: 100%; }
}
@container (max-width: 600px) {
  .kb-exempel { grid-template-columns: minmax(0, 1fr); }
  .kb-dok { border-left: 0; border-top: 1px solid #E1E9E6; }
}
@media (max-width: 640px) {
  .kb .fonster-list { padding: 12px 16px; }
  .kb-val { padding: 14px 16px; }
  .kb-val label span { font-size: 14px; padding: 7px 12px; }
  .kb-svar { padding: 18px 16px 18px 26px; }
  .kb-svar-text { font-size: 16px; }
  .kb-dok { padding: 18px 16px 18px 26px; }
}

/* Fortbildningen: texten till vänster och materialets fyra områden som dokument i ett vitt kort till höger,
   i samma hud som kunskapsfönstret. */
.fortbildning { background: var(--morgon); }
.fortbildning-ram { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .85fr); gap: 36px clamp(32px, 6vw, 96px); align-items: center; }
.fortbildning h2 { max-width: 16ch; margin-bottom: 18px; }
.fortbildning-text { max-width: 54ch; margin: 0; font-size: clamp(1.08rem, 1.02rem + .25vw, 1.2rem); line-height: 1.55; color: var(--ink-mjuk); }
.fortbildning-hylla { margin: 0; padding: 20px 22px 22px; border-radius: 18px; background: var(--vit); box-shadow: 0 0 0 1px var(--kant), 0 30px 80px -40px rgba(16, 38, 46, .35); }
.fortbildning-hylla figcaption { margin: 0 0 12px; font-size: 14px; font-weight: 650; color: #41585E; }
.fortbildning-hylla ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; }
.fortbildning-hylla li {
  display: flex; align-items: center; gap: 12px; padding: 13px 14px; border-radius: 10px; background: #F3F8F6;
  box-shadow: inset 3px 0 0 var(--trad-morgon); font-family: var(--rubrik); font-weight: 600; font-size: 1.05rem; line-height: 1.3; color: var(--blak);
}
.fortbildning-hylla svg { flex: none; fill: none; stroke: #0B6B63; stroke-width: 1.3; }
@media (max-width: 860px) { .fortbildning-ram { grid-template-columns: minmax(0, 1fr); } }

/* Vanliga frågor direkt efter bandet */
.fragor { background: var(--morgon); }