/*--------------------------------------------------------------
# Facilities
#
# Index page: a filterable grid (Library / Laboratory / Classroom / Other)
# built on the site's existing Isotope wiring (see static/assets/js/main.js
# "Init isotope layout and filters" -- .isotope-layout/.isotope-container/
# .isotope-item/.isotope-filters are pre-existing site conventions, not
# introduced here) rather than the Bootstrap-tab pattern the Team pages
# use, since Isotope is what this site already loads for exactly this
# "filterable card grid" shape. Only a category that actually has a
# facility gets a filter button (see FacilityPage.get_context in
# facility/models.py).
#
# Detail page: a hero image, then category + department badges, then the
# intro/body copy.
#
# Both share one card-free visual language: hierarchy (which category, and
# whether a facility is Faculty-wide or one department's) reads through a
# small fixed color+icon per category and a plain badge for department,
# never through card size -- consistent with every other redesigned page
# in team/ (see static/css/organogram.css and friends).
--------------------------------------------------------------*/
.facility-directory,
.facility-detail {
  --fac-accent: var(--accent-color, #0d6efd);
  --fac-heading: var(--heading-color, #1b1f27);
  --fac-text-muted: var(--default-color, #5a6472);
  --fac-surface: var(--surface-color, #ffffff);

  /* One fixed color per category -- Library reuses the site's own brand
     accent (it's the "default"/most central facility type), the other
     three are spaced around the wheel so all four stay visually distinct
     even for someone who can't rely on hue alone (each also gets its own
     icon, see FacilityDetPage.category_icon in facility/models.py). */
  --fac-library: var(--fac-accent);
  --fac-laboratory: #0dcaf0;
  --fac-classroom: #198754;
  --fac-other: #6c757d;
}

.facility-card--library,
.facility-category-badge--library {
  --fac-cat-accent: var(--fac-library);
}
.facility-card--laboratory,
.facility-category-badge--laboratory {
  --fac-cat-accent: var(--fac-laboratory);
}
.facility-card--classroom,
.facility-category-badge--classroom {
  --fac-cat-accent: var(--fac-classroom);
}
.facility-card--other,
.facility-category-badge--other {
  --fac-cat-accent: var(--fac-other);
}

/*--------------------------------------------------------------
# Stat strip -- quick "how many facilities, how many categories" summary
# above the filters.
--------------------------------------------------------------*/
.facility-stats {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.75rem 2rem;
  color: var(--fac-text-muted);
  font-weight: 600;
}

.facility-stats strong {
  color: var(--fac-heading);
  font-weight: 700;
}

/*--------------------------------------------------------------
# Filters -- pill buttons driving the page's existing Isotope grid (see
# main.js). Visually matches the Team pages' tab pills even though the
# interaction underneath is Isotope's filter-class toggling, not a
# Bootstrap tab.
--------------------------------------------------------------*/
.facility-filters {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.6rem;
  list-style: none;
  padding: 0;
  margin: 0 0 2.5rem;
}

.facility-filters li {
  cursor: pointer;
  padding: 0.55rem 1.1rem;
  border-radius: 999px;
  font-weight: 600;
  font-size: 0.92rem;
  color: var(--fac-heading);
  background: color-mix(in srgb, var(--fac-heading), transparent 95%);
  border: 1px solid color-mix(in srgb, var(--fac-heading), transparent 88%);
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
  user-select: none;
}

.facility-filters li:hover {
  border-color: color-mix(in srgb, var(--fac-accent), transparent 55%);
  color: var(--fac-accent);
}

.facility-filters li.filter-active {
  color: #fff;
  background: var(--fac-accent);
  border-color: var(--fac-accent);
}

@media (prefers-reduced-motion: reduce) {
  .facility-filters li {
    transition: none;
  }
}

/*--------------------------------------------------------------
# Card
--------------------------------------------------------------*/
.facility-card {
  --fac-card-radius: 1.25rem;
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--fac-surface);
  border: 1px solid color-mix(in srgb, var(--fac-heading), transparent 92%);
  border-radius: var(--fac-card-radius);
  overflow: hidden;
  box-shadow: 0 1px 2px color-mix(in srgb, var(--fac-heading), transparent 93%), 0 10px 25px color-mix(in srgb, var(--fac-heading), transparent 95%);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.facility-card:hover,
.facility-card:focus-within {
  transform: translateY(-4px);
  box-shadow: 0 1.25rem 2.5rem color-mix(in srgb, var(--fac-cat-accent, var(--fac-accent)), transparent 85%);
}

@media (prefers-reduced-motion: reduce) {
  .facility-card {
    transition: none;
  }
  .facility-card:hover,
  .facility-card:focus-within {
    transform: none;
  }
}

.facility-card-media {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: color-mix(in srgb, var(--fac-heading), transparent 95%);
}

.facility-card-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.35s ease;
}

.facility-card:hover .facility-card-img {
  transform: scale(1.06);
}

@media (prefers-reduced-motion: reduce) {
  .facility-card-img {
    transition: none;
  }
  .facility-card:hover .facility-card-img {
    transform: none;
  }
}

/* Tinted with the category's own accent (same variable the badge uses)
   instead of a flat neutral gray, so a facility with no photo yet still
   reads as an intentional, category-colored tile rather than a broken
   image -- it echoes the badge sitting on top of it instead of clashing
   with it. */
.facility-card-img--placeholder {
  background: linear-gradient(135deg, color-mix(in srgb, var(--fac-cat-accent, var(--fac-accent)), var(--fac-surface) 82%), color-mix(in srgb, var(--fac-cat-accent, var(--fac-accent)), var(--fac-surface) 93%));
  color: color-mix(in srgb, var(--fac-cat-accent, var(--fac-accent)), transparent 20%);
  font-size: 2.75rem;
}

.facility-zoom-link {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 1.5rem;
  background: color-mix(in srgb, #000, transparent 55%);
  opacity: 0;
  transition: opacity 0.2s ease;
}

.facility-card:hover .facility-zoom-link,
.facility-hero-media:hover .facility-zoom-link,
.facility-zoom-link:focus-visible {
  opacity: 1;
}

/* Base: a plain pill, for when this badge sits inline in a normal flex
   row -- .facility-meta on the detail page (see facility_det_page.html).
   Overlaying the image instead (.facility-card-media, the index grid) is
   the special case, handled below -- keeping absolute positioning out of
   the base rule is what let this render correctly in both places instead
   of only the one it was first written for. */
.facility-category-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.35rem 0.75rem;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: #fff;
  background: var(--fac-cat-accent, var(--fac-accent));
}

.facility-card-media .facility-category-badge {
  position: absolute;
  top: 0.85rem;
  left: 0.85rem;
  box-shadow: 0 2px 6px color-mix(in srgb, #000, transparent 75%);
}

.facility-card-body {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  padding: 1.25rem 1.35rem 1.5rem;
}

.facility-card-title {
  font-size: 1.1rem;
  margin-bottom: 0.5rem;
}

.facility-card-title a {
  color: var(--fac-heading);
  text-decoration: none;
}

.facility-card-title a:hover {
  color: var(--fac-cat-accent, var(--fac-accent));
}

.facility-dept-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  align-self: flex-start;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--fac-text-muted);
  background: color-mix(in srgb, var(--fac-heading), transparent 94%);
  padding: 0.25rem 0.6rem;
  border-radius: 999px;
  margin-bottom: 0.75rem;
}

.facility-dept-badge--faculty {
  color: var(--fac-accent);
  background: color-mix(in srgb, var(--fac-accent), transparent 90%);
}

.facility-card-excerpt {
  color: var(--fac-text-muted);
  font-size: 0.92rem;
  line-height: 1.6;
  margin-bottom: 1rem;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.facility-card-link {
  margin-top: auto;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--fac-cat-accent, var(--fac-accent));
  text-decoration: none;
}

.facility-card-link i {
  transition: transform 0.15s ease;
}

.facility-card-link:hover i {
  transform: translateX(3px);
}

/*--------------------------------------------------------------
# Detail page
#
# Hero media -- fixed 16:9 (matches the fill-1200x675 rendition requested
# in the template exactly, so the crop the server generates and the box
# it's displayed in always agree, instead of the old max-height cap, which
# could crop unpredictably depending on viewport width). Same
# "image + zoom overlay + overlaid category badge" language as the index
# grid's .facility-card-media (.facility-zoom-link and
# .facility-category-badge are the same rules, just anchored to this
# selector too), just full width and with a stronger shadow to read as the
# page's hero rather than a grid tile.
--------------------------------------------------------------*/
.facility-hero-media {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: 1.25rem;
  box-shadow: 0 1px 2px color-mix(in srgb, var(--fac-heading), transparent 93%), 0 1.5rem 3rem color-mix(in srgb, var(--fac-heading), transparent 88%);
}

.facility-hero-media .facility-category-badge {
  position: absolute;
  top: 1rem;
  left: 1rem;
  box-shadow: 0 2px 6px color-mix(in srgb, #000, transparent 70%);
}

.facility-hero-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.facility-hero-img--placeholder {
  background: color-mix(in srgb, var(--fac-heading), transparent 95%);
  color: color-mix(in srgb, var(--fac-heading), transparent 60%);
  font-size: 3.5rem;
}

.facility-intro {
  font-size: 1.15rem;
  color: var(--fac-heading);
  font-weight: 500;
  line-height: 1.7;
  margin-bottom: 1.5rem;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid color-mix(in srgb, var(--fac-heading), transparent 90%);
}

.facility-body {
  color: var(--fac-text-muted);
  line-height: 1.8;
}

/* Gallery -- thumbnails only; the zoom/lightbox affordance itself is the
   shared .img-hover-zoom utility (see static/css/custom.css) plus GLightbox
   grouping via the template's shared data-gallery attribute, not a bespoke
   overlay like .facility-zoom-link uses for the hero/card images above. */
.facility-gallery-thumb {
  position: relative;
  aspect-ratio: 4 / 3;
}

.facility-gallery-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/*--------------------------------------------------------------
# Detail page -- sidebar info panel
#
# Same "bordered, lightly-shadowed rounded-4 panel" language as
# .facility-card, reusing this file's own --fac-* tokens rather than a
# Bootstrap .card. Its two rows reuse the site-wide .icon-circle/
# .icon-circle-sm (static/css/custom.css) instead of a bespoke icon
# style -- the same labelled icon+text row research/lab_det_page.html
# already uses for its own sidebar.
--------------------------------------------------------------*/
.facility-info-card {
  background: var(--fac-surface);
  border: 1px solid color-mix(in srgb, var(--fac-heading), transparent 90%);
  box-shadow:
    0 1px 2px color-mix(in srgb, var(--fac-heading), transparent 94%),
    0 10px 28px color-mix(in srgb, var(--fac-heading), transparent 93%);
}

/* Clears the sticky site header (see custom.css "Modern Header" section)
   with a little breathing room, so the panel doesn't pin flush under it
   once it sticks on scroll. */
.facility-info-card.sticky-lg-top {
  top: 96px;
}

.facility-info-eyebrow {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fac-accent);
}