/* Formprov D: Statistiken, omgång 6. Bara det som är unikt för sidan; allt gemensamt ligger i ../gemensam.css.
   En eftermiddagssida: heron är persiennskuggorna på väggen. När man scrollar ritas staplar upp ur ljusränderna,
   och statistikfönstrets staplar växer i samma ton och takt (gemensam.js, [data-ranter]). Avsnitten växlar mellan eftermiddagens och morgonens ton.
   Två textstorlekar per avsnitt. */

/* Heron. Väggen uppe till vänster är mörk och helt jämn, och där står texten. Ränderna stiger åt höger och börjar
   strax under texten. Bilden förstoras en aning och förankras uppe till vänster, så att ränderna hamnar under
   knapparna även på låga skärmar. */
.statistik-hero {
  --zoom: 1.12; --fokus-x: .2; --fokus-y: .2;
  --ljus-x: 46%; --ljus-y: 62%; --ljus-b: 64%; --ljus-h: 76%; --ljus-farg: rgba(255, 200, 130, .3); --ljus-styrka: .5;
}
.statistik-hero::before {
  background:
    linear-gradient(rgba(6, 14, 22, .5), rgba(6, 14, 22, 0) 26%),
    radial-gradient(ellipse 56% 50% at 24% 26%, rgba(6, 14, 22, .32), rgba(6, 14, 22, 0) 100%);
}
.statistik-hero .hero-ingress strong { font-weight: 600; }
@media (min-width: 761px) {
  .statistik-hero h1 { font-size: clamp(3rem, min(6.2vw, 8vh), 7rem); }
}
/* På smalare datorskärmar står texten längre ned i förhållande till bilden, så bilden förstoras lite mer. */
@media (min-width: 761px) and (max-width: 1180px) { .statistik-hero { --zoom: 1.24; } }
@media (max-width: 760px) {
  .statistik-hero { --zoom: 1; --fokus-x: .42; --golv: 130px; }
  .statistik-hero::before {
    background:
      linear-gradient(rgba(6, 14, 22, .66), rgba(6, 14, 22, .6) 340px, rgba(6, 14, 22, 0) 470px),
      linear-gradient(to top, rgba(6, 14, 22, .7), rgba(6, 14, 22, 0) 20%);
  }
  .statistik-hero h1 { font-size: clamp(2.3rem, 10.4vw, 3rem); }
}

/* Vad visar statistiken? Listan till vänster med siffror som också står i fönstret, och fönstret stort till höger.
   Raden följer innehållsbreddens vänsterkant men går nästan ut till högerkanten. */
.visar { padding: var(--luft) 0; }
.visar-rad {
  display: grid; grid-template-columns: minmax(0, min(34%, 28rem)) 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);
}
.visar-text h2 { margin-bottom: clamp(28px, 5vh, 44px); }
.visar-lista { list-style: none; margin: 0; padding: 0; counter-reset: punkt; display: grid; gap: 4px; }
.visar-lista li {
  counter-increment: punkt; display: flex; align-items: center; gap: 16px; padding: 14px 0; border-top: 1px solid var(--linje-stark);
  font-family: var(--rubrik); font-size: clamp(1.15rem, 1.05rem + .4vw, 1.4rem); font-weight: 560; line-height: 1.3;
}
.visar-lista li:last-child { border-bottom: 1px solid var(--linje-stark); }
.visar-lista li::before {
  content: counter(punkt); flex: none; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%;
  background: var(--jade); color: var(--vit); font: 650 14px/1 var(--sans);
}
.st-figur { margin: 0; justify-self: end; width: min(100%, 860px); }
.st-figur figcaption { margin-top: 12px; }
.st { font-size: 16px; box-shadow: 0 0 0 1px var(--kant), 0 30px 80px -40px rgba(70, 40, 10, .35); }
.st .fonster-list { padding: 14px 24px; font-size: 14px; }
.st .nr { width: 22px; height: 22px; font-size: 12px; }
.st-kropp { display: grid; gap: 26px; padding: clamp(20px, 2.4vw, 32px); }
.st-kpi { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.st-kpi > div { padding: 14px 16px; border-radius: 12px; background: #F7F1E8; }
.st-kpi b { display: block; font-family: var(--rubrik); font-size: clamp(1.7rem, 1.3rem + 1.2vw, 2.4rem); font-weight: 540; line-height: 1.1; font-variant-numeric: tabular-nums; }
.st-kpi > div > span { display: flex; align-items: center; font-size: 13.5px; color: #4E6267; }
.st-block .etikett { display: flex; align-items: center; font-size: 13.5px; font-weight: 650; color: var(--blak); }
.st-staplar { height: clamp(120px, 16vh, 170px); margin-top: 30px; gap: 18px; }
/* Smala staplar i OMTNK:s gröna, som staplarna i heron. De står mitt över veckornas etiketter och växer upp ur
   baslinjen när diagrammet syns (gemensam.js, [data-ranter]). */
.st-staplar { justify-content: space-around; }
.st-staplar i { flex: 0 0 clamp(26px, 2.6vw, 40px); background: var(--jade); border-radius: 3px 3px 0 0; }
.st-staplar b { font-size: 13px; }
.st .staplar-etiketter { gap: 18px; font-size: 12.5px; }
.st-rad { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px; }
@media (max-width: 960px) {
  .visar-rad { grid-template-columns: minmax(0, 1fr); padding-inline: var(--gutter); }
  .st-figur { justify-self: stretch; width: 100%; }
  /* Fönstret först, så att staplarna från heron har kortare väg, och listan som förklaring under. */
  .visar-text { display: contents; }
  .visar-text h2 { order: -2; margin-bottom: 0; }
  .st-figur { order: -1; }
}
@media (max-width: 560px) {
  .st-rad { grid-template-columns: minmax(0, 1fr); }
  .st-kpi { gap: 8px; }
  .st-kpi > div { padding: 10px; }
  .st-kpi b { font-size: 1.5rem; }
  .st-kropp { padding: 16px; }
}

/* Vad visar den inte? Listan bredvid ett samtal där texten är maskerad. Samtalen räknas, men läses inte. */
.inte { padding: var(--luft) 0; }
.inte-ram { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 40px clamp(32px, 6vw, 112px); align-items: center; }
.inte h2 { margin-bottom: clamp(20px, 3vh, 28px); }
.inte .lista-inte li { font-size: clamp(1.05rem, 1rem + .2vw, 1.15rem); }
.maskerat { margin: 0; display: grid; gap: 16px; justify-items: start; }
.maskerat-samtal {
  width: min(100%, 460px); display: flex; flex-direction: column; gap: 10px; padding: 22px; border-radius: 22px;
  background: var(--natt-3); box-shadow: 0 30px 70px -40px rgba(16, 38, 46, .5);
}
.mask-bubbla { margin: 0; max-width: 78%; display: grid; gap: 7px; padding: 13px 15px; border-radius: 16px; }
.mask-bubbla i { display: block; width: var(--b); height: 9px; border-radius: 5px; }
.mask-person { align-self: flex-end; width: 74%; background: var(--honung); border-bottom-right-radius: 5px; }
.mask-person i { background: rgba(29, 26, 19, .28); }
.mask-ai { align-self: flex-start; width: 78%; background: #1A3442; border-bottom-left-radius: 5px; }
.mask-ai i { background: rgba(220, 235, 231, .26); }
.mask-etikett {
  display: inline-flex; align-items: center; gap: 8px; padding: 7px 14px; border-radius: 999px;
  background: var(--vit); box-shadow: inset 0 0 0 1px var(--kant); font-size: .95rem; font-weight: 650; color: #41585E;
}
.mask-etikett::before {
  content: ""; width: 18px; height: 18px; background: currentColor;
  -webkit-mask: var(--ikon) center / contain no-repeat; mask: var(--ikon) center / contain no-repeat;
  --ikon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 3l18 18'/%3E%3Cpath d='M10.6 5.6A9.6 9.6 0 0 1 12 5.5c6 0 9.5 6.5 9.5 6.5a17 17 0 0 1-2.9 3.7M6.3 6.9C3.9 8.6 2.5 12 2.5 12s3.5 6.5 9.5 6.5c1.6 0 3-.4 4.2-1'/%3E%3Cpath d='M9.9 9.9a3 3 0 0 0 4.2 4.2'/%3E%3C/svg%3E");
}
@media (max-width: 860px) { .inte-ram { grid-template-columns: minmax(0, 1fr); } }

/* Vad används den till? Tre användningar i spalter. */
.till { padding: var(--luft) 0; }
.till h2 { margin-bottom: 14px; }
.till-under { margin: 0 0 clamp(32px, 5vh, 52px); font-size: clamp(1.08rem, 1.02rem + .25vw, 1.2rem); color: var(--ink-mjuk); }
.till-lista { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px clamp(28px, 4vw, 56px); }
.till-lista li { padding-top: 18px; border-top: 1.5px solid var(--linje-stark); font-size: clamp(1.05rem, 1rem + .2vw, 1.15rem); line-height: 1.5; }
.till-lista b { display: block; margin-bottom: 4px; font-family: var(--rubrik); font-weight: 620; }
.till-lista span { display: block; color: var(--ink-mjuk); }
@media (max-width: 760px) { .till-lista { grid-template-columns: minmax(0, 1fr); } }