.available-classrooms-container {
  margin: 0.5rem 0;
  padding: 0.5rem;

  background-color: var(--background-color-secondary);
  border: 4px solid var(--background-color-secondary);

  border-radius: var(--radius-xl);

  display: flex;
  flex-direction: column;

  justify-content: space-evenly;
}

.results-filter-row {
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
  padding: 0.25rem 0.5rem 0;
  gap: 1rem;
}

.results-filter-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;

  padding: 0.25rem 0.75rem;
  border-radius: var(--radius-pill);
  border: 1.5px solid color-mix(in srgb, var(--text-color-accent) 40%, transparent);
  background: color-mix(in srgb, var(--text-color-accent) 15%, transparent);
  color: var(--text-color-accent);

  font-family: "Nunito", -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: var(--text-80);
  font-weight: 700;
  cursor: pointer;

  transition: background 0.2s ease, opacity 0.2s ease;
}

.results-filter-btn:not(.active) {
  background: transparent;
  opacity: 0.45;
}

.results-filter-btn .material-symbols-outlined {
  font-size: var(--text-100) !important;
}

.available-classrooms-container.hide-partial [data-status="partially-free"] {
  display: none;
}

/* Hide a building's header too when every one of its rooms is partially-free
   (and therefore already hidden above) — otherwise an empty header would be
   left dangling with no cards under it. */
.available-classrooms-container.hide-partial [data-all-partial="true"] {
  display: none;
}

.available-classrooms-container.empty {
  flex: 1;
  padding: 4rem 0;
  gap: 1.5rem;
  align-items: center;
  justify-content: center;
}

.empty-container-icon {
  color: var(--text-color-secondary);
  opacity: 0.75;

  font-size: 7rem !important;
}

.empty-container-title {
  font-size: var(--text-150);
  font-weight: 700;

  color: var(--text-color-secondary);
  opacity: 0.75;

  margin: 0;
}

.empty-container-subtitle {
  font-size: var(--text-90);
  font-weight: 630;

  color: var(--text-color-secondary);
  opacity: 0.60;

  margin: 0 3rem;
}

/* Grid of cards — every classroom card is a direct sibling here (rendered up
   front, see buildBuildingSection in script.js), with a full-width section
   header before each building's run of cards. */
.list-outer-container {
  list-style: none;
  margin: 0;
  padding: 0.25rem;

  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr));
  gap: 0.75rem;
}

.building-section-header {
  grid-column: 1 / -1;

  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  padding: 0.25rem 0.5rem 0.5rem;
  text-align: start;
  border-bottom: 1px solid color-mix(in srgb, var(--text-color-primary) 8%, transparent);

  animation: card-appear 0.4s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.building-section-header:not(:first-child) {
  margin-top: 0.5rem;
}

.building-name {
  font-size: var(--text-175);
  font-weight: 700;
  margin: 0;
}

.building-alt-name {
  font-size: 0.75em;
  font-weight: 600;
  color: color-mix(in srgb, var(--text-color-primary) 50%, transparent);
  margin-left: 0.15rem;
}

.building-counts {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 0.4rem;
}

.building-count {
  font-size: var(--text-75);
  font-weight: 700;
}

.building-count.free          { color: var(--color-status-free); }
.building-count.partially-free { color: var(--color-status-partial); }
.building-count.not-free       { color: var(--color-status-busy); }

.building-count-sep {
  font-size: var(--text-70);
  color: color-mix(in srgb, var(--text-color-primary) 25%, transparent);
}

/* Each card is a grid item directly — no extra wrapper box (the old
   .classroom-list-item-container padding/shadow chrome moved onto the card
   itself, since the card is no longer full-width and needs its own bounds). */
.classroom-list-item-container {
  display: contents;
}

.classroom-list-item-container .classroom-card {
  animation: card-appear 0.4s cubic-bezier(0.16, 1, 0.3, 1) both;
}

/* Prevent re-triggering the staggered animation after the first load */
.list-outer-container.appeared .classroom-card,
.list-outer-container.appeared .building-section-header {
  animation: none !important;
}

/* Also disable the parent tab-content animation if it has appeared once */
:has(> .list-outer-container.appeared) {
  animation: none !important;
}

@keyframes card-appear {
  from {
    opacity: 0;
    transform: translateY(12px);
    filter: blur(4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
    filter: blur(0);
  }
}

/* ══════════════════════════════════════════════════════════════
   CLASSROOM CARD
   Ported from the Figma "Classroom Card / Portrait" component: a photo with
   a gradient fade to a solid, readable footer instead of the old design's
   second blurred copy of the photo and mix-blend-mode overlay. The card's
   chrome reuses the project's existing --glass-* tokens instead of one-off
   shadow values, per the Figma spec's own Glass effect names.
   ══════════════════════════════════════════════════════════════ */

/* Outer box: carries the box-shadow (highlight + drop shadow) and the
   gradient stroke ring. Deliberately NOT overflow:hidden — box-shadow is
   clipped by overflow on the element that declares it, not just its
   children, so the shadow has to live on an unclipped box. The photo is
   clipped to the rounded corners by the inner .classroom-card-clip instead. */
.classroom-card {
  position: relative;
  aspect-ratio: 154 / 196;
  text-align: start;

  padding: 0;
  border-radius: var(--radius-lg);

  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;

  background-color: var(--background-color-secondary);
  /* Only the two non-inset parts here — outline hairline and drop shadow,
     both painted outside the box, so they're unaffected by whatever's
     inside. The inset highlight moved to ::before (see below): inset
     shadows paint behind child content by default, and .classroom-card-clip
     (the photo) is fully opaque, so an inset shadow declared here would be
     invisible on any photo card. */
  box-shadow:
    0 0 0 0.1px var(--glass-outline),
    0 4px 40px 0 var(--glass-shadow-color);

  transition: transform 0.15s ease;

  content-visibility: auto;
  /* "auto" keyword: this card also carries aspect-ratio, so a fixed guess
     that doesn't match the grid's actual column width caused a real bug —
     a size mismatch between the guessed and rendered box could make a
     card's very first IntersectionObserver callback (photo lazy-load) get
     silently dropped. Earlier profiling showed no measurable perf cost
     either way, so "auto" (remember the real size after first layout) is
     the safe choice here.
     Explicit width AND height (not one value reused for both) matching the
     card's actual 154:196 proportions — a square-ish single-value guess was
     visibly wrong on width, and while the card is transitioning between
     skipped/relevant (e.g. mid-scroll on Safari), the photo can briefly
     render against that wrong placeholder size, showing as a squeezed
     sliver via object-fit: cover. */
  contain-intrinsic-size: auto 155px auto 197px;

  &:hover {
    transform: scale(1.02);
  }

  &:focus-visible {
    outline: 2px solid color-mix(in srgb, var(--text-color-accent) 72%, white);
    outline-offset: 3px;
  }
}

.classroom-card-clip {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  overflow: hidden;
  isolation: isolate;
}

/* Inset highlight, repainted here (on top of .classroom-card-clip's photo)
   instead of as part of .classroom-card's own box-shadow — see the note
   there. This pseudo has no content of its own, so it never blocks clicks
   or covers the photo underneath it visually beyond its shadow. */
.classroom-card::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: var(--glass-highlight);
  pointer-events: none;
  z-index: 1;
}

/* Outside 0.5px gradient stroke — same recipe as .header-button::after /
   .bn-tabbar::after in style.css / bottom-nav.css. */
.classroom-card::after {
  content: "";
  position: absolute;
  inset: -0.5px;
  border-radius: inherit;
  padding: 0.5px;

  background: var(--glass-stroke-gradient);
  opacity: var(--glass-stroke-opacity);

  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;

  pointer-events: none;
}

.classroom-card-photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.4s ease;
}

.classroom-card-photo.loaded {
  opacity: 1;
}

/* Failed photo — hide the broken <img> and show a muted placeholder icon instead */
.classroom-card--photo.photo-failed .classroom-card-photo {
  display: none;
}

.classroom-card--photo.photo-failed::before {
  content: 'hide_image';
  font-family: 'Material Symbols Outlined';
  font-size: var(--text-200);
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: color-mix(in srgb, var(--text-color-primary) 20%, transparent);
  z-index: 0;
  pointer-events: none;
}

/* Gradient overlay laid across the full card — exact stops from the Figma
   component — fading the photo to a solid, readable footer. */
.classroom-card-scrim {
  position: absolute;
  /* 1px bleed past the true edges (clipped precisely by .classroom-card-clip's
     overflow:hidden) — guards against a sub-pixel rounding gap at the card's
     bottom edge on some mobile DPR/zoom combos, where inset:0 can land a
     hair short of the actual box and let the photo show through. */
  inset: -1px;
  pointer-events: none;

  background: linear-gradient(
    to bottom,
    rgba(217, 217, 217, 0) 53%,
    rgba(217, 217, 217, 0.8) 80%,
    rgba(217, 217, 217, 1) 89%
  );
}

@media (prefers-color-scheme: dark) {
  .classroom-card-scrim {
    background: linear-gradient(
      to bottom,
      rgba(26, 26, 26, 0) 53%,
      rgba(26, 26, 26, 0.8) 80%,
      rgba(26, 26, 26, 1) 89%
    );
  }
}

.classroom-card-content {
  position: relative;
  z-index: 2;
  height: 100%;
  padding: 0.85rem;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 0.1rem;
}

.classroom-status-txt {
  flex: 0 0 auto;
  font-size: var(--text-80);
  font-weight: 800;
  margin: 0;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  line-height: 1.15;
  white-space: nowrap;
}

.classroom-status-txt.free {
  color: var(--color-status-free);
}

.classroom-status-txt.free-soon {
  color: var(--color-status-free-soon);
}

.classroom-status-txt.partially-free,
.classroom-status-txt.occupied-soon {
  color: var(--color-status-partial);
}

.classroom-status-txt.not-free,
.classroom-status-txt.occupied {
  color: var(--color-status-busy);
}

.classroom-name {
  font-size: var(--text-150);
  font-weight: 800;
  margin: 0;
  color: var(--text-color-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.classroom-card-meta-row {
  display: flex;
  flex-direction: row;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem;
}

.classroom-card-building {
  flex: 1 1 auto;
  min-width: 0;
  font-size: var(--text-80);
  color: color-mix(in srgb, var(--text-color-primary) 55%, transparent);
  margin: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}