/*
 * Afdelingsfaciliteter (Department Facilities) component styles.
 *
 * Theme tokens only (--padis-color-*, --padis-space-*, --padis-radius,
 * --padis-shadow) - no hardcoded colours/spacing/fonts, consistent with
 * site.css/department-overview.css. Breakpoints match
 * department-overview.css's own card-grid precedent.
 */

.padis-facilities {
  margin: 0;
  padding: 0;
  list-style: none;
  /* 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));
}

/* Icon shared across all 3 variants (always carries an accessible
   text alternative equal to the facility title). */
.padis-facility__icon,
.padis-facility-card > .padis-facility__icon,
.padis-facility-compact > .padis-facility__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 3rem;
  height: 3rem;
  border-radius: 999px;
  background-color: var(--padis-color-surface-alt);
  color: var(--padis-color-primary);
}

.padis-facility__icon-image {
  width: 1.75rem;
  height: 1.75rem;
  object-fit: contain;
}

.padis-facility__icon-default {
  width: 1.75rem;
  height: 1.75rem;
}

/* ---------------------------------------------------------------------------
 * Icon overview variant: rounded icon containers, title below, equal spacing,
 * multi-column on larger screens.
 * ------------------------------------------------------------------------ */
.padis-facilities--icon-grid {
  display: grid;
  /* Same container-width-aware fix as .padis-facilities--cards, for the same
     narrow-column-placement reason. */
  grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr));
  gap: var(--padis-space-lg) var(--padis-space-md);
  text-align: center;
}

.padis-facility--icon-grid {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--padis-space-sm);
}

.padis-facility--icon-grid .padis-facility__icon {
  width: 4rem;
  height: 4rem;
}

.padis-facility--icon-grid .padis-facility__icon-image,
.padis-facility--icon-grid .padis-facility__icon-default {
  width: 2.25rem;
  height: 2.25rem;
}

.padis-facility__title {
  margin: 0;
  font-size: 1rem;
}

.padis-facility__text {
  margin: 0;
  color: var(--padis-color-text-muted);
  font-size: 0.9rem;
  /* Long text wraps gracefully rather than overflowing. */
  overflow-wrap: break-word;
}

/* ---------------------------------------------------------------------------
 * Facility cards variant: rounded corners, light shadow, hover effect
 * (desktop only), equal card height per row, 4/2/1 columns.
 * ------------------------------------------------------------------------ */
.padis-facilities--cards {
  display: grid;
  align-items: stretch;
  /* auto-fit/minmax responds to the component's actual container width, not
     just the viewport - important since this component can be placed in a
     narrow half/third-width column (Two/Three Column Layout areas), where a
     fixed repeat(4, 1fr) would overflow its own container even on a wide
     viewport (bug found via manual testing). */
  grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
  gap: var(--padis-space-md);
}

.padis-facility-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--padis-space-sm);
  height: 100%;
  padding: var(--padis-space-md);
  /* Matches department-overview.css/lease-types.css's own card precedent:
     the card background equals the page background (both
     --padis-color-surface), so the shadow alone is too subtle to read as a
     distinct card - without a border it looked like a plain divided list
     instead of cards (found via mobile screenshot review). */
  border: 1px solid var(--padis-color-border);
  border-radius: var(--padis-radius);
  box-shadow: var(--padis-shadow);
  background-color: var(--padis-color-surface);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.padis-facility-card__title {
  margin: 0;
  font-size: 1.1rem;
  line-height: 1.3;
  /* Fixed to exactly 2 lines' worth of space (not just clamped) so cards in
     different grid rows reserve the same height for the title regardless of
     row-mates - grid stretch only equalizes within a single row. */
  min-height: calc(1.3em * 2);
  overflow-wrap: break-word;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.padis-facility-card__text {
  margin: 0;
  color: var(--padis-color-text-muted);
  font-size: 1rem;
  line-height: 1.4;
  /* Fixed to exactly 2 lines' worth of space (not just clamped) so cards in
     different grid rows reserve the same height for the text regardless of
     row-mates - grid stretch only equalizes within a single row. Most
     facility descriptions are short one-liners, so 2 lines keeps cards
     compact; longer text (e.g. "Fælles vaskeri") is clamped/truncated. */
  min-height: calc(1.4em * 2);
  overflow-wrap: break-word;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Hover effect on desktop only (matches
   department-overview.css's own hover precedent). */
@media (hover: hover) and (pointer: fine) {
  .padis-facility-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--padis-shadow), 0 4px 10px rgba(28, 19, 48, 0.15);
  }
}

/* ---------------------------------------------------------------------------
 * Compact list variant: icon + title (+ optional short text), single column.
 * ------------------------------------------------------------------------ */
.padis-facilities--compact-list {
  display: flex;
  flex-direction: column;
  gap: var(--padis-space-sm);
}

.padis-facility-compact {
  display: flex;
  align-items: center;
  gap: var(--padis-space-md);
  padding: var(--padis-space-sm) 0;
  border-bottom: 1px solid var(--padis-color-border);
}

.padis-facility-compact:last-child {
  border-bottom: none;
}

.padis-facility-compact__body {
  display: flex;
  flex-direction: column;
  gap: 0.15em;
  min-width: 0;
}

.padis-facility-compact__title {
  font-weight: 700;
}

.padis-facility-compact__text {
  color: var(--padis-color-text-muted);
  font-size: 0.9rem;
  overflow-wrap: break-word;
}

/* ---------------------------------------------------------------------------
 * Responsive breakpoints: Facility cards specifically at 4/2/1
 * columns desktop/tablet/mobile, matching department-overview.css. Icon
 * overview reflows to fewer columns; compact list is already single-column.
 * ------------------------------------------------------------------------ */
@media (max-width: 64rem) {
  .padis-facilities--cards {
    grid-template-columns: repeat(2, 1fr);
  }

  .padis-facilities--icon-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

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

  .padis-facilities--icon-grid {
    grid-template-columns: 1fr;
  }
}