/* Nyheder (News) component styles. Theme tokens only, no hardcoded values. */

.padis-news-block {
  /* Reserve space so anchor-scrolled content lands below the fixed header/
     operational-message bar. */
  scroll-margin-top: calc(var(--padis-header-height, 5rem) + var(--padis-operational-height, 0px) + var(--padis-space-md));
}

.padis-news {
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Card view: rounded, shadow, hover on desktop, whole card clickable. */
.padis-news--cards {
  display: grid;
  /* minmax(0, 1fr), not a bare 1fr: grid tracks otherwise take their
     min-content size (driven by title/excerpt text) as their floor, which
     can exceed the track's fair share of space and push the whole grid
     wider than its container - e.g. when this component is nested in the
     Hero's narrower Overlay Content box (hero.css), where it visibly
     overflowed past the box before this fix. */
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--padis-space-md);
}

.padis-news-card {
  height: 100%;
}

.padis-news-card__link {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  font: inherit;
  text-align: left;
  cursor: pointer;
  border-radius: var(--padis-radius);
  box-shadow: var(--padis-shadow);
  background-color: var(--padis-color-surface);
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.padis-news-card__image-wrapper {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  background-color: var(--padis-color-surface-alt);
  overflow: hidden;
}

.padis-news-card__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.padis-news-card__body {
  display: flex;
  flex-direction: column;
  gap: var(--padis-space-sm);
  padding: var(--padis-space-md);
}

.padis-news-card__title {
  font-size: 1.1rem;
  font-weight: 700;
}

.padis-news-card__excerpt {
  color: var(--padis-color-text-muted);
  overflow-wrap: break-word;
  /* Long excerpts don't break the equal-card-height row. */
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Hover effect on desktop only. */
@media (hover: hover) and (pointer: fine) {
  .padis-news-card__link:hover {
    transform: translateY(-2px);
    box-shadow: var(--padis-shadow), 0 4px 10px rgba(28, 19, 48, 0.15);
  }
}

/* List view: title, date (if available), excerpt, no image. */
.padis-news--list {
  display: flex;
  flex-direction: column;
  gap: var(--padis-space-sm);
}

.padis-news-list-item__link {
  display: flex;
  flex-direction: column;
  gap: 0.15em;
  width: 100%;
  padding: var(--padis-space-sm) 0;
  border: 0;
  border-bottom: 1px solid var(--padis-color-border);
  background: none;
  font: inherit;
  text-align: left;
  cursor: pointer;
  text-decoration: none;
  color: inherit;
}

.padis-news-list-item:last-child .padis-news-list-item__link {
  border-bottom: none;
}

/* Article modal (native <dialog>). */
.padis-news-modal {
  position: fixed;
  inset: 0;
  margin: auto;
  width: min(48rem, calc(100% - 2 * var(--padis-space-md)));
  max-height: calc(100dvh - 2 * var(--padis-space-md));
  padding: var(--padis-space-lg, var(--padis-space-md));
  border: 0;
  border-radius: var(--padis-radius);
  background-color: var(--padis-color-surface);
  color: inherit;
  box-shadow: var(--padis-shadow);
  overflow-y: auto;
}

.padis-news-modal::backdrop {
  background-color: rgba(28, 19, 48, 0.6);
}

.padis-news-modal__close {
  position: absolute;
  top: var(--padis-space-sm);
  right: var(--padis-space-sm);
  width: 2.5rem;
  height: 2.5rem;
  border: 0;
  border-radius: 50%;
  background: none;
  font-size: 1.75rem;
  line-height: 1;
  color: inherit;
  cursor: pointer;
}

.padis-news-article__image {
  display: block;
  width: 100%;
  max-height: 22rem;
  object-fit: cover;
  border-radius: var(--padis-radius);
  background-color: var(--padis-color-surface-alt);
}

.padis-news-article__title {
  margin: var(--padis-space-md) 0 var(--padis-space-sm);
}

.padis-news-article__date {
  margin: 0 0 var(--padis-space-md);
  color: var(--padis-color-text-muted);
  font-size: 0.85rem;
}

.padis-news-article__body {
  overflow-wrap: break-word;
}

.padis-news-article__body img {
  max-width: 100%;
  height: auto;
}

.padis-news-list-item__title {
  font-weight: 700;
}

.padis-news-list-item__date {
  color: var(--padis-color-text-muted);
  font-size: 0.85rem;
}

.padis-news-list-item__excerpt {
  color: var(--padis-color-text-muted);
  overflow-wrap: break-word;
}

/* "Load more" control and inline failure message. */
.padis-news__load-more {
  display: inline-block;
  margin-top: var(--padis-space-md);
  padding: var(--padis-space-sm) var(--padis-space-md);
  border: 1px solid var(--padis-color-border);
  border-radius: var(--padis-radius);
  background-color: var(--padis-color-surface);
  color: var(--padis-color-primary);
  cursor: pointer;
}

.padis-news__load-more:hover {
  background-color: var(--padis-color-surface-alt);
}

/* An author-stylesheet display value on this class always overrides the
   browser's own [hidden] { display: none } rule regardless of source order,
   so button.hidden = true alone left this control visible (but disabled/
   non-functional) once "load more" was exhausted - this rule is required
   whenever JS toggles the native hidden attribute/property on this element. */
.padis-news__load-more[hidden] {
  display: none;
}

.padis-news__load-more-error {
  margin-top: var(--padis-space-sm);
  color: var(--padis-color-danger, #b3261e);
}

.padis-news__empty-state {
  margin: 0;
  padding: var(--padis-space-md);
  color: var(--padis-color-text-muted, inherit);
}

/* Card view: 3/2/1 columns desktop/tablet/mobile. List view is unaffected. */
@media (max-width: 64rem) {
  .padis-news--cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 48rem) {
  .padis-news--cards {
    grid-template-columns: 1fr;
  }
}