/* Kategorier (/kategorier) — the model register: a big heading beside the house rules (same model, at least 20 % and 250 kr. under the typical price, the rules per marketplace), then nine ruled rows with channel, marketplaces, example models and the search facts under sticky column headings, then how to follow only some channels, and a link on to Priser. */

/* 1 · Head: title and the rules that apply everywhere -------------------- */
.cat-head{padding-block:clamp(2rem,1rem + 4vw,4.5rem) var(--space-2xl)}
.cat-head__grid{display:grid;gap:var(--space-l) var(--space-xl)}
.cat-head__title{font-size:clamp(2.75rem,1.2rem + 5.8vw,6.25rem);line-height:.95;letter-spacing:-.055em}
.cat-head__title span{display:block;color:var(--muted)}

.cat-rules{padding:var(--space-m);border-radius:var(--r-l);background:var(--paper)}
.cat-rules__title{font-size:var(--fs-h4);letter-spacing:-.02em}
.cat-rules__list{list-style:none;margin:var(--space-xs) 0 0;padding:0}
.cat-rules__list li{padding-block:.7rem;border-top:1px solid var(--line);font-size:var(--fs-sm);line-height:1.5;color:var(--muted)}
.cat-rules__list strong{display:block;color:var(--ink)}
@media (min-width:1000px){
  .cat-head__grid{grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--grid-gap);align-items:start}
  .cat-head__title{grid-column:1/-1}
  .cat-head__copy{grid-column:1/span 6;padding-top:var(--space-s)}
  .cat-rules{grid-column:8/span 5}
}

/* 2 · The register --------------------------------------------------------
   Phones and tablets: each row stacks name, marketplaces, the example models and
   the facts; every label is written in the row. From 1000px the rows form a table
   under sticky column headings (.cat-cols) that use the same column template. The
   headings and the rows share .cat-table, so the headings let go after the last row. */
.cat-register-sec{padding-bottom:var(--section)}
.cat-register-sec>.wrap{--cat-cols:2rem minmax(0,1fr) 3.5rem;--cat-gap:var(--space-s)}

.cat-cols{display:none}

.cat-register{list-style:none;margin:0;padding:0;border-top:2px solid var(--ink)}
.cat-row{display:grid;grid-template-columns:var(--cat-cols);grid-template-areas:"no name thumb" "no markets thumb" "examples examples examples" "facts facts facts";column-gap:var(--cat-gap);row-gap:var(--space-2xs);padding-block:var(--space-m) var(--space-l);border-bottom:1px solid var(--line-strong);scroll-margin-top:3rem}
.cat-row:target{background:var(--mint-soft);box-shadow:0 0 0 var(--space-s) var(--mint-soft)}

.cat-row__no{grid-area:no;padding-top:.45rem;font-size:var(--fs-sm);font-weight:600;font-variant-numeric:tabular-nums;color:var(--muted)}
.cat-thumb{grid-area:thumb;align-self:start;width:100%;aspect-ratio:4/3;margin-top:.3rem;border-radius:var(--r-s);background:var(--paper) center/cover no-repeat}
.cat-thumb--iphone{background-image:url("/assets/mock/iphone.svg")}
.cat-thumb--grafikkort{background-image:url("/assets/mock/grafikkort.svg")}
.cat-thumb--konsol{background-image:url("/assets/mock/konsol.svg")}
.cat-thumb--airpods{background-image:url("/assets/mock/airpods.svg")}
.cat-thumb--lego{background-image:url("/assets/mock/lego.svg")}
.cat-thumb--lampe{background-image:url("/assets/mock/lampe.svg")}
.cat-thumb--stol{background-image:url("/assets/mock/stol.svg")}
.cat-thumb--cykel{background-image:url("/assets/mock/cykel.svg")}
.cat-thumb--dyson{background-image:url("/assets/mock/dyson.svg")}

.cat-row__name{grid-area:name;min-width:0}
.cat-row__name h3{font-size:clamp(1.5rem,1.15rem + 1.3vw,2.25rem);line-height:1.05;letter-spacing:-.04em}
.cat-row__name .channel{display:block;margin-top:.35rem;font-size:var(--fs-sm);color:var(--muted);white-space:normal;overflow-wrap:anywhere}

/* Marketplaces: a blue pill for DBA and Vinted, an outlined one for DBA only */
.cat-row__markets{grid-area:markets;align-self:center;justify-self:start;padding:.2rem .7rem;border-radius:var(--r-pill);background:var(--blue);color:var(--cream);font-size:var(--fs-sm);font-weight:700;line-height:1.4;white-space:nowrap}
.cat-row__markets--dba{background:transparent;box-shadow:inset 0 0 0 1.5px var(--line-strong);color:var(--ink)}

/* The example models: plain chips, the note on how finely we compare under them */
.cat-examples{grid-area:examples;padding-block:.35rem .2rem}
.cat-examples__label{font-size:var(--fs-xs);font-weight:700;color:var(--muted)}
.cat-examples__list{list-style:none;display:flex;flex-wrap:wrap;gap:.4rem;margin:.35rem 0 0;padding:0}
.cat-ex{padding:.2rem .65rem;border-radius:var(--r-pill);background:var(--paper);box-shadow:inset 0 0 0 1px var(--line);font-size:var(--fs-sm);font-weight:600;line-height:1.4}
.cat-examples__note{margin-top:.45rem;max-width:34em;font-size:var(--fs-sm);line-height:1.5;color:var(--muted)}

/* Facts under each row */
.cat-row__facts{grid-area:facts;display:grid;gap:.6rem var(--space-m);margin-top:var(--space-2xs)}
.cat-row__facts dt{font-size:var(--fs-xs);font-weight:700;color:var(--muted)}
.cat-row__facts dd{margin:.1rem 0 0;font-size:var(--fs-sm);line-height:1.55}
.cat-row__facts .term{margin-block:.1rem}
.cat-x{font-family:var(--font-mono);font-size:var(--fs-xs) !important;letter-spacing:0;color:var(--muted)}
.cat-x--none{font-family:var(--font-sans);font-size:var(--fs-sm) !important}

.cat-register__note{margin-top:var(--space-m);max-width:44em}

@media (min-width:640px){
  .cat-register-sec>.wrap{--cat-cols:2.25rem minmax(0,1fr) auto 5rem;--cat-gap:var(--space-m)}
  .cat-row{grid-template-areas:"no name markets thumb" ". examples examples examples" ". facts facts facts"}
  .cat-row__markets{justify-self:end}
  .cat-row__facts{grid-template-columns:minmax(0,5fr) minmax(0,3fr) minmax(0,4fr)}
}
@media (min-width:1000px){
  .cat-register-sec>.wrap{--cat-cols:2.25rem 4.75rem minmax(0,3fr) minmax(0,4.6fr) minmax(9.5rem,1.2fr);--cat-gap:var(--space-m)}
  /* Sticky column headings in the rows' own grid */
  .cat-cols{position:sticky;top:var(--header-h);z-index:5;display:grid;grid-template-columns:var(--cat-cols);column-gap:var(--cat-gap);align-items:end;padding:.55rem 0 .5rem;border-bottom:2px solid var(--ink);background:rgba(255,254,250,.96);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);font-size:var(--fs-xs);font-weight:600;color:var(--muted)}
  .cat-cols__name{grid-column:1/span 3}
  .cat-cols__examples{grid-column:4}
  .cat-cols__markets{grid-column:5;text-align:right}
  .cat-register{border-top:0}
  .cat-row{grid-template-areas:"no thumb name examples markets" ". . facts facts facts";row-gap:var(--space-s);padding-block:var(--space-l)}
  .cat-row__markets{align-self:start;margin-top:.35rem}
  .cat-thumb{margin-top:.15rem}
  .cat-examples{padding:0}
  /* The column heading names the examples; the in-row label stays for screen readers */
  .cat-examples__label{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
  .cat-examples__list{margin-top:.2rem}
  .cat-row__facts{margin-top:0}
}

/* 3 · Follow only some channels ------------------------------------------ */
.cat-follow{padding-block:var(--section)}
.cat-follow__grid{display:grid;gap:var(--space-xl);align-items:center}
.cat-follow__copy h2{max-width:9em}
.cat-follow__copy p{margin-top:var(--space-s);max-width:32em}
.cat-follow__copy p+p{color:var(--muted)}
.cat-follow__mock{width:100%;max-width:420px;margin-inline:auto}
.cat-mute{font-size:.9375rem}
.cat-mute__body{padding:var(--space-2xs) var(--space-2xs) var(--space-s)}
.cat-mute__list{list-style:none;margin:0;padding:0}
.cat-mute__list li{display:flex;align-items:center;gap:.5rem;padding:.38rem .6rem;border-radius:6px}
.cat-mute__list li::before{content:"#";color:var(--dc-muted)}
.cat-mute__list li::after{content:"";margin-left:auto;font-family:var(--font-mono);font-size:.6875rem}
.cat-mute__list .is-on{color:var(--dc-text);font-weight:700}
.cat-mute__list .is-on::after{content:"lyd til";padding:.05rem .45rem;border-radius:var(--r-pill);background:var(--mint);color:var(--ink);font-weight:600}
/* Muted channels read as muted through the label and the weight, not through low contrast. */
.cat-mute__list .is-muted{color:rgba(167,175,199,.85)}
.cat-mute__list .is-muted::after{content:"lyd fra";color:rgba(167,175,199,.85)}
@media (min-width:900px){
  .cat-follow__grid{grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--grid-gap)}
  .cat-follow__copy{grid-column:1/span 5}
  .cat-follow__mock{grid-column:7/span 6;margin:0}
}

/* 4 · The selection can change ------------------------------------------- */
.cat-change{padding-block:var(--section) var(--space-2xl)}
.cat-change__grid{display:grid;gap:var(--space-m);padding-top:var(--space-l);border-top:2px solid var(--ink)}
.cat-change__text p{max-width:34em}
.cat-change__ask{margin-top:var(--space-s);font-weight:700}
.cat-change__ask a{overflow-wrap:anywhere}
@media (min-width:900px){
  .cat-change__grid{grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--grid-gap)}
  .cat-change__title{grid-column:1/span 5}
  .cat-change__text{grid-column:7/span 6;padding-top:.5rem}
}

/* 5 · End: the link on to Priser ------------------------------------------ */
.cat-next{padding-bottom:var(--space-xl)}