/* ============================================================
   LAWO – Katalog (arkiv + forside)
   Release-kort, rutenett og verktøylinje. Bygd kun på tokens.css.
   Mobil-først: rutenettet vokser fra 2 kolonner og oppover.
   ============================================================ */

/* ---------- Rutenett ---------- */
.release-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr)) /* GRID-FIKS: 1fr=minmax(auto,1fr) — bred ubrytelig rad i ETT kort (fysisk-dato-linja) eser ut sporet og klemmer naboene; minmax(0,1fr) gjør sporene garantert like */;
  gap: var(--space-5);
  margin: 0;
  padding: 0;
  list-style: none;
}

@media (min-width: 560px) {
  .release-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 860px) {
  .release-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-6); }
}
@media (min-width: 1100px) {
  .release-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}

/* ---------- Kort ---------- */
.release-card {
  display: flex;
  flex-direction: column;
  color: var(--color-ink);
  text-decoration: none;
}
.release-card:hover { text-decoration: none; }

.release-card__cover {
  position: relative;        /* posisjonering-kontekst for intern live-prikk */
  aspect-ratio: 1 / 1;
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--color-paper-warm);
  box-shadow: var(--shadow-sm);
  transition: box-shadow var(--transition-fast), transform var(--transition-fast);
  transform-origin: center;
}
/* Diskret hover-løft: svak skalering + myk skygge (fotogalleriets uttrykk).
   Kun transform – aldri width/height – så ingen layout-shift. */
.release-card:hover .release-card__cover,
.release-card:focus-visible .release-card__cover {
  box-shadow: var(--shadow-md);
  transform: scale(1.03);
}

.release-card__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Nøytral plassholder når cover mangler – aldri et brukket bilde. */
.release-card__placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-4);
  background: var(--color-paper-warm);
  color: var(--color-ink-soft);
  font-family: var(--font-display);
  font-size: var(--fs-500);
  text-align: center;
}

.release-card__title {
  font-family: var(--font-display);
  font-size: var(--fs-400);
  font-weight: var(--fw-medium);
  line-height: var(--lh-tight);
  margin: var(--space-3) 0 var(--space-1);
}

.release-card__meta {
  font-size: var(--fs-300);
  color: var(--color-ink-soft);
  margin: 0;
}

/* Valgfri rolle-/kontekstlinje (f.eks. i diskografi) */
.release-card__note {
  font-size: var(--fs-300);
  color: var(--color-accent);
  margin: var(--space-1) 0 0;
}

/* ---------- Rikt forsidekort (kun «New releases») ---------- */
.release-card-rich {
  display: flex;
  flex-direction: column;
  color: var(--color-ink);
  height: 100%;              /* JEVN HØYDE: fyll grid-cellen → alle kort i raden like høye */
}

.release-card-rich__cover {
  display: block;
  position: relative;        /* posisjonering-kontekst for intern live-prikk */
  aspect-ratio: 1 / 1;
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--color-paper-warm);
  box-shadow: var(--shadow-sm);
  transition: box-shadow var(--transition-fast), transform var(--transition-fast);
  transform-origin: center;
}

.release-card-rich__cover:hover,
.release-card-rich__cover:focus-visible {
  box-shadow: var(--shadow-md);
  transform: scale(1.03);
}
.release-card-rich__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* GRID-FIKS A: fysisk-dato-linja (ferdiglogikk-retensjonen) paa EGEN linje — inline i
   Deadline-raden ga en ubrytelig bred rad som utvidet grid-sporet (rotaarsaken til
   2x-covers i work order). */
.release-card-rich__fysisk-gjenstaar { display: block; }

.release-card-rich__placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-4);
  background: var(--color-paper-warm);
  color: var(--color-ink-soft);
  font-family: var(--font-display);
  font-size: var(--fs-500);
  text-align: center;
}

/* Handlingslenker (lytt | kjøp | e-booklet) */
.release-card-rich__actions {
  font-size: var(--fs-300);
  margin: var(--space-3) 0 0;
}
.release-card-rich__action {
  color: var(--color-accent);
  text-decoration: none;
}
.release-card-rich__action:hover { text-decoration: underline; }
.release-card-rich__sep {
  color: var(--color-ink-soft);
  margin: 0 var(--space-2);
}

.release-card-rich__title {
  font-family: var(--font-display);
  font-size: var(--fs-400);
  font-weight: var(--fw-medium);
  line-height: var(--lh-tight);
  margin: var(--space-2) 0 var(--space-1);
}
.release-card-rich__title a {
  color: var(--color-ink);
  text-decoration: none;
}
.release-card-rich__title a:hover { text-decoration: underline; }

/* LWX-KORT (H272 2.3g): prosjektnummer under tittelen på Project-lista (lite, grått). */
.release-card-rich__prosjektnr {
  font-size: var(--fs-200, 0.75rem);
  color: var(--color-ink-soft);
  margin: 0 0 var(--space-1);
}

/* Kombinert kreditt-linje «komponist · artister» under tittelen (dempet). */
.release-card-rich__credits {
  font-size: var(--fs-300);
  color: var(--color-ink-soft);
  margin: 0 0 var(--space-1);
}
.release-card-rich__credits a {
  color: var(--color-accent);
  text-decoration: none;
}
.release-card-rich__credits a:hover { text-decoration: underline; }

/* Fakta-linje LWC · år · format (dempet OG mindre enn kreditt-linja). */
.release-card-rich__meta {
  font-size: var(--fs-200, 0.75rem);
  color: var(--color-ink-soft);
  margin: 0;
}

/* «N omtaler» → albumsidas #reviews (KUN diskografi). Siste linje: bunn-justert. */
.release-card-rich__omtaler {
  font-size: var(--fs-300);
  margin: var(--space-3) 0 0;
  margin-top: auto;          /* JEVN HØYDE: skyv siste linje til bunnen av kortet */
}
.release-card-rich__omtaler a {
  color: var(--color-accent);
  text-decoration: none;
}
.release-card-rich__omtaler a:hover { text-decoration: underline; }

/* Anmelder-/prislogo-stripe: NAKNE merker, ingen chip. Logofilene er trimmet
   for innebygd marg (assets/img/logoer-trimmet/), så merket selv fyller
   flaten – ingen synlig firkant rundt. Felles midtlinje binder kvadratiske
   merker og brede ordmerker sammen. */
/* PRESSEMERKER-VISNING: rolig FLEX-rad, ÉN fast høyde for ALLE (drop grid + kvadrat/bred-høyde).
   Logoene er alle transparente → flyter uten boks, lik luft, vertikalt sentrert, brekker naturlig. */
.release-card-rich__logos {
  display: flex;
  flex-wrap: wrap;
  align-items: center;       /* vertikalt sentrert i egen linje */
  gap: 10px 16px;            /* lik luft: 10px vertikal (ved brekk) · 16px horisontal */
  margin: var(--space-3) 0 0;
  margin-top: auto;          /* behold bunn-justering (jevn kort-høyde) */
}
.release-card-rich__logo {
  display: inline-flex;
  align-items: center;
  min-width: 0;
}
.release-card-rich__logo img {
  height: 24px;              /* ÉN fast høyde — alle logoer likt */
  width: auto;
  max-width: 185px;          /* sikkerhetsnett: kun de 3 bredeste (AR > 7,71) letterboxes */
  object-fit: contain;       /* bevar proporsjon — aldri strekk */
  display: block;
}
/* logo--bred / logo--kvadrat beholdt LATENT (PHP emitterer dem), men styrer ikke lenger høyde/layout. */
/* Klikkbare logoer (de med lenke): diskret hover så de oppleves klikkbare. */
a.release-card-rich__logo {
  transition: opacity 0.15s ease, transform 0.15s ease;
}
a.release-card-rich__logo:hover {
  opacity: 0.75;
  transform: scale(1.03);
}

/* Redusert bevegelse: behold skygge-tilbakemeldingen, dropp all transform. */
@media (prefers-reduced-motion: reduce) {
  .release-card__cover,
  .release-card-rich__cover,
  a.release-card-rich__logo {
    transition: box-shadow var(--transition-fast);
  }
  .release-card:hover .release-card__cover,
  .release-card:focus-visible .release-card__cover,
  .release-card-rich__cover:hover,
  .release-card-rich__cover:focus-visible,
  a.release-card-rich__logo:hover {
    transform: none;
  }
}

/* ---------- Person-rutenett + kort ---------- */
.person-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-3);
  margin: 0;
  padding: 0;
  list-style: none;
}
@media (min-width: 560px) {
  .person-grid { grid-template-columns: repeat(2, 1fr); gap: var(--space-3) var(--space-5); }
}
@media (min-width: 900px) {
  .person-grid { grid-template-columns: repeat(3, 1fr); }
}

.person-card {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3);
  border-radius: var(--radius-md);
  color: var(--color-ink);
  text-decoration: none;
  transition: background var(--transition-fast);
}
.person-card:hover { background: var(--color-paper-warm); text-decoration: none; }

.person-card__monogram {
  flex: 0 0 auto;
  width: 2.75rem;
  height: 2.75rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-pill);
  background: var(--color-paper-warm);
  color: var(--color-ink-soft);
  font-family: var(--font-display);
  font-size: var(--fs-400);
  letter-spacing: 0.02em;
}
/* PERSONKORT-BILDE (H272 2.1c): profilbildet fyller rundingen */
.person-card__monogram--bilde { overflow: hidden; padding: 0; }
.person-card__monogram--bilde img { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: var(--radius-pill); }
.person-card__body { display: flex; flex-direction: column; min-width: 0; }
.person-card__name {
  font-family: var(--font-display);
  font-size: var(--fs-400);
  line-height: var(--lh-tight);
}
.person-card__sub {
  font-size: var(--fs-300);
  color: var(--color-ink-soft);
}

/* ---------- Chips (rolle-type / aktivt filter) ---------- */
.chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}
.chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-pill);
  font-size: var(--fs-300);
  color: var(--color-ink);
  text-decoration: none;
  background: var(--color-paper);
}
.chip:hover { background: var(--color-paper-warm); text-decoration: none; }
.chip--active {
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: var(--color-on-accent);
}
.chip--filter {
  background: var(--color-paper-warm);
  border-color: var(--color-line);
}
.chip--filter .chip__x { font-weight: var(--fw-bold); color: var(--color-accent); }

/* ---------- Instrument-fasett: overskrift + A–Z/Most-bryter ---------- */
.catalog-facet__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  flex-wrap: wrap;
  margin-bottom: var(--space-2);
}
.catalog-facet__head .catalog-toolbar__label { margin: 0; }
.facet-sort {
  display: inline-flex;
  border: 1px solid var(--color-line);
  border-radius: var(--radius-pill);
  overflow: hidden;
}
.facet-sort__btn {
  appearance: none;
  -webkit-appearance: none;
  border: 0;
  background: transparent;
  font-family: var(--font-body);
  font-size: var(--fs-300);
  color: var(--color-ink-soft);
  padding: var(--space-1) var(--space-3);
  line-height: 1.7;
  cursor: pointer;
}
.facet-sort__btn + .facet-sort__btn { border-left: 1px solid var(--color-line); }
.facet-sort__btn:hover { background: var(--color-paper-warm); color: var(--color-ink); }
.facet-sort__btn.is-active {
  background: var(--color-accent);
  color: var(--color-on-accent);
}

/* ---------- Søkefelt ---------- */
.catalog-search { display: flex; gap: var(--space-2); }
.catalog-search input[type="search"] {
  font-family: var(--font-body);
  font-size: var(--fs-400);
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-sm);
  background: var(--color-paper);
  color: var(--color-ink);
  min-width: 12rem;
}

/* ---------- Verktøylinje (sortering + filter) ---------- */
.catalog-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--space-4);
  margin-bottom: var(--space-6);
}
.catalog-toolbar__field {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}
.catalog-toolbar__label {
  font-size: var(--fs-300);
  color: var(--color-ink-soft);
}
.catalog-toolbar select {
  font-family: var(--font-body);
  font-size: var(--fs-400);
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-sm);
  background: var(--color-paper);
  color: var(--color-ink);
}
.catalog-count {
  margin-left: auto;
  font-size: var(--fs-300);
  color: var(--color-ink-soft);
}

/* Person-velger (rolle + søkbart navn) */
.catalog-picker { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.catalog-picker input[type="text"] {
  font-family: var(--font-body);
  font-size: var(--fs-400);
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-sm);
  background: var(--color-paper);
  color: var(--color-ink);
  min-width: 11rem;
}

/* ---------- Paginering ---------- */
.pagination {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  justify-content: center;
  align-items: center;
  margin-top: var(--space-7);
}
.pagination a,
.pagination span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.5rem;
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-sm);
  font-size: var(--fs-400);
  color: var(--color-ink);
  text-decoration: none;
}
.pagination a:hover {
  background: var(--color-paper-warm);
  text-decoration: none;
}
.pagination .is-current {
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: var(--color-on-accent);
}

/* ---------- A–Å-rad (person-arkiv) ---------- */
.alpha-bar {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  justify-content: center;
  margin-top: var(--space-7);
}
.alpha-bar .alpha {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.25rem;
  padding: var(--space-2);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-sm);
  font-size: var(--fs-400);
  font-variant-numeric: tabular-nums;
  color: var(--color-ink);
  text-decoration: none;
}
.alpha-bar a.alpha:hover {
  background: var(--color-paper-warm);
  text-decoration: none;
}
.alpha-bar .alpha--current {
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: var(--color-on-accent);
}
/* Tomme bokstaver: dempet og ikke-klikkbare. */
.alpha-bar .alpha--empty {
  color: var(--color-ink-soft);
  opacity: 0.4;
  pointer-events: none;
}
@media (max-width: 640px) {
  .alpha-bar { gap: 0.3rem; }
  .alpha-bar .alpha {
    min-width: 1.9rem;
    padding: var(--space-1) var(--space-2);
    font-size: var(--fs-300);
  }
}

/* ---------- Forside-hero + seksjoner ---------- */
.home-hero {
  /* H1 er visuelt skjult (screen-reader-text). Behold en rolig topp-luft så
     «New releases» rykker pent opp; ingen bunn-padding når hero er tom. */
  padding-block: var(--space-7) 0;
}
.home-hero__title {
  font-size: var(--fs-900);
  margin-bottom: var(--space-4);
  max-width: 18ch;
}
.home-hero__lead {
  font-size: var(--fs-500);
  color: var(--color-ink-soft);
  max-width: var(--container-text);
}

.home-section { margin-bottom: var(--space-8); }
.home-section__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-4);
  margin-bottom: var(--space-5);
}
.home-section__head h2 { margin: 0; font-size: var(--fs-700); }

/* ---------- Arkivhode ---------- */
.archive-head {
  padding-block: var(--space-7) var(--space-5);
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-4);
  flex-wrap: wrap;
}
.archive-head h1 { margin-bottom: var(--space-2); }
/* Telling + diskret hopp-lenke gruppert til høyre ved overskriften. */
.archive-head__meta {
  display: flex;
  align-items: baseline;
  gap: var(--space-4);
}
.archive-head__meta .catalog-count { margin-left: 0; }
.archive-head__filters {
  font-size: var(--fs-300);
  color: var(--color-ink-soft);
  white-space: nowrap;
}
.archive-head__filters:hover { color: var(--color-accent); }

/* Filter-/fasettblokken nederst på katalogen. */
.catalog-filters {
  margin-top: var(--space-8);
  padding-top: var(--space-6);
  border-top: 1px solid var(--color-line);
  scroll-margin-top: var(--space-5);
}

/* KATALOG-SITATER 39: sitatblokka som erstatter logo-stripa ved >=1 groent sitat.
   Sitatet velges tilfeldig ved sidelast og staar deretter STATISK (ingen syklus);
   min-height reserverer plass (pull er 1-3 linjer) -> kort-hoeyden uavhengig av
   hvilket sitat som ble valgt (bokfoert grep). */
.release-card-rich__sitater { min-height: 6.5em; margin-top: auto; }
.release-card-rich__sitat { margin: 0; }
.release-card-rich__sitat-tekst { margin: 0; font-size: var(--fs-300, .9rem); font-style: italic; line-height: 1.45; }
.release-card-rich__sitat-kilde { margin-top: 2px; font-size: var(--fs-200, .8rem); color: var(--color-ink-soft, #6b6355); }
.release-card-rich__sitat-lenke { display: inline-block; margin-top: 4px; font-size: var(--fs-200, .8rem); }