/* Biotherm Heat · Dokument (ovanpå bas.css och sajt.css).
   Omslagen som tryckta broschyrer på ett mörkt, svagt speglande golv – som produkterna i broschyren.
   Hjälte med företagsbroschyren på flödeslinjen · hylla med PelleTech · två uppslag (Egen tillverkning, Förråd och lagring). */

/* ---------- omslaget: tryckt broschyr med tunn kant, mjuk skugga, svag glans och spegling i golvet ---------- */
.dk-omslag { position: relative; display: block; aspect-ratio: 1100 / 1554; }
.dk-omslag img { position: relative; z-index: 1; width: 100%; height: 100%; object-fit: contain; border-radius: 3px; background: #0b1934;
  box-shadow: 0 0 0 1px rgba(170, 196, 228, .14), 0 34px 60px -24px rgba(0, 0, 0, .85), 0 12px 24px -12px rgba(0, 0, 0, .6);
  -webkit-box-reflect: below 0 linear-gradient(180deg, transparent 0, transparent 76%, rgba(255, 255, 255, .26));
  transition: transform .9s var(--ease); }
/* glansen: ljuset faller snett över papperet */
.dk-omslag::after { content: ""; position: absolute; z-index: 2; inset: 0; border-radius: 3px; pointer-events: none;
  background: linear-gradient(118deg, rgba(255, 255, 255, .085) 0, rgba(255, 255, 255, .02) 34%, rgba(255, 255, 255, 0) 52%);
  transition: transform .9s var(--ease), background .9s var(--ease); }

/* ---------- hjälte ---------- */
.dk-hero { position: relative; padding-top: clamp(136px, 12vw, 196px); overflow: hidden; isolation: isolate; }
.dk-hero::before { content: ""; position: absolute; z-index: -1; right: -6%; top: 6%; width: 64%; height: 92%; background: radial-gradient(closest-side, rgba(31, 116, 184, .2), rgba(31, 116, 184, .06) 55%, rgba(31, 116, 184, 0)); pointer-events: none; }
.dk-hero-rutnat { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--spalt); align-items: end; }
.dk-hero-text { grid-column: 1 / span 7; padding-bottom: clamp(48px, 4.6vw, 88px); }
.dk-hero .smulor { margin-bottom: 34px; }
.dk-hero h1 { margin-top: 24px; font-size: clamp(3rem, 1.5rem + 4.4vw, 6.75rem); }
.dk-hero .t-ingress { margin-top: 30px; max-width: 34ch; }
.dk-hero-scen { grid-column: 8 / span 5; position: relative; display: flex; justify-content: center; align-items: flex-end; }
.dk-hero-scen .dk-omslag { width: clamp(280px, 25vw, 460px); }
/* ljus på golvet under broschyren */
.dk-hero-scen::after { content: ""; position: absolute; left: 50%; bottom: -30px; width: clamp(340px, 34vw, 600px); height: 60px; transform: translateX(-50%); border-radius: 50%; background: radial-gradient(closest-side, rgba(200, 216, 232, .16), rgba(31, 116, 184, .06) 55%, rgba(31, 116, 184, 0)); pointer-events: none; }

/* flödeslinjen som broschyren står på, med ett streck i början som i broschyren */
.dk-golv { position: relative; z-index: 1; height: 1px; background: linear-gradient(90deg, rgba(31, 116, 184, .55), #1f74b8 30%, #9fb4c4 62%, #f29a3c 86%, #ffd7a0); }
.dk-golv::before { content: ""; position: absolute; left: 0; top: -6px; width: 1px; height: 13px; background: #6f9cc8; }

.dk-hero-fot { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--spalt); padding-top: 30px; }
.dk-hero-data { grid-column: 1 / span 7; display: grid; grid-template-columns: 1.7fr 1fr 1fr; column-gap: var(--spalt); }
.dk-hero-data dt { font-size: .8125rem; line-height: 1.3; font-weight: 600; font-stretch: 80%; font-variation-settings: "opsz" 12; letter-spacing: .16em; text-transform: uppercase; color: var(--is-3); }
.dk-hero-data dd { margin: 10px 0 0; font-size: clamp(1.25rem, 1.05rem + .55vw, 1.75rem); line-height: 1.2; font-weight: 300; font-variation-settings: "opsz" 40; letter-spacing: -.014em; color: var(--is); font-variant-numeric: tabular-nums; white-space: nowrap; }
.dk-hero-val { grid-column: 1 / span 7; display: flex; flex-wrap: wrap; align-items: center; gap: 16px 36px; margin-top: 34px; }
.dk-ikon { width: 16px; height: 16px; flex: none; transition: transform .6s var(--ease); }
.knapp .dk-ikon { margin-left: -2px; }
.lank .dk-ikon { color: var(--bla); }
.knapp:hover .dk-ikon, .dk-val a[download]:hover .dk-ikon { transform: translateY(2px); }
.dk-hero-val .lank:hover .dk-ikon, .dk-val a[target]:hover .dk-ikon { transform: translate(2px, -2px); }

/* ---------- hyllorna ---------- */
.dk-sek .sek-huvud { margin-bottom: clamp(56px, 5.4vw, 96px); }
/* varje broschyr är ett delrutnät (subgrid): omslag, etikett, namn, uppgifter och val linjerar över hela hyllan */
.dk-hylla { --mellan: var(--spalt); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--mellan); row-gap: 0; }
.dk-hylla.fyra { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.dk-bok { --b: .82; position: relative; display: grid; grid-template-rows: subgrid; grid-row: span 5; }
.dk-bok .dk-omslag { width: calc(var(--b) * 100%); margin: 0 auto; }
/* golvet: en tunn linje genom hela hyllan (bitarna möts i mellanrummen) och ett svagt ljus under broschyren */
.dk-bok .dk-omslag::before { content: ""; position: absolute; z-index: 0; top: calc(100% - 22px); height: 44px; pointer-events: none;
  left: calc((1 / var(--b) - 1) / 2 * -100% - var(--mellan) / 2); right: calc((1 / var(--b) - 1) / 2 * -100% - var(--mellan) / 2);
  background: linear-gradient(var(--linje-2), var(--linje-2)) center / 100% 1px no-repeat, radial-gradient(closest-side, rgba(170, 196, 228, .13), rgba(170, 196, 228, 0)) center / 86% 100% no-repeat; }
.dk-bok:first-child .dk-omslag::before { left: calc((1 / var(--b) - 1) / 2 * -100%); }
.dk-bok:last-child .dk-omslag::before { right: calc((1 / var(--b) - 1) / 2 * -100%); }
.dk-text { display: contents; }
.dk-text .t-etikett { display: block; align-self: end; margin-top: clamp(64px, 6.4vw, 112px); }
.dk-text h3 { align-self: start; margin-top: 10px; font-size: clamp(1.375rem, 1.15rem + .6vw, 1.875rem); line-height: 1.12; font-weight: 320; font-variation-settings: "opsz" 40; letter-spacing: -.016em; color: var(--is); hyphens: manual; }
.dk-meta { align-self: start; margin-top: 10px; font-size: 1rem; line-height: 1.4; color: var(--is-3); font-variant-numeric: tabular-nums; }
.dk-val { align-self: start; display: flex; flex-wrap: wrap; gap: 10px 28px; margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--linje); }
.dk-val .lank { gap: 10px; font-size: 1rem; }

/* tre i bredd (Egen tillverkning, sex broschyrer i två rader): golvet bryts vid varje rads ändar */
.dk-hylla.tre { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.dk-hylla.tre .dk-bok { --b: .66; }
.dk-hylla.tre .dk-bok:nth-child(3n+1) .dk-omslag::before { left: calc((1 / var(--b) - 1) / 2 * -100%); }
.dk-hylla.tre .dk-bok:nth-child(3n) .dk-omslag::before { right: calc((1 / var(--b) - 1) / 2 * -100%); }
.dk-hylla.tre .dk-bok:nth-child(-n+3) .dk-val { margin-bottom: clamp(72px, 6vw, 104px); }

/* svävar man över en broschyr lyfts den lite från golvet och glansen tar ljus */
@media (hover: hover) {
  .dk-bok:hover .dk-omslag img, .dk-bok:hover .dk-omslag::after, .dk-bok:focus-within .dk-omslag img, .dk-bok:focus-within .dk-omslag::after,
  .dk-hero-scen:hover .dk-omslag img, .dk-hero-scen:hover .dk-omslag::after { transform: translateY(-8px); }
  .dk-bok:hover .dk-omslag::after, .dk-bok:focus-within .dk-omslag::after, .dk-hero-scen:hover .dk-omslag::after { background: linear-gradient(118deg, rgba(255, 255, 255, .13) 0, rgba(255, 255, 255, .03) 34%, rgba(255, 255, 255, 0) 52%); }
  .dk-bok:hover h3 { color: #fff; }
}

/* uppslag: rubriken på ena sidan, hyllan med två broschyrer på den andra (03 spegelvänt) */
.dk-uppslag .rutnat { align-items: center; }
.dk-uppslag-text { grid-column: 1 / span 5; grid-row: 1; padding-bottom: clamp(72px, 7vw, 120px); }
.dk-uppslag-text .t-etikett { margin-bottom: 30px; }
.dk-uppslag-text .t-ingress { margin-top: 30px; max-width: 30ch; }
.dk-uppslag .dk-hylla { grid-column: 7 / span 6; grid-row: 1; }
.dk-uppslag.spegel .dk-uppslag-text { grid-column: 8 / span 5; }
.dk-uppslag.spegel .dk-hylla { grid-column: 1 / span 6; }

/* ---------- mellanstora skärmar ---------- */
@media (max-width: 1100px) {
  .dk-hero-data, .dk-hero-val { grid-column: 1 / -1; }
  .dk-hylla.fyra, .dk-hylla.tre { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dk-hylla.fyra .dk-bok:nth-child(-n+2) .dk-val, .dk-hylla.tre .dk-bok:nth-child(-n+4) .dk-val { margin-bottom: 72px; }
  .dk-hylla.tre .dk-bok { --b: .82; }
  .dk-hylla.tre .dk-bok:nth-child(n) .dk-omslag::before { left: calc((1 / var(--b) - 1) / 2 * -100% - var(--mellan) / 2); right: calc((1 / var(--b) - 1) / 2 * -100% - var(--mellan) / 2); }
  .dk-hylla.tre .dk-bok:nth-child(odd) .dk-omslag::before { left: calc((1 / var(--b) - 1) / 2 * -100%); }
  .dk-hylla.tre .dk-bok:nth-child(even) .dk-omslag::before { right: calc((1 / var(--b) - 1) / 2 * -100%); }
  .dk-bok:nth-child(odd) .dk-omslag::before { left: calc((1 / var(--b) - 1) / 2 * -100%); }
  .dk-bok:nth-child(even) .dk-omslag::before { right: calc((1 / var(--b) - 1) / 2 * -100%); }
  .dk-uppslag-text, .dk-uppslag.spegel .dk-uppslag-text { grid-column: 1 / -1; grid-row: 1; padding-bottom: 56px; }
  .dk-uppslag .dk-hylla, .dk-uppslag.spegel .dk-hylla { grid-column: 1 / -1; grid-row: 2; }
}

/* ---------- mobil ---------- */
@media (max-width: 760px) {
  .dk-hero { padding-top: 112px; }
  .dk-hero .smulor { margin-bottom: 26px; }
  .dk-hero-rutnat { display: block; }
  .dk-hero-text { padding-bottom: 44px; }
  .dk-hero h1 { font-size: 3.25rem; }
  .dk-hero .t-ingress { font-size: 1.1875rem; max-width: none; }
  .dk-hero-scen .dk-omslag { width: 62%; }
  .dk-hero-scen::after { width: 90%; }
  .dk-hero-fot { display: block; padding-top: 26px; }
  .dk-hero-data { grid-template-columns: 1fr 1fr; row-gap: 22px; }
  .dk-hero-data .dk-hero-namn { grid-column: 1 / -1; }
  .dk-hero-val { flex-direction: column; align-items: stretch; gap: 18px; margin-top: 30px; }
  .dk-hero-val .lank { justify-content: center; }
  .dk-hylla, .dk-hylla.fyra, .dk-hylla.tre { --mellan: 18px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dk-hylla.fyra .dk-bok:nth-child(-n+2) .dk-val, .dk-hylla.tre .dk-bok:nth-child(-n+4) .dk-val { margin-bottom: 56px; }
  .dk-bok, .dk-hylla.tre .dk-bok { --b: .86; }
  .dk-text .t-etikett { margin-top: 46px; font-size: .75rem; letter-spacing: .12em; }
  .dk-text h3 { font-size: 1.3125rem; }
  .dk-meta { font-size: .9375rem; }
  .dk-val { flex-direction: column; gap: 12px; margin-top: 16px; padding-top: 14px; }
  .dk-uppslag-text, .dk-uppslag.spegel .dk-uppslag-text { padding-bottom: 44px; }
}