/* HS2 – kataloger: videoforside (39), helsekatalog (41), litteratur (42), globalsøk (43/43N).
   Mobil først; 768 og 1200 er avledninger. Prefiks kat-. */

/* ---------- Hero, lys (41/42) og navy (39) ---------- */
.kat-hero { background: var(--hs-soft); border-bottom: 1px solid var(--hs-border); }
.kat-hero .inner { display: flex; flex-direction: column; gap: 14px; padding-top: 24px; padding-bottom: 20px; }
.kat-hero h1 { font-size: 28px; font-weight: 700; line-height: 1.15; color: var(--hs-navy); }
.kat-hero .lead { font-size: 15px; line-height: 1.5; color: var(--hs-text); }
.kat-hero .lead a { font-weight: 600; }
.kat-hero-navy { background: var(--hs-navy); background-image: linear-gradient(205deg, #004867, #0091CF); color: #fff; border: 0; }
.kat-hero-navy h1 { color: #fff; }
.kat-hero-navy .lead { color: #D7EAF4; }
.kat-badge { display: inline-flex; align-self: flex-start; align-items: center; gap: 6px; padding: 6px 10px; border-radius: 999px; background: rgba(255,255,255,.14); color: #fff; font-size: 12px; font-weight: 600; line-height: 1.2; }
.kat-facts { display: flex; flex-wrap: wrap; gap: 18px; font-size: 13px; color: #BBDCEC; }
.kat-facts strong { color: #fff; font-size: 15px; font-weight: 700; margin-right: 5px; }

/* Søkefelt, rektangulært (41/42) og pille (39/43) */
.kat-search { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 14px; border-radius: 12px; background: #fff; border: 1px solid var(--hs-border); color: var(--hs-muted); }
.kat-search .ic { color: var(--hs-muted); flex: none; }
.kat-search input { flex: 1; min-width: 0; border: 0; background: none; font: inherit; font-size: 15px; color: var(--hs-text); outline: none; }
.kat-search input::placeholder { color: var(--hs-muted); }
.kat-search .go { display: none; }
.kat-search-pill { min-height: 52px; padding: 6px 6px 6px 14px; border-radius: 999px; border: 0; }
.kat-search-pill input { font-weight: 600; }
.kat-search-pill input::placeholder { font-weight: 400; }
.kat-search-pill .clear { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 999px; color: var(--hs-muted); }
.kat-search-pill .clear:hover { background: var(--hs-soft); }
.kat-search-pill .go { display: inline-flex; flex: none; align-items: center; justify-content: center; gap: 7px; width: 40px; height: 40px; border-radius: 999px; background: var(--hs-blue); color: #fff; font-size: 15px; font-weight: 600; }
.kat-search-pill .go .ic { color: #fff; }
.kat-search-pill .go { cursor: pointer; transition: background .13s, transform .08s; }
.kat-search-pill .go:hover { background: var(--hs-navy); text-decoration: none; }
.kat-search-pill .go:active { background: var(--hs-navy); transform: scale(.96); }
.kat-search-pill .go:focus-visible { outline: 3px solid var(--hs-accent); outline-offset: 2px; }
.kat-search-pill .clear:active { background: var(--hs-border); }
.kat-search-pill .go .txt { display: none; }
.kat-hero .chips { gap: 7px; }
.kat-hero .chip { padding: 8px 11px; font-size: 13px; color: var(--hs-text); }
.kat-hero .chip-active { color: #fff; }

/* ---------- Seksjoner ---------- */
.kat-section { padding-top: 24px; padding-bottom: 24px; }
.kat-section .head { display: flex; flex-direction: column; gap: 4px; margin-bottom: 12px; }
.kat-section .head h2 { font-size: 19px; font-weight: 700; line-height: 1.25; color: var(--hs-navy); }
.kat-section .head p { font-size: 13px; line-height: 1.5; color: var(--hs-text); }
.kat-soft { background: var(--hs-soft); border-top: 1px solid var(--hs-border); border-bottom: 1px solid var(--hs-border); }
.kat-more { display: flex; align-items: center; justify-content: center; gap: 6px; min-height: 40px; padding: 12px 14px; border-radius: 10px; background: var(--hs-soft); color: var(--hs-blue); font-size: 13px; font-weight: 600; }
.kat-more:hover { text-decoration: none; background: #e6eef2; }

/* Gruppehode (41 «Fagområder · 23», 43 tittelrad) */
.kat-group-head { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.kat-group-head .ic { color: var(--hs-navy); flex: none; }
.kat-group-head h2 { font-size: 17px; font-weight: 700; line-height: 1.25; color: var(--hs-navy); }
.kat-group-head .n { font-size: 12px; font-weight: 600; color: var(--hs-muted); }
.kat-group-head .line { flex: 1; height: 1px; background: var(--hs-border); }
.kat-group-head .all { display: inline-flex; align-items: center; gap: 4px; font-size: 14px; font-weight: 600; color: var(--hs-blue); white-space: nowrap; }

/* ---------- Ikonfliser (39 «Velg behandling») ---------- */
.kat-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.kat-tile { display: flex; flex-direction: column; gap: 8px; padding: 14px; border: 1px solid var(--hs-border); border-radius: 14px; background: #fff; color: inherit; min-width: 0; }
.kat-tile:hover { text-decoration: none; border-color: var(--hs-border-strong); background: var(--hs-soft); }
.kat-tile .icon { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 10px; background: var(--hs-soft); color: var(--hs-blue); }
.kat-tile:hover .icon { background: #fff; }
.kat-tile .img { display: block; height: 98px; border-radius: 10px; overflow: hidden; background: var(--hs-soft); }
.kat-tile .img img { display: block; width: 100%; height: 100%; object-fit: cover; }
.kat-tile .name { font-size: 14px; font-weight: 600; line-height: 1.25; color: var(--hs-navy); overflow-wrap: break-word; hyphens: auto; }
.kat-tile .n { font-size: 12px; line-height: 1.3; color: var(--hs-muted); }

/* ---------- Fagområdekort med bilde (41) ---------- */
.kat-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.kat-card { display: flex; flex-direction: column; border: 1px solid var(--hs-border); border-radius: 14px; background: #fff; overflow: hidden; color: inherit; min-width: 0; }
.kat-card:hover { text-decoration: none; border-color: var(--hs-border-strong); }
.kat-card .img { position: relative; display: block; aspect-ratio: 174 / 98; background: var(--hs-soft); color: var(--hs-blue); }
.kat-card .img img { width: 100%; height: 100%; object-fit: cover; }
.kat-card .img .ph { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; }
.kat-card .vid { position: absolute; top: 8px; left: 8px; display: inline-flex; align-items: center; gap: 4px; padding: 4px 7px; border-radius: 999px; background: rgba(0,58,83,.84); color: #fff; font-size: 10px; font-weight: 700; line-height: 1.2; }
.kat-card .vid:hover { background: var(--hs-navy); text-decoration: none; }
.kat-card .t { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px 12px; }
.kat-card .name { font-size: 14px; font-weight: 700; line-height: 1.3; color: var(--hs-navy); }
.kat-card .n { font-size: 12px; line-height: 1.3; color: var(--hs-muted); }
.kat-card-wrap { position: relative; min-width: 0; }
.kat-card-wrap .vid { position: absolute; top: 8px; left: 8px; z-index: 1; display: inline-flex; align-items: center; gap: 4px; padding: 4px 7px; border-radius: 999px; background: rgba(0,58,83,.84); color: #fff; font-size: 10px; font-weight: 700; line-height: 1.2; }
.kat-card-wrap .vid:hover { background: var(--hs-navy); text-decoration: none; }
.kat-seealso { display: flex; flex-direction: column; gap: 6px; margin-top: 20px; padding: 16px; border-radius: 14px; background: var(--hs-soft); border: 1px solid var(--hs-border); font-size: 14px; line-height: 1.5; }
.kat-seealso h2 { font-size: 15px; font-weight: 700; color: var(--hs-navy); }

/* ---------- Tilbyderkort (39) ---------- */
.kat-providers { display: grid; grid-template-columns: 1fr; gap: 10px; }
.kat-provider { display: flex; align-items: center; gap: 12px; padding: 14px; border: 1px solid var(--hs-border); border-radius: 14px; background: #fff; min-width: 0; }
.kat-provider .logo-box { width: 84px; height: 42px; border-radius: 9px; }
.kat-provider .logo-box .placeholder { font-size: 15px; color: var(--hs-blue); }
.kat-provider .info { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
.kat-provider .name { font-size: 15px; font-weight: 700; line-height: 1.3; color: var(--hs-navy); }
.kat-provider .rating-row { font-size: 12px; color: var(--hs-muted); }
.kat-provider .svc { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 600; color: var(--hs-blue); }
.kat-provider .btn-sm { flex: none; }

/* ---------- Bokstavnavigasjon + treffrad (42) ---------- */
.kat-abc { display: flex; flex-direction: column; gap: 8px; padding-top: 16px; }
.kat-abc .lbl { font-size: 11px; font-weight: 700; letter-spacing: .06em; color: var(--hs-muted); }
.kat-abc .row { display: flex; flex-wrap: wrap; gap: 6px; }
.kat-abc .row a { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 32px; border-radius: 8px; background: var(--hs-soft); color: var(--hs-blue); font-size: 13px; font-weight: 700; }
.kat-abc .row a:hover { text-decoration: none; background: #e6eef2; }
.kat-abc .row a.active { background: var(--hs-navy); color: #fff; }
.kat-hits { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 0 10px; font-size: 13px; font-weight: 600; color: var(--hs-text); }
.kat-hits .q { color: var(--hs-muted); }

/* ---------- Artikkelrader (42/43) ---------- */
.kat-articles { display: grid; grid-template-columns: 1fr; gap: 10px; }
.kat-article { display: flex; align-items: center; gap: 12px; padding: 10px; border: 1px solid var(--hs-border); border-radius: 14px; background: #fff; color: inherit; min-width: 0; }
.kat-article:hover { text-decoration: none; border-color: var(--hs-border-strong); background: var(--hs-soft); }
.kat-article img { flex: none; width: 78px; height: 60px; border-radius: 10px; object-fit: cover; background: #DCE4E8; }
.kat-article .t { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.kat-article .name { font-size: 15px; font-weight: 600; line-height: 1.3; color: var(--hs-navy); }
.kat-article .sub { font-size: 12px; color: var(--hs-muted); }
.kat-article .chev { color: var(--hs-muted); flex: none; }

/* Paginering (42) */
.kat-pager { display: flex; align-items: center; gap: 10px; padding: 8px 0 20px; }
.kat-pager a, .kat-pager span.dis { display: inline-flex; flex: none; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 11px; background: var(--hs-soft); color: var(--hs-navy); }
.kat-pager a.next { background: var(--hs-navy); color: #fff; }
.kat-pager a:hover { text-decoration: none; filter: brightness(1.05); }
.kat-pager span.dis { opacity: .4; }
.kat-pager .txt { flex: 1; display: flex; align-items: center; justify-content: center; min-height: 43px; padding: 12px 13px; border: 1px solid var(--hs-border); border-radius: 11px; background: #fff; font-size: 14px; font-weight: 600; color: var(--hs-navy); text-align: center; }

/* ---------- Globalsøk (43) ---------- */
.kat-search-head .inner { gap: 14px; padding-top: 22px; padding-bottom: 16px; }
.kat-search-head h1 { font-size: 19px; }
.kat-search-head .chips { gap: 6px; }
.kat-search-head .chip .n { font-weight: 500; opacity: .8; margin-left: 2px; }
.kat-results { display: flex; flex-direction: column; padding-top: 4px; padding-bottom: 22px; }
.kat-results > .col { display: contents; }
.kat-group { padding-top: 20px; }
.kat-group.g-services { order: 1; }
.kat-group.g-clinics { order: 2; }
.kat-group.g-video { order: 3; }
.kat-group.g-doctors { order: 4; }
.kat-group.g-articles { order: 5; }
.kat-group .kat-more { margin-top: 10px; }
.kat-group .list-row { padding: 14px; }
.kat-group .list-row .label { font-size: 14px; }
.kat-group .list-row .value { font-size: 12px; color: var(--hs-muted); }
.kat-group .list-row .logo-box { width: 78px; height: 39px; border-radius: 9px; }
.kat-group .list-row .avatar { width: 42px; height: 42px; }
.kat-group .list-row .chev { color: var(--hs-muted); margin-left: auto; }
/* Klinikkrad (43M/43T/43D): logoen på egen linje over navn og adresse i en venstre kolonne,
   chevron ytterst til høyre og vertikalt sentrert mot hele korthøyden. */
.kat-group .row-clinic { align-items: center; padding: 14px; }
.kat-group .row-clinic .left { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.kat-group .row-clinic .left .grow { flex: none; width: 100%; }
.kat-group .row-clinic .label { font-size: 14px; }
.kat-group .row-clinic .value { font-size: 12px; color: var(--hs-muted); }
.kat-empty { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; margin: 16px 0 20px; padding: 24px 18px; border-radius: 14px; background: var(--hs-soft); border: 1px solid var(--hs-border); }
.kat-empty .ic { color: var(--hs-navy); }
.kat-empty h2 { font-size: 14px; font-weight: 700; color: var(--hs-navy); }
.kat-empty p { font-size: 13px; line-height: 1.5; color: var(--hs-muted); }
.kat-empty ul { display: flex; flex-direction: column; gap: 4px; padding-left: 18px; list-style: disc; font-size: 13px; line-height: 1.5; color: var(--hs-muted); }
.kat-empty .alt { margin-top: 6px; font-size: 13px; font-weight: 600; color: var(--hs-navy); }
.kat-empty .chips a { color: var(--hs-blue); }
.kat-empty .go { display: inline-flex; align-items: center; gap: 6px; margin-top: 4px; font-size: 14px; font-weight: 600; color: var(--hs-blue); }

/* ---------- 768 ---------- */
@media (min-width: 768px) {
  .kat-hero .inner { gap: 16px; padding-top: 36px; padding-bottom: 28px; }
  .kat-hero h1 { font-size: 40px; }
  .kat-hero .lead { font-size: 17px; }
  .kat-hero .chip { padding: 9px 13px; }
  .kat-hero-navy .inner { padding-top: 40px; padding-bottom: 34px; }
  .kat-badge { padding: 6px 11px; font-size: 13px; }
  .kat-facts { font-size: 14px; gap: 20px; }
  .kat-facts strong { font-size: 16px; }
  .kat-search { min-height: 47px; padding: 0 16px; }
  .kat-search-pill { min-height: 56px; padding: 8px 8px 8px 18px; }
  .kat-search-pill .go { width: auto; height: 40px; padding: 11px 20px; }
  .kat-search-pill .go .txt { display: inline; }
  .kat-section { padding-top: 34px; padding-bottom: 34px; }
  .kat-section .head { margin-bottom: 16px; }
  .kat-section .head h2 { font-size: 24px; }
  .kat-section .head p { font-size: 14px; }
  .kat-tiles { grid-template-columns: repeat(4, 1fr); gap: 12px; }
  .kat-tile .img { height: 120px; }
  .kat-tile .icon { width: 36px; height: 36px; }
  .kat-cards { grid-template-columns: repeat(4, 1fr); gap: 12px; }
  .kat-card .img { aspect-ratio: 167 / 98; }
  .kat-providers { grid-template-columns: 1fr 1fr; gap: 12px; }
  .kat-abc { padding-top: 20px; }
  .kat-abc .row a { flex: 1; width: auto; min-width: 18px; }
  .kat-hits { padding-top: 20px; font-size: 15px; font-weight: 700; }
  .kat-hits .q { font-size: 13px; font-weight: 600; }
  .kat-articles { grid-template-columns: 1fr 1fr; gap: 12px; }
  .kat-pager { padding-top: 14px; padding-bottom: 36px; }
  .kat-search-head .inner { gap: 16px; padding-top: 32px; padding-bottom: 24px; }
  .kat-search-head h1 { font-size: 26px; }
  .kat-search-head .kat-search-pill .go { width: 42px; height: 42px; padding: 0; }
  .kat-search-head .kat-search-pill .go .txt { display: none; }
  .kat-results { display: grid; grid-template-columns: 1fr 1fr; column-gap: 24px; align-items: start; padding-top: 4px; padding-bottom: 36px; }
  .kat-results > .col { display: flex; flex-direction: column; gap: 24px; min-width: 0; }
  .kat-results > .col-l { grid-column: 1; }
  .kat-results > .col-r { grid-column: 2; }
  .kat-group { padding-top: 24px; }
  .kat-group.g-services, .kat-group.g-clinics, .kat-group.g-video, .kat-group.g-doctors, .kat-group.g-articles { order: 0; }
  .kat-empty { margin: 24px 0 36px; padding: 28px 24px; }
}

/* ---------- 1200 ---------- */
@media (min-width: 1200px) {
  .kat-hero .inner { gap: 20px; padding-top: 48px; padding-bottom: 40px; }
  .kat-hero h1 { font-size: 52px; line-height: 1.1; }
  .kat-hero .lead { font-size: 19px; max-width: 900px; }
  .kat-hero .chip { padding: 10px 15px; font-size: 14px; }
  .kat-hero-navy .inner { padding-top: 52px; padding-bottom: 48px; }
  .kat-badge { padding: 7px 13px; font-size: 14px; }
  .kat-search { min-height: 50px; max-width: 720px; padding: 0 18px; }
  .kat-search input { font-size: 16px; }
  .kat-search-pill { min-height: 63px; max-width: 720px; padding: 9px 9px 9px 22px; }
  .kat-search-pill input { font-size: 17px; }
  .kat-search-pill .go { height: 45px; padding: 13px 26px; font-size: 16px; }
  .kat-section { padding-top: 52px; padding-bottom: 52px; }
  .kat-section .head { gap: 5px; margin-bottom: 20px; }
  .kat-section .head h2 { font-size: 30px; }
  .kat-section .head p { font-size: 16px; }
  .kat-tiles { gap: 14px; }
  .kat-tile .img { height: 150px; }
  .kat-tile .name { font-size: 16px; }
  .kat-tile .n { font-size: 13px; }
  .kat-tile .name { font-size: 16px; }
  .kat-tile .n { font-size: 13px; }
  .kat-cards { grid-template-columns: repeat(5, 1fr); gap: 14px; }
  .kat-card .img { aspect-ratio: 229 / 98; }
  .kat-providers { gap: 14px; }
  .kat-abc { padding-top: 26px; gap: 12px; }
  .kat-abc .row { gap: 7px; }
  .kat-abc .row a { height: 40px; border-radius: 9px; font-size: 14px; }
  .kat-hits { padding-top: 28px; font-size: 17px; }
  .kat-hits .q { font-size: 14px; }
  .kat-articles { grid-template-columns: repeat(3, 1fr); gap: 14px; }
  .kat-pager { padding-bottom: 56px; }
  .kat-search-head .inner { gap: 18px; padding-top: 44px; padding-bottom: 32px; }
  .kat-search-head h1 { font-size: 32px; }
  .kat-search-head .kat-search-pill { max-width: 760px; }
  .kat-search-head .kat-search-pill .go { width: 46px; height: 46px; }
  .kat-results { column-gap: 40px; padding-bottom: 56px; }
  .kat-results > .col { gap: 32px; }
  .kat-group { padding-top: 32px; }
  .kat-empty { margin: 32px 0 56px; max-width: 760px; }
}