/* -------------------------------------------------- */
/* GENERELT / MODUL-RAMME */
/* -------------------------------------------------- */

.module--resource-list .container {
  padding-inline: 0;
}

.module--resource-list .blog-card__img {
  position: relative;
}

.module--resource-list .blog-card__tags {
  position: absolute;
  top: 16px;
  right: 16px;
}

@media (min-width: 1650px) {
  .module--resource-list .col:not(.blog-listing-2__empty) {
    width: 25%;
  }
}

/* -------------------------------------------------- */
/* FILTER WRAPPER (NY) */
/*  - styrer layout */
/* -------------------------------------------------- */

.module--resource-list .resource-list-filter-wrapper {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  flex-wrap: wrap;
}

/* Mobil: display knapper nederst */
@media (max-width: 767px) {
  .module--resource-list .resource-list-filter-wrapper {
    flex-direction: column;
  }
}

/* -------------------------------------------------- */
/* FILTERE (SELVE FILTER BLOKKEN)
/* -------------------------------------------------- */

.module--resource-list .resource-list-filter {
  min-width: 0;
}

/* -------------------------------------------------- */
/* FILTER ELEMENTER */
/* -------------------------------------------------- */

.module--resource-list .resource-list-filter__filters {
  display: flex;
  flex-wrap: wrap;
  gap: 14px 27px;
}

.module--resource-list .resource-list-filter__filters + .resource-list-filter__filters {
  margin-top: 22px;
}

.module--resource-list .resource-list-filter__filters + .resource-list-filter__filters--courses {
  padding-top: 15px;
  padding-right: 17px;
  border-top: 1px solid #eee;
}

.module--resource-list .resource-list-filter__filter {
  display: flex;
  align-items: center;
  gap: 24px;
  cursor: pointer;
}

.module--resource-list .resource-list-filter__filter-dropdown-container {
  position: relative;
}

.module--resource-list .resource-list-filter__filter-dropdown {
  display: none;
  position: absolute;
  top: calc(100% + 10px);
  left: 0;
  background: #fff;
  border: 1px solid var(--black-calm-black-60);
  border-radius: 4px;
  padding: 10px;
  z-index: 10;
  flex-direction: column;
  gap: 10px;
  font-size: 15px;
}

.module--resource-list .resource-list-filter__filter-dropdown-container.is-open .resource-list-filter__filter-dropdown {
  display: flex;
}

.module--resource-list .resource-list-filter__filter-dropdown .resource-list-filter__filter {
  justify-content: space-between;
}

.module--resource-list .resource-list-filter__filter-label {
  position: relative;
}

.module--resource-list .resource-list-filter__filter-count {
  min-width: 17px;
  padding: 3px 5px;
  background: #222326;
  color: #fff;
  font-size: 11px;
  position: absolute;
  top: -8px;
  right: -17px;
  border-radius: 20px;
  line-height: 1;
  text-align: center;
}

.module--resource-list .resource-list-filter__filter-chevron {
  width: 20px;
  height: 20px;
}

.module--resource-list .resource-list-filter__filter input[type="checkbox"] {
  appearance: none;
  width: 20px;
  height: 20px;
  margin: 0;
  border: 1px solid var(--black-calm-black-60);
  border-radius: 4px;
  background: #fff;
  cursor: pointer;
  position: relative;
}

.module--resource-list .resource-list-filter__filter input[type="checkbox"]:checked {
  background: #000;
  border-color: #000;
}

.module--resource-list .resource-list-filter__filter input[type="checkbox"]:checked::after {
  content: "✔";
  color: #fff;
  font-size: 10px;
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* -------------------------------------------------- */
/* DISPLAY MODE (GRID / LIST)
/* -------------------------------------------------- */

.module--resource-list .resource-list-filter__display-mode {
  white-space: nowrap;
  display: flex;
  gap: 10px;
}

@media (max-width: 920px) {
  .module--resource-list .resource-list-filter__display-mode {
    flex-basis: 100%;
    align-self: flex-start;
    margin-bottom: 12px;
    order: -1;
  }
}

@media (min-width: 921px) {
  .resource-list-filter-wrapper--has-display-buttons .resource-list-filter--filters {
    padding-top: 8px;
  }
}

/* Knapper */

.module--resource-list .resource-list-filter__display-btn {
  border: 1px solid var(--display-toggle-border);
  background: transparent;
  color: var(--display-toggle-fg);
  border-radius: 999px;
  padding: 7px 18px 7px 14px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  cursor: pointer;
  line-height: 1;
  transition: background-color 0.15s ease,
              color 0.15s ease,
              border-color 0.15s ease;
}

.module--resource-list .resource-list-filter__display-btn:hover {
  border-color: var(--display-toggle-accent);
}

/* Aktiv state */
.module--resource-list .resource-list-filter__display-btn.is-active {
  background: #222326;
  border-color: #222326;
  color: var(--display-toggle-fg-active);
}

.module--resource-list .resource-list-filter__display-btn.is-active .resource-list-filter__display-label,
.module--resource-list .resource-list-filter__display-btn.is-active .resource-list-filter__display-icon {
  color: var(--display-toggle-fg-active);
}

/* SVG: undgå 0x0 */
.module--resource-list .resource-list-filter__display-icon {
  width: 18px;
  height: 18px;
  display: block;
  fill: currentColor;
  flex: 0 0 auto;
}

.module--resource-list .resource-list-filter__display-icon * {
  fill: currentColor;
}

/* List ikon en smule større */
.module--resource-list .resource-list-filter__display-btn--list .resource-list-filter__display-icon {
  width: 20px;
  height: 20px;
}

/* -------------------------------------------------- */
/* EMPTY STATE */
/* -------------------------------------------------- */

.module--resource-list .blog-listing-2__empty {
  margin-top: 24px;
  display: none;
}

/* -------------------------------------------------- */
/* GRID VIEW */
/* -------------------------------------------------- */

.module--resource-list .blog-listing-2 .blog-card__img,
.module--resource-list .blog-listing-2 .blog-card__img img {
  aspect-ratio: 1.35;
}

.module--resource-list .blog-listing-2 .blog-card__img img {
  object-fit: cover;
}

/* -------------------------------------------------- */
/* TABLE VIEW – skjul card-billeder (kun table view) */
/* -------------------------------------------------- */

.module--resource-list .blog-listing-2[data-view="table"] .blog-card__img {
  display: none;
}

/* -------------------------------------------------- */
/* TABLE VIEW – DESKTOP */
/* -------------------------------------------------- */

.module--resource-list .resource-table {
  margin-top: 10px;
  display: grid;
  grid-auto-flow: row;
  grid-auto-rows: auto;
  grid-template-columns:
    minmax(0, 3fr)   /* name */
    minmax(0, 2fr)   /* datetime */
    minmax(0, 1fr)   /* type */
    auto;            /* tag */
}

/* Desktop: header/rows/details opløses */
.module--resource-list .resource-table__header,
.module--resource-list .resource-table__row,
.module--resource-list .resource-table__details {
  display: contents;
}

.module--resource-list .resource-table__cell {
  padding: 10px 30px 10px 0;
  border-bottom: 1px solid #eee;
  display: flex;
  align-items: center;
  font-size: 15px;
  line-height: 1.4;
}

@media (min-width: 1050px) {
  .module--resource-list .resource-table__cell {
    padding-right: clamp(50px, 4.25vw, 80px);
  }
}

.module--resource-list .resource-table__row > .resource-table__cell:last-child {
  padding-right: 0;
}

.module--resource-list .resource-table__header .resource-table__cell {
  font-weight: 500;
}

.module--resource-list .resource-table__cell--name {
  font-weight: 500;
}

.module--resource-list .resource-table__name-link {
  text-decoration: none;
  color: inherit;
}

.module--resource-list .resource-table__name-link:hover {
  text-decoration: underline;
  color: inherit;
}

/* Badge i table */
.module--resource-list .resource-table .badge--large.badge--lowercase {
  font-size: 0.875rem;
}

/* Tag højrejusteret */
.module--resource-list .resource-table__cell--tag {
  justify-content: flex-end;
  text-align: right;
}

/* Empty: skjul header */
.module--resource-list .resource-table.is-empty .resource-table__header {
  display: none;
}

/* -------------------------------------------------- */
/* COURSE-KOLONNER (DESKTOP) */
/*  - som udgangspunkt skjult
/*  - vises KUN når wrapperen har .has-course-columns */
/* -------------------------------------------------- */

.module--resource-list .resource-table__cell--software,
.module--resource-list .resource-table__cell--language,
.module--resource-list .resource-table__cell--price,
.module--resource-list .resource-table__cell--duration {
  display: none;
}

/* Når vi faktisk er i "kun kurser" mode (JS sætter .has-course-columns) */
/* Duration ON */
.module--resource-list .blog-listing-2[data-view="table"].has-course-columns.has-duration-column .resource-table {
  /* 1: name, 2: datetime, 3: software, 4: language, 5: price, 6: duration, 7: tag */
  grid-template-columns:
    minmax(0, 3fr)
    minmax(0, 2fr)
    auto
    auto
    auto
    auto
    auto;
}

/* Duration OFF */
.module--resource-list .blog-listing-2[data-view="table"].has-course-columns:not(.has-duration-column) .resource-table {
  /* 1: name, 2: datetime, 3: software, 4: language, 5: price, 6: tag */
  grid-template-columns:
    minmax(0, 3fr)
    minmax(0, 2fr)
    auto
    auto
    auto
    auto;
}

/* Vis course celler i den mode */
.module--resource-list .blog-listing-2[data-view="table"].has-course-columns .resource-table__cell--software,
.module--resource-list .blog-listing-2[data-view="table"].has-course-columns .resource-table__cell--language,
.module--resource-list .blog-listing-2[data-view="table"].has-course-columns .resource-table__cell--price,
.module--resource-list .blog-listing-2[data-view="table"].has-course-columns .resource-table__cell--duration {
  display: flex;
}

/* Hvis duration er slået fra: skjul den hårdt (failsafe) */
.module--resource-list .blog-listing-2[data-view="table"]:not(.has-duration-column) .resource-table__cell--duration {
  display: none !important;
}

/* I samme mode skjules type-kolonnen (som du beskrev) */
.module--resource-list .blog-listing-2[data-view="table"].has-course-columns .resource-table__cell--type {
  display: none;
}

/* -------------------------------------------------- */
/* TABLE VIEW – MOBIL */
/* -------------------------------------------------- */

@media (max-width: 767px) {

  .module--resource-list .resource-table {
    display: block;
    margin-top: 0;
  }

  .module--resource-list .resource-table__row.resource-table__header {
    display: none;
  }

  .module--resource-list .resource-table__row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-auto-rows: auto;
    row-gap: 6px;
    column-gap: 16px;
    padding: 20px 0 25px;
    border-bottom: 1px solid #eee;
    align-items: flex-start;
  }

  .module--resource-list .resource-table__row:first-of-type {
    border-top: 1px solid #eee;
  }

  .module--resource-list .resource-table__cell {
    border-bottom: 0;
    padding: 2px 0;
    display: flex;
    align-items: baseline;
    justify-content: flex-start;
    gap: 0;
    font-size: 14px;
  }

  .module--resource-list .resource-table__cell--name {
    grid-column: 1 / 2;
    grid-row: 1;
    padding: 0;
    font-size: 15px;
    font-weight: 500;
  }

  .module--resource-list .resource-table__cell--tag {
    grid-column: 2 / 3;
    grid-row: 1;
    padding: 0;
    align-items: center;
  }

  .module--resource-list .resource-table__details {
    grid-column: 1 / 3;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    row-gap: 4px;
    column-gap: 8px;
    color: #666;
  }

  /* Base: alt i details er "contents" for label layout */
  .module--resource-list .resource-table__details .resource-table__cell {
    display: contents;
  }

  .module--resource-list .resource-table__details .resource-table__cell::before {
    content: attr(data-label);
    font-weight: 500;
    margin-right: 6px;
    white-space: nowrap;
  }

  .module--resource-list .resource-table .badge--large.badge--lowercase {
    font-size: .75rem;
    padding: 4px 10px;
  }

  /* -------------------------------------------------- */
  /* MOBIL: course-kolonner må IKKE dukke op for alle rows */
  /*  - Default: skjul course-felter i details på ALLE rows */
  /* -------------------------------------------------- */
  .module--resource-list .resource-table__details .resource-table__cell--software,
  .module--resource-list .resource-table__details .resource-table__cell--language,
  .module--resource-list .resource-table__details .resource-table__cell--price,
  .module--resource-list .resource-table__details .resource-table__cell--duration {
    display: none;
  }

  /* Kun når table view har .has-course-columns: vis dem (og kun på course rows) */
  .module--resource-list .blog-listing-2[data-view="table"].has-course-columns
  .resource-table__row[data-type="course"] .resource-table__details .resource-table__cell--software,
  .module--resource-list .blog-listing-2[data-view="table"].has-course-columns
  .resource-table__row[data-type="course"] .resource-table__details .resource-table__cell--language,
  .module--resource-list .blog-listing-2[data-view="table"].has-course-columns
  .resource-table__row[data-type="course"] .resource-table__details .resource-table__cell--price {
    display: contents;
  }

  /* Duration må kun vises hvis duration-kolonnen er slået til */
  .module--resource-list .blog-listing-2[data-view="table"].has-course-columns.has-duration-column
  .resource-table__row[data-type="course"] .resource-table__details .resource-table__cell--duration {
    display: contents;
  }
}

/* -------------------------------------------------- */
/* LOKAL hidden (må ikke ramme globalt) */
/* -------------------------------------------------- */

.module--resource-list [hidden] {
  display: none;
}