/* ==========================================================================
   MOBIL — rettelser til telefon (og små skærme), samt Instagram-links.
   Ligger sidst, så det vinder over kort.css, vhs.css og om.css. Målt på 360 × 650 (en almindelig Android i Chrome).
   ========================================================================== */

/* ---------- Logoet øverst (billede: skribblet SKRAT + .MUSEUM) ---------- */
#top .maerke{flex:none;align-items:center}
#top .maerke img{display:block;height:clamp(22px,2.8vw,40px);width:auto;max-width:none}   /* følger vinduets bredde, så menuen stadig kan stå ved siden af */

/* ---------- Instagram-links (alle skærme) ---------- */
.tavle-ig{flex:none;align-self:center;display:inline-flex;align-items:center;gap:9px;margin-top:10px;padding:6px 2px 5px;font:400 12px/1.2 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--daempet);text-decoration:none;border-bottom:1px solid transparent;transition:color .25s,border-color .25s}
.tavle-ig b{font-weight:500;color:var(--sol)}
.tavle-ig svg,.vv-ig svg{width:9px;height:9px;fill:none;stroke:currentColor;stroke-width:1.4;flex:none}
.tavle-ig:hover,.tavle-ig:focus-visible{color:var(--hvid);border-bottom-color:var(--sol);outline:0}
.vv-ig{display:inline-flex;align-items:center;gap:6px;color:var(--sol);text-decoration:none;border-bottom:1px solid rgba(246,203,69,.5)}
.vv-ig:hover,.vv-ig:focus-visible{border-bottom-color:var(--sol);outline:0}

/* Rullemenuen og menuikonerne på telefon (se kort.js og index.html): ikke til stede på computer */
.kv-b,.kv{display:none}
.ti{display:none}

/* Formularer og gaven: aldrig højere end skærmen. 100vh er skærmen UDEN adresselinjen, og så sad bunden (og knapperne) uden for synsfeltet. */
.arbejdsflade{max-height:100%;overscroll-behavior:contain}

@media (max-width:820px){

  /* ---------- Topbjælken: logo, Lyd, CRT og Book skal kunne stå ved siden af hinanden ---------- */
  #top{padding-inline:12px;gap:6px}
  #top .maerke img{height:20px}
  .hr{gap:5px}
  #b-vhs,#b-lyd{height:36px;padding:0 7px;gap:5px;font-size:10.5px;letter-spacing:.08em}
  .hr .btn{height:38px;padding:3px 4px 3px 11px;gap:7px;font-size:11.5px;letter-spacing:.12em}
  .hr .btn .dot{height:30px;width:30px}

  /* ---------- Menuen i bunden: ikon for hver side, og den valgte viser sit navn ----------
     Seks navne i versaler kan ikke stå ved siden af hinanden på 360 px uden at støde sammen. */
  #tabs{padding:5px 6px calc(5px + env(safe-area-inset-bottom));gap:2px;justify-content:stretch;align-items:stretch}
  #tabs button{flex:1 1 0;min-width:0;display:flex;align-items:center;justify-content:center;gap:9px;padding:12px 0 11px;font-size:11.5px;letter-spacing:.14em;transition:flex-grow .4s var(--langsom),background .3s,color .3s}
  #tabs .ti{display:block;flex:none;width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:butt;stroke-linejoin:miter}
  #tabs .tl{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}   /* står der stadig for skærmlæsere */
  #tabs button[aria-selected="true"]{flex:0 0 auto;padding-inline:15px}
  #tabs button[aria-selected="true"] .tl{position:static;width:auto;height:auto;overflow:visible;clip-path:none}

  /* ---------- Åbn: pakken, pladserne og knapperne får luft ----------
     Fra toppen: topbjælke (76) · titel · pakke · pakkens pladser · hint og "Send som gave / Se pakken" (to linjer, når et eksponat er vendt) · knapper · menu (56) */
  #bord{--cw:max(110px,min(54vw,calc((100vh - 428px)/1.6)))}
  @supports (height:100dvh){#bord{--cw:max(110px,min(54vw,calc((100dvh - 428px)/1.6)))}}
  #vstage{top:calc(50% - 42px)}
  #slots{bottom:122px}
  #p-bund{bottom:70px}
  #p-bund .hint{letter-spacing:.1em;line-height:1.35;text-wrap:balance}
  #v-aabn .p-venstre h1{margin-top:12px;font-size:clamp(30px,8.8vw,42px)}   /* lidt mindre og lidt længere nede, så den ikke rammer Info-knappen */

  /* ---------- Samling ---------- */
  .l-filt{grid-template-columns:minmax(0,1.2fr) minmax(0,1fr)}
  #f-gruppe{grid-column:1/-1;flex-wrap:nowrap;gap:4px}
  #f-gruppe .filter{flex:1 1 auto;justify-content:center;padding:8px 4px 7px;gap:5px;font-size:11px;letter-spacing:.06em;white-space:nowrap;min-width:0}
  #f-gruppe .filter small{font-size:10px}
  #f-rum{padding-inline-end:0}
  #f-rum::after{content:"";flex:none;width:34px}   /* luft efter den sidste slags, så den ikke ligger under den udtonede kant */
  .kv-sel{display:none!important}
  .kv-b{display:block;width:100%;min-width:0;text-align:left;border:1px solid var(--linje2);border-left:3px solid var(--c,var(--linje2));padding:10px 28px 9px 12px;font:500 11.5px var(--label);letter-spacing:.07em;text-transform:uppercase;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;color:var(--hvid);
    background:rgba(207,224,242,.06) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6' fill='none' stroke='%23CFE0F2' stroke-width='1.4'><path d='M1 1l4 4 4-4'/></svg>") no-repeat right 12px center/10px 6px}
  .sortr .kv-b{border-left-width:1px}
  .kv-b:focus-visible{border-color:var(--sol);outline:0}

  /* Rullemenuen: et mørkt ark nedefra, i museets stil, i stedet for browserens hvide dialog */
  .kv{display:block;position:fixed;inset:0;z-index:160;visibility:hidden;pointer-events:none;transition:visibility 0s .45s}
  .kv.on{visibility:visible;pointer-events:auto;transition:none}
  .kv-bg{position:absolute;inset:0;background:rgba(3,5,15,.7);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);opacity:0;transition:opacity .4s ease}
  .kv.on .kv-bg{opacity:1}
  .kv-panel{position:absolute;left:0;right:0;bottom:0;max-height:84%;display:flex;flex-direction:column;background:#0A0C16;border-top:1px solid var(--linje2);box-shadow:0 -24px 60px -10px rgba(0,0,0,.7);padding-bottom:max(10px,env(safe-area-inset-bottom));
    transform:translateY(100%);transition:transform .45s var(--langsom)}
  .kv.on .kv-panel{transform:none}
  .kv-top{flex:none;display:flex;justify-content:space-between;align-items:baseline;padding:22px 20px 14px}
  .kv-titel{font:400 12px var(--mono);letter-spacing:.22em;text-transform:uppercase;color:var(--sol)}
  .kv-luk{font:500 11px var(--mono);letter-spacing:.18em;text-transform:uppercase;color:var(--papir);border-bottom:1px solid rgba(244,238,220,.4);padding-bottom:1px}
  .kv-liste{overflow-y:auto;overscroll-behavior:contain;scrollbar-width:none}
  .kv-liste::-webkit-scrollbar{display:none}
  .kv-o{all:unset;box-sizing:border-box;display:flex;align-items:center;gap:14px;width:100%;padding:17px 20px 16px;border-top:1px solid var(--linje);font:500 14px/1.2 var(--label);letter-spacing:.14em;text-transform:uppercase;color:var(--tekst);cursor:pointer;-webkit-tap-highlight-color:transparent}
  .kv-o::before{content:"";flex:none;width:10px;height:10px;box-sizing:border-box;border:1px solid var(--c,var(--linje2))}
  .kv-o[aria-selected="true"]{color:var(--hvid);background:rgba(244,238,220,.06)}
  .kv-o[aria-selected="true"]::before{background:var(--c,var(--papir))}
  .kv-o small{margin-left:auto;font:400 12px var(--mono);letter-spacing:.06em;color:var(--daempet)}
  .kv-o:active{background:rgba(244,238,220,.1)}
  .kv-o:focus-visible{outline:2px solid var(--hvid);outline-offset:-4px}

  /* ---------- Book min hjerne og gaven: kortet må aldrig blive højere end skærmen, og teksten må ikke sidde klods på kanten ---------- */
  #v-bestil,#v-gave{padding:max(10px,env(safe-area-inset-top)) 10px max(10px,env(safe-area-inset-bottom))}
  .arbejdsflade{padding:58px 20px 24px;gap:16px;-webkit-overflow-scrolling:touch}
  .arbejdsflade .trin,.gave .trin{position:absolute;left:20px;top:24px;align-self:auto}
  .arbejdsflade .luk{right:20px;top:22px}
  .arbejdsflade h3{font-size:30px;line-height:1.06}
  .valg{display:grid;grid-template-columns:1fr 1fr;gap:6px}
  .valg button{white-space:normal;padding:13px 6px 12px;text-align:center;font-size:12px;letter-spacing:.12em}
  .valg button:last-child:nth-child(odd){grid-column:1/-1}   /* en enlig knap til sidst fylder hele rækken */
  .felt input,.felt textarea{font-size:16px;padding:12px 14px}   /* 16 px: ellers zoomer telefonen ind på feltet */
  .felt textarea{min-height:96px}
  #f-send{align-self:stretch;justify-content:center;padding:5px 14px;margin-top:2px}
  #f-note{text-align:center}
  .gave{padding-top:62px;gap:12px}
  #g-kort{width:min(190px,48vw,25vh);padding:2px 0}
  @supports (height:100dvh){#g-kort{width:min(190px,48vw,25dvh)}}
  .gave h3{font-size:26px}
  .gave .cap{font-size:14px;line-height:1.45}
  .gave .knapper{flex-direction:column;align-items:stretch;width:100%;gap:8px;margin-top:6px}
  .gave .knapper .btn,.gave .knapper .btn-out{align-self:stretch;justify-content:center}
  .gave .knapper .btn{padding:5px 14px}

  /* ---------- Eksponatvisningen: fast sidefod, så billedet har samme størrelse og plads hver gang (se viewer.js) ---------- */
  .vv-top{height:64px}
  .vv-nr{left:16px;top:50%;transform:translateY(-50%)}   /* i stedet for en linje oven på billedet */
  .vv-bund{height:168px;padding:0 16px max(16px,env(safe-area-inset-bottom));grid-template-columns:minmax(0,1fr) auto;grid-template-rows:minmax(0,1fr) auto;row-gap:8px;align-items:end}
  .vv-cap{grid-column:1;grid-row:1;align-self:end;min-width:0}
  .vv-hoejre{grid-column:2;grid-row:1;align-self:end;padding-bottom:2px}
  .vv-trin{grid-column:1/-1;grid-row:2;order:0;min-height:30px;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none}
  .vv-trin::-webkit-scrollbar{display:none}
  .vv-trin button{flex:none}
  .vv-cap b{font-size:23px;display:-webkit-box;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;overflow-wrap:anywhere}
  .vv-meta{margin-top:8px;gap:3px 12px;font-size:11px}
  .vv-tael{white-space:nowrap}
  .tavle-ig{font-size:11px;letter-spacing:.12em;margin-top:4px;margin-bottom:6px}
}

@media (max-width:360px){
  #tabs button[aria-selected="true"]{padding-inline:12px}
  #tabs button{letter-spacing:.1em}
  .hr .btn{padding-left:11px}
}
@media (max-width:340px){
  #top .maerke img{height:16px}
  #top{padding-inline:8px;gap:4px}
}

/* ---------- Halv skærm / smalt vindue (821–1180 px) ----------
   Pakken (folien er 1,24 × kortets bredde) står midt på siden og får lidt mere plads, og teksten til venstre får præcis den bredde, der er tilbage mellem sidekanten og pakken. */
@media (min-width:821px) and (max-width:1180px){
  #bord{--cw:min(calc(var(--ph)*.58),24vw)}
  #v-aabn .p-venstre{width:calc(35vw - var(--side) - 24px)}
  #v-aabn .p-venstre h1{font-size:clamp(32px,4.2vw,50px)}
  #v-aabn .p-venstre .lede{font-size:15px;max-width:none}
  #v-aabn .p-venstre .stat{max-width:none}
  .p-hoejre{width:min(22vw,300px)}
  .legende .ms{font-size:16px}
  .haandnote{left:0;width:100%}   /* den håndskrevne note over titlen vises også på halv skærm, men højst så bred som tekstkolonnen */
}

/* ---------- Samling: hele siden ruller (titel, filtre og kort) ----------
   Før lå filtrene fast, og kortene rullede i et lille felt under dem. Med mange kategorier (tre rækker filtre) blev feltet så lavt, at kortene
   blev skåret af foroven og forneden. Nu er det én side, som man ruller, på både telefon og computer. CRT-laget er et søskende til .sam-in og står fast. */
#v-samling{display:block;padding:0}
#v-samling .sam-in{position:absolute;inset:0;display:block;overflow-x:hidden;overflow-y:auto;padding:0 var(--side) 28px;overscroll-behavior:contain}
#v-samling .l-top{margin-bottom:12px}
#v-samling #grid,#v-samling #grid.scroll{flex:none;height:auto;min-height:220px;overflow:visible;padding:16px 0 0;align-content:flex-start;-webkit-mask-image:none;mask-image:none}
@media (max-width:820px){
  #v-samling .sam-in{padding:8px 16px 24px;scrollbar-width:none}
  #v-samling .sam-in::-webkit-scrollbar{display:none}
  #v-samling #grid,#v-samling #grid.scroll{padding:4px 0 0}
}

/* Halv skærm, men lavt vindue: der er ikke plads til den håndskrevne note over titlen uden at skubbe knapperne ned i hintet */
@media (min-width:821px) and (max-width:1100px) and (max-height:760px){
  .haandnote{display:none}
}