:root {
  --gold: #c8a165;
  --dark: #0d0e11;
  --dark-overlay: rgba(10, 11, 14, 0.55);
  --light: #f7f5f0;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  width: 100%; height: 100%;
  background: var(--dark);
  overflow: hidden;
  font-family: 'Georgia', 'Times New Roman', serif;
  color: var(--light);
}

.signage {
  position: relative;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
}

.slide-stage {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.slide {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  background-size: cover;
  background-position: center;
  transition: opacity 1s ease;
}

.slide.active { opacity: 1; z-index: 2; }
.slide.zoom-anim.active .slide-bg { animation: slowZoom 12s ease-in-out forwards; }
@keyframes slowZoom { from { transform: scale(1); } to { transform: scale(1.08); } }

.slide-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  filter: brightness(0.55);
}

/* "Contain" fit: show the whole image with no cropping, letterboxed on a
   black background instead of being stretched or cut off. */
.slide-bg.fit-contain {
  background-size: contain;
  background-repeat: no-repeat;
  background-color: #000;
}

/* Full-bleed photo slides (Image Fit + "hide caption" checkbox in admin):
   no dark overlay, no title/description text - just the image itself,
   as bright and visible as possible. */
.slide.full-image .slide-bg {
  filter: none;
}

.slide-content {
  position: relative;
  z-index: 3;
  max-width: 82%;
  text-align: center;
  padding: 40px;
  text-shadow: 0 2px 10px rgba(0,0,0,.65), 0 0 2px rgba(0,0,0,.5);
}

.slide-eyebrow {
  color: var(--gold);
  letter-spacing: 4px;
  text-transform: uppercase;
  font-size: clamp(18px, 1.6vw, 26px);
  margin-bottom: 18px;
  font-family: 'Segoe UI', Arial, sans-serif;
}

.slide-title {
  font-size: clamp(44px, 5.6vw, 92px);
  font-weight: 400;
  margin-bottom: 22px;
  line-height: 1.15;
}

.slide-desc {
  font-size: clamp(20px, 1.9vw, 30px);
  font-weight: 300;
  max-width: 900px;
  margin: 0 auto;
  line-height: 1.5;
  font-family: 'Segoe UI', Arial, sans-serif;
}

.slide-price-row {
  display: flex;
  justify-content: center;
  gap: 40px;
  margin-top: 28px;
  font-family: 'Segoe UI', Arial, sans-serif;
}
.slide-price-box {
  border: 1px solid rgba(200,161,101,.5);
  padding: 14px 28px;
  border-radius: 10px;
  background: rgba(0,0,0,.25);
}
.slide-price-label { font-size: clamp(13px, 1.1vw, 17px); text-transform: uppercase; letter-spacing: 2px; color: var(--gold); }
.slide-price-value { font-size: clamp(28px, 2.9vw, 44px); font-weight: 600; }

.grid-wrap {
  position: relative;
  z-index: 3;
  width: 90%;
  max-width: 1400px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 22px;
  font-family: 'Segoe UI', Arial, sans-serif;
}
.grid-card {
  background: rgba(0,0,0,.4);
  border: 1px solid rgba(200,161,101,.3);
  border-radius: 14px;
  padding: 24px;
  text-align: left;
}
.grid-card h3 { color: var(--gold); font-size: clamp(20px, 1.6vw, 26px); margin-bottom: 10px; font-weight: 500; }
.grid-card p { font-size: clamp(15px, 1.2vw, 19px); opacity: .85; line-height: 1.4; }
.grid-card .price { margin-top: 10px; font-size: clamp(20px, 1.6vw, 26px); font-weight: 700; }

.list-wrap {
  position: relative;
  z-index: 3;
  width: 78%;
  max-width: 1100px;
  text-align: left;
  font-family: 'Segoe UI', Arial, sans-serif;
  max-height: 78vh;
  overflow: hidden;
}
.list-item { border-left: 3px solid var(--gold); padding: 10px 20px; margin-bottom: 14px; }
.list-item h4 { font-size: clamp(19px, 1.7vw, 25px); margin-bottom: 4px; font-weight: 600; }
.list-item p { font-size: clamp(15px, 1.3vw, 19px); opacity: .85; }

.qr-box {
  position: absolute;
  bottom: 90px;
  right: 60px;
  z-index: 4;
  background: #fff;
  padding: 10px;
  border-radius: 10px;
}
.qr-box img { width: 110px; height: 110px; display: block; }

.signage-overlay-top {
  position: absolute;
  top: 0; left: 0; right: 0;
  z-index: 10;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 28px 42px;
  background: linear-gradient(to bottom, rgba(0,0,0,.55), transparent);
  text-shadow: 0 2px 8px rgba(0,0,0,.7);
}

.brand-mark { display: flex; flex-direction: column; }
.brand-name { font-size: clamp(22px, 1.9vw, 32px); letter-spacing: 1px; }
.brand-slogan { font-size: clamp(13px, 1.1vw, 16px); color: var(--gold); text-transform: uppercase; letter-spacing: 2px; font-family: 'Segoe UI', Arial, sans-serif; }

.clock {
  font-family: 'Segoe UI', Arial, sans-serif;
  font-size: clamp(19px, 1.7vw, 27px);
  letter-spacing: 1px;
}

.signage-overlay-bottom {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  z-index: 10;
  padding: 0 42px 26px;
  background: linear-gradient(to top, rgba(0,0,0,.55), transparent);
  padding-top: 40px;
}

.progress-bar {
  width: 100%;
  height: 5px;
  background: rgba(255,255,255,.2);
  border-radius: 3px;
  overflow: hidden;
  margin-bottom: 10px;
}
.progress-fill {
  height: 100%;
  width: 0%;
  background: var(--gold);
}

.slide-counter {
  font-family: 'Segoe UI', Arial, sans-serif;
  font-size: clamp(13px, 1vw, 16px);
  letter-spacing: 1px;
  color: rgba(255,255,255,.7);
  text-align: right;
}

.system-status {
  position: absolute;
  top: 14px; left: 14px;
  z-index: 20;
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: 'Segoe UI', Arial, sans-serif;
  font-size: 11px;
  background: rgba(0,0,0,.5);
  padding: 4px 10px;
  border-radius: 20px;
}
.status-dot { width: 8px; height: 8px; border-radius: 50%; background: #2fae63; }
.status-dot.offline { background: #d9534f; }

.loading-screen {
  position: absolute;
  inset: 0;
  z-index: 100;
  background: var(--dark);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 20px;
}
.loading-spinner {
  width: 50px; height: 50px;
  border: 3px solid rgba(200,161,101,.25);
  border-top-color: var(--gold);
  border-radius: 50%;
  animation: spin 1s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
.loading-text { font-size: 22px; letter-spacing: 2px; color: var(--gold); font-family: 'Segoe UI', Arial, sans-serif; }
.loading-screen.hidden { display: none; }

/* Transitions */
.slide.trans-slide { transition: transform 1s ease, opacity 1s ease; transform: translateX(100%); }
.slide.trans-slide.active { transform: translateX(0); opacity: 1; }
.slide.trans-none { transition: none; }

@media (max-width: 900px) {
  .signage-overlay-top { padding: 16px 20px; }
  .signage-overlay-bottom { padding: 0 20px 16px; }
  .qr-box { right: 20px; bottom: 70px; }
  .qr-box img { width: 80px; height: 80px; }
}

/* ------------------------------------------------------------------
   Portrait TV/tablet panels (e.g. 1080x1920, 720x1280, 1200x1920).
   These are large-format signage screens read from several feet away,
   so text is sized off the viewport HEIGHT (the long dimension in
   portrait, ~1920px) rather than the narrower width - vw-based sizing
   made everything render tiny on a physically large panel.
   ------------------------------------------------------------------ */
@media (orientation: portrait) {
  .slide-content { max-width: 94%; padding: 30px; }

  .slide-eyebrow { font-size: clamp(20px, 2.6vh, 32px); margin-bottom: 22px; }
  .slide-title { font-size: clamp(56px, 6.2vh, 104px); margin-bottom: 28px; }
  .slide-desc { font-size: clamp(24px, 2.8vh, 36px); max-width: 100%; }

  .slide-price-row { flex-direction: column; align-items: center; gap: 16px; }
  .slide-price-box { padding: 18px 34px; }
  .slide-price-label { font-size: clamp(15px, 1.8vh, 20px); }
  .slide-price-value { font-size: clamp(34px, 4vh, 54px); }

  /* Grid slides (all rooms / all facilities / all events): one big
     readable column instead of a multi-column layout that shrinks
     each card's text down to unreadable-from-a-distance sizes. */
  .grid-wrap {
    width: 92%;
    grid-template-columns: 1fr;
    gap: 20px;
    max-height: 80vh;
    overflow: hidden;
  }
  .grid-card { padding: 26px 30px; }
  .grid-card h3 { font-size: clamp(26px, 3.2vh, 38px); margin-bottom: 12px; }
  .grid-card p { font-size: clamp(18px, 2.2vh, 26px); line-height: 1.45; }
  .grid-card .price { font-size: clamp(22px, 2.8vh, 32px); }

  .list-wrap { width: 92%; max-height: 76vh; }
  .list-item { padding: 12px 18px; margin-bottom: 14px; }
  .list-item h4 { font-size: clamp(22px, 2.8vh, 32px); margin-bottom: 6px; }
  .list-item p { font-size: clamp(17px, 2.2vh, 24px); }

  .brand-mark { max-width: 65%; }
  .brand-name { font-size: clamp(24px, 2.8vh, 36px); }
  .brand-slogan { font-size: clamp(13px, 1.6vh, 18px); }
  .clock { font-size: clamp(20px, 2.4vh, 30px); text-align: right; }

  .qr-box { bottom: 110px; right: 30px; }
  .qr-box img { width: 120px; height: 120px; }

  .slide-counter { font-size: clamp(15px, 1.6vh, 19px); }
}

/* Smaller physical portrait panels (e.g. a compact 720x1280 tablet
   rather than a large lobby TV) - dial the ceiling back down a touch
   so nothing overflows the frame, while staying well above the
   original vw-based sizes. */
@media (orientation: portrait) and (max-width: 480px) {
  .slide-title { font-size: clamp(38px, 6.2vh, 64px); }
  .slide-desc { font-size: clamp(18px, 2.8vh, 24px); }
  .grid-card h3 { font-size: clamp(20px, 3.2vh, 26px); }
  .grid-card p { font-size: clamp(15px, 2.2vh, 18px); }
  .signage-overlay-top { padding: 14px 18px; }
  .signage-overlay-bottom { padding: 0 18px 14px; padding-top: 30px; }
}