/* Room Cards plugin stylesheet (v1.0.2)
   Assembled from the home page's card widgets, the page custom CSS and the mobile slider
   widget, so the cards look the same as the hand-written ones. */

/* which layout shows: the grid on desktop (1025px and up), the slider on tablets and phones */
.rc-wrap .rc-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; } /* 20px = the Elementor column/widget spacing the hand-written cards had */
.rc-wrap .rc-slider { display: none; }
@media (max-width: 1024px) {
  .rc-wrap .rc-grid { display: none; }
  .rc-wrap .rc-slider { display: block; }
}
.rc-wrap .rc-card { position: relative; }

/* ===== desktop card (from the card widgets) ===== */

    .rc-card .game-preview {
      font-family: 'Open Sans', sans-serif;
    }

    .rc-card .game-preview .video-link {
      display: block;
      text-decoration: none;
      width: 100%;
      max-width: 400px;
      margin: auto;
      position: relative;
    }

    .rc-card .game-preview .video-wrapper {
      position: relative;
      width: 100%;
      aspect-ratio: 9 / 16;
      overflow: hidden;
      border-radius: 0px;
      max-height: 353px;
    }

    .rc-card .game-preview .video-wrapper img.bg,
    .rc-card .game-preview .video-wrapper video {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
      transition: opacity 0.3s ease, transform 0.5s ease;
    }

    .rc-card .game-preview .video-wrapper img.bg {
      z-index: 1;
    }

    .rc-card .game-preview .video-wrapper video {
      opacity: 0;
      pointer-events: none;
      z-index: 2;
    }

    .rc-card .game-preview .video-wrapper:hover img.bg {
      opacity: 0;
      transform: scale(1.05);
    }

    .rc-card .game-preview .video-wrapper:hover video {
      opacity: 1;
      pointer-events: auto;
    }

    .rc-card .game-preview .video-overlay {
      position: absolute;
      bottom: 20px;
      left: 50%;
      transform: translateX(-50%);
      width: 90%;
      text-align: center;
      z-index: 4;
      pointer-events: none;
    }

    .rc-card .game-preview .video-overlay h3 {
      font-size: 16px;
      font-weight: 400;
      margin: 0;
      line-height: 1.3;
      color: #fdfcee;
      filter: drop-shadow(0 0 3px rgba(0, 0, 0, 0.8));
    }

    .rc-card .game-preview .logo-static {
      position: absolute;
      top: var(--rc-logo-top, 75%);
      left: 50%;
      transform: translate(-50%, -50%);
      width: var(--rc-logo-w, 280px);
      height: auto;
      object-fit: contain;
      z-index: 5;
      pointer-events: none;
      filter: drop-shadow(0 0 3px rgba(0, 0, 0, 0.8));
    }

    @media (max-width: 768px) {
      .rc-card .game-preview .video-link {
        max-width: 320px;
      }

      .rc-card .game-preview .video-wrapper {
        max-height: 320px;
      }

      .rc-card .game-preview .logo-static {
        width: 100px;
      }

      .rc-card .game-preview .video-overlay h3 {
        font-size: 13px;
      }
    }
  

/* ===== shared rules (from the home page custom CSS) ===== */
/* ---------------------------
   DESKTOP / GLOBAL (default)
----------------------------*/
.game-info-box {
  background:#0e1016;
  border-radius:12px;
  padding:18px 20px;
  color:#fdfcee;
  font-family:'Open Sans', serif;
  font-size:15px;
  margin-top:15px;
  box-shadow:0 2px 10px rgba(0,0,0,0.25);
}

/* Each row of info */
.game-info-box .info-row {
  display:flex; align-items:center; gap:10px;
  border-bottom:1px solid rgba(255,255,255,0.12);
  padding:7px 0; text-align:left; color:#fdfcee;
}
.game-info-box .info-row:last-of-type { border-bottom:none; }

/* Icons / stars */
.game-info-box .info-row i { color:#50b1c5; width:18px; min-width:18px; text-align:center; }
.game-info-box .info-row span { color:#fdfcee; margin-left:auto; }
.game-info-box .stars i { color:#feaf39; margin-left:-2px; font-size:15px; }

/* “Learn more” text font */
.video-overlay h3 {
  font-family:'Open Sans',sans-serif!important;
  font-weight:400; letter-spacing:0; text-transform:none;
}

/* Join image + info box visually on desktop */
.game-info-box { margin-top:0!important; border-top-left-radius:0; border-top-right-radius:0; }
.video-wrapper, .video-link img, .video-link video {
  border-bottom-left-radius:0!important;
  border-bottom-right-radius:0!important;
}

/* Hide mobile/tablet box by default */
.m-info-box { display:none; }

/* ==============================
   UNIVERSAL CARD / MEDIA FIXES
============================== */

/* Card rounds on all corners and matches desktop color */
.slider-item {
  position:relative;
  border-radius:12px!important;
  overflow:hidden!important;
  background:#0e1016!important;          /* match desktop */
  box-shadow:0 2px 10px rgba(0,0,0,0.25);
}

/* Clickable media wrapper (top rounded only) */
.slider-item > a {
  display:block!important; position:relative!important;
  width:100%; aspect-ratio:1/1!important;
  border-radius:12px 12px 0 0!important;
  overflow:hidden!important;
  line-height:0;
  -webkit-transform:translateZ(0);
  transform:translateZ(0);
}

/* Media fits perfectly with rounded top */
.slider-item img.bg,
.slider-item video {
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover; display:block;
  border-radius:12px 12px 0 0!important;
}

/* Availability banner sits flush at top */
.availability-banner {
  position:absolute;
  top:0; left:0; right:0;
  width:100%;
  padding:10px 0;
  text-align:center;
  font-weight:700;
  font-size:17px;
  text-transform:uppercase;
  letter-spacing:.3px;
  color:#fdfcee;
  background:#d12738; /* Timescape red */
  border-radius:12px 12px 0 0!important;
  z-index:5;
  box-shadow:0 3px 12px rgba(0,0,0,0.25);
  pointer-events:none; /* ✅ allow hover to reach the video underneath */
}


/* Banner states */
.availability-banner.ts-none { background:#3a3a3a; color:#bbb; }
.availability-banner.ts-low  { background:#d12738; color:#fdfcee; }
.availability-banner.ts-some { background:#50b1c5; color:#1c202b; }

/* Full-card link overlay (optional) */
.escape-card { position:relative; }
.escape-card a.full-link {
  position:absolute; inset:0; z-index:10;
  text-indent:-9999px; overflow:hidden;
}

/* Mobile/Tablet info box (shared styling) */
.m-info-box {
  display:block!important;
  background:#0e1016!important;          /* exact match */
  color:#fdfcee;
  border-radius:0 0 12px 12px;
  margin-top:0; padding:18px 20px;
  box-shadow:none;
  font-size:15px;
  border-top:0!important;                /* remove thin divider */
}
.m-info-box .row {
  display:flex; align-items:center; gap:10px;
  padding:7px 0; border-top:1px solid rgba(255,255,255,0.12);
  color:#fdfcee;
}
.m-info-box .row:first-child { border-top:0; }
.m-info-box .row i { color:#50b1c5; width:18px; min-width:18px; text-align:center; }
.m-info-box .row span { margin-left:auto; color:#fdfcee; }
.m-info-box .stars i { color:#feaf39; margin-left:-3px; font-size:15px; }

/* “Learn more…” text */
.slider-item h3 {
  font-size:clamp(14px,3.5vw,16px)!important;
  bottom:5px!important;
  line-height:1.3;
  position:absolute; left:50%; transform:translateX(-50%);
  z-index:3;
}

/* Per-slide logo size and position come from each card's own settings */
.slider-item .static-logo { position: absolute; left: 50%; transform: translate(-50%, -50%); z-index: 2; pointer-events: none;
  filter: drop-shadow(0 0 2px rgba(0,0,0,1)); height: auto; max-width: 92%;
  top: var(--rc-logo-top-m, 72%) !important; width: var(--rc-logo-w-m, 180px) !important; }

/* --------------------------------
   MOBILE (<= 767px)
---------------------------------*/
@media (max-width:767px) {
  .slider-item { display:block!important; height:auto!important; }
}

/* --------------------------------
   TABLET (768–1024px)
---------------------------------*/
@media (min-width:768px) and (max-width:1024px) {
  .slider-item { display:block!important; height:auto!important; }

  /* Tablet logo sizing */
  .video-slider .slider-item > a > img.static-logo {
    width:clamp(320px,38vw,520px)!important;
    max-width:none!important;
    top:80%!important; left:50%!important;
    transform:translate(-50%,-50%)!important;
    position:absolute!important;
    z-index:4!important;
    filter:drop-shadow(0 0 4px rgba(0,0,0,0.9))!important;
  }

  /* Tablet “Learn more…” */
  .video-slider .slider-item h3 {
    font-size:clamp(20px,2.6vw,28px)!important;
    bottom:22px!important;
    z-index:5!important;
  }
}



/* ===== phone and tablet slider (from the slider widget) ===== */

  /* === Mobile Video Slider (Full Card Click + Clean Rounded Corners) === */

  .video-slider-wrapper {
    max-width: 100%;
    overflow: hidden;
    position: relative;
  }

  .video-slider {
    display: flex;
    gap: 16px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 2px;
  }
  .video-slider::-webkit-scrollbar { display: none; }

  .slider-item {
    flex: 0 0 85%;
    max-width: 85%;
    scroll-snap-align: center;
    position: relative;
    border-radius: 12px;
    overflow: hidden;       /* clip banner + media to rounded card */
    background: #000;
    cursor: pointer;        /* whole card is tappable */
  }

  /* ---- Availability Banner ---- */
  .availability-banner {
    position: relative;
    display: block;
    width: 100%;
    padding: 10px 0;
    text-align: center;
    font-weight: 700;
    font-size: 15px;
    text-transform: uppercase;
    color: #fdfcee;
    background: #d12738;          /* Timescape red */
    border-radius: 12px 12px 0 0;  /* match card corners */
    z-index: 2;
  }
  .availability-banner.ts-none { background:#3a3a3a; }
  .availability-banner.ts-some { background:#50b1c5; color:#1c202b; }

  /* ---- Media (image + video) ---- */
  .slider-item > a {
    display:block;
    position:relative;
    width:100%;
    aspect-ratio:1/1;
  }
  .slider-item img.bg,
  .slider-item video {
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
    border-radius:0 !important; /* prevent double rounding */
    transition:opacity .5s ease;
  }
  .slider-item img.bg { z-index:0; opacity:1; }
  .slider-item video   { z-index:1; opacity:0; }
  .slider-item.active video { opacity:1; pointer-events:auto; }

  
  .slider-item h3{
    position:absolute; left:50%; bottom:10px;
    transform:translateX(-50%);
    margin:0; padding:4px 8px;
    font-size:16px; color:#fdfcee; text-align:center;
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
    z-index:3; pointer-events:none;
    filter:drop-shadow(0 0 2px rgba(0,0,0,1));
  }

  /* ---- Info Box ---- */
  .m-info-box {
    background:#111;
    padding:10px 12px;
    color:#fdfcee;
    font-size:14px;
  }
  .m-info-box .row {
    display:flex;
    justify-content:space-between;
    align-items:center;
    border-bottom:1px solid rgba(255,255,255,0.1);
    padding:6px 0;
  }
  .m-info-box .row:last-child { border-bottom:none; }
  .m-info-box i { margin-right:6px; color:#50b1c5; }
  .m-info-box span.stars i { color:#feaf39; }

  /* ---- Pagination Dots ---- */
  .pagination {
    display:flex; justify-content:center; gap:10px; margin-top:12px;
  }
  .dot { width:10px; height:10px; border-radius:50%; background:#555; cursor:pointer; }
  .dot.active { background:#fdfcee; }


/* coming-soon banner */
.availability-banner.ts-coming { background: #3a3a3a; color: #fdfcee; }