/* Startsidans nedre del, del 2: funktioner med människor, "Är det officiellt?", frågor, avslut.
   Bygger på designsystemet i style.css (tokens, .sektion, .sida, .knapp, .lank-mer, .fragor).
   Produkten i 3D ligger i produkt.css. Underlag: docs/research-nedre.md, docs/research-osr.md. */

.ned h2 { text-wrap: balance; }
.ned[id] { scroll-margin-top: calc(var(--gh) + var(--ln)); }
.ned .ingress { margin-top: var(--s4); }
.ned { --sektion: clamp(56px, 6vw, 88px); }

/* ==== Funktioner: fyra brickor, två med foton av människor ============================================ */
.n-vanster { max-width: 14ch; margin-bottom: var(--s8); }
.nb-rutnat { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--s5); }
.nb { position: relative; isolation: isolate; overflow: hidden; display: flex; flex-direction: column; min-height: 340px;
  padding: var(--s8); border-radius: var(--r-bricka); background: var(--yta); color: var(--text); }
.nb:nth-child(1) { grid-column: span 7; }
.nb:nth-child(2) { grid-column: span 5; }
.nb:nth-child(3) { grid-column: span 5; }
.nb:nth-child(4) { grid-column: span 7; }
.nb h3 { margin: 0; font-size: var(--fs-bricka); line-height: var(--lh-bricka); letter-spacing: var(--ls-bricka); }
.nb p { margin: var(--s3) 0 0; max-width: 30em; color: var(--text-2); }
.nb .lank-mer { display: inline-block; margin-top: var(--s3); }
.nb-text { position: relative; z-index: 1; }

/* Foto som fyller brickan, texten nertill på en mörk toning */
.nb-foto { justify-content: flex-end; background: #0b1020; color: #f1f3f8; min-height: 380px; }
.nb-foto .nb-bild { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; object-fit: cover; object-position: 50% 35%; }
.nb-foto::before { content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(0deg, rgb(11 16 32 / .92) 0, rgb(11 16 32 / .6) 34%, rgb(11 16 32 / 0) 62%); }
.nb-foto h3, .nb-stjarna h3 { color: #f1f3f8; }
.nb-foto p { color: #c9cfdd; }
.nb-foto .lank-mer { color: #f1f3f8; }
.nb-foto.reserv .nb-bild { object-fit: contain; object-position: 50% 0; padding-top: var(--s6); }
.nb-foto .av-kort { position: absolute; top: var(--s6); right: var(--s6); width: min(320px, 64%); background: rgb(255 255 255 / .94); color: #121726; }
.nb-foto .av-rad span, .nb-foto .av-rad2 { color: #5b6275; }

.nb-korrektur .korrektur { max-width: 360px; }

/* Stjärnan: fotot fyller brickan och tonar ut i det svarta */
.nb-stjarna { background: #000; color: #f1f3f8; }
.nb-stjarna p { color: #a3abc0; }
.nb-stjarna .nb-text { max-width: 24em; }
.nb-stjarnfoto { position: absolute; z-index: -1; right: -4%; top: 50%; width: min(64%, 520px); height: auto; aspect-ratio: 1; transform: translateY(-50%);
  -webkit-mask-image: radial-gradient(closest-side, #000 58%, transparent 100%); mask-image: radial-gradient(closest-side, #000 58%, transparent 100%); }
.r-fakta { position: relative; z-index: 1; display: flex; flex-wrap: wrap; gap: 8px; margin: auto 0 0 !important; padding-top: var(--s7); }
.r-fakta span {
  padding: 5px 10px; border-radius: 4px; background: rgb(255 255 255 / .1); color: var(--m-text);
  font-size: var(--fs-liten); letter-spacing: var(--ls-liten);
}


/* Korrekturet: ett ark och tre bockar */
.korrektur { display: grid; grid-template-columns: minmax(0, 46%) 1fr; align-items: center; gap: var(--s5); margin-top: auto; padding-top: var(--s7); }
.korrektur img { width: 100%; height: auto; border-radius: 2px; box-shadow: 0 1px 2px rgb(0 0 0 / .08), 0 14px 26px -12px rgb(0 0 0 / .32); }
.k-lista { margin: 0; padding: 0; list-style: none; font-size: var(--fs-liten); letter-spacing: var(--ls-liten); }
.k-lista li { display: flex; align-items: center; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--linje); }
.k-lista li::before {
  content: ""; flex: none; width: 18px; height: 18px; border-radius: 50%;
  background: var(--bla) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath d='M5 9.2l2.6 2.6L13 6.4' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 100% no-repeat;
}
.k-knapp {
  grid-column: 2; justify-self: start; padding: 7px 14px; border-radius: var(--r-liten); background: var(--bla); color: #fff;
  font-size: var(--fs-fot); letter-spacing: var(--ls-fot); margin-top: calc(-1 * var(--s2));
}

/* Tiden: klockslaget och mejlet som kommer fram */
.avisering { margin-top: auto; padding-top: var(--s7); }
.av-tid { display: grid; margin: 0 0 var(--s4) !important; color: var(--text) !important; font-size: var(--fs-liten); }
.av-tid span:first-child { color: var(--text-2); }
.av-kl { font-size: 64px; line-height: 1; font-weight: 600; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.av-kort {
  display: grid; grid-template-columns: 34px 1fr; gap: 2px 12px; align-items: center; padding: 12px 14px;
  border-radius: var(--r-bricka); background: var(--yta-2); font-size: var(--fs-liten); letter-spacing: var(--ls-liten); line-height: 1.3;
}
.av-ikon {
  grid-row: span 2; width: 34px; height: 34px; border-radius: 8px; background: #000
  radial-gradient(circle at 50% 50%, #fff 0 1.6px, rgb(255 255 255 / .5) 2.4px, transparent 6px);
}
.av-rad { display: flex; justify-content: space-between; gap: 8px; }
.av-rad span { color: var(--text-2); font-size: var(--fs-fot); }
.av-rad2 { color: var(--text-2); }


/* ==== Är det officiellt? Ett rakt svar bredvid ett utdrag ur registret ================================= */
.a-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: var(--s10); align-items: center; max-width: 1060px; }
.ned-arligt h2 { font-size: var(--fs-h1); line-height: var(--lh-h1); letter-spacing: var(--ls-h1); }
.ned-arligt .ingress { color: var(--text-2); margin: var(--s3) 0 var(--s7); }
.a-text > p:not(.ingress) { max-width: 34em; }
.a-loften { margin: var(--s7) 0 var(--s6); }
.a-loften > div { padding: 14px 0; border-top: 1px solid var(--linje); }
.a-loften > div:last-child { border-bottom: 1px solid var(--linje); }
.a-loften dt { display: inline; font-weight: 600; }
.a-loften dd { display: inline; margin: 0 0 0 .25em; color: var(--text-2); }

.registerkort { margin: 0; padding: var(--s8); border-radius: var(--r-stor); background: var(--yta-2); }
.registerkort figcaption { display: flex; justify-content: space-between; gap: var(--s4); font-size: var(--fs-fot); letter-spacing: var(--ls-fot); color: var(--text-2); }
.rk-nr { font-variant-numeric: tabular-nums; }
.rk-namn { margin: var(--s5) 0 var(--s5); font-size: var(--fs-h3); line-height: var(--lh-h3); font-weight: 600; letter-spacing: var(--ls-h3); }
.registerkort dl { margin: 0; }
.registerkort dl > div { display: flex; justify-content: space-between; gap: var(--s5); padding: 11px 0; border-top: 1px solid var(--linje);
  font-size: var(--fs-liten); letter-spacing: var(--ls-liten); }
.registerkort dt { color: var(--text-2); }
.registerkort dd { margin: 0; text-align: right; font-variant-numeric: tabular-nums; }
.rk-not { margin: var(--s5) 0 0; font-size: var(--fs-fot); letter-spacing: var(--ls-fot); line-height: var(--lh-fot); color: var(--text-2); }


/* ==== Frågor: layouten kommer från style.css (.fragor .sida, details/summary) ========================= */
.ned-fragor .fragor-sido { align-self: start; position: sticky; top: calc(var(--gh) + var(--s8)); }
.ned-fragor .fragor-sido h2 { margin-bottom: var(--s4); }
.ned-fragor .fragor-sido p { color: var(--text-2); max-width: 22em; }
.ned-fragor .fragor-sido a { overflow-wrap: anywhere; }
.ned-fragor details p a { color: var(--lank); }

/* ==== Avslutet: stjärnan, en mening och en knapp ======================================================= */
.ned-slut { --sektion: clamp(56px, 6vw, 80px); text-align: center; overflow: clip; }
.ned-slut .sida { display: grid; justify-items: center; }
.slut-stjarna {
  width: min(200px, 50vw); height: auto; margin: calc(-1 * var(--s7)) auto var(--s2);
  -webkit-mask-image: radial-gradient(closest-side, #000 40%, transparent 100%); mask-image: radial-gradient(closest-side, #000 40%, transparent 100%);
}
.ned-slut h2 { font-size: var(--fs-h1); line-height: var(--lh-h1); letter-spacing: var(--ls-h1); max-width: 14ch; }
.ned-slut .ingress { margin: var(--s3) 0 var(--s6); max-width: 35ch; color: var(--text-2); line-height: 1.5; }
.slut-not { margin: var(--s5) 0 0; max-width: 42ch; font-size: var(--fs-liten); line-height: 1.6; letter-spacing: var(--ls-liten); color: var(--text-2); }
.ned-slut .knapp { min-height: 52px; padding-inline: 28px; }

/* ==== Brytpunkter (1068 och 734 px) ==================================================================== */
@media (max-width: 1068px) {
  .nb:nth-child(n) { grid-column: span 6; }
  .a-grid { grid-template-columns: 1fr; gap: var(--s8); }
  /* En kolumn: rubrik och kontakt följer flödet, utan att lägga sig ovanpå svaren. */
  .ned-fragor .fragor-sido { position: static; top: auto; }
}
@media (max-width: 734px) {
  .nb-rutnat { grid-template-columns: 1fr; gap: var(--s3); }
  .nb:nth-child(n) { grid-column: auto; }
  .nb { min-height: 0; padding: var(--s6) var(--s5); }
  .nb-foto { min-height: 360px; }
  .nb-korrektur .korrektur { display: none; }   /* på mobilen räcker texten; korrekturet visas i flödet */
  .ned-arligt .registerkort { display: none; }  /* exemplet ur registret får plats först på större skärmar */
  .nb-foto .av-kort { top: var(--s4); right: var(--s4); width: 78%; }
  .nb-stjarna { padding-bottom: var(--s6); }
  .nb-stjarnfoto { position: relative; right: auto; top: auto; transform: none; width: 64%; margin: -6% auto -10%; order: -1; }
  .av-kl { font-size: 56px; }
  .registerkort { padding: var(--s6); border-radius: var(--r-bricka); }
}
.ned-arligt .registerkort { background: var(--yta); }

/* ==== Fler vägar till köpet (ägaren: "mer CTA och säljande"). Bara fakta som står i paketen och villkoren. === */
/* Efter funktionerna: en rad som sammanfattar och en knapp */
.n-cta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s4) var(--s7);
  margin-top: var(--s5); padding: var(--s6) var(--s8); border-radius: var(--r-bricka); background: var(--yta); }
.n-cta p { margin: 0; color: var(--text-2); max-width: 40em; }
.n-cta b { color: var(--text); font-weight: 600; }
.n-cta .knapp { min-height: 52px; padding-inline: 28px; }

/* Avslutet: knappen och en textlänk, fakta om köpet under */
.ned-slut::before { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(60% 55% at 50% 0%, rgb(169 189 240 / .08), rgb(169 189 240 / 0) 70%); }
.ned-slut { position: relative; }
.slut-handling { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--s4) var(--s7); }
.slut-handling .lank-mer { color: var(--text); }
.slut-trygg { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--s2) var(--s6); margin: var(--s6) 0 0; padding: var(--s5) 0 0;
  list-style: none; border-top: 1px solid var(--linje); font-size: var(--fs-liten); color: var(--text-2); max-width: 600px; }
.slut-trygg li { display: flex; align-items: center; gap: 8px; }
.slut-trygg li::before { content: ""; flex: none; width: 9px; height: 9px; border-radius: 50%; border: 1.5px solid var(--text-2);
  background: radial-gradient(circle, var(--guld) 0 26%, transparent 32%); }
@media (max-width: 734px) {
  .n-cta { padding: var(--s5); }
  .n-cta .knapp { width: 100%; }
  .slut-handling { flex-direction: column; width: 100%; }
  .slut-handling .knapp { width: 100%; }
  .slut-trygg { flex-direction: column; align-items: flex-start; text-align: left; }
}