/* s30-genomskarningen.html – lyft ur startsektionerna med kalla/sx_in.py (ändra i källan och kör om) */
/* clip (inte hidden): handtaget får inte ge sidled när linjen står vid kanten, och klistringen fungerar ändå */
.s30 { position: relative; overflow-x: clip; }
.s30-scen { position: relative; height: calc(var(--vh) * 250); }
.s30-klibb { position: sticky; top: 0; height: calc(var(--vh) * 100); min-height: 640px; display: flex; align-items: center; overflow: hidden; }
.s30-rutnat { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--spalt); align-items: center; width: 100%; }
.s30-text { grid-column: 1 / span 5; position: relative; z-index: 2; }
.s30-text .t-etikett { margin-bottom: 28px; }
.s30-text .t-ingress { margin-top: 24px; max-width: 34ch; }
.s30-delar { margin-top: clamp(28px, 3vw, 44px); border-top: 1px solid var(--linje); }
.s30-del { display: grid; grid-template-columns: 30px minmax(0, 1fr); column-gap: 16px; padding: 13px 0 14px; border-bottom: 1px solid var(--linje); opacity: .38; transition: opacity .7s ease; }
.s30-del.pa { opacity: 1; }
.s30-del .nr, .s30-pkt i { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; font-style: normal; font-size: .75rem; font-weight: 500; color: var(--is); box-shadow: inset 0 0 0 1px rgba(238, 243, 250, .5); background: rgba(4, 10, 24, .6); }
.s30-del.varm.pa .nr, .s30-pkt.varm i { color: var(--natt); background: var(--glod); box-shadow: 0 0 0 4px rgba(242, 154, 60, .18), 0 0 18px rgba(242, 154, 60, .55); }
.s30-del .nr { grid-column: 1; grid-row: 1 / span 2; }
.s30-del b { grid-column: 2; display: block; font-size: 1.0625rem; font-weight: 420; line-height: 28px; }
.s30-del > span:last-child { grid-column: 2; font-size: .9375rem; line-height: 1.45; color: var(--is-3); }

/* bilden: den stängda pannan under, genomskärningen ovanpå – bara till vänster om linjen */
.s30-fig { grid-column: 6 / -1; position: relative; margin: 0 calc(-1 * min(var(--marg), 48px)) 0 0; }
/* bildparets format (--ar) och glödens ellips kommer från markupen; standardvärdena gäller en frilagd panna med kontaktskugga */
.s30-bild { --x: 0%; position: relative; aspect-ratio: var(--ar, 1); max-height: calc(var(--vh) * 86); margin-inline: auto; touch-action: pan-y; }
.s30-bild::before { content: ""; position: absolute; left: var(--glod-vanster, 14%); right: var(--glod-hoger, 14%); bottom: var(--glod-botten, 3%); height: var(--glod-hojd, 22%); border-radius: 50%; pointer-events: none; opacity: var(--glod-t, 0);
  background: radial-gradient(closest-side, rgba(242, 154, 60, .26), rgba(242, 154, 60, .08) 55%, rgba(242, 154, 60, 0)); transition: opacity .3s linear; }
.s30-bild img { position: absolute; inset: 0; width: 100%; height: 100%; }
.s30-snitt { clip-path: inset(0 calc(100% - var(--x)) 0 0); -webkit-clip-path: inset(0 calc(100% - var(--x)) 0 0); }
/* skannerlinjen och handtaget */
.s30-linje { position: absolute; top: 3%; bottom: 3%; left: var(--x); width: 0; pointer-events: none; opacity: var(--l, 1); transition: opacity .6s ease; }
.s30-linje::before { content: ""; position: absolute; top: 0; bottom: 0; left: -1px; width: 2px; border-radius: 2px; background: linear-gradient(0deg, rgba(31, 116, 184, 0), #1f74b8 12%, #9fb4c4 50%, #ffd7a0 88%, rgba(255, 215, 160, 0)); box-shadow: 0 0 14px rgba(159, 180, 196, .5); }
.s30-linje::after { content: ""; position: absolute; top: 0; bottom: 0; right: 0; width: 90px; background: linear-gradient(270deg, rgba(159, 180, 196, .12), rgba(159, 180, 196, 0)); }
.s30-grepp { position: absolute; left: var(--x); top: 50%; z-index: 3; width: 44px; height: 44px; margin: -22px 0 0 -22px; border-radius: 50%; display: grid; place-items: center; cursor: ew-resize;
  background: rgba(4, 10, 24, .82); box-shadow: inset 0 0 0 1px rgba(238, 243, 250, .55), 0 6px 18px rgba(0, 0, 0, .45); color: var(--bla); opacity: var(--l, 1); transition: opacity .6s ease, box-shadow .3s ease; touch-action: none; }
.s30-grepp:hover, .s30-grepp:focus-visible { box-shadow: inset 0 0 0 1px rgba(238, 243, 250, .9), 0 6px 18px rgba(0, 0, 0, .45); outline: none; }
.s30-grepp svg { width: 22px; height: 12px; }
/* delarna på bilden */
.s30-pkt { position: absolute; left: var(--px); top: var(--py); width: 0; height: 0; z-index: 2; pointer-events: none; }
.s30-pkt i { position: absolute; left: -14px; top: -14px; opacity: 0; transform: scale(.6); transition: opacity .5s ease, transform .7s var(--ease); }
.s30-pkt i { box-shadow: inset 0 0 0 1px rgba(238, 243, 250, .7), 0 0 0 3px rgba(4, 10, 24, .55); }
.s30-pkt.varm i { box-shadow: 0 0 0 3px rgba(4, 10, 24, .55), 0 0 0 7px rgba(242, 154, 60, .22), 0 0 20px rgba(242, 154, 60, .65); }
.s30-pkt.pa i { opacity: 1; transform: none; }
.s30-tips { position: absolute; left: 50%; bottom: 0; transform: translateX(-50%); font-size: .75rem; font-weight: 600; font-stretch: 80%; letter-spacing: .16em; text-transform: uppercase; color: var(--is-3); white-space: nowrap; }
html.visa-allt .s30-bild *, html.visa-allt .s30-del { transition: none !important; }
@media (max-width: 1100px) {
  .s30-text { grid-column: 1 / span 6; }
  .s30-fig { grid-column: 7 / -1; margin-right: 0; }
  .s30-del > span:last-child { display: none; }
}
@media (max-width: 760px) {
  .s30-scen { height: auto; }
  .s30-klibb { position: relative; height: auto; min-height: 0; padding: var(--sektion) 0; overflow: visible; }
  .s30-rutnat { display: flex; flex-direction: column; align-items: stretch; }
  .s30-text { display: contents; }
  .s30-text > * { order: 1; }
  .s30-fig { order: 2; margin: 28px calc(-1 * var(--marg) + 4px) 0; }
  .s30-delar { order: 3; }
  .s30-del > span:last-child { display: block; }
  .s30-bild { max-height: none; }
}