/* =========================================================
   site-extra.css
   Small set of additional components for the Campus Facilities
   pages that are not already defined in main.css. Everything
   here reuses the site's own CSS variables (--accent-color,
   --heading-color, --surface-color, --contrast-color,
   --default-color, --background-color) so it stays visually
   consistent with the rest of the school website.
   ========================================================= */

/* Building tile — big image card used on the homepage and
   campus map to link into a whole building (index/campus). */
.building-tile {
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  /* เปลี่ยนจาก 3/4 (แนวตั้ง) เป็นอัตราส่วนแนวนอน เช่น 4/3 หรือ 16/9 */
  aspect-ratio: 4/3; 
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
  display: block;
}

.building-tile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}

.building-tile:hover img { 
  transform: scale(1.06); 
}

.building-tile::after {
  content: "";
  position: absolute; 
  inset: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 35%, rgba(0, 0, 0, 0.85) 100%);
}

.building-tile .tile-info {
  position: absolute; 
  left: 0; 
  right: 0; 
  bottom: 0;
  padding: 20px; 
  z-index: 2; 
  color: #fff;
}

.building-tile .tile-info .eyebrow-sm {
  font-size: 0.72rem; 
  letter-spacing: 0.08em; 
  text-transform: uppercase;
  color: color-mix(in srgb, #fff, var(--accent-color) 25%);
  font-weight: 700; 
  display: block; 
  margin-bottom: 4px;
}

.building-tile .tile-info h3 { 
  color: #fff; 
  font-size: 1.15rem; 
  margin: 0 0 2px; 
}

.building-tile .tile-info .meta { 
  font-size: 0.8rem; 
  color: rgba(255, 255, 255, 0.8); 
  margin: 0; 
}

/* Photo grid — used for room / building image galleries. */
.photo-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 16px;
}
.photo-grid a {
  display: block; border-radius: 14px; overflow: hidden;
  aspect-ratio: 4/3; box-shadow: 0 5px 20px rgba(0, 0, 0, 0.07);
  position: relative;
}
.photo-grid a img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease; }
.photo-grid a:hover img { transform: scale(1.08); }
.photo-grid a::after {
  content: "\f00e"; font-family: "bootstrap-icons"; position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center; color: #fff; font-size: 1.3rem;
  background: rgba(0, 0, 0, 0); opacity: 0; transition: all 0.3s ease;
}
.photo-grid a:hover::after { background: rgba(0, 0, 0, 0.35); opacity: 1; }

/* Room gallery swiper sizing (Swiper ships without dimensions). */
.room-gallery {
  border-radius: 20px; overflow: hidden; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
  aspect-ratio: 16/9;
}
.room-gallery .swiper-slide img { width: 100%; height: 100%; object-fit: cover; }
.room-gallery .swiper-button-prev,
.room-gallery .swiper-button-next { color: #fff; }
.room-gallery .swiper-pagination-bullet-active { background: var(--accent-color); }

/* Compact search bar for the campus map / filter page. */
.facility-search { max-width: 100%; }
.facility-search .input-group {
  border-radius: 50px; overflow: hidden; box-shadow: 0 5px 18px rgba(0, 0, 0, 0.07);
}
.facility-search .form-control {
  border: 1px solid color-mix(in srgb, var(--default-color), transparent 90%);
  padding: 0.85rem 1.4rem; font-size: 1rem;
  background-color: var(--surface-color); color: var(--default-color);
}
.facility-search .form-control:focus { box-shadow: none; border-color: var(--accent-color); }
.facility-search .btn-search {
  background-color: var(--accent-color); color: var(--contrast-color);
  border: none; padding: 0 1.4rem;
}

/* Back link used above building/room detail content. */
.back-link {
  display: inline-flex; align-items: center; gap: 8px;
  font-weight: 600; font-size: 0.9rem; color: var(--default-color);
}
.back-link:hover { color: var(--accent-color); }

/* Utility: hide filtered-out cards in the campus map search */
.no-results { display: none; text-align: center; padding: 50px 10px; color: color-mix(in srgb, var(--default-color), transparent 30%); }

/* =========================================================
   Header: force a solid, readable header on every page.
   (main.css ships a transparent-over-hero header meant for a
   full-bleed hero video/image; our pages don't guarantee a dark
   hero behind it, so we make the header solid at all times.)
   ========================================================= */
.header {
  --background-color: #ffffff;
  --default-color: #010608;
  --heading-color: #04415f;
  box-shadow: 0 2px 16px rgba(4, 65, 95, 0.08);
}
.header .header-container { background: transparent; padding-top: 4px; padding-bottom: 4px; }
.header .logo { position: static; display: flex; align-items: center; gap: 10px; padding: 0; }
.header .logo .sitename { font-size: 20px; font-weight: 700; color: var(--heading-color); }
.header .logo img { max-height: 42px; border-radius: 8px; }
.mobile-nav-toggle { color: var(--nav-color); }

/* Scroll-top button: main.css defines this twice (once at
   width 40/45, circle/square) with a later `display:none` rule
   that never gets flipped back on — add the missing state. */
.scroll-top { display: none; align-items: center; justify-content: center; }
.scroll-top.active { display: flex; }

/* Preloader: main.css defines #preloader's spinner but never
   hides it once the page has loaded — add that here. */
#preloader { opacity: 1; transition: opacity 0.4s ease; }
body.loaded #preloader { opacity: 0; pointer-events: none; }

/* =========================================================
   .info-stack — vertical stack of .metric-card items
   (used in the room-detail sidebar).

   BUG THIS FIXES: main.css sets `.stats .metric-card { height:
   100%; }`, which is only correct when each card is the sole
   child of its own Bootstrap column inside a `.row` (so the
   row's `align-items: stretch` gives every column — and thus
   every card — the same height). Here, three cards are stacked
   as plain block children of a single column instead. Because
   that column stretches to match the tall gallery column next
   to it, `height: 100%` makes EACH card individually try to
   fill that full stretched height, so the cards balloon and
   visually overlap/collide instead of stacking cleanly — worse
   once the layout re-stacks at narrower breakpoints.

   Fix: lay the cards out with flexbox (consistent gap instead
   of ad-hoc margins) and override height back to auto so each
   card only takes the height its own content needs.
   ========================================================= */
.info-stack {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  height: 100%;
}
.info-stack .metric-card {
  height: auto;
  flex: 0 0 auto;
}