/*
 * Genvejskort (Quick Links) component styles.
 *
 * Theme tokens only (--padis-color-*, --padis-space-*, --padis-radius,
 * --padis-shadow) - no hardcoded colours/spacing/fonts, consistent with
 * news.css/facilities.css. Markup/visuals directly reuse
 * News card conventions (whole-card link, image-wrapper with placeholder
 * fallback, bottom-right arrow icon, 3-line description clamp) rather than
 * introducing new equivalents.
 *
 * Single fixed grid layout in v1: 4 columns desktop, 2 tablet, 1 mobile
 * - no layout-variant property/class.
 */

.padis-genvejskort {
  /* 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-genvejskort__title {
  margin: 0 0 var(--padis-space-md);
}

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

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

.padis-genvejskort-card__link {
  display: flex;
  flex-direction: column;
  height: 100%;
  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-genvejskort-card__image-wrapper {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  background-color: var(--padis-color-surface-alt);
  overflow: hidden;
}

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

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

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

.padis-genvejskort-card__description {
  color: var(--padis-color-text-muted);
  overflow-wrap: break-word;
  /* Long descriptions are clamped to 3 lines. */
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.padis-genvejskort-card__arrow {
  display: flex;
  align-self: flex-end;
  margin-top: auto;
  width: 3.5rem;
  height: 3.5rem;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  color: var(--padis-color-primary);
}

.padis-genvejskort-card__arrow svg {
  width: 2.25rem;
  height: 2.25rem;
}

/* Hover effect on desktop only (matches
   .padis-news-card__link:hover's own hover precedent). */
@media (hover: hover) and (pointer: fine) {
  .padis-genvejskort-card__link:hover {
    transform: translateY(-2px);
    /* Theme-token-only elevation - no new token is
       introduced, the existing --padis-shadow is stacked twice for a
       stronger hover elevation instead of layering a hardcoded rgba(). */
    box-shadow: var(--padis-shadow), var(--padis-shadow);
  }
}

/* Visible keyboard-focus indicator (cards must be
   keyboard-reachable and activatable with a visible focus state). Theme
   tokens only, no hardcoded colours. */
.padis-genvejskort-card__link:focus-visible {
  outline: 2px solid var(--padis-color-primary);
  outline-offset: 2px;
}

/* Responsive breakpoints: 4/2/1 columns desktop/tablet/mobile,
   same breakpoints as News's own 3/2/1 card grid. */
@media (max-width: 64rem) {
  .padis-genvejskort__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

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