/*
 * Dokumentliste.
 *
 * Consumes design tokens from tokens.css; no new colours/spacing introduced,
 * consistent with Afdelingsfaciliteter/Kontaktblok. Dokumentkort
 * follows the confirmed design reference: light card, rounded corners, circular
 * badge with a single generic document icon, centered title.
 */

.padis-block--dokumentliste {
  display: flex;
  flex-direction: column;
  gap: var(--padis-space-md);
  /* Anchor CTAs scroll this element's top edge flush to the viewport top,
     which then hides under the fixed header/pill and operational-message
     bar. Reserve that space so the module lands fully visible below both,
     matching afdelingskort.css/faq.css. */
  scroll-margin-top: calc(var(--padis-header-height, 5rem) + var(--padis-operational-height, 0px) + var(--padis-space-md));
}

.padis-dokumentliste__title {
  margin-bottom: var(--padis-space-md);
  font-size: 1.5rem;
}

/* Kategorier (pills): reuses the site's existing nav-pill tokens
   (--padis-nav-pill-*) so the filter pills match the header nav's pill style
   instead of introducing a new visual language. */
.padis-dokumentliste__pills {
  display: flex;
  flex-wrap: wrap;
  gap: var(--padis-space-sm);
  margin-bottom: var(--padis-space-md);
}

.padis-dokumentliste__pill {
  font: inherit;
  border: none;
  cursor: pointer;
  border-radius: 999px;
  padding: var(--padis-nav-pill-padding-block) var(--padis-nav-pill-padding-inline);
  background-color: var(--padis-color-surface-alt);
  color: var(--padis-color-text);
  transition: background-color var(--padis-header-transition), color var(--padis-header-transition);
}

.padis-dokumentliste__pill:hover {
  background-color: var(--padis-nav-pill-hover);
  color: var(--padis-nav-pill-text);
}

.padis-dokumentliste__pill.is-active {
  background-color: var(--padis-nav-pill-bg);
  color: var(--padis-nav-pill-text);
}

.padis-dokumentliste__panel {
  display: none;
}

.padis-dokumentliste__panel.is-active {
  display: block;
}

/* Dokumentliste (compact list) */

.padis-dokumentliste__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}

.padis-dokumentliste__list-row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--padis-space-sm);
  padding-block: var(--padis-space-sm);
  border-bottom: 1px solid var(--padis-color-border);
  font-size: 0.9375rem;
}

.padis-dokumentliste__list-row:last-child {
  border-bottom: none;
}

.padis-dokumentliste__list-title {
  font-weight: 700;
}

.padis-dokumentliste__list-description,
.padis-dokumentliste__list-date {
  color: var(--padis-color-text-muted);
}

/* Per-file-type icon (list and card): a plain coloured square
   with the extension's short label, themed via currentColor/tokens rather than
   embedding per-type raster/vector artwork. */
.padis-dokumentliste__list-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 0.25rem;
  font-size: 0.625rem;
  font-weight: 700;
  color: var(--padis-color-on-primary);
  background-color: var(--padis-color-text-muted);
  flex-shrink: 0;
}

.padis-dokumentliste__list-icon-glyph::after {
  content: "DOC";
}

.padis-dokumentliste__list-icon--pdf {
  background-color: var(--padis-color-alert);
}
.padis-dokumentliste__list-icon--pdf .padis-dokumentliste__list-icon-glyph::after {
  content: "PDF";
}

.padis-dokumentliste__list-icon--word {
  background-color: var(--padis-color-primary);
}
.padis-dokumentliste__list-icon--word .padis-dokumentliste__list-icon-glyph::after {
  content: "DOC";
}

.padis-dokumentliste__list-icon--excel {
  background-color: var(--padis-color-primary-dark);
}
.padis-dokumentliste__list-icon--excel .padis-dokumentliste__list-icon-glyph::after {
  content: "XLS";
}

.padis-dokumentliste__list-icon--powerpoint {
  background-color: var(--padis-color-primary-darker);
}
.padis-dokumentliste__list-icon--powerpoint .padis-dokumentliste__list-icon-glyph::after {
  content: "PPT";
}

.padis-dokumentliste__list-icon--image {
  background-color: var(--padis-color-text);
}
.padis-dokumentliste__list-icon--image .padis-dokumentliste__list-icon-glyph::after {
  content: "IMG";
}

.padis-dokumentliste__list-icon--generic {
  background-color: var(--padis-color-text-muted);
}

/* Dokumentkort (document cards) */

.padis-dokumentliste__cards {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--padis-space-md);
  list-style: none;
  margin: 0;
  padding: 0;
}

.padis-dokumentliste__cards[data-padis-dokumentliste-cards-per-row="3"] {
  grid-template-columns: repeat(3, 1fr);
}

.padis-dokumentliste__card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  border: 1px solid var(--padis-color-border);
  border-radius: var(--padis-radius);
  background-color: var(--padis-color-surface);
  padding: var(--padis-space-md);
}

/* Per-file-type badge on the card: reuses the list icon's colour and label
   (list-icon--pdf/word/...), only larger. */
.padis-dokumentliste__card-icon {
  width: 3rem;
  height: 3rem;
  border-radius: 0.5rem;
  font-size: 0.8125rem;
  margin-bottom: var(--padis-space-sm);
}

.padis-dokumentliste__card-title {
  margin: 0 0 0.2em;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.3;
  /* Clamp to 2 lines and reserve that space up front (rather than letting the
     card grow to fit however many lines a title wraps to) so cards stay the
     same height regardless of title length - both within a row and across
     categories/panels with very different document titles. */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: calc(1.3em * 2);
  word-break: break-word;
}

.padis-dokumentliste__card-description,
.padis-dokumentliste__card-date {
  color: var(--padis-color-text-muted);
  font-size: 0.875rem;
}

.padis-dokumentliste__unavailable {
  color: var(--padis-color-text-muted);
  font-size: 0.875rem;
  font-weight: 400;
}

/* Visually-hidden text alternative for the file-type icons: the
   icon itself stays aria-hidden, but the file-type name must still be readable
   by assistive technology. No shared sr-only/visually-hidden utility exists
   elsewhere in the codebase (checked site.css and other components), so it is
   defined locally here, using the standard clip-based pattern. */
.padis-dokumentliste__visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Mobile/tablet: 2/row tablet, 1/row mobile below desktop, regardless of the
   editor-chosen 3-vs-4 desktop column count (only desktop is
   editor-configurable). */
@media (max-width: 64rem) {
  .padis-dokumentliste__cards,
  .padis-dokumentliste__cards[data-padis-dokumentliste-cards-per-row="3"] {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 40rem) {
  .padis-dokumentliste__cards,
  .padis-dokumentliste__cards[data-padis-dokumentliste-cards-per-row="3"] {
    grid-template-columns: 1fr;
  }

  .padis-dokumentliste__list-row {
    flex-direction: column;
    align-items: flex-start;
  }
}